티스토리 뷰

Programming/Front-End

웹 접근성 체크 사항

smyoon 2020. 8. 5. 14:23
  1. <img>, <input type="image">, <area> 태그의 경우에는 alt에 적절한 대체 텍스트를 적어줍니다.
  2. 특수문자, 기호, 조직도, 차트 등 복잡한 컨텐츠의 경우 숨김(display: none) 처리로 대체 텍스트를 적어줍니다.
  3. 멀티미디어 콘텐츠(영상, 유튜브)에는 자막이나 대본, 수화를 나타내야 합니다.
  4. 콘텐츠는 색에 관계 없이 인식될 수 있어야 하며 차트, 슬라이드 버튼 선택 여부, 페이지네이션, 탭 등 색이 아닌 굵기나 모양, 테두리 등으로 구분될 수 있도록 나타내야 합니다.
  5. 텍스트, 이미지 내부 텍스트, 의미있는 이미지는 배경 간의 명도 대비가 4.5:1 이상이여야 합니다.
  6. 배경음은 가급적 사용하지 않습니다.
  7. 이웃한 콘텐츠를 구별할 수 있도록 해야합니다.
  8. 모든 기능은 키보드만으로도 사용할 수 있게 해야합니다. 
  9. 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 하며 시간 연장이 불가능한 콘텐츠의 경우에는 충분한 시간을 제공하거나 종료 안내를 해야합니다. 
  10. 자동으로 변경되는 콘텐츠(ex, 슬라이드)는 움직임을 제어할 수 있는 기능을 제공 해야합니다. 
  11. 깜빡임과 번쩍임 효과는 가급적 피합니다.

  12. 기본 언어를 표시합니다.

    1) HTML 4.01/HTML5 표준

    <html lang=”ko”>

    2) XHTML 1.0 표준

    http://www.w3.org/1999/xhtml” xml:lang=”ko” lang=”ko”>

    3) XHTML 1.1 표준

    http://www.w3.org/1999/xhtml” xml:lang=”ko”>

    4) 페이지 내 다른 언어가 존재하는 경우

    해당 요소에 lang속성으로 적절한 언어를 제공한다.

  13. 사용자가 의도하지 않은 기능은 실행되지 않아야 합니다. (레이어 팝업의 경우 최 상단에 마크업, select에 onchange 이벤트 적용)
  14. 탭 콘텐츠 : 제목 - 내용 - 제목 - 내용 순서로 마크업, 더보기가 존재하는 콘텐츠 : 제목 - 내용 - 더보기 순서로 마크업
  15. 사용자 입력에는 대응하는 label을 제공해야 합니다.

    ex)<label for=”user_id”>아이디</label> <input type=”text” id=”user_id” /> or <input type=”text” id=”user_id” title=”아이디” />

  16. 오류를 정정할 수 있도록 안내해주어야 하며 오류 발생 구간으로 초점이 이동하게끔 해야합니다.

'Programming > Front-End' 카테고리의 다른 글

반응형 이미지맵 (jQuery RWD Image Maps) + 이미지맵 사이트  (0) 2021.09.14
DOM(Document Object Model) 구조  (0) 2020.08.21
웹 캐시 방지하는 방법  (0) 2020.08.04
JS / CSS 파일 캐시 방지하기  (0) 2020.08.04
웹 접근성과 웹 표준  (0) 2019.11.20