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 2018

Screen Reader 테스트

직접 ARIA를 사용하여 제작한 콘텐츠를 스크린리더가 제대로 읽고 있는지를 확인하기 위해서는 스크린리더를 사용해야 하며, 효과적으로 스크린리더를 배우기 위한 시간을 투자하는 것이 필요하다.

누구나 처음 스크린리더를 사용하면 혼란스럽고 절망을 경험하게 된다. 오디오를 켜는 순간 스크린리더가 어느 부분을 읽고 있는지 알 수 없는데 이는 스크린리더의 기본 동작 방식을 모르기 때문이다.

스크린리더는 DOM을 복사하여 그대로 읽게 되는데, 가끔 복사과정에서 오류가 발생한다. 스크린리더를 리프레시하여 다시 DOM을 복사하고 읽게 할 수 있는데 JAWS는 Insert + ESC 이다.

스크린리더의 기본 동작

  • 읽기 일시 중지 : 간격, 세미콜론, 쉼표, 물음표, 단락

  • 대문자는 캐럿별로, 소문자는 단어로 읽기 : 스크린리더는 만약 발음이 가능하게 충분한 모음/자음이 있으면 의미없는 단어와 약어를 발음하려고 한다. 그렇지 않은 경우 글자를 한 자 한 자 읽는다. 예) NASA : 나사, NSF : N.S,F, URL : earl, SQL: S,Q,L

  • JAWS는 대문자와 소문자를 소리를 강조하여 구분

  • 암호 입력창은 “Star”로 발음

  • 웹 페이지를 처음 로딩했을 때 페이지 타이틀을 읽음.

  • 이미지의 대체텍스트는 “Graphic”이라고 먼저 읽고 이미지가 링크면, JAWS는 “Graphic link”로 발음.

  • 대체 텍스트가 없는 이미지는 무시하거나 아무것도 말하지 않음 (alt가 없는 경우 파일이름을 읽기 위한 환경설정은 가능)

  • 대체텍스트가 없는 이미지가 링크일 때는 일반적으로 링크 URL을 읽거나 이미지 파일 이름을 읽음

  • JAWS는 헤딩요소를 읽을 때 헤딩과 레벨을 함께 읽음 예) <h1> : “heading level 1”

  • 페이지 로딩이 끝나면 페이지의 링크의 개수를 읽음.

  • JAWS는 현재 페이지가 만약 링크 목적지의 최종 페이지라면 “same page link”로 읽고 이전에 접속했던 페이지 링크는 “visited link”로 읽음

  • 테이블 탐색 모드에서 데이터 테이블의 행과 열을 개수를 읽음

  • 테이블이 올바르게 마크업되어 있다면 새로운 셀에 진입하면 컬럼과 행 제목을 읽음

  • 폼에 진입했을 때 비프음과, 폼 모드로 자동으로 진입

Previous화면의 정렬을 위해 중복 태그를 사용하지 말 것NextScreen Reader와 Browser 조합

Last updated 6 years ago

Was this helpful?