jQuery Navi Menu 플러그인 제작 고려사항

jQuery Navigation Menu 플러그인 제작 고려사항

내비게이션 위젯에 접근성 향상을 위한 WAI-ARIA 적용

WAI-ARIA는 RIA 웹 애플리케이션의 취약한 접근성을 개선하기 위한 목적으로 개발된 표준 접근성 API로, Javascript를 사용하여 HTML 문서에 역할, 속성, 상태 등을 정의할 수 있습니다. 이를 통해 웹 제작자는 웹 애플리케이션의 접근성을 향상시킬 수 있습니다.

WAI-ARIA 퀵 레퍼런스 보기

웹 사이트 글로벌 내비게이션 제작가이드 보기

역할(Roles) 설정

ㆍ 네비게이션 요소 (<div> or <nav> ) 에 role="navigation" 역할 설정

ㆍ 네비게이션바 요소 ( <ul> ) 에 role="menubar" 역할 설정

ㆍ 레벨 2Depth 메뉴 컨테이너 요소 ( <ul> ) 에 role="menu" 역할 설정

ㆍ 정보통신 보조기기기(ex 스크린리더기) 에서 읽히지 않아야 할 요소소 ( <li> ) 에 role="presentation" 역할 설정

ㆍ 메뉴 아이템 요소 ( <a> ) 에 role="menuitem" 역할 설정

속성(Properties) 설정

ㆍ 서브 메뉴를 펼쳐줄 <a> 요소에 aria-haspopup="true" 속성 설정

ㆍ 레벨 2 <ul> 요소에 aria-lebelledby="<a> 요소의 ID 속성이름" 속성 설정 

상태(Status) 설정

ㆍ 현재 활성화(선택된) 상태의 <a> 요소에 aria-describedby="상태 설명글 ID" 로 상태 변경

ㆍ 내비게이션 메뉴 영역 내부에 <span> 을 생성한 후, id="illy-current-desc" 속성을 설정하고 현재 활성화된 상태를 작성

ㆍ 펼쳐진 상태의 <ul> 요소는 aria-extended="true" 로 상태 변경

ㆍ 펼쳐지지 않은 상태의 <ul> 요소는 aria-extended="false" 로 상태 변경

ㆍ 펼쳐진 상태의 <ul> 요소는 aria-hidden="false" 로 상태 변경

ㆍ 펼쳐지지 않은 상태의 <ul> 요소는 aria-hidden="true" 로 상태 변경

ㆍ 내비게이션바 요소 (<ul>) 에 aria-activedescendant="현재 포커스된 요소의 ID" 로 상태 변경

ㆍ 현재 활성화(선택된) 상태의 <a> 요소는 tabindex="0" 으로 상태 변경

ㆍ 반면 비활성화(선택되지 않은) 상태의 다른 <a> 요소는 tabindex="-1" 로 상태 변경

키보드(Keyboard)설정 - [KWCAG 2.0  운용의 용이성 측면]

키 보 드	역  할
탭 (Tab)	순방향으로 포커스 이동
시프트 탭 (Shift + Tab)	역방향으로 포커스 이동
Left Arrow ( ← )	이전 내비게이션 바 아이템으로 포커스 이동
Right Arrow ( → )	다음 내비게이션 바 아이템으로 포커스 이동
Top Arrow ( ↑ )	이전 내비게이션 바 아이템으로 포커스 이동(옵션)
Bottom Arrow ( ↓ )	다음 내비게이션 바 아이템으로 포커스 이동(옵션)
엔터(Enter), 스페이스(Space)	현재 포커스된 아이템 활성화

시멘틱 HTML 마크업 예제

html

<!-- nav 요소는 내비게이션 링크로 구성된 섹션을 의미합니다 - 내비게이션(Navigation) 역할 설정 -->
<nav>
    <!-- 메인 내비게이션 바 컨테이너 - 메뉴바(Menubar) 역할 설정 -->
    <ul>
        <!-- 레벨 1 - 프레젠테이션(Presentation) 역할 설정 -->
        <li>
            <!-- 하이퍼링크 - 메뉴 아이템(Menu Item) 역할 설정 -->
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
            <!-- 레벨 2 메뉴 컨테이너 - 메뉴(Menu) 역할 설정 -->
            <ul>
                <!-- 레벨 2 - 프레젠테이션(Presentation) 역할 설정 -->
                <li>
                    <!-- 하이퍼링크 - 메뉴 아이템(Menu Item) 역할 설정 -->
                    <a href=""></a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Jaehee's WebClub