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 2019
  2. 알아두면 좋은 TIP!

제발 나를 무시해 주세요.

스크린리더가 이미지를 무시하는 가장 좋은 방법

스크린리더가 이미지를 읽지 못하게 하는 방법은 여러 가지가 있지만 가장 호환성이 좋아 추천하는 방법은 다음과 같다.

css의 background 속성 사용

{background-image: url("bg.gif");}

<img> 태그에 alt 속성을 빈 값으로 사용

<img src="spacer.gif" alt="">

<img> 태그에 aria-hidden 사용

<img src="bg.jpg" aria-hidden="true">

<img> 태그에 role="presentation" 사용

<img src="bg.jpg" role="presentation">

스크린리더가 아이프레임을 무시하는 가장 좋은 방법

비어 있는 아이프레임을 사용할 때 스크린리더가 읽지 않게 하는 가장 좋은 코드는 다음과 같다.

<iframe role="presentation" tabindex="-1" title="hidden"></iframe>

이미지 폰트를 사용할 때 주의해 주세요.

스크린리더가 가상선택자를 읽기 때문에 이미지 폰트를 사용하는 경우는 특별히 주의해야 한다.

이미지 폰트로 사용할 때 가장 흔히 사용하는 방법은 아래 두 가지이다.

.icon-address:before {content: "p";} //1번 방법
.icon-address:before {content: "/f02f";} //2번 방법

css의 가상 선택자로 :before 또는 :after 를 사용하여 content로 불러오는 방법으로, 위 두 가지 방법 모두 스크린리더가 읽게 된다.

1번 방법으로 사용하게 되면 스크린리더는 해당 영역을 "p"로 읽게 되어 스크린리더 사용자는 무엇을 읽는지 알 수 없게 된다. 2번 방법으로 사용하면 스크린리더는 해당 문구를 읽으려고 부단히도 애를 쓰지만 역슬래시에서 무엇을 말해야 할지 알 수 없어 아무것도 읽지 않는다.

그렇다면 가장 좋은 방법은 무엇일까?

이미지 폰트를 스크린리더가 읽지 못하도록 aria-hidden="true" 속성을 삽입하고 숨김텍스트로 그 의미를 삽입하면 스크린리더는 해당 의미를 정상적으로 읽게 된다.

<a href="../icon/address">
    <i class="icon-address" aria-hidden="true"></i>
    <span class="offscreen">address</span>
</a>
Previousdl, dt, dd 태그를 남용하지 마세요.Next띄어쓰기를 주의하세요!

Last updated 5 years ago

Was this helpful?

address 아이콘