디스클로저 내비게이션 메뉴 예제

이 예제는 내비게이션 링크 모음을 가리키기 위해 구어체로 "메뉴"라는 단어를 사용하지만, WAI-ARIA 메뉴 역할(role)은 사용하지 않습니다. 이는 메뉴와 메뉴바 역할은 일반적인 사이트 탐색에 불필요한 복합 위젯 초점 관리 및 첫 문자 탐색과 같은 복합 기능을 요구하기 때문입니다.

다음 예제는 가상의 대학 웹 사이트에 대한 내비게이션 바의 링크 드롭다운 목록을 보여주고 숨기기 위해 디스클로저 설계 패턴 사용을 보여줍니다. 각 디스클로저 버튼은 뒙사이트의 섹션을 나타내고, 확장하여 그 섹션 내의 페이지에 대한 링크 모음을 보여줍니다.

유사한 예는 다음과 같습니다:

예제 사용 선택 사항

이 예제는 키보드 지원을 구현하는 두 가지 다른 방법을 보여줍니다. 다음 체크상자로 이 둘 사이를 전환하세요.

예제

가상 대학

샘플 컨텐츠 섹션. 위 링크를 활성화 하면 갱신되고 이 영역으로 이동합니다.

접근성 특성

  1. 이 디스클로저 버튼 모음이 가상의 대학 웹 사이트에 대한 내비게이션 링크의 가시성을 제어하므로, 이들을 포함하는 목록은 가상 대학교라고 이름 지어진 내비게이션 랜드마크로 감싸집니다.
  2. 목록 구조의 의미론은 보조 기술 사용자에게 내비게이션 시스템의 계층 구조를 전달합니다. 세 버튼의 최상위 모음은 세 개 항목을 가지고, 각 버튼에 의해 제어되는 링크 모음은 제어 버튼을 가진 항목 내부에 중첩된 목록에 있습니다.
  3. 드롭다운이 열려 있고 초점이 내비게이션 영역 내부에 있는 경우, Esc를 누르면 드롭다운을 닫을 것입니다. 내비게이션 영역 밖으로 초점을 이동시키는 것 역시 열려진 드롭다운을 닫습니다. 이 Esc 작동을 구현하는 것은 WCAG 2.1 1.4.13: 호버 또는 초점을 얻은 컨텐츠 기준을 만족시키는데 필요합니다.
  4. 노출/숨김 상태의 시각적 표시기는 CSS ::after 가상 엘리먼트 테두리 스타일을 사용하므로 운영체제와 브라우저의 고대비 모드에서 캐럿이 확실하게 렌더링 됩니다.
  5. 선택적 탐색 키(방향키, Home, End):
    1. 선택적 방향 키 지원을 활성화 하는 것은 초점이 내비게이션 영역 내에 포함될 경우 기본 페이지 스크롤 작동을 차단합니다.
    2. 선택적 탐색 키 지원은 주로 스크린리더를 사용하지 않는 키보드 사용자를 위한 것입니다. 읽기 모드와 상호작용 모드를 모두 가진 스크린리더는 읽기 모드일 경우 이러한 탐색키를 가로채고 페이지에 전달하지 않습니다. 이 예제는 스크린리더 상호작용 모드를 작동시키는 위젯 역할(role)을 사용하지 않기 때문에, 이 예제와 상호작용하는 동안 이러한 스크린리더는 일반적으로 읽기 모드에 있습니다.
    3. 구현 된 경우, 선택적 탐색 키는 버튼과 링크 사이의 태빙(tabbing)을 보완하지만 교체하지는 않습니다. 이는 버튼과 링크가, 페이지 Tab 시퀀스에서 단 한 번의 중단점을 차지하고 모든 하위 항목에 대한 초점 관리가 예상되는 grid와 같은 위젯 역할을 가진 엘리먼트에 포함되지 않기 때문입니다.

키보드 지원

키 기능
Tab
Shift + Tab 		최상위 버튼 사이에서 키보드 초점을 이동시키고, 드롭다운이 열려 있다면, 드롭다운 링크로 들어가 통과합니다.
Space 또는
Enter
  • 초점이 디스클로저 버튼에 있는 경우, 버튼을 활성화 하여, 드롭다운의 가시성을 전환합니다.
  • 초점이 링크에 있는 경우:
    • 어떤 링크 든 설정 된 aria-current가 있다면, 이를 제거합니다.
    • 초점을 얻은 링크에 aria-current="page"를 설정합니다.
    • 초점을 얻은 링크를 활성화 시킵니다.
Escape 드롭다운이 열려 있다면, 이를 닫고 드롭다운을 제어하는 버튼에 초점을 설정합니다.
아래 방향키 또는
오른쪽 방향키
(선택 사항)
  • 초점이 버튼에 있고 드롭다운이 접혀 있으며, 마지막 버튼이 아니라면, 다음 버튼으로 초점을 이동시킵니다.
  • 초점이 버튼에 있고 드롭다운이 확장되어 있다면, 드롭다운의 첫 번째 링크로 초점을 이동시킵니다.
  • 초점이 링크에 있고, 마지막 링크가 아니라면, 다음 링크로 초점을 이동시킵니다.
위 방향키 또는
왼쪽 방향키
(선택 사항)
  • 초점이 버튼에 있고 첫 번째 버튼이 아니라면, 이전 버튼으로 초점을 이동시킵니다.
  • 초점이 링크에 있고, 마지막 링크가 아니라면, 이전 링크로 초점을 이동시킵니다.
Home (선택 사항)
  • 초점이 버튼에 있고 첫 번째 버튼이 아니라면, 첫 번째 버튼으로 초점을 이동시킵니다.
  • 초점이 링크에 있고 첫 번째 링크가 아니라면, 첫 번째 링크로 초점을 이동시킵니다.
End (선택 사항)
  • 초점이 버튼에 있고 마지막 버튼이 아니라면, 초점을 마지막 버튼으로 이동시킵니다.
  • 초점이 링크에 있고 마지막 링크가 아니라면, 초점을 마지막 링크로 이동시킵니다.

Role, Property, State, Tabindex 어트리뷰트

역할(role) 어트리뷰트 엘리먼트 사용법
aria-controls="IDREF" button 디스클로저 버튼이 IDREF 값에 의해 식별되는 컨테이너의 가시성을 제어함을 나타냅니다.
aria-expanded="false" button
  • 디스클로저 버튼에 의해 제어되는 컨테이너가 숨김 상태임을 나타냅니다.
  • CSS 어트리뷰트 선택자(예를 들어, [aria-expanded="false"])는 시각적 상태를 aria-expanded 어트리뷰트 값과 동기화하는데 사용됩니다.
aria-expanded="true" button
  • 디스클로저 버튼에 의해 제어되는 컨테이너가 보이는 상태임을 나타냅니다.
  • CSS 어트리뷰트 선택자(예를 들어, [aria-expanded="true"])는 시각적 상태를 aria-expanded 어트리뷰트 값과 동기화하는데 사용됩니다.
aria-current="page" a 링크에 의해 참조되는 페이지가 현재 노출되어 있음을 나타냅니다.

Javascript와 CSS 소스 코드

HTML Source Code