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?

읽어야 하는 툴팁과 읽지 않아야 하는 툴팁

홈페이지에서 사용하고 있는 툴팁은 2가지 종류가 있다. 화면 공간이 좁아 소스 상으로는 텍스트가 있지만 말줄임으로 표현한 경우가 있고, 약어를 이해하기 쉽도록 보여주는 설명하는 툴팁이 있다.

role="tooltip"으로 구현도 가능하지만, 읽지 않아야 하는 툴팁 기능도 포함되어 있어 여기서는 role 속성 없이 제작해 보았다.

각각의 화면 예제와 구현된 소스는 아래와 같다.

약어를 설명하는 읽어야 하는 툴팁

KE는 대한항공을 뜻하고, DL은 델타항공을 뜻한다. 이처럼 모든 항공사는 2글자 약어를 갖고 있는데 일반 사용자는 이해하기 어렵기 때문에 아래 화면과 같이 설명을 제공하는데 스크린리더 사용자도 읽어야 하는 툴팁이다.

"KE" 영역은 <a>로 마크업하고 동작하지 않으므로 role="presentation"과 aria-disabled를 삽입하여 스크린리더 사용자가 링크로 오해하지 않도록 제작하고 "KE"는 aria-hidden="true"로 스크린리더에서 읽지 않게 하고 실제 읽어야 하는 "대한항공"은 숨김 텍스트로 삽입하여 가상 모드나 브라우즈 모드에서 "대한항공"만 읽히게 한다.

마크업 화면은 다음과 같다.

<a href="#" class="tooltip" aria-disabled="true" role="presentation">
    <span class="offscreen">대한항공</span>
    <span aria-hidden="true">KE</span>
</a>

말줄임을 보여주는 읽지 않아도 되는 툴팁

화면 공간의 제약상 긴 공항명은 말줄임으로 표현하고 말풍선을 통해 풀네임을 보여주고 있다. 실제 DOM안에는 풀네임으로 존재하므로 중복으로 스크린리더가 읽을 필요가 없다.

말줄임으로 표현해야 하는 영역은 일반 div나 span으로 제작하고 키보드 포커스가 동작하도록 tabindex="0"을 삽입한다. 그리고 실제 DOM에서 확인하면 해당 텍스트는 두 개가 중복된다. 중복된 내용을 스크린리더에서 읽지 않도록 aria-hidden="true"를 삽입하면 된다. 읽어야 하는 툴팁보다는 아주 간단히 해결이 가능하다.

<span class="ellipsis" tabindex="0">
    New York-John F.Kennedy(JFK)
</span>
<span class="tooltip" aria-hidden="true">
    New York-John F.Kennedy(JFK)
</span>

AOA동영강 강의