[웹 접근성 가이드] 3. 이해의 용이성 : 입력도움

 

안녕하세요, 알씨타운입니다.🤗

저번 포스팅에 이어 오늘도 웹 접근성에 대해 정리해보도록 해요!

[ 이해의 용이성 ]

3.1 가독성

3.2 예측 가능성

3.3 콘텐츠의 논리성

3.4 입력 도움

출처 입력

---

 

3.4 입력도움

​

​

1. 레이블 제공

​

레이블이란 사용자가 어떠한 입력 form에 내용을 입력할 수 있도록

입력의 용도 또는 역할에 대해 설명해주는 것을 말합니다.

 

스크린 리더는 입력form의 형태를 읽을 때 그냥 '편집창'이라고만 말합니다.

그래서 이 입력 양식이 무엇인지 용도를 설명하는 텍스트가 없다면

시각장애인은 해당 입력form을 인지하기 어렵기 때문에

반드시 사용자 입력에는 그에 대응하는 레이블을 제공해야 합니다.

 

 

1) <label>과 해당<input>의 id값을 동일 시 시켜

사용자가 폼 요소에 대한 목적을 명확하게 파악할 수 있도록 해야 한다.

 

<ul> <li> <label for="userId">아이디</label> <input type="text" id="userId"> </li> <li> <label for="password">비밀번호</label> <input type="password" id="password"> </li> </ul>

 

<label for>의 값과 <input>의 id값을 위와 같이 연결 시키면

아이디 입력form을 선택하지 않고 label태그로 쓴 '아이디' 레이블을 선택해도

focus(초점)가 해당 레이블의 입력 창으로 이동합니다!

 

 

위의 예는 각각 하나의 레이블에 하나의 입력서식창의 형태로 매칭되어 있습니다.

 

 

 

그렇다면 만약 하나의 레이블에 여러개의 입력서식창을 입력해야하는 경우는 어떻게 해야 할까요??

 

<ul> <li> <label for="birth">생년월일</label> <input type="text" title="생년월일 중 년 4자리 입력" placeholder="년(4자리)" /> <input type="text" title="생년월일 중 월 입력" placeholder="월" /> <input type="text" title="생년월일 중 일 입력" placeholder="일" /> </li> </ul>

 

 

이렇게 각각 입력서식창에 title을 제공해 정보를 알려주어야 합니다.

스크린리더는 레이블과 테이블을 둘 다 읽어주지만, 경우에 따라 한 가지만 읽어주는 경우도 있습니다.

그렇기 때문에 되도록 중복으로 사용하는 것은 피하는 게 좋으며

되도록 1:1 형태로 레이블을 연결해서 양식을 마크업하는 것이 좋습니다.

 

---

 

2) <select>요소에 title을 제공하여 해당 요소에 대한 설명을 제공하여

사용자가 해당 요소에 대한 목적을 파악할 수 있게 한다.

 

<select title="시·도협의회 홈페이지 바로가기"> <option value="http://www.s-win.or.kr">서울특별시사회복지협의회</option> </select>

 

 

---

 

2. 오류 정정

​

입력 요소에 오류가 있을 경우, 사용자에게 정정할 수 있는 방법을 제공하여야 합니다.

 

1) 입력 오류시 입력 내용이 모두 사라지는 경우

입력을 완료하거나 제출할 때 오류가 발생하더라도

입력된 내용이 사라지지 않고 유지되도록 제공되어야 합니다.

 

2) 오류 내용 제공

어디부분이 왜 오류가 났는지 오류의 원인을 알 수 있도록 제공되어야 합니다.

 

3) 오류 발생 시점으로 초점 이동

오류가 발생된 입력 서식부분으로 포커스가 자동으로 이동되게 만들어야 합니다.

 

 

---

 

오늘은 웹 접근성 지침 중, 이해의 용이성 - 오류정정에 대한 콘텐츠에 대해 알아보았습니다.

다음 포스팅에서는 웹 접근성 지침 중 마지막인!!

견고성에 대해 정리해보도록 해요!

 

그럼 다음에 만나요~