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 5 years ago

Was this helpful?

여러 개의 화면을 슬라이드 형태로 보여주는 캐러셀

캐러셀은 다양한 형태로 구현 가능하지만 대한항공의 좌석 정보에서 제공하는 형태는 대제목, 소제목, 이미지,설명글, 슬라이드 버튼으로 구성되어 있다.

슬라이드 버튼을 누르면 이미지와 옆의 소제목과 설명글이 변경되는 형태이며 <ul><li> 태그 안에 <button>으로 마크업이 되어 있다.

구현된 캐러셀의 마크업은 다음과 같다.

<h2>코스모 스위트</h2>
<p>품격높은 코스모 스위트는 숲 속 자연의 느낌을 주는 우드 컬러의 일등석으로 
   하늘 위에서 최고급 호텔의 편안함을 제공합니다.</p>
<ul class="slide">
   <li>
      <h3>획기적으로 넓어진 공간, 180도 수평으로 펼쳐지는 아늑한 침대형 좌석</h3>
      <p>설명 문구</p>
   </li>
   <li style="display:none">슬라이드 2</li>
   <li style="display:none">슬라이드 3</li>
   ...
</ul>
<ul>
   <li>
      <button>획기적으로 넓어진 공간, 180도 수평으로 펼쳐지는 아늑한 침대형 좌석
      <span class="offscreen">(선택됨)</span></button>
   </li>
   <li><button>슬라이드 2</button></li>
   <li><button>슬라이드 3</button></li>
   ...
</ul>

버튼 간의 이동은 탭키로 이동하도록 설정하고 버튼명은 연결된 캐러셀의 이미 부여된 고유한 소제목을 삽입하여 버튼명만으로 어떤 내용을 담고 있는 화면인지 예측 가능하게 제작하였고, 선택된 버튼은 현재 상태를 알려주기 위해 선택되었다는 숨김 텍스트를 삽입했다.

초기 제작 시 <button> 대신 <a>로 슬라이드 버튼을 구현하고 "선택됨"을 title 속성을 삽입하였는데, 보조기기에서 <a>의 title 속성은 보조기기에서 모두 호환이 보장되지 않으므로 "선택됨"과 같은 중요한 정보는 숨김텍스트로 삽입하는 것이 좋다.

그리고, 버튼을 클릭하면 상단 변경되는 소제목과 설명 문구를 담고 있는 <li>에 포커스 이동시켜 해당 슬라이드를 읽을 수 있도록 구현했다.

스크린리더로 슬라이드 버튼을 듣게되면 다음과 같다.

list 1. 획기적으로 넓어진 공간, 180° 수평으로 펼쳐지는 아늑한 침대형 좌석 (선택됨) button 2. 나에게 딱 맞는 자세와 각도를 원터치로 button 3. 대형모니터와 다기능 리모트 콘트롤러로 즐기는 영화 상영관 button 4. 완벽한 프라이버시를 제공하는 하늘 위의 사무실 button 5. 나만을 위한 빛, 개인 독서등 button 6. 집중력과 몰입도를 높여주는 헤드셋 button

확인하고 싶은 버튼을 엔터키나 스페이스바로 선택하면 키보드 포커스는 상위 소제목과 설명 문구를 감싸고 있는 컨테이너로 이동하고 해당 정보를 읽어주게 된다.

다시 탭키를 누르면 다음 슬라이드 버튼으로 이동하도록 제작하여 스크린리더 사용자들이 쉽게 이해할 수 있도록 제작하였다.

위 캐러셀 구현에 aria는 사용하지 않았지만, 하단 슬라이드 버튼에 role="navigation"을 삽입하고 코스모 스위트 대제목을 aria-labelledby로 연결한다면 스크린리더 사용자의 사용성이 더 좋아진다.