✅ TIL
- 웹 접근성
웹 콘텐츠 접근성 지침 - WAI-ARIA
웹 접근성
웹 접근성을 확보할 때 가장 중요한 것은 시맨틱한 HTML을 작성하는 것이다.
WAI-ARIA는 보조적인 역할로만 사용해야 한다.
1️⃣ 웹 접근성 (Web Accessibillity)
웹 정보에 접근할 때 사용자가 항상 동등한 수준의 정보를 제공받을 수 있는지 판단하는 기준
웹 접근성을 갖추기 위해 노력하면 정보의 평등을 비롯하여 여러 효과를 기대할 수 있다.
=> 서비스 이용자 수가 증가한다.
1. 사용자층 확대
장애인과 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 되어 새로운 고객층을 확보한다.
2. 다양한 환경 지원
정보 접근에 제한을 받는 다양한 환경, 다양한 기기에서 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대된다.
3. 사회적 이미지 향상
기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있다.
2️⃣ 웹 콘텐츠 접근성 지침
WCAG(Web Content Accessibility Guidelines) 2.0을 기반으로 수정한 한국형 웹 콘텐츠 접근성 지침 2.1
http://www.websoul.co.kr/accessibility/WA_guide21.asp
- 인식의 용이성(Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
- 운용의 용이성(Operable) : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
- 이해의 용이성(Understandable) : 콘텐츠는 이해할 수 있어야 한다.
- 견고성(Robust) : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
3️⃣ WAI-ARIA
WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
RIA: 웹 애플리케이션
즉, WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격을 의미한다.
WAI-ARIA는 HTML 태그 내부에 속성을 추가함으로써 의미를 부여해줄 수 있다.
- 역할: HTML 요소의 역할을 정의하는 속성
- 상태: 요소의 현재 상태를 나타내는 속성
- 속성: 요소의 특징을 정의하는 속성
1. 역할 (role)
HTML 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시한다.
시맨틱 요소 본연의 의미를 임의로 바꾸지 않아야 한다.
<div role="button">버튼</div>2. 상태 (state)
aria-selected: 여러 개의 선택 가능한 요소 중에서 선택 상태인 요소를 표시한다.
aria-expanded: 아코디언 UI가 펼쳐진 상태인지 표시한다.
aria-hidden: 요소가 숨김 상태인지 표시한다.
<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>3. 속성 (property)
aria-label: 텍스트 없이 이미지로만 만들어진 버튼 등에 요소에 대한 정보나 의미를 부여해줄 수 있다.
<button aria-label="닫기"/> <img src="X.png" /> </button>aria-live: 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시한다.
alert, moddal, dialog 등의 역할을 하는 영역 또는 AJAX를 사용하는 영역 등에 사용한다.
화면의 동적인 요소를 시각장애인에게 알려줄 수 있다.polite: 스크린 리더가 현재 읽고 있는 내용을 모두 읽은 뒤에 갱신된 내용을 사용자에게 전달한다.assertive: 스크린 리더가 현재 읽고 있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달한다.
