웹 접근성(Web Accessibility)

Tuesday. August 13, 2019 - 2 mins

웹 접근성(web accessibility)

어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것으로 특정 대상에 한정되지 않고 모든 사용자를 대상으로 유익하게 하는것이 목적입니다.

이미지(그림, 사진, 로고, 차트, 다이어그램, 배경처리된 이미지, 동적으로 제공하는 이미지, 플래시의 Name값 등)에 적절한 대체 텍스트를 제공하는가?
- 전맹, 저시력의 경우 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등을 활용하여 화면을 읽음. 태그내 alt속성의 값을 읽어주기때문에 alt속성을 제공하지 않으면 파일명을 읽어주어 어떤 이미지 인지 알수없기에 반드시 alt속성을 제공해야함. 또한 이미지와 최대한 동일한 내용으로 제공해주어야하고 의미없는 불릿이나 아이콘등의 이미지에는 alt속성을 빈값으로 제공해야함.
  
  사례
포커스가 논리적인 순서로 이동하는가?
- 포커스 이동만으로 웹을 탐색할 때 모든 요소에 논리적인 순서(위→ 아래, 왼쪽 → 오른쪽, 메뉴 → 내용 등)로 접근 가능해야 하며, 포커스가 같은 영역에서 맴돌거나 더 이상의 이동이 어려운 경우가 발생하지 않도록 해야 함.
  
  사례

기존

<div id="skipNav">
	<a class="skipgnb" href="#gnb">Go to GNB</a>
	<a class="skipcont" href="#container">Go to CONTENTS</a>
</div>

a링크로 이동시 포커스가 선택되지않으므로 스크립트를 이용하여 강제로 주는 방법밖에 없음. 해당컨텐츠내 타이틀영역또는 링크영역으로 포커스줄것.

포커스를 시각적으로 구별할 수 있는가?
- this.blur()나 outline:none 스타일을 지정하여 브라우저에서 기본적으로 제공되는 포커스 표시를 없애지 않도록 함.
  
  사례
W3C Validation을 통과하는가?
<table에 <caption이 적절하게 선언되었는가?
<thead,<tbody,<tfoot으로 그룹핑 되어 있는가? (th로 그룹핑 안될경우 <thead생략가능, tbody만 있을 경우 <tbody생략 가능)
표의 머릿글은 <th>로 마크업 했으며 scope 속성을 제공하는가?
HTML 코드에 주언어 관련 속성(lang)이 선언되어 있는가?
주요 콘텐츠 블록의 제목을 <h1>~<h6>로 마크업했는가?
폼 콘트롤 요소에는 적절한 label을 제공하며, 폼 콘트롤 요소의 id값과 의 for값을 동일하게 제공하는가?