아이디를 생성하는 입력상자에 어떻게 입력해야 하는지 알 수가 없고, 잘못 입력하고 발생하는 에러 메시지를 통해서만 "5~20자의 영문 소문자, 숫자와 특수기호만 사용가능합니다" 라는 것을 알 수 있게 된다. 또한 비밀번호도 오류가 발생한 후에 입력도움을 알 수 있기 때문에 스크린리더 사용자는 상당한 불편을 겪게 된다. 이렇게 입력 지침을 에러메시지를 통해서만 제공하는 방법을 스크린리더 사용자에게 좋지 않은 경험이 된다.
"에러베시지"의 잘못된 예와 같이 스크린리더 사용자는 에러가 발생해도 에러가 발생 된 상황을 전혀 알 수 없기 때문에 "1111"이라고 아이디를 입력했지만, 그것이 입력 기준에 맞지 않는지는 알 수가 없다.
이때 입력 서식인 <input> 요소에 aria-label 또는 aria-labelledby와 aira-describedby 속성을 사용하게 되면, 이 문제를 간단히 해결할 수 있다. <input> 요소를 사용하면 당연히 <label>요소를 사용해야 하는 것이 원칙이지만 여기에서는 제목 역할을 <label> 요소 대신 aria-label 속성으로 사용하려고 한다.
<input> 요소에 aria-label 속성이나 aria-labelledby 속성을 사용하면 <label> 요소의 텍스트는 읽지 않고, <button> 요소에 사용하면 <button>요소의 텍스트를 읽지 않으므로 주의해야 한다. 단 <input>요소의 title 속성은 읽는다. <label> 요소의 텍스트를 읽어야 하는 경우는 aria-labelledby 속성 댓니 aria-describedby 속성을 사용하면 된다. 그러면 스크린리더는 <label> 요소의 텍스트와 aria-describedby 속성과 연결된 추가 설명까지 함께 읽는다.
사용자가 입력하기 전에 입력 지침을 알 수 있도록 aira-label="제목" 과 aria-describedby="입력지침"을 사용하여 제공한다.
요소 |
역할 |
속성/상태 |
설명 |
<input> |
제목 |
aria-label="{제목}" |
아이디 또는 패스워드와 같은 폼 요소의 제목을 제공 |
<input> |
입력지침 |
aria-describedby="{입력지침}" |
폼 요소의 입력 지침을 설정하여 제공한다. |
'WWWEB > Accessibility' 카테고리의 다른 글
| [WAI-ARIA] radio button (0) | 2020.07.21 |
|---|---|
| [WAI-ARIA] button (0) | 2020.07.21 |
| [WAI-ARIA] multi form (0) | 2020.07.20 |
| [WAI-ARIA] auto complete 예제 (0) | 2020.07.17 |
| [WAI-ARIA] 탭 예제 (0) | 2020.07.17 |
댓글