부스트코스 웹 접근성 이해
1. 웹 접근성의 이해
2. 웹 접근성 지침
3. 웹 접근성 진단도구와 스크린 리더
📍18. 사용자 요구에 따른 실행
유저가 의도치 않은 기능이 실행되면 안된다
✅새 창을 열 때, 스크린 리더 사용자에게 새 창이 열림을 알려줘야 한다
- 아래와 같은 방법을 사용할 수 있다
<a href="…">이용약관<span class="blind">새 창</span></a>
또는
<a href="…" title="새 창">이용약관</a>
또는
<a href="…" target="_blank">이용약관</a>
- target="_blank" 어트리뷰트 방식이 가장 간편하다
- 이 밖에 window.open() 방식도 있지만, 스크린 리더가 인지 불가
- 센스리더 외의 스크린 리더에서는 title, target 방식을 읽어주지 않으므로 주의
✅컨트롤 선택 시 바로 기능이 실행되면 안됨
- 유저가 콤보 상자, 라디오 버튼, 체크 박스 등의 컨트롤을 선택했을 때 기능이 실행되면 안된다
- 예) 팝업 내의 "오늘 하루 이 창을 열지 않음" 체크박스를 선택하자마자 팝업이 닫히게 하면 안되고 별도의 닫기 버튼을 제공해야 함
✅select에 onchange 이벤트 적용하지 말것
- 옵션을 선택하자마자 페이지가 이동되거나 하면 안됨
- 키보드로 접근이 불가능해지기 때문
📍19. 콘텐츠의 선형 구조
콘텐츠를 논리적인 순서로 제공해야 한다
✅스크린 리더 사용자의 혼란을 방지하기 위해 제목
- 내용 순서를 지켜서 마크업 작성
📍20.표의 구성
스크린 리더 사용자를 위한 table element 사용 지침
✅제목 셀(header)과 내용 셀을 구분
- 제목 셀 : <th>
- 내용 셀 : <td>
예시1
- <caption> 내부 마크업은 시각적으로 제목과 요약 정보를 구분하며 필수는 아님
<table>
<caption>
<strong>직원 관리 현황 자료</strong>
<span>부서별 직원 수</span>
<caption/>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">부서</th>
<th scope="col">직원 수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>영업팀</td>
<td>15명</td>
</tr>
<tr>
<td>2</td>
<td>경영지원팀</td>
<td>10명</td>
</tr>
</tbody>
</table>
✅table로 레이아웃을 표시하지 말 것
- 스크린 리더 사용자에게 레이아웃이 아닌 데이터 테이블로 착각하게 할 수 있음
📍21. label 제공
사용자 입력 창에는 레이블을 제공해야 한다
✅스크린 리더는 <input> 을 그저 "편집창" 이라고만 읽어준다- label이 없으면, 스크린 리더 사용자는 이게 무슨 input인지 알 수 없다- <label> 의 for 값과 <input> 의 id 값을 맞춰준다 (라벨 입력시 포커스 기능도 제공)
예시
<label>
아이디
<input type="text"/>
</label>
<label>
비밀번호
<input type="text"/>
</label>
위 아래 동일하게 라벨 클릭시 input에 포커스
<label for="id">아이디</label>
<input type="text" id="id"/>
<label for="password">비밀번호</label>
<input type="text" id="password"/>
<label> 과 <select>를 연결할 수도 있다
<label for="user_gender">성별</label>
<select id="user_gender">
<option value selected>성별</option>
<option value="0">남자</option>
<option value="1">여자</option>
</select>
✅레이블이 시각적으로 노출되지 않은 경우
- title 어트리뷰트에 설명을 추가한다
<input type="text" title="아이디" />
<input type="text" title="비밀번호" />
📍22. 오류 수정
✅입력 서식 작성 시 오류로 입력 내용이 전부 사라지게 하면 안됨- 작성된 내용이 제거되지 않고, 오류가 있는 부분만 수정하도록 해야 함
✅오류가 발생한 원인을 제공해야 함예) 올바른 이메일 형식이 아닙니다 등
✅오류가 발생한 입력 서식으로 포커스가 이동해야 함
📍23. 마크업 오류 방지
태그 열고 닫음 등 마크업 문법적인 오류가 발생하지 않도록 주의해야 함
📍24. 웹 애플리케이션 접근성 준수
마크업 이외의 애니메이션 등에도 접근성을 준수해야 함