Breadcrumb

[hsskey]

📋 컴포넌트 정보

• 컴포넌트 이름: Breadcrumb
• 컴포넌트 설명: 브레드크럼은 사용자가 현재 위치와 사이트의 구조를 쉽게 이해하고 이동할 수 있도록 도와주는 내비게이션 컴포넌트
• 사용 사례: 페이지 계층 구조를 나타내어 사용자가 상위 페이지로 이동할 수 있도록 지원. 일반적으로 페이지 상단에 배치

📚 참조 및 레퍼런스

• ARIA Authoring Practices: W3C ARIA Patters
  • 관련 패턴 및 적용된 접근성 기준 확인
• 기타 레퍼런스: Spectrum, MUI, Ant Design 등의 문서와 비교하여 패턴 분석

📝 접근성 및 ARIA 적용 여부

• ARIA Pattern 적용: ARIA Pattern 링크
  • 사용된 ARIA 속성: role="navigation", aria-label="Breadcrumb", aria-current="page" 등이 사용됨. role="navigation"은 내비게이션 역할을 명시하며, aria-label="Breadcrumb"를 통해 스크린 리더가 컴포넌트의 목적 인식. 마지막 링크에 aria-current="page" 적용해 현재 페이지 나타냄
• 접근성 관련 고려사항: 시각적 구분자는 CSS로 추가되어 스크린 리더에서 불필요한 반복 피하고, 내비게이션 목적 명확히 전달
• 접근성 기능 요약: 시각적 구분자는 aria-hidden="true"로 설정되어 스크린 리더 사용자에게 중복된 정보 차단

🏗️ 마크업 구조 분석

• HTML 시맨틱 태그 사용: <nav>, <ol>, <li>, <a>와 같은 시맨틱 태그 사용. <nav>는 내비게이션 목적 나타내고, <ol>과 <li> 통해 계층적 구조 명확히 표현, 각 항목에 <a> 태그 사용해 링크로 연결
• 마크업 구조 비교:

// W3C, MUI 예시
<nav>
  <ol>
    <li>
      <a></a>
    </li>
  </ol>
</nav>

// Web.dev
<nav>
  <a></a>
</nav>

• 구조적 선택 이유:
  • W3C 및 MUI: <nav><ol><li> 구조 사용하여 시맨틱하게 페이지 계층 구조를 명확히 표현. 이를 통해 스크린 리더 사용자가 현재 위치와 전체 구조를 쉽게 파악할 수 있으며, SEO에도 긍정적인 영향을 미침
  • Web.dev: <nav><a> 구조 사용하여 간결함을 중시. 이 접근 방식은 단순한 페이지 구조일 때 적합하며, 인터랙션이 필요 없는 경우 간결하게 표현 가능. 선택지를 제공하는 <select> 요소를 추가하여 사용자 경험을 강화

💡 UI 라이브러리 비교 분석

• MUI: <nav><ol><li> 구조 사용해 시맨틱 웹 계층적 구조 유지하며, 접근성 향상 위해 aria-current와 같은 속성 추가
• Web.dev: <nav><a> 구조에 추가적인 인터랙션 위해 <select> 요소 포함해 선택지 제공. 사용자가 동일한 레벨의 다른 페이지로 빠르게 이동할 수 있는 기능 추가하여 사용자 경험 강화할 수 있음

⚙️ 구현 및 설계 고려사항

• 주요 설계 고려사항: 브레드크럼 컴포넌트는 사용자가 현재 위치 빠르게 이해하고 사이트 내에서 쉽게 이동 도움. 이를 위해 시맨틱한 HTML 태그와 적절한 ARIA 속성 적용하여 접근성 강화 중요
• 코드 예시:

<nav class="breadcrumbs" role="navigation" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category">Category</a></li>
    <li aria-current="page">Current Page</li>
  </ol>
</nav>

🔍 테스트 및 검토

• 접근성 테스트: 스크린 리더와 호환성 및 키보드 내비게이션 사용성 테스트. 각 링크가 적절히 인식되는지, aria-current 속성이 올바르게 동작하는지 확인
• 브라우저 호환성 테스트: 주요 브라우저(Chrome, Firefox, Safari, Edge)에서 브레드크럼이 올바르게 렌더링되는지 확인
• 사용자 피드백: 사용자 테스트 통해 브레드크럼을 통한 내비게이션이 직관적인지 확인하고, 개선 사항 반영

📌 추가 참고 사항

• 관련 문서: W3C ARIA Authoring Practices, Web.dev Breadcrumb Article
• 의견 및 제안: 브레드크럼 컴포넌트에 대한 의견이나 개선 사항 추가

🎯 역할, 속성, 상태 및 태그 속성

• Role, Attribute, State
  • Role: role="navigation"으로 브레드크럼이 내비게이션 역할 명시
  • Attribute: aria-label="Breadcrumb"를 통해 스크린 리더 사용자에게 이 요소가 브레드크럼임 알림
  • State: 현재 페이지를 나타내는 요소에 aria-current="page" 사용하여 시각적 및 프로그램적으로 현재 위치 명확히 표시
• JavaScript 및 CSS 사용 여부
  • JavaScript 사용 여부: 특정 상황에서 선택지 제공하기 위해 <select> 요소와 JavaScript 사용하여 동적 페이지 전환 지원 가능
  • CSS 적용 사항: 시각적 구분자는 aria-hidden="true"로 설정하여 스크린 리더 사용자에게 불필요한 반복 피하도록 함