목차
1. 웹 접근성이란?
길을 걷다보면, 신호등 앞에 이런 버튼이 붙어있는 것을 본 적 있을 것이다.
호기심 삼아 눌러본 사람도 있고, 어쩌다가 남이 누르는 것을 본 사람도 있을텐데, 여튼 이 버튼을 누르면 현재 신호에 맞추어 건너도 된다, 건너면 안된다라는 음성 신호가 나온다.
신호를 볼 수 없는 시각 장애인들이 제대로 보행 신호에 접근하여 안전하게 길을 건너가게 하기 위한 장치인 것이다.
웹 접근성(Web Accessibility)이란, 길 건너는 것을 도와주는 음성 신호기처럼 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하고 도와주는 것을 뜻한다. 물론 비장애인이나 청년층도 같은 불편함을 겪을 수 있기 때문에, 반드시 장애인이나 고령자들에게만 해당되는 것은 아니다.
웹 접근성을 갖추면 웹에 접근했을 때 그 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다. 결국 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것이다.
아쉽게도, 우리나라는 웹 접근성이 썩 좋은 편은 아니다.
당장 인터넷 쇼핑몰에 들어가 봐도 상품 정보는 모두 이미지로 되어있고, 텍스트라 해봤자 상품명과 가격 정도밖에 되지 않는다.
하지만 외국 사이트 같은 경우 대부분의 상품 정보를 텍스트로도 표기하고 있다.
덕분에 텍스트를 음성으로 변환시켜 시각 장애인들이나 고령자들도 쉽게 음성으로 상품 정보를 알 수 있다.
그렇다면 웹 접근성은 왜 향상시켜야 하는 것일까?
1. 사용자층 확대
웹 접근성을 향상시키면 다양한 계층의 사람들이 웹 페이지를 이용할 수 있다. 최근 스마트폰 보급률이 높아지고, 다양한 어플리케이션과 기능들이 개발되며 기존에 정보를 얻기 어려웠던 사람들도 보다 쉽게 정보를 얻을 수 있게 되었다. 이에 맞물려 웹 접근성을 높인다면, 이용자수가 증가하며 추가적인 이익을 발생시킬 수 있다.
2. 다양한 환경 지원
정보 소외 계층이 아니더라도 마우스를 두고 왔다거나, 안경이 고장났다거나 하는 사소한 이유로 정보에 접근하기 힘든 경우가 있다. 웹 접근성을 향상시킨다면 다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대되고, 누구나 편하게 사이트를 이용할 수 있게 될 것이다.
3. 사회적 이미지 향상
기업의 사회적 책임에 대한 중요성이 점점 증가하고 있는 상황에서, 웹 접근성 확보를 통해 기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있다. 기업의 사회적 이미지가 향상되면 그만큼 이용자 수의 증가는 물론 충성 고객을 확보할 수 있는 가능성이 늘어나게 된다.
2. 웹 접근성 지침
A. 인식의 용이성(Perceivable)
-모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
1. 적절한 대체 텍스트 : 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
2. 자막 제공 : 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
3. 색에 무관한 콘텐츠 인식 : 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
4. 명확한 지시사항 제공 : 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
5. 텍스트 콘텐츠 명도 대비 : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
6. 자동 재생 금지 : 자동으로 소리가 재생되지 않아야 한다.
7. 콘텐츠 간 구분 : 이웃한 콘텐츠는 구별될 수 있어야 한다.
B. 운용의 용이성(Operable)
-사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
8. 키보드 사용 보장 : 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
9. 초점 이동 : 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
10. 조작 가능 : 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
11. 응답 시간 조절 : 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
12. 정지 기능 제공 : 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
13. 깜빡임과 번쩍임 사용 제한 : 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
14. 반복 영역 건너뛰기 : 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
15. 제목 제공 : 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
16. 적절한 링크 텍스트 : 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
C. 이해의 용이성(Understandable)
-콘텐츠는 이해할 수 있어야 한다.
17. 기본 언어 표시 : 주로 사용하는 언어를 명시해야 한다.
18. 사용자 요구에 따른 실행 : 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
19. 콘텐츠 선형 구조 : 콘텐츠는 논리적인 순서로 제공해야 한다.
20. 표의 구성 : 표는 이해하기 쉽게 구성해야 한다.
21. 레이블 제공 : 사용자 입력에는 대응하는 레이블을 제공해야 한다.
22. 오류 정정 : 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
D. 견고성(Robust)
-웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
23. 마크업 오류 방지 : 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
24. 웹 애플리케이션 접근성 준수 : 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
3. WAI-ARIA
WAI-ARIA는 웹 접근성을 향상할 수 있는 방법 중의 하나로, WAI(Web Accessibility Initiative)에서 발표한 RIA (Rich Internet Applications)환경에서의 웹 접근성 기술 규격이다.
이때 WAI란 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관을 말하며, RIA는 편리하고 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션을 말한다.
WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여하여 웹 접근성을 향상시킬 수 있다.
- 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 해준다.
- AJAX처럼 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상할 수 있다.
WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해 줄 수 있다.
- 역할(role) : HTML 요소의 역할을 정의하는 속성
- 상태(state) : 요소의 현재 상태를 나타내는 속성
- 속성(property) : 요소의 특징을 정의하는 속성(attribute).
1. 역할(Role)
HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해 줄 때 사용할 수 있는 속성(attribute).
2. 상태(State)
어떤 HTML 요소의 현재 상태(expanded, selected, hidden 등)
3. 속성(Property)
요소의 정보(img, button의 기능 및 설명 등)
'Frontend Study' 카테고리의 다른 글
| [FE_Bootcamp] 37일차_Web Server (0) | 2023.05.01 |
|---|---|
| [FE_Bootcamp] 55일차_네트워크 (0) | 2023.05.01 |
| [FE_Bootcamp] 52일차_Web 표준 (1) | 2023.04.28 |
| [FE_Bootcamp] 50일차_Redux 상태관리 (0) | 2023.04.26 |
| [FE_Bootcamp] 31일차_클라이언트-서버 통신 (0) | 2023.04.24 |
