웹 접근성(Web Accessibility)
웹 접근성은 장애인, 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에
비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다.
하지만 비장애인도 정보접근에 제한을 받는 불편함을 겪을 수 있다.
웹 접근성을 갖추면 웹에 접근했을때 그 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다.
웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것이다.
웹 접근성 실태
우리나라의 경우 웹 접근성 수준이 높은 정보화 수준에 비해 높지 않다.
대부분의 경우 웹 접근성에 대한 인식이 낮은편이고, 잘 지켜지지 않는 경우도 많다.
실제로 법으로 정해져 있지만 단속도 이루어지지 않는다.
웹 접근성을 갖추면 얻을 수 있는 효과
- 사용자층 확대 : 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 되며, 그만큼 사이트의 이용자를 늘리고, 새로운 고객층을 확보할 수 있다.
- 다양한 환경 지원 : 다양한 환경, 다양한 기기에서 웹사이트를 자유롭게 사용할 수 있게 되어 서비스의 사용범위가 확대대며 자연스럽게 이용자 수도 증가한다.
- 사회적 이미지 향상 : 기업이 정보 소외계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여 줄 수 있고 그만큼 이용자 수 증가 외에도 충성 고객을 확보할 수 있는 가능성이 늘어난다.
웹 접근성 지침
< 한국형 웹 콘텐츠 접근성 지침 2.1 >
💡인식의 용이성(Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
- 적절한 대체 텍스트 : 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
- 자막 제공 : 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
- 색에 무관한 콘텐츠 인식 : 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
- 명확한 지시사항 제공 : 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
- 텍스트 콘텐츠 명도 대비 : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1이상이어야 한다.
- 자동 재생 금지 : 자동으로 소리가 재생되지 않아야 한다.
- 콘텐츠 간 구분 : 이웃한 콘텐츠는 구별될 수 있어야 한다.
💡운용의 용이성(Operable) : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.- 키보드 사용 보장 : 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
- 초점 이동 : 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
- 조작 가능 : 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
- 응답 시간 조절 : 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
- 정지 기능 제공 : 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
- 깜빡임과 번쩍임 사용 제한 : 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
- 반복 영역 건너뛰기 : 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
- 제목 제공 : 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
- 적절한 링크 텍스트 : 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
💡이해의 용이성(Understandable) : 콘텐츠는 이해할 수 있어야 한다.- 기본 언어 표시 : 주로 사용하는 언어를 명시해야 한다.
- 사용자 요구에 따른 실행 : 사용자가 의도하지 않은 기능(새창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
- 콘텐츠 선형 구조 : 콘텐츠는 논리적인 순서로 제공해야 한다.
- 표의 구성 : 표는 이해하기 쉽게 구성해야 한다.
- 레이블 제공 : 사용자 입력에는 대응하는 레이블을 제공해야 한다.
- 오류 정정 : 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
💡견고성(Robust) : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.- 마크업 오류 방지 : 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
- 웹 어플리케이션 접근성 준수 : 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
WAI- ARIA : WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격
WAI(Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA(Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 웹 접근성을 갖추기 위한 기술
➡️RIA(Rich Internet Applications): 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹애플리케이션SPA
WAI-ARIA의 필요성
WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다.
1️⃣ 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 사용하면 HTML요소에 추가적인 의미를 부여해 더 원활하게 페이지를 탐색할 수 있게 해준다.
2️⃣ 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상할 수 있다.
WAI-ARIA사용법
HTML 태그 내부에 속성을 추가함으로써 의미를 부여해 줄 수 있다.
1️⃣ 역할(Role) : HTML 요소의 역할을 정의하는 속성
2️⃣ 상태(state) : 요소의 현재 상태를 나타내는 속성
3️⃣ 속성(property) : 요소의 특징을 정의하는 속성(attribute)
역할(Role)
HTML 요소 종류와 역할이 서로 맞지 않을때, 어떤 역할을 하는 요소인지 명시해 줄때 사용하는 속성<div role="button">div이지만 button으로 사용되는 요소</div> // WAI-ARIA의 잘못된 사용 예시 <button role="button">button인 요소</button> // WAI-ARIA의 잘못된 사용 예시 <h1 role="button">h1인 요소</h1>// 컴포넌트 구조를 간소화한 모습입니다. <ul> <li>Tab1</li> <li>Tab2</li> <li>Tab3</li> </ul> <div>Tab menu ONE</div> <div>Tab menu TWO</div> <div>Tab menu THREE</div> // WAI-ARIA사용 <ul role="tabList"> <li role="tab">Tab1</li> <li role="tab">Tab2</li> <li role="tab">Tab3</li> </ul> <div role="tabpanel">Tab menu ONE</div> <div role="tabpanel">Tab menu TWO</div> <div role="tabpanel">Tab menu THREE</div>상태(state)
aria-selected: 여러개의 선택가능한 요소중 선택 상태인 요소를 표시하는 속성<ul 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> </ul> <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)
aria-label: 요소에 라벨을 붙여주는 기능<button> <img src="X.png" /> </button> <button> <img src="돋보기.png" /> </button> // <button aria-label="닫기"/> <img src="X.png" /> </button> <button aria-label="검색"/> <img src="돋보기.png" /> </button>
aria-live: 해당 요소가 실시간으로 내용을 변경하는 영역인지 표시
⬆️ 속성값
polite: 스크린 리더가 현재 읽고 있는 내용을 모두 읽고 나서 변경된 내용을 사용자에게 전달
assertive: 스크린 리더가 현재 읽고 있는 내용을 중단하고 변경된 내용을 바로 사용자에게 전달
출처, 참조 : 코드스테이츠
