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
  • JAWS 15, 16, 17, 2018, 2019....(Job Access With Speech)
  • JAWS/IE 조합에서의의 버그
  • NVDA (Non Visual Desktop Access)
  • NVDA/FF조합에서의 버그

Was this helpful?

Edit on Git
  1. AOA 2018
  2. Screen Reader 테스트

Screen Reader 버그

PreviousScreen Reader와 Browser 조합NextLandmark Role

Last updated 6 years ago

Was this helpful?

JAWS 15, 16, 17, 2018, 2019....(Job Access With Speech)

끝도 없는 JAWS의 버전 업데이트에 따라서 버전별 버그도 수두룩하다. W3C의 예제도 스크린리더의 버그로 인하여 제대로 인식이 되지 않는 오류가 많지만 그 누구도 뾰족한 해결방안을 찾을 수 없었다.

JAWS는 거의 1년에 1회 버전 업데이트를 하는데 버전별로 라이선스를 별도로 구매해야 한다. 자동 업데이트가 가능한 버전도 있지만 대부분 $1,000이상의 금액을 별도로 지불해야 한다는 엄청나게 슬픈 사실...

또한 보이는 버전이 전부가 아니라.. JAWS 17.XXXX와 같이 뒤에 숫자가 따로 붙어서 버전업이 되곤 하는데 같은 17버전이어도 다르게 동작하여 모든 버그에 대응하는 것은 현실적으로 불가능하다.

JAWS/IE 조합에서의의 버그

  • 라디오버튼 그룹에 tab키로 진입할 때 폼모드로 자동 전환되지 않는 버그가 있으므로 Enter키를 눌러 폼모드로 진입해야 한다.

  • 라디오버튼은 그룹은 tab키로 진입 시 선택된 라디오버튼으로 이동되어야 하지만, 폼모드로 자동 전환이 되지 않아 진입 방향의 첫번째 라디오 버튼으로 이동된다.

  • 자동완성에서 검색결과를 읽을 수 있도록 role="status"과 aria-live="polite"를 삽입하였지만 IE/JAWS 조합에서 해당 문구를 읽지 않는다. 해결방안 : 문구 자체로 삽입하지 않고를 node로 감싸 적용

NVDA (Non Visual Desktop Access)

JAWS와 달리 무료로 사용 가능한 NVDA는 Firefox와 가장 호환이 잘 된다. 정기적으로 업데이트가 되고 있으며 Speech viewer 기능이 있어 스크린리더 테스트가 용이하다.

NVDA/FF조합에서의 버그

  • 테이블의 caption 태그에 position:absolute 속성을 사용하면 행을 하나 더 추가하여 읽는다. (NVDA의 버그라기 보다는 Firefox의 버그이다) 해결방안 : caption에 직접 사용하지 않고 caption 태그의 하위 노드에 추가 삽입하여 해결

  • <body> 바로 하위의 노드에 role=“alert”이 삽입된 상태로 페이지가 로드되면, "alert"이라고 읽는다. 해결방안 : 삽입되는 요소에 role="alert" 속성을 미리 삽입하지 않고 필요할 때 삽입

  • date picker에서 날짜를 선택하지 않고 이동만 했을 때 selected라고 읽는다. 해결방안 : aria-selected="false"로 삽입하여 읽지 않게 한다.

  • 클릭커블하지 않은 상위 컨테이너 <div>나 <h>요소를 Clickable이라고 읽는다. 해결방안 : 상위 컨테이너 요소에 온클릭 이벤트를 삽입하지 않고 실제 이벤트가 발생하는 요소에 온클릭 이벤트 삽입