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
  • 탭 UI 기본 구조
  • 탭 버튼 영역
  • 탭 패널 영역

Was this helpful?

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

탭 UI 적용 사례

Previous좌석선택 적용사례Next모달 다이얼로그 적용 사례

Last updated 2 years ago

Was this helpful?

탭 UI 기본 구조

탭 UI는 크게 탭버튼 영역과 탭패널로 구분된다. 각각의 탭버튼은 연결되는 탭패널이 있어야 하며, 탭버튼이 활성화되면 연결된 탭패널도 활성화되어야 한다. Tab키로 이동하는 포커스는 활성화된 콘텐츠로만 이동되어야 한다.

탭 버튼 영역

탭버튼을 감싸고 있는 컨테이너 영역은 role="tablist"를 삽입하고, 탭버튼에는 role="tab"을 삽입한다. 선택된 탭버튼은 aria-selected="true"속성을 삽입하고, 비활성화된 탭버튼은aria-selected="false"를 삽입한다.

또한, 하단 콘텐츠와 연결되었다는 것을 스크린리더에서 읽을 수 있도록 aria-controls를 삽입하여 탭패널의 id 값과 연결한다.

<ul role="tablist">
    <li role="tab" aria-selected="true" aria-controls="탭패널 id" 
     tabindex="0" id="a1">스케줄 조회
    </li>
    <li role="tab" aria-selected="false" aria-controls="탭패널 id" 
     tabindex="-1" id="b1">출도착 조회
    </li>
</ul>

스크린리더로 들어보면 아래와 같다.

탭 컨트롤 스케줄 조회 탭 선택됨 1/2

탭 패널 영역

탭패널은 활성화된 탭버튼의 콘텐츠가 삽입되는 영역으로 role="tabpanel"을 삽입하고, 펼쳐진 상태는 aria-expanded="true"를 삽입하여 스크린리더를 통해 알릴 수 있다.

탭이 활성화되면 탭패널 전체 컨테이너에 tabindex="0"을 삽입하고 포커스를 보내면 탭패널의 제목을 읽을 수 있도록 탭 패널에 aria-labelledby 속성을 삽입하여 연결된 탭버튼과 id값을 동일하게 삽입한다.

<ul role="tablist">
    <li role="tab" aria-selected="true" aria-controls="a1" tabindex="0" 
     id="schedule-tab">스케줄 조회</li>
    <li role="tab" aria-selected="false" aria-controls="b1" tabindex="-1" 
     id="flight-tab">출도착 조회</li>
</ul>
<div role="tabpanel" aria-labelledby="schedule-tab" aria-expanded="true" 
 tabindex="0" id="a1">
 스케줄 조회 탭패널
</div>

스케줄 조회 탭버튼이 활성화 되고 탭패널로 이동하면 스크린리더( jaws) 아래와 같이 읽는다.

스케줄 조회 탭 패널

탭 UI는 JAWS와 NVDA에서 서로 읽는 방법이 상이하다. 활성화된 탭패널 영역에 tabindex="o"을 삽입하고 포커스를 보내면 JAWS는 탭패널의 제목을 읽으나 NVDA는 전체 탭패널 영역의 콘텐츠를 줄줄줄 읽는다.

AOA동영상 강의