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
  • SKYPASS
  • ASIANA
  • SAMSUNG은 제대로 읽네?

Was this helpful?

Edit on Git
  1. AOA 2018
  2. 알아두면 좋은 것들

대문자로만 표현해야 할 때

Previousrole=application은 언제 사용할까?Next화면의 정렬을 위해 중복 태그를 사용하지 말 것

Last updated 6 years ago

Was this helpful?

SKYPASS

스크린리더는 영어 단어를를 읽을 때 대문자와 소문자를 읽는 방법이 다르다. 대문자로만 사용했을 때는 쉽게 알 수 있는 단어를 제외하고는 모두 한글자씩 따로 읽게 된다.

text-transform 속성을 사용하여 대문자로 표현하여도 NVDA 스크린리더는 보여지는 대로 읽기 때문에 해결 방법이 아니다.

메뉴명 SKYPASS는 "스카이패스"가 아닌 "에스케이와이피에이에스에스"로 읽고 있어 수정이 필요했다.

대소문자 조합으로 보여지는 것을 기본으로 하되 SKYPASS와 같이 브랜드 정책과 관련있는 단어들은 대문자로 보여지되 스크린리더에서도 잘 읽을 수 있도록 아래 코드와 같이 수정하였다.

<button>
<span aria-hidden="true">SKYPASS</span> <span class="offscreen">Skypass</span>
</button>

aria-hidden 속성으로 대문자 단어를 노드로 감싸서 읽지 않게 하고, 화면에 보이지 않는 대소문자를 삽입하면 스크린리더에서는 "스카이패스"로 정확히 읽게 된다.

ASIANA

아시아나 항공도 대문자로 되어 있는데 NVDA로 읽게 되면 "에이에스아이에이엔에이 에어라인"으로 읽고 있다. 동일한 방법으로 수정하면 브랜드 네임을 제대로 읽게 할 수 있다.

<button>
<span aria-hidden="true">ASIANA</span> <span class="offscreen">asiana</span> AIRLINE
</button>

SAMSUNG은 제대로 읽네?

브랜드 네임을 제대로 읽는지는 직접 스크린리더로 들어봐야 한다. 스크린리더는 주기적으로 업데이트가 되는데 업데이트 버전별로 읽는 방법이 달라진다. 확인해 봐야할 스크린리더는 점유율이 높은 NVDA와 JAWS로 확인하는 것이 좋다.