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 2023~
  2. 주요 UI별 ARIA 적용 사례 (2022~2024)

입력 글자 수 제한 사례

메세지는 1,000자 이내로 적어주세요(?)

Previous호버 콘텐츠 적용사례NextForm 그룹의 오류 적용 사례

Last updated 1 year ago

Was this helpful?

네이버의 쪽지

네이버에서 쪽지 메뉴로 들어가면 다음과 같이 <textarea>가 있으며, 그 <textarea> 밑에는 "33/1000자" 가 있어서 글자 수 입력이 1,000자까지 제한이 있는 것으로 예상이 된다.

비장애인은 시각적 정보로 글자 수가 제한이 있음을 알 수 있지만 시각장애가 있는 스크린리더 사용자들은 어떻게 이 정보를 알 수 있을까?

네이버의 쪽지에 삽입된 <textarea> 구현된 소스는 다음과 같다.

<div class="writing_area">
    <textarea id="writeNote" style="resize:none;"    
     onkeyup="nWrite.checkContentLength();" rows="5" cols="55" 
     title="쪽지 내용을 입력해 주세요.">
    </textarea>
</div>
<div class="writing_option">
   <div class="character">
      <span id="noteLen">33</span> / <span id="noteMaxLen">1000</span>자
   </div>
</div>

<textarea>태그에 id가 삽입되어 있지만 <label>태그가 없어 연결할 수 있는 for도 찾을 수 없다. <textarea>를 스크린리더가 "편집창 멀티라인"으로 읽기 때문에 많은 글자 수를 입력할 수 있다는 것은 알지만 1,000자 이내로 입력해야 한다는 것은 스크린리더 사용자는 알 수 없다.

<textarea> 하단에 33/1000자 라는 정보가 있어서 예상할 수 있지만 스크린리더가 탐색하기 전까지는 스크린리더 사용자는 그 정보를 알 수 없다.

위 이미지와 같이 사용자가 1,000자를 모두 입력하게 되면 브라우저 alert으로 1,000자 까지만 입력이 가능하다는 안내를 하지만 사용자는 <textarea>에서 1,000자 이상을 입력하기 전까지 몇 글자를 입력했는 지에 대한 정보를 알 수 없어 시용이 쉽지 않다. (도대체 네이버는 <label>도 왜 사용하지 않았을까...?)

대한항공 홈페이지 구현 사례

대한항공 홈페이지에서는 <textarea>를 마일리지몰 메뉴에서 찾을 수 있다. 상품을 장바구니에 담고 나서 배송지 입력 시 배송메세지를 입력할 때 50자까지 입력 제한이 있는 <textarea>가 있다.

아래와 같이 시각적 레이블과 <label> 태그로 입력박스가 50자 이내 글자 수 제한이 있음을 정보 안내하고 있어 스크린리더 사용자가 글자 수 제한이 있다는 정보를 입력 전에 알 수 있다.

또한 "총 50자 중 0자 입력"을 aria-live 속성을 사용하여 실시간으로 입력한 글자 수를 안내하도록 구현하였고, 해당 노드에 id를 삽입하여 <textarea>의 aria-describedby 속성 값과 연결하였다.

<div class="field">
    <label class="label" for="delivery"> 배송 메시지(50자 이내)</label>
    <div class="forms">
        <textarea aria-describedby="calcuateMessage" id="delivery" maxlength="50">
        </textarea>
    </div>
    <div class="counter">
        <span aria-hidden="true"><em>0</em>/50</span>
        <div aria-atomic="true" aria-live="off" class="_hidden" 
         id="calcuateMessage">
            <span>총 50자 중 <span>0</span>자 입력</span>
        </div>
    </div>
</div>

입력한 글자 수를 실시간으로 글자 수마다 aria-live로 안내하면 오히려 사용에 불편을 줄 수 있어 10글자가 단위로 입력이 되면 aria-live=off에서 aria-live=polite로 변경하여 사용자가 입력하는 데 방해가 되지 않도록 구현하였다. 알림 빈도 수는 처음은 10글자 단위로 안내하다가 제한 글자 수에 다다르면 높이는 방식으로 하였다.

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

배송 메세지(50자 이내) 편집창 멀티라인 총 50자 중 0자 입력

..10글자 입력..

총 50자 중 10자 입력

..20글자 입력..

총 50자 중 20자 입력

..30글자 입력..

총 50자 중 30자 입력

..35글자 입력..

총 50자 중 35자 입력

하지만 여기도 아쉬운 부분도 있다. 사용자가 50자를 모두 입력하면 별도의 안내 문구 없이 "총 50자 중 50자 입력"이라고만 반복 안내를 한다.

50글자에 다다르면 "50자를 모두 입력하여 더 이상 입력할 수 없습니다"를 안내하여 사용자가 더 이상 입력하지 않도록 개선한다면 장애인, 비장애인 모두 쉽게 사용할 수 있을 것이다.

네이버의 쪽지