브레드크럼 예제

예제

링크 세트는 정렬 된 목록을 사용하고 구조화 됩니다.
브레드크럼으로 레이블 된 nav 엘리먼트는 위치를 쉽게 찾을 수 있도록 브레드크럼 경로로의 구조를 식별시키고 내비게이션 랜드마크로 만듭니다.
링크 사이의 시각적 구분 기호의 스크린리더 낭독을 방지하기 위해 이것들은 CSS를 통해 추가됩니다:
- 구분 기호는 브레드크럼이라는 레이블을 가진 nav 엘리먼트에 의해 이미 의미론적으로 표현 된 브레드크럼 경로를 나타내는 시각적 표시의 일부입니다. 따라서, 스크린리더에서 사용 되는 접근성 트리에서 아무 것도 표현되지 않는 표시 기법을 사용하는 것은 중복되고 잠재적으로 산만하게 장황한 수 있는 것을 방지합니다.
- 각 링크는 CSS의 transform 프로퍼티로 기울어 진 한 쪽 테두리를 가지므로 슬래시와 유사합니다.

키보드 인터랙션이 필요하지 않습니다.

역할(role)	어트리뷰트	엘리먼트	사용법
	`aria-label=Breadcrumb`	`nav`	`nav` 엘리먼트에 제공된 내비게이션 유형을 설명하는 레이블을 제공합니다.
	`aria-current=page`	`a`	세트의 마지막 링크에 현재 페이지를 나타내는 것을 보여주도록 적용됩니다.