탐색의 현재 페이지에 대한 ARIA 상태

Question

최근 웹 응용 프로그램에 ARIA를 구현했는데 내비게이션 부품을 개선하는 데 아주 도움이 될 것으로 this question이 발견되었습니다.

모든 모듈이 구현 후, 나는이 HTML 유효성 검사 오류 발견 :

Attribute aria-selected not allowed on element a at this point.

는 ARIA 명세를보고, 나는 aria-selected 만 옵션, 행과 탭, gridcell 역할에 사용되는 것을 알 수있다. 제 경우 링크의 역할은 menuitem입니다. 당신이 볼 수 있듯이

<nav role=navigation> 
    <ul role=menubar> 
     <li role=presentation><a href='page1.php' role=menuitem>Page 1</a></li> 
     <li role=presentation><a href='page2.php' role=menuitem>Page 2</a></li> 
     <li role=presentation><a href='page3.php' role=menuitem aria-selected=true>Page 3</a></li> 
     <li role=presentation><a href='page4.php' role=menuitem>Page 4</a></li> 
    </ul> 
</nav> 

,이 "3 페이지"에서 가져온 것입니다

이 HTML 코드의 대표적인 예입니다.

여기에서 사용할 올바른 ARIA 역할은 무엇입니까?

Answer 1

나는 aria-selected가 탭 선택과 같은 '탭 위젯'인 것을 믿습니다. 선택한 부분은, 이 아니며 페이지에 있으며 약 입니다.

나는 잘 테스트 예로서이 체크 아웃 것이다 : 나는 아마 더 전통적인 방법을 사용 http://whatsock.com/tsg/

현재 페이지를 보여주는를 들면 다음과 같습니다 :에서 http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Horizontal%20(Internal%20Content)/demo.htm

링크를 그것을하지합니다. 예 :

<li><a href='page2.php'>Page 2</a></li> 
<li><strong>Page 3</strong></li> 

이렇게하면 사람들이 실수로 같은 페이지 링크를 클릭하는 것을 방지 할 수 있습니다 (사용성 테스트에서 자주 볼 수 있음). 동일한 CSS를 nav ul a 및 nav ul strong에 적용한 다음 strong에 대한 스타일을 재정의 할 수 있습니다.

Answer 2

네비게이션 항목 중 현재 표시된 페이지를 설명 할 때 aria-current="page"을 사용할 수도 있습니다.