일반적을 웹 접근성(Web Accessibility)은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻합니다. 하지만 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있습니다.
결국 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것입니다.
: 모든 콘텐츠는 사용자가 인식할 수 있어야 합니다.
: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 합니다.
alt
속성 사용하기<img src="이미지 주소" alt="대체 텍스트" />
alt
값으로 빈 문자열을 주어 스크린 리더가 인식하지 않게 합니다.: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 합니다.
track
요소를 사용하여 자막 파일 불러오기<video ...>
<track src="자막.vtt" kind="captions" />
</video>
: 콘텐츠는 색에 관계 없이 인식될 수 있어야 합니다.
: 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 합니다.
: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1이상이어야 합니다.
: 자동으로 소리가 재생되지 않아야 합니다.
: 이웃한 콘텐츠는 구별될 수 있어야 합니다.
: 사용자 인터페이스 구성 요소는 조작 가능하고 내비게이션 할 수 있어야 합니다.
: 모든 기능은 키보드만으로도 사용할 수 있어야 합니다.
: 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 합니다.
: 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 합니다.
: 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 합니다.
: 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 합니다.
: 초당 3 ~ 50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 합니다.
: 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 합니다.
: 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 합니다.
: 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 합니다.
: 콘텐츠는 이해할 수 있어야 합니다.
: 주로 사용하는 언어를 명시해야 합니다.
HTML
요소에 lang
속성을 사용해서 제공하면 됩니다.<html lang="ko">
lang
속성을 표기합니다.: 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 합니다.
페이지 진입 시에 팝업이 뜨지 않게 해야 하며, 화면을 가리는 레이어 창(모달)이 있는 경우, 가장 상단에 제공하여 가장 먼저 제어할 수 있도록 해야 합니다.
스크린 리더 사용자는 새 창이 떴을 때 이를 인지하지 못하고 기존 페이지를 계속 보고있다고 생각할 수 있습니다. 따라서 새 창임을 알려줄 수 있어야 합니다.
<a href="...">페이지<span class="blind">새 창</span></a>
title
속성으로 새 창 작성하기<a href="..." title="새 창">페이지</a>
target="_blank"
속성 넣기<a href="..." target="_blank">페이지</a>
글은 제목, 내용 순서로 제공되는 것이 논리적으로 맞습니다.
<div>탭1</div>
<div>탭 1 관련 내용</div>
<div>탭2</div>
<div>탭2 관련 내용</div>
: 표는 이해하기 쉽게 구성해야 합니다.
테이블 요소 안에 caption
요소를 사용해서 표에 제목을 제공하기
표의 셀은 제목 셀과 데이터 셀이 구분되도록 구성해야 합니다. 제목 셀은<th>
, 데이터 셀은 <td>
를 사용하면 됩니다.
표의 구조가 복잡할 경우, 최대한 간소화하거나 scope
혹은 id
와 headers
속성을 사용하여 작성합니다.
: 사용자 입력에는 대응하는 레이블을 제공해야 합니다
사용자가 정보를 입력하는 상황에, 어떤 정보를 입력해야 하는지 정확하게 알 수 없으면 입력이 불가능합니다.
<input>
요소에 value
나 placeholder
속성만 설정하는 것은 적합하지 않습니다.
(x) <input type="text" placeholder="아이디" />
<input>
요소에 id
를 설정하고 <label>
요소의 for
속성으로 연결해줍니다.
(o) <lable for="user_id"> 아이디 </lable>
<input id="user_id" type="text" placeholder="아이디" />
title
속성을 사용합니다.
(o) <input type="text" title="아이디" placeholder="아이디" />
WAI-ARIA의 aria-label
속성을 사용합니다.
(o) <input type="text" aria-label="아이디" placeholder="아이디" />
WAI-ARIA의 경우 꼭 필요한 경우가 아니라면 사용하지 않는 것이 좋습니다. 다른 HTML 속성이나 요소로 대체 가능한 경우에는 해당 속성이나 요소를 우선적으로 사용합니다.
: 입력 오류를 정정할 수 있는 방법을 제공해야 합니다.
작성 중, 혹은 제출 시 오류가 발생했을 때 입력했던 내용이 사라지지 않고 유지되도록 해야합니다.
오류가 발생한 경우 사용자에게 오류 발생 원인을 알려줘야 합니다.
오류가 발생한 경우 오류가 발생한 위치로 초점이 이동해야 합니다.
: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 합니다.
: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 합니다.
: 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 합니다.
WAI(Web Accessibility Initiative): 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA(Accessible Rich Internet Applications): 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 엑세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
정리하자면, WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격입니다.
WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있습니다. WAI-ARIA 속성에는 다음과 같은 세 가지 분류가 있습니다.
HTMl의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute)입니다.
<div role="button">div이지만 button으로 사용되는 요소</div>
// 컴포넌트 구조를 간소화한 모습입니다.
<div>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</div>
<div>Tab menu ONE</div>
<div>Tab menu TWO</div>
<div>Tab menu THREE</div>
다음의 경우 WAI-ARIA를 사용해서 이 구조가 탭의 역할을 하고 있음을 표시해줄 수 있습니다.
<div role="tabList">
<li role="tab">Tab1</li>
<li role="tab">Tab2</li>
<li role="tab">Tab3</li>
</div>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>
<div role="tabList">
<li role="tab" aria-selected="true">Tab1</li>
<li role="tab" aria-selected="false">Tab2</li>
<li role="tab" aria-selected="false">Tab3</li>
</div>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>
이 외에도 아코디언 UI가 펼쳐진 상태인지 표시해주는 aria-expanded
, 요소가 숨긴 상태인지를 표시하는 ara-hidden
등의 속성이 있습니다.
aria-label
은 말 그대로 요소에 라벨을 붙여주는 기능을 합니다. 해당 요소를 사용하면 다음과 같이 의미를 부여해줄 수 있습니다.<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>
aria-live
속성은 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시합니다. 즉, 브라우징 도중에 내용을 띄우는 alert
, modal
, dialog
와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 갱신하는 영역에 사용하는 속성입니다.속성 값으로는 polite
, assertive
, off(default)
가 있습니다.
1. polite
: 스크린 리더가 현재 읽고 있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달합니다.
2. assertive
: 스크린 리더가 현재 읽고 있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달합니다.