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
  2. 주요 UI별 ARIA 적용 사례 (2018)
  3. 접근성 주요 개선 항목

전환되지 않는 페이지의 포커스

Previous화면을 보는 스크린리더 사용자Next동일한 기능의 서로 다른 UI

Last updated 2 years ago

Was this helpful?

페이지가 이동되었다는 걸 스크린리더도 알까?

AJAX 개발 방식과 같이 페이지가 전환되지 않거나 리플레시 되지 않고 헤더를 제외한 콘텐츠 부분만 변경되는 방식은 이제는 일반적이다. 시각적으로는 화면의 변화를 감지하고 인지할 수 있지만 스크린리더 사용자들은 화면 상의 변화를 인지하기 어렵다.

이유는 스크린리더는 페이지가 전환이 되면 title을 읽어주고 페이지 내에 몇 개의 링크가 있는지 자동으로 읽어주어 페이지가 전환되었다는 것을 스크린리더 사용자들도 알 수 있는데, 페이지가 전환되지 않으면 변화를 인지하지 못하고 아무것도 읽지 않는다.

문제발생

호텔 예약 페이지에서 렌터카를 예약하려고 메뉴를 눌러 이동했으나 파란색 라인 아래의 화면만 변경되어 스크린리더는 렌터카 페이지로 이동했다는 것을 인지하지 못한다.

스크린리더가 아무것도 읽지 않자 다시 렌터카 예약 메뉴를 반복적으로 누르게 된다.

해결방안

메뉴가 변경되어도 페이지 전환이 되지 않아 리플레시가 되지 않으므로, 메뉴를 선택하면 페이지의 제목인 "호텔 예약"과 "렌터카 예약"에 해당되는 <h2>요소로 tabindex="-1" 을 삽입하고 포커스를 자동으로 이동시켰다.

그리고 해당 영역에서 벗어나면 tabindex 속성을 삭제하였다.

위와 같이 수정하고 스크린리더를 들어보면 아래와 같이 들리게 된다.

호텔 예약 2/3 // Enter키 누르면 호텔 예약 헤딩 레벨 2

렌터카 예약 3/3 // Enter키 누르면 렌터카 예약 헤딩 레벨 2

AOA동영상 강의