웹 접근성의 개념
웹 접근성(Web Accessibility)의 의미
- 일반적으로 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻함
- 하지만, 비장애인들도 환경에 따라 정보 접근에 제한을 받을 수 있음
→ 결국 웹 접근성의 궁극적인 목표는 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것임
웹 접근성을 갖출 때 효과
1. 사용자층 확대
- 웹 접근성을 확보하면 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있으므로 그만큼 사이트의 이용자를 늘릴 수 있고, 새로운 고객층을 확보할 수 있음
2. 다양한 환경 지원
- 웹 접근성을 향상시키면 다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대되고, 자연스럽게 서비스의 이용자 수 증가를 기대할 수 있음
3. 사회적 이미지 향상
- 기업의 사회적 책임에 대한 중요성이 점점 증가하고있는 상황에서, 웹 접근성 확보를 통해 기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있음
- 기업의 사회적 이미지가 향상되면 그만큼 이용자 수의 증가는 물론 충성 고객을 확보할 수 있는 가능성이 늘어나게 됨
웹 콘텐츠 접근성 지침
세계 표준
WCAG(Web Content Accessibility Guidelines) 2.0
한국형 지침
WAI-ARIA
WAI-ARAI의 의미
-
WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격
-
WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
-
ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
-
RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션
→ SPA를 의미하는 경우가 많음
필요성
-
HTML 요소에 추가적으로 의미를 부여하기 때문에 보조적으로 사용하면, 웹 접근성을 향상할 수 있음
-
시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황
- WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와줌
- 단, WAI-ARIA는 보조적인 역할로만 사용하기
- 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 함
-
동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있음
- SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달할 수 있음
사용법
HTML 태그 내부에 속성(attribute) 추가해서 의미 부여하기
역할(role)
- HTML 요소의 역할을 정의하는 속성
- HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute)
예시
<div>요소를 버튼으로 사용했다면, 해당 요소가 버튼 역할을 하고 있음 표시하기
<div role="button">div이지만 button으로 사용되는 요소</div>- 탭 컴포넌트의 경우
<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>주의사항
- HTML 요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 설명하지 않기
<button role="button">button인 요소</button>- 시맨틱 요소 본연의 의미를 임의로 바꾸지 않기
<h1 role="button">h1인 요소</h1>상태(state)
요소의 현재 상태를 나타내는 속성
aria-selected: 여러 개의 선택 가능한 요소 중에서 선택 상태인 요소를 표시하는 속성
<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>aria-expanded: 아코디언 UI가 펼쳐진 상태인지 표시aria-hidden: 요소가 숨김 상태인지 표시
속성(property)
요소의 특징을 정의하는 속성(attribute)
aria-label: 요소에 라벨 붙이기
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>aria-live: 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시- 속성값
off(default)polite: 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달assertive: 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달
- 속성값
더 알아보기
mdn, Using ARIA: Roles, states, and properties
W3.org ARIA in HTML
