[Web] 웹 접근성이란 무엇일까?

월드 와이드 웹의 창시자 팀 버너스 리(Tim Berners-Lee)는 웹을 아래와 같이 정의하였다

"장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간 "

즉 웹 접근성은 신체적 장애 여부와 상관없이 누구나 웹 사이트를 이용할 수 있어야 한다는 것을 의미한다.

예를 들어 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해한다. 하지만 스크린 리더는 스스로 웹페이지의 내용을 분석하지 못한다.

'메뉴'라는 텍스트 대신 메뉴라고 그려진 이미지를 사용할 경우 비 시각 장애인의 눈에는 메뉴라고 인식이 가능하지만 소프트웨어의 입장에서는 그저 이미지일 뿐이기 때문에 그 이미지 안의 내용을 시각 장애를 가진 사람에게 전달할 수 없다.

따라서 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이미지가 어떤 내용인지 아래와 같이 설명을 추가해야 한다.

<img src="images/button.png" alt="메뉴 버튼" />

위의 상황에서는 이미지를 예로 들었지만 사실 웹 접근성에서는 아래와 같은 코드를 권장한다. 버튼 태그를 쓰고 있기 때문에 스크린 리더가 메뉴라는 텍스트가 담긴 '버튼'이라는 것을 사용자에게 올바르게 전달할 수 있기 때문이다.

<button>버튼</button>

이처럼 장애가 있는 경우를 포함한 여러 사용자 시나리오에도 웹 페이지를 원활하게 이용할 수 있도록 지켜야 하는 사항을 웹 접근성이라고 한다.

📘 웹 접근성의 4가지 핵심 지침(WCAG)

◾ 인지성(Perceivable)
인지성이란 정보와 사용자 인터페이스 컴포넌트는 사용자가 인지할 수 있는 방식으로 제공되어야 함을 의미한다.

◽ 대체 텍스트: 텍스트가 아닌 콘텐츠가 있을 경우 대체 콘텐츠와 함께 제공되어야 한다.

이는 대체 콘텐츠를 사람이 인식할 수 있는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공하기 위함이다.

◽ 시간 기반 미디어: 시간을 바탕으로 한 미디어에 대한 대체제가 제공되어야 한다.

◽ 응용성: 콘텐츠가 정보나 구조의 손실 없이 다른 방식(간단한 형태)들로 표현할 수 있어야 한다.

◽ 명료성: 사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.

◾ 운용성(Operable)

운용성이란 사용자 인터페이스 요소와 탐색은 운용이 가능해야 함을 의미한다.

◽ 키보드 접근성: 키보드로 모든 기능을 사용할 수 있도록 해야 한다.

◽ 충분한 시간: 사용자가 콘텐츠를 읽고 사용할 충분한 시간이 제공되어야 한다.

◽ 발작과 신체 반응: 사용자가 발작 및 신체적 반응을 일으킬 가능성이 있는 콘텐츠는 제작하지 않아야 한다.

◽ 탐색 가능성: 사용자가 탐색하고, 필요한 내용을 찾고, 어느 부분을 보고 있는지 알 수 있는 방법이 제공되어야 한다.

◾ 이해성(Understandable)

이해성이란 사용자 인터페이스의 정보와 운용은 이해할 수 있도록 제공되어야 함을 의미한다.

◽ 가독성: 텍스트로 이루어진 콘텐츠는 이해하기 쉬워야 한다.

◽ 예측성: 웹 페이지는 사용자가 예측할 수 있는 방향으로 보이고 작동하도록 제공되어야 한다.

◽ 입력 도움: 사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.

◾ 내구성(Robust)

내구성이란 콘텐츠는 보조 기술을 포함한 다양한 사용자 보조기기에 의존하여 해석될 수 있도록 충분한 호환성을 가져야 함을 의미한다.

◽ 호환성: 보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 최대화해야 한다.

📘 웹 접근성을 위해 사용되는 보조기기

- 자막, 스크린리더, 자동완성 기능, 마우스스틱, 색상 대비 디자인 등

📌 참고사이트

http://www.smartebiz.kr/new/subpage02_01.html

[Web] 웹 표준이란 무엇일까? (0)	2022.07.13
[CSS] Display와 Visibility 의 차이점 및 속성 (0)	2022.02.11
[CSS] CSS 전처리기 SCSS, SASS의 차이점 (0)	2022.01.26
[HTML/CSS] 긴 문자열 숨김, 생략(...) 처리 및 자동 줄 바꿈 방지 (0)	2021.09.27