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
  • 제목행과 제목열에 모두 th와 scope를 사용하자.
  • 총액은 테이블과 분리하자.

Was this helpful?

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

이해하기 쉬운 데이터 테이블 적용 사례

Previous그룹명 필수 항목 적용 사례Next날짜 입력 적용 사례

Last updated 2 years ago

Was this helpful?

제목행과 제목열에 모두 th와 scope를 사용하자.

아래와 같이 방콕에서 인천으로 오는 항공편에 초과수하물을 4명의 가족이 1개씩 추가하여 구매 정보를 보여주는 테이블이 있다. 이런 테이블을 스크린리더를 사용하는 시각 장애인들에게도 쉽게 이해할 수 있는 테이블로 만들 수 있다.

첫번 째 제목 행은 <th>로 마크업하고 scope="col" 속성을 사용하고, 테이블의 캡션은 "탑승자 별 방콕출발 인천도착 여정에 구매한 초과수하물 개수 현황"이라고 제공한다.

그리고 테이블을 보면 어두운 배경의 제목행이 아닌 탑승자 열도 제목열이 될 수 있다. 위의 경우 탑승자와 여정정보까지 제목열로 지정하면 초과 수하물 개수 정보 탐색할 때 빠르게 이해가 가능해진다.

마크업 소스는 다음과 같다.

<table>
    <caption>탑승자 별 방콕출발 인천도착 여정에 구매한 초과수하물 개수 현황</caption>
    <thead>
        <tr>
            <th scope="col">탑승자</th>
            <th scope="col">여정정보</th>
            <th scope="col">첫번째 초과수하물</th>
            <th scope="col">두번째 초과수하물</th>
            <th scope="col">세번째 초과수하물</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">father</th>
            <th scope="row">방콕 출발 서울/인천 도착</th>
            <td>무료</td>
            <td>1개</td>
            <td>미구매</td>
        </tr>
        <tr>
            <th scope="row">mother</th>
            <th scope="row">방콕 출발 서울/인천 도착</th>
            <td>무료</td>
            <td>1개</td>
            <td>미구매</td>
            ....
    </tbody>
</table>

테이블을 탐색 시 JAWS에서는 ctrl + alt + 방향키를 사용하게 되는데 데이터 열을 읽을 때 연관된 제목행과 제목열을 읽고 ctrl + alt + 5(numpad)를 누르면 현재의 데이터 열의 제목열과 제목행을 같이 읽게 된다.

위 화면 mother의 두번째 초과수하물을 JAWS로 탐색하여 읽으면 다음과 같이 들린다.

4열 3행 두번째 초과수하물 mother 방콕 출발 서울/인천 도착 1개

총액은 테이블과 분리하자.

위 마크업 소스를 보게되면 총액 부분은 <tfoot>으로 제작하지 않는 것이 좋다.

이유는 총액은 스크린리더가 읽지 말아야 할 제목열과 제목행을 총액과 같이 연관있게 읽을 수 있기 때문이다. 차라리 이렇게 테이블 제목과 연관이 없는 경우는 테이블과 분리하여 별도로 마크업하는 것이 스크린리더 사용자가 이해하기 쉬운 테이블이 된다.

<table>태그의 <thead>, <tbody>,<tfoot>은 테이블 소스의 구조화를 위한 태그일 뿐, 스크린리더가 테이블을 읽는데 전혀 영향을 주지 않는다.

AOA동영상 강의

1
2