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화면을 보는 스크린리더 사용자

Last updated 2 years ago

Was this helpful?

구분 없이 반복되는 문구

입력 박스의 레이블과 입력 지침(Placeholder), 에러 메시지까지 동일한 문구가 불필요하게 반복이 되면 스크린리더 사용자는 어떤 정보인지 구분을 할 수가 없어 사용이 어렵게 된다.

문제발생

First Name을 입력하는 입력박스에 숨김텍스트로 Required가 삽입되어있고, 레이블과 Placeholder에는 First Name 문구가 반복 제공되어 있다. 아무것도 입력하지 않고 submit을 누르면 에러가 발생하지만 First Name Required 문구가 또 다시 반복이 된다.

<label for="aa">First Name <span class="offscreen">Required</span></label>
<span class="placeholder" id="bb">First Name</span>
<input type="text" id="aa" aria-describedby="bb error-txt">
<p class="error" id="error-txt">First Name Required</p>

에러가 발생하고 포커스가 입력박스로 이동하면 스크린리더는 아래와 같이 읽게 된다.

First Name Required 편집창 자동완성 First Name First Name Required

해결방안

레이블의 숨김텍스트 Required 문구는 그대로 두고, 레이블은 First Name, Placeholder는 예시와 같은 입력 지침으로 바꾸었다. 그리고 에러메시지는 많이 달라지지 않았지만 필수입력정보라는 내용으로 변경하였다.

<label for="aa">First Name <span class="offscreen">Required</span></label>
<span class="placeholder" id="bb">ex)GIL DONG</span>
<input type="text" id="aa" aria-describedby="bb error-txt">
<p class="error" id="error-txt">This information is required.</p>

스크린리더로 읽게 되면 다음과 같이 들리게 되고 훨씬 이해하기 쉽게 개선이 되었다.

First Name Required 편집창 자동완성 ex)GIL DONG This information is required.

AOA 동영상 강의