WCAG 2.1 항공사 WAI-ARIA 적용 사례
  • 모두를 위한 디자인
  • 항공사의 웹 접근성 준수 의무
  • 국내 접근성과 국제 접근성은 어떻게 다를까?
  • 항공사 접근성 위배로 인한 벌금 부과 사례
  • AOA 2023~
    • 주요 UI별 ARIA 적용 사례 (2022~2024)
      • 호버 콘텐츠 적용사례
      • 입력 글자 수 제한 사례
      • 🕹️Form 그룹의 오류 적용 사례
      • 비밀번호 실시간 오류 적용 사례
      • 🖼️SVG 이미지의 접근성 향상 방법
      • 오류메시지 종류별 적용 사례
      • 스낵바(Snack bar) 적용 사례
  • AOA 2019
    • 주요 UI별 ARIA 적용 사례 (2019)
      • 스핀 버튼 적용 사례
      • 페이지 네비게이터 적용 사례
      • 메인 네비게이션 구현 사례
      • 메뉴 적용 사례
      • 캐러셀 적용 사례
      • 채팅 상담 적용 사례
      • 툴팁 적용 사례
      • 그룹명 필수 항목 적용 사례
      • 이해하기 쉬운 데이터 테이블 적용 사례
      • 날짜 입력 적용 사례
    • 알아두면 좋은 TIP!
      • dl, dt, dd 태그를 남용하지 마세요.
      • 제발 나를 무시해 주세요.
      • 띄어쓰기를 주의하세요!
  • AOA 2018
    • 주요 UI별 ARIA 적용 사례 (2018)
      • 로딩 적용 사례
      • Date Picker 적용사례
      • 좌석선택 적용사례
      • 탭 UI 적용 사례
      • 모달 다이얼로그 적용 사례
      • 확장과 축소 콘텐츠 적용 사례
      • 정렬할 수 있는 table 적용 사례
      • 자동완성 적용 사례
      • 접근성 주요 개선 항목
        • 버튼을 왜 링크로 쓰는거지?
        • 그룹에게는 그룹명을 알려주자
        • 에러메세지는 왜 보이기만 하지?
        • 이해하기 어려운 폼 레이블
        • 화면을 보는 스크린리더 사용자
        • 전환되지 않는 페이지의 포커스
        • 동일한 기능의 서로 다른 UI
    • 알아두면 좋은 것들
      • role=application은 언제 사용할까?
      • 대문자로만 표현해야 할 때
      • 화면의 정렬을 위해 중복 태그를 사용하지 말 것
    • Screen Reader 테스트
      • Screen Reader와 Browser 조합
      • Screen Reader 버그
  • WAI-ARIA
    • Landmark Role
    • Widget Role & Attributes
  • Contact
    • 무엇이 궁금하세요?
Powered by GitBook
On this page
  • role=menu, menubar로 구현한 마이페이지 메뉴
  • 키보드 인터랙션은 방향키를 사용

Was this helpful?

Edit on Git
  1. AOA 2019
  2. 주요 UI별 ARIA 적용 사례 (2019)

메뉴 적용 사례

Previous메인 네비게이션 구현 사례Next캐러셀 적용 사례

Last updated 2 years ago

Was this helpful?

role=menu, menubar로 구현한 마이페이지 메뉴

메뉴를 구현하는 방법은 여러 가지가 있는데, 아래 화면의 마이페이지의 메뉴는 role="menu"와 role="menubar"로 구현하였다.

상위 메뉴는 role="menubar", 하위 메뉴는 role="menu"

전체 메뉴 컨테이너에 role="navigation"과 aria-label를 사용하여 메뉴 네비게이션임을 안내한다. 상위 메뉴에 role="menubar"와 role="menuitem"을 삽입하고 그 하위 메뉴에는 role="menu"와 role="menuitem"을 사용한다.

상위 메뉴가 하위 메뉴를 가지고 있는 경우 aria-haspopup="true"속성을 삽입하여 하위 메뉴가 있음을 스크린리더에서 읽게 하고, 하위 메뉴가 펼쳐졌을 때는 aria-expanded="true"를 삽입하고 aria-controls 속성으로 하위 메뉴의 id 연결한다. 또한 하위 메뉴가 없는 상위 메뉴는 aria-haspopup 속성 자체가 삭제 되고, 펼쳐질 하위 메뉴가 없으므로 aria-expanded 와 aria-controls 속성 또한 삭제한다.

"마일리지 사용 > 항공 보너스" 메뉴가 활성화 되었을 때 소스를 보면 다음과 같다.

<nav role="navigation" aria-label="마이페이지">
    <ul class="depth-1" role="menubar">
        <li role="menuitem" tabindex="-1">
            마이페이지
        </li>
        <li role="menuitem" aria-haspopup="true" aria-expanded="false" 
        aria-controls="menu1" tabindex="-1">
            나의 마일리지
            <ul role="menu" id="menu1" style="display:none">
                <li role="menuitem" tabindex="-1">
                    마일리지 현황
                </li>
                <li role="menuitem" tabindex="-1">
                    마일리지 상세 조회
                </li>
                <li role="menuitem" tabindex="-1">
                    마일리지 사후적립 신청
                </li>
            </ul>
        </li>
        <li role="menuitem" aria-haspopup="true" aria-expanded="true" 
        aria-controls="menu2" tabindex="0">
            마일리지 사용
            <ul role="menu" id="menu2">
                <li role="menuitem" tabindex="0">
                    항공 보너스
                </li>
                <li role="menuitem" tabindex="-1">
                    로고 상품
                </li>
                ...
            </ul>
        </li>
    </ul>
</nav>

키보드 인터랙션은 방향키를 사용

현재 활성화 된 메뉴는 탭키로 이동이 가능해야 하므로 해당 메뉴는 tabindex="0"을 삽입한다. 그 외의 메뉴는 tabindex="-1"을 삽입하여 방향키로 포커스가 이동할 수 있도록 한다.

상위 메뉴 간의 이동은 좌우 방향키로 이동하고 원하는 상위 메뉴에서 엔터키를 누르면 하위 메뉴가 펼쳐진다. 하위 메뉴 간의 이동은 상하 방향키로 이동할 수 있는데 하위 메뉴에 포커스가 있더라도 좌우 방향키 상위 메뉴 간 탐색이 가능하다.

현재 대한항공은 리뉴얼 되어 아래 이미지와 같이 세로 메뉴바 스타일로 변경되었지만, WAI-ARIA를 이용하여 접근성을 구현하는 방법과 키보드 탐색 방법은 예전과 동일하다.

AOA동영상 강의

1
2
리뉴얼된 마이페이지 메뉴 스타일