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 2018
  2. 주요 UI별 ARIA 적용 사례 (2018)

좌석선택 적용사례

PreviousDate Picker 적용사례Next탭 UI 적용 사례

Last updated 2 years ago

Was this helpful?

비행기의 좌석 선택 기능에는 많은 정보가 제공되고 있으며, 탑승객은 제공되는 정보를 참고하여 원하는 좌석을 선택할 수 있다.

좌석 선택 기능도 모든 브라우저에서 동일하게 호환이 가능한 Native HTML이나 Role 속성이 없으므로 role="application"을 삽입하고 키보드 운용 방법을 스크린리더 사용자와 키보드 사용자 모두에게 알릴 수 있도록 제공한다.

반드시 알려주어야 하는 좌석의 기본 정보는 무엇일까?

아래 화면과 같이 시각적으로 툴팁을 통해 좌석 정보를 보여주고 있으며, 그 정보를 동등하게 스크린리더 사용자에게도 알려주어야 한다.

  1. 줄 수

  2. 창가좌석/복도좌석/중간좌석

  3. 비상구 앞좌석/비상구 뒷좌석

  4. 날개 위 좌석/화장실 근처 좌석/ 갤리 근처 좌석

  5. 선택이 가능한 좌석

  6. 일행이 이미 선택한 좌석

위의 경우의 수 말고도 상당히 많은 정보가 더 있다. 아기바구니를 신청할 수 있는 좌석, 장애인이 앉을 수 있는 좌석, 유아 동반 좌석이지만 산소마스크가 부족한 좌석, 창문이 없는 좌석 등등 항공사에서 제공해야 하는 정보는 무수히 많다. ㅠ.ㅠ

복잡하지만 쉽게 운용할 수 있다.

좌석선택 기능은 복잡해 보이지만, 의외로 쉽게 운용할 수 있다.

전체 좌석선택 영역으로의 이동은 쉽게 tab키로 진입하며 tab키를 다시 누르면 좌석선택 밖의 영역으로 이동한다. 좌석 간의 이동은 키보드 방향키로 탐색하고 Enter키를 눌러 선택한다. ESC키를 누르면 좌석 선택 영역 이전의 포커서블한 요소로 포커스가 이동한다.

표 형태이지만 표가 아니므로 table은 role="presentation"을 삽입하며, 선택된 <td>는 버튼 요소로 마크업하고 제공되어야 하는 정보를 가진 문구의 id와 연결하는 aria-describedby를 삽입한다.

<div role="application" aria-label="seat selector">
    //키보드 운용 방법
    <h2>How to select a date using keyboards</h2>
    <ul>
        <li>In the seat selector, the arrow keys move between seats</li>
        <li>Enter or Space bar selects the seat.</li>
    </ul>
    <table role="presentation">
        ...
        <td class="seating-column">
            <button aria-describedby="seat-info" tabindex="-1" aria-disabled="true">
                <strong>Seat Number 36D</strong>
            </button>
            //화면에 보여지는 좌석 정보
            <div class="tooltip" id="seat-info">
                <span class="occupied">점유된 좌석</span>,
                복도 좌석, 비상구 좌석, 날개 위 좌석, 중간 위치, 오른쪽 위치
             </div>
         </td>
         ...
    </table> 
</div>

36D 좌석에 포커스가 이동하면 스크린리더는 아래와 같이 읽게 된다.

Seat Number 36D 버튼 사용 불가 점유된 좌석, 복도 좌석, 비상구 좌석, 날개 위 좌석, 중간 위치, 오른쪽

특정 항공사의 기종에서는 비상구 열의 앞 좌석은 뒤로 젖혀지지 않기 때문에 비상구 열 앞 좌석이라는 정보를 제공해야 한다. 하지만, 대한항공에서 운영하는 기종은 그런 경우가 없기 때문에 해당 정보는 제공하지 않는다.

AOA동영상 강의