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
  • 접근성을 준수해야 한다면 Jquery UI 사용하지 마세요.
  • 날짜 입력은 최대한 유연하게 제작하자.

Was this helpful?

Edit on Git
  1. AOA 2019
  2. 주요 UI별 ARIA 적용 사례 (2019)

날짜 입력 적용 사례

Previous이해하기 쉬운 데이터 테이블 적용 사례Next알아두면 좋은 TIP!

Last updated 2 years ago

Was this helpful?

접근성을 준수해야 한다면 Jquery UI 사용하지 마세요.

Jquery 공식 홈페이지에 있는 날짜선택기 화면이다. 입력박스에 포커스가 이동하면 자동으로 캘린더가 열리지만 캘린더가 열렸다는 것을 알 수도 없고 키보드로 접근을 할 수 없어 날짜 선택이 어렵다.

또한 직접 입력 방법은 유연성이 없어 정확한 포맷으로 입력하지 않으면 오류가 발생한다.

날짜 입력은 최대한 유연하게 제작하자.

날짜 입력 방법은 정말 다양하다. 국가별 문화차이로 일자를 먼저 입력할 수도 있고 "/"를 입력할 수도 있고 "-"를 입력할 수도 있다. 또 "," 또는 "."을 사용기도 하고 "~"을 사용하기도 한다. 이렇게 표준화되어 있지 않은 날짜 입력 방법 때문에 시각장애인은 더욱 날짜 입력을 어려워하고 불편해 한다.

그래서 대한항공은 날짜 입력 방법을 최대한 유연한 방법으로 제작하였다. 연도부터 입력해야 하지만 일자를 먼저 입력해도 오류가 나지 않으며 "-" 대신 "/"를 입력해도 오류가 나지 않도록 최대한 입력 방법을 쉽게 구현하였다.

즉, 2019/12/12, 12/12/2019, 20191212, 12-12-2019을 입력해도 2019-12-12로 자동으로 변경되어 입력 포맷을 다르게 해도 오류가 나지 않는다.

또한 실제로 화면에 보이는 것과 스크린리더에서 읽는 문구를 다르게 하였는데, YYYY-MM-DD는 JAWS에서 네 자리 연도를 세 자리로 읽은 이슈가 있기 때문이다. YYYY-MM-DD는 스크린리더에서 읽지 않도록 하고 <label> 태그 안에 실제 입력 포맷 e.g. 2016-12-01을 읽게 제작하였다.

소스를 보면 아래와 같다.

<label for="date" class="offscreen">
    Start Date (e.g. 2016-12-01)
</label>  
<span aria-hidden="true">Start Date (YYYY-MM-DD)</span>    
<input id="date" type="text" maxlength="10">
<button>Select the date</button>

날짜를 선택하는 버튼을 클릭하면 모달 다이얼로그로 캘린더가 뜨게 되는데 role="dialog"와 함께 aria-labelledby 속성을 사용하여 스크린리더가 캘린더가 열렸다는 것을 바로 알 수가 있다.

스크린리더로 들어보면 다음과 같다.

//입력박스 진입 시 출발일 (예. 2016-12-01) 편집창 //캘린더 버튼 이동 시 일자 선택하기 버튼 // 캘린더 버튼 클릭 시 날짜를 선택하여 주십시오 대화상자

캘린더의 접근성 적용 사례는 작년에 사례를 발표한 것이 있으니 아래 링크를 참고하자.

실제로 많은 시각장애인들이 날짜를 캘린더로 선택하기 보다는 직접 입력하는 것을 선호한다고 하는데 그 이유는 접근성을 준수하여 구현된 캘린더가 많지 않기 때문이다. 캘린더의 접근성 준수가 어렵다면 입력 방법을 최대한 유연하게 개발하는 것이 아주 중요하다.

AOA동영상 강의

Date Picker 적용사례
1
2