Breadcrumbs 구현하기

개발자H·2021년 11월 8일
1
<style>
	.breadcrumb-item+.breadcrumb-item::before { content: ">"; }
</style>

<body>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumbs">
      <li class="breadcrumb-item"><a href="#">first</a></li>
      <li class="breadcrumb-item"><a href="#">second</a></li>
      <li class="breadcrumb-item active" aria-current="page">third</li>
    </ol>
  </nav>
</body>
  • <nav> 태그 및 aria-label 속성 사용
  • 상위 페이지는 <a/> 태그 삽입
  • 순서가 있는 목록 → <ol/> 태그 사용
  • 현재 선택된 페이지는 aria-current="page" 속성 사용
  • 구분자는 CSS 의 ::before 속성과 인접선택자 X + Y 으로 해결

목록을 나타내는 태그 종류

  1. <ol>: ordered list: 순서가 있는 목록
    • 해당 목록의 항목은 숫자로 표시된다. (순서가 있기 때문에)
  2. <ul>: unordered list: 순서가 없는 목록
    • 해당 목록의 항목은 불릿 으로 표시된다. (순서가 없기 때문에)
  3. <dl>: definition list: 사전처럼 용어를 설명하는 목록을 만들때

웹 접근성

  • 화면에는 목록의 숫자가 나타나지 않지만 스크린 리더는 음성 출력을 해준다.
  • 이것을 응용하면 기사나 상품의 목록을 시각적으로는 현재 모양과 똑같이 하면서도
    스크린 리더 사용자에게는 목록의 번호를 음성 출력함으로서 훨씬 더 깊은 배려를 할 수 있다.

0개의 댓글