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
  • 무수히 많은 항공사의 메뉴는 어떻게 탐색할까?
  • 탭키와 엔터키를 같이 사용해보자.

Was this helpful?

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

메인 네비게이션 구현 사례

Previous페이지 네비게이터 적용 사례Next메뉴 적용 사례

Last updated 2 years ago

Was this helpful?

무수히 많은 항공사의 메뉴는 어떻게 탐색할까?

아시아나 항공, 제주 항공, 티웨이 항공사 사이트의 메뉴 화면이다. 아래 3개의 항공사는 메인 메뉴 탐색을 탭키로 이동했을 때 자동으로 서브메뉴가 열리도록 구현하였다. 그런데, 탭키로 서브메뉴를 자동으로 열리게 한 것이 좋은 방법일까?

아래 화면처럼 아시아나 항공 사이트에서 적립하지 못한 마일리지를 적립하기 위해 메뉴를 찾아보자. 메인 메뉴의 "아시아나클럽 > 마일리지 적립 > 누락마일리지적립" 메뉴를 이동하기 위해 탭키를 약 90번 이상 눌러야 한다.

물론 아시아나 항공사도 국내 접근성 가이드라인에 맞게 구현했지만 이렇게 탭키로 모든 메뉴를 탐색하게 하는 것이 국내에서는 일반적으로 구현하는 방법이지만, 이 방법은 스크린리더 사용자와 키보드 사용자를 정말 힘들게 하는 방법이다.

탭키와 엔터키를 같이 사용해보자.

대한항공의 메뉴 화면은 아래와 같다. 4개의 메인 메뉴와 각각의 많은 서브 메뉴를 갖고 있다. 각 서브 메뉴로 이동하기 위해서 탭키를 누르면 4개의 메인 메뉴 간에 이동이 되고, 서브메뉴는 메인 메뉴에서 엔터키를 누르면 서브 메뉴가 펼쳐지고 다시 탭키를 누르면 서브 메뉴 간에 이동하도록 구현하였다.

이렇게 구현하면 원하는 메뉴로 탐색이 더 빠르고 쉬워진다.

위와 같이 구현하기 위해서는 WAI-ARIA 속성을 사용하여 역할과 상태를 알려주어야 하며, 소스를 보면 다음과 같다.

<nav aria-label="전체메뉴">
    <ul class="depth-1">
        <li>
            <button aria-expanded="false" aria-controls="menu1">
            예매
            </button>
            <div id="menu1" aria-hidden="true" style="display:none">
                <h2><a href="#">구매 안내</a></h2>
                <ul class="depth-2">
                    <li><a href="#">국내</a></li>
                    ...
                </ul>
            </div>
        </li>
        ...
        <li>
            <button aria-expanded="true" aria-controls="menu2">
            스카이패스
            </button>
            <div id="menu2" style="display:block">
                <h2><a href="#">회원 혜택</a></h2>
                <ul class="depth-2">
                    <li><a href="#">우수회원 혜택</a></li>
                    <li><a href="#">NEW 우수회원 혜택</a></li>
                    ...
                </ul>
            </div>
        </li>
        ...
    </ul>
</nav>

전체 메뉴는 ul, li 태그로 구조화하였고, 감싸고 있는 컨테이너에 aria-label 속성을 사용하여 제목을 읽도록 설정하였다.

그리고 각 메인 메뉴 aria-expanded 속성을 사용하여 현재가 펼쳐진 상태인지, 접힌 상태인지 상태를 알려주고 aria-controls 속성을 사용하여 서브 메뉴와 메인 메뉴를 연결한다. 접힌 서브 메뉴는 display:none속성과 함께 aria-hidden="true" 속성을 사용하여 스크린리더에서 읽히지 않도록 하고 화면에서 숨긴다.

위와 같이 구현하고 "스카이패스 > 회원 혜택" 메뉴로 들어가면서 스크린리더로 들어보자.

전체메뉴 navigation 목록 예매 버튼 축소됨 공항 버튼 축소됨 기내 버튼 축소됨 스카이패스 버튼 축소됨 //엔터키클릭 확장됨 회원 혜택 헤딩 레벨 2 우수회원 혜택 링크

이처럼 WAI-ARIA 속성 몇 개를 활용하면 스크린리더 사용자들은 물론 키보드 사용자들도 몇 번의 키보드 선택으로 빠르게 원하는 메뉴로 이동이 가능하게 된다.

물론 WAI-ARIA 쓴다고 키보드 인터랙션이 자동으로 구현되지 않으므로 스크립트를 통한 개발은 필요하다.

AOA 동영강 강의

https://www.koreanair.com/kr/ko
https://flyasiana.com/C/KR/KO/index
주요 메뉴로 스킵하여 90번 이상 탭키를 누르면 누락마일리지적립으로 이동한다
탭키로 모든 메뉴를 탐색해야 하는 제주 항공
탭키로 모든 메뉴를 탐색해야 하는 티웨이 항공