웹접근성 체크리스트

0. 크로스브라우징을 고려하여 html, css가 작성되었는가?
- 서울시 기준 ie11까지는 고려해야함. ie11, edge, chrome, firefox에서 구동 확인)
- W3C 마크업, CSS 검사 서비스 통과

1. 문서 기본 언어가 (html lang="ko") 로 설정 되었는가?

2. img에 alt 속성이 적절히 들어갔는가?
(디자인을 위한 의미없는 img의 경우 alt="" 로 값 비우기)

3. 페이지 이동은 a, 그 외는 button으로 적절히 사용되었는가? a태그로 tab menu등 구현시  onclick="return false;" 등 포커스 이동을 막는것이 쓰였는가?

4. table
- scope 속성이 잘 쓰였는가 ? (thead 안에 th의 경우 scope="col" , tbody 안에 th의 경우 scope="row" 적용)
- 테이블에 대한 요약설명 <caption></caption>이 들어갔는가 ?  caption  혹은 summary 둘중에 하나는 작성.

5. 시맨틱 태그, 헤딩 태그가 적절히 씌였는가 ? 
(h1~h6 쓰기, 시멘틱 태그 써서 섹션 나눠서 마크업하기 등)

6. form 내부에 label, fieldset, legend 등이 사용되었는가?
( form 내부에 동일한 lable을 위한 input들은 fieldset 으로 묶기. (legend, lable 잘 쓰기)  label로 각 input을 지정하기 어려운 경우 title 써주기)

7. 키보드 접근 테스트가 완료되었는가?
- 탭의 이동 순서도 신경써야함! (일반적으로 페이지의 좌측 상단 영역에서 우측 하단 영역으로 이동) tab은 다음, shift+tab은 이전. focus 됬을때 outline 제거 속성이 있으면 삭제.

8. skip nav가 있는가 ?

9. 새 창으로 열리는건 title에 새 창으로 열린다고 표시되었는가?
ex) <a href=“…” title=“새 창”>개인정보처리방침</a>

10. 자동재생 배경음악이 없는가?

11. 명도대비가 확실한가?
(명도 대비 : 저시력자와 고령자를 위해, 콘텐츠와 배경 간의 명도 대비는 4.5:1 이상)
http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer

 

---

 

참고)

https://nuli.navercorp.com/education - 직군별 체크리스트 
https://nuli.navercorp.com/education/tools - 웹접근성 진단도구
https://germweapon.tistory.com/403 - 기획자가 챙겨야 할 웹 접근성