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
  • 실제로 시각장애인 중 전맹은 20% 이하에 불과하고 80%는 시력이 떨어지는 저시력장애인이다. (서울장애인홈페이지 )
  • 첫 번째 문제발생
  • 첫 번째 문제해결
  • 두 번째 문제발생
  • 해결 방안

Was this helpful?

Edit on Git
  1. AOA 2018
  2. 주요 UI별 ARIA 적용 사례 (2018)
  3. 접근성 주요 개선 항목

화면을 보는 스크린리더 사용자

Previous이해하기 어려운 폼 레이블Next전환되지 않는 페이지의 포커스

Last updated 2 years ago

Was this helpful?

실제로 시각장애인 중 전맹은 20% 이하에 불과하고 80%는 시력이 떨어지는 저시력장애인이다. (서울장애인홈페이지 )

대개 스크린리더 사용자들은 전맹이기 때문에 화면을 보지 않고 스크린리더 음성으로만 웹페이지를 탐색할거라 생각한다. 하지만 스크린리더를 사용하면서 화면을 보는 시각장애인들이 있기 때문에 스크린리더가 읽는 곳을 화면에서 보이지 않으면 이해가 어렵게 된다.

첫 번째 문제발생

css 속성을 사용하여 하단 영역에 화면에 보이지 않아야 하는 숨김콘텐츠를 제작한다. 그 후 스크린리더를 실행을 하게 되면, 스크린리더가 화면의 하단 영역까지 탐색을 하다가 갑자기 스크롤이 상단으로 이동해 버린다.

아래 예시 화면을 확인해 보자.

.offscreen{
position: absolute;
top:-10000px
overflow: hidden;  
}

top:-10000px 과 같이 음수값 설정으로 위치 값이 변경되어 스크롤이 자동으로 상단으로 이동하게 되고 스크린리더가 읽고 있는 화면이 사라지게 된다.

첫 번째 문제해결

콘텐츠를 숨기기 위해 위치 값이 변경되어 스크롤을 제어하지 않도록 하기 위해 css의 음수값을 삭제하고 아래와 같이 공통 적용하여 해결하였다.

아래와 같이 음수값을 사용하지 않고 css를 적용하면 화면에서 보이지 않게 되고, 스크린리더로 읽어도 화면 스크롤 변화를 방지할 수 있다.

.offscreen{
  position: absolute;
  clip: rect(1px 1px 1px 1px);  /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  }

두 번째 문제발생

회원약관이나 운임 규정 등 본문 텍스트가 상당히 긴 경우 컨테이너에 스크롤을 사용하게 되면 JAWS 스크린리더 실행 시 스크린리더가 읽고 있는 부분이 화면에서 가려지게 된다.

아래 예시 화면을 확인해 보자.

NVDA는 읽고 있는 부분을 화면에서 보여주고 있지만 JAWS는 읽어주지 못하기 때문에 스크린리더를 사용하고 있는 저시력 장애인들은 콘텐츠 이해가 어렵게 된다.

해결 방안

정말 안타깝지만, 뾰족한 해결방안을 찾을 수 없었기 때문에 스크롤이 있는 영역을 모두 삭제하였다. 전체 브라우저 스크롤로만 사용할 수 있도록 긴 텍스트를 펼쳐서 구성하였다. 화면의 공간 낭비가 심한 경우에는 버튼을 클릭하여 모달 다이얼로그로 확인할 수 있게 변경하였다.

국내에서는 안내를 사용자에게 바로 보여지도록 고지하지 않으면 책임소재가 발생하기 때문에 미국 지역에만 위 해결 방안을 사용하였다.

JAWS는 모달 다이얼로그 화면 내에서도 스크롤이 발생하면 스크롤 밖의 부분은 화면에서 볼 수 없기 때문에 모달 다이얼로그를 사용할 때에도 최대한 화면을 꽉 채워 스크롤 발생 영역을 줄여야 했다.

AOA동영상 강의