[웹 접근성] 웹 접근성 지침(21-24) 레이블 제공 / 오류 정정 / 마크업 오류 방지 / 웹 어플리케이션 접근성 준수

✅  21. 레이블 제공 

- 사용자 입력에는 이와 대응하는 레이블을 제공해야 한다

- 레이블은 모든 사용자의 입력 용도 또는 역할에 대한 설명을 위해 사용한다

 

(1)  레이블이 시각적으로 노출되어 있는 경우 

- 청각으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린 리더가 “편집창” 이라고만 읽어준다

- 입력창의 용도가 달라도 “편집창”이라고만 읽어주기 때문에 무엇을 입력해야 하는지 알 수 없다 

- 따라서 이에 대한 설명을 제공해야 한다

 

<label for="user_id">아이디</label>
<input type="text" id="user_id" />

<label for="user_pw">비밀번호</label>
<input type="text" id="user_pw" />

- 레이블과 입력 서식이 1:1 매칭인 경우 레이블을 제공하고 <label> 태그의 for값과 <input>의 id값을 동일하게 제공한다

- 이렇게 제공하면 입력 서식 선택 시 초점이 가는 것은 물론이고 레이블을 선택해도 입력 서식에 초점이 가게 된다

 

<label for="user_gender">성별</label>
<select id="user_gender">
    <option value selected>성별</option> 
    <option value="0">남자</option> 
    <option value="1">여자</option> 
</select>

- 레이블과 선택 서식이 1:1 매칭인 경우

 

<input type="radio" id="gender_male" />
<label for="gender_male">남자</label>
<input type="radio" id="gender_female" />
<label for="gender_female">여자</label>

<input type="checkbox" id="agree" />
<label for="agree">이용약관에 동의합니다.</label>

- 레이블과 라디오 버튼, 체크 박스가 1:1 매칭인 경우

- 라디오 버튼과 체크 박스는 컨트롤 크기가 매우 작다

- 위와 같이 레이블을 매칭 시켜주면 레이블만 선택하더라도 컨트롤이 선택되기 때문에 편리하다

 

<input type="text" title="생년월일 중 년 4자리 입력" />
<input type="text" title="생년월일 중 월 입력" />
<input type="text" title="생년월일 중 일 입력" />

- 레이블과 입력 서식이 1:다 매칭인 경우, 각 입력 서식에 대해 title을 제공한다

 

 

 

(2)  레이블이 시각적으로 노출되지 않은 경우 

<input type="text" title="아이디" />
<input type="text" title="비밀번호" />

- 스크린 리더는 레이블과 타이틀을 둘 다 읽어 준다

- 만약 레이블과 타이틀을 모두 제공한 경우 스크린 리더에 따라 레이블을 읽어주기도 하고, 타이틀을 읽어주기도 한다

- 1:1 매칭이 경우, 우선적으로 레이블을 제공하고 이외에는 타이틀로 설명을 제공하도록 한다

- 이는 중복 제공은 피하고 클릭 범위가 늘어나는 것을 막기 위함이다

 

 

✅  22. 레이블 제공 

입력 서식 작성 시, 사용자의 실수로 오류가 발생하면 이를 정정하는 방법을 제공해야 한다

 

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

- 입력 서식 작성 시 발생한 오류로 내용이 모두 사라지는 경우가 오류 사례에 해당한다

- 작성된 내용이 삭제되지 않고 오류가 있는 부분만 수정할 수 있도록 제공해야 한다

 

(2) 오류 내용 제공

- 오류 발생의 원인을 사용자에게 알려주어야 한다

 

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

- 오류가 발생한 입력 서식의 시점으로 초점을 이동시킨다

 

 

✅  23. 마크업 오류 방지 

- 마크업 언어 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다

- 오류가 없도록 마크업 문서를 구성하면 웹 브라우저나 보조 기술이 콘텐츠를 명확이 전달할 수 있다

- 뿐만 아니라 콘텐츠의 일부 기능이 누락되는 것을 방지할 수 있다

 

 

(1) 요소의 열고 닫음

<!-- 오류 사례 A -->
<ol>
  <li>첫 번째 목록</li>
  <li>두 번째 목록</li>
  <li>세 번째 목록</li>

<!-- 오류 사례 B -->
<ul>
  <li>첫 번째 목록</li>
  <li>두 번째 목록</li>
  <li>세 번째 목록</li>
</ul>

- 요소의 열고 닫는 태그가 일치해야 한다

- 오류 사례 A는 <ol>의 여는 태그만 있고 닫는 태그가 없어서 오류 사례에 해당한다 

- 오류 사례 B는 <ul>의 여는 태그를 사용하고 <ol>의 닫는 태그를 사용해 오류 사례에 해당한다

 

<!-- 준수 사례 -->
<ol>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>
</ol>
<ul>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>
</ul>

- 마크업 언어로 작성된 콘텐츠는 표준에서 정한 경우를 제외하고는 여는 태그와 닫는 태그가 일치해야 하고 모두 작성해야 한다

 

(2) 요소의 중첩

<!-- 오류 사례 -->
<a href="…"><span>바로가기</a></span>

- 요소가 중첩되어 사용된 경우, 열고 닫는 태그가 포함 관계에 맞지 않는 다면 오류 사례에 해당한다

- <a> 태그가 열리고 <span> 태그가 열렸다면 <span> 태그를 먼저 닫아야 한다

 

<!-- 준수 사례 -->
<a href="…"><span>바로가기</span></a>

- 시작 요소와 끝나는 요소의 나열 순서의 포함관계가 어긋나지 않도록 해야 한다 

 

(3) 중복된 속성 사용 

<!-- 오류 사례 -->
<img src="apple.jpg" alt="" class="img_box" class="img_01">

<!-- 준수 사례 -->
<img src="apple.jpg" alt="" class="img_box img_01" >

- 요소에 동일 한 속성을 중복해 사용한 경우 오류 사례에 해당한다

- 하나의 요소 안에서 속성을 중복 선언하지 않도록 한다 

 

(4) id 속성 값 중복 

<!-- 오류 사례 -->
<div id="main_menu" class="lnb">
…
</div>

<ul id="main_menu" class="menu">
    <li>로그인</li>
    <li>회원가입</li>
</ul>

<!-- 준수 사례 -->
<div id="main_menu_left" class="lnb">
…
</div>

<ul id="main_menu" class="menu">
    <li>로그인</li>
    <li>회원가입</li>
</ul>

 - 하나의 마크업 문서에 같은 id값을 중복해 선언하면 오류 사례에 해당한다

- 페이지 내의 id값이 중복되지 않도록 제공해야 한다

- 서식의 id가 중복되는 경우, 21. 레이블 제공에도 영향을 미친다 

 

 

✅  24. 웹 애플리케이션 접근성 준수 

- 웹 애플리케이션이란 웹 콘텐츠에 포함되어 특정한 기능을 수행하도록 구성된 소프트웨어의 일종이다

- 웹 애플리케이션은 리치 인터넷 어플리케이션(RIA : Rich Internet Application)이라고도 말한다 (예) 플래시

- 콘텐츠에 포함된 웹 어플리케이션은 접근성이 있어야 한다

- 이는 웹 애플리케이션을 사용할 수 있도록, 접근 가능하도로 구현해야 한다는 것을 의미한다

- 따라서 웹 애플리케이션에 대한 접근성 프로그래밍 인터페이스 사용을 지원한다거나 대체 수단을 제공하는 보조기술을 지원해야 한다

- 접근성이 어려운 플래시의 경우 HTML 버전을 선택할 수 있는 대체 수단이나 대체 텍스트를 제공해야한다