웹 접근성

February 07, 2021

웹 접근성이란 어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것이다.

1. 웹 접근성이란

아직 우리나라의 많은 웹 사이트들이 웹 접근성을 고려하지 않음으로써 장애인 및 고령자들의 인터넷 이용률이 비장애인에 비해 크게 낮다고 한다.

웹 접근성 프로젝트 시작하기 책(24p, 25p)에서 웹 접근성을 고려해야 할 많은 사항 중에 일부를 가져왔다.

장애유형	특징	보완
시각 (전맹)	시력이 전혀 없음	콘텐츠를 음성으로도 변환될 수 있는 형태로 제공
시각 (저시력)	확대 기능 등을 사용하여 시력 보강 가능한 정도	충분한 크기의 서체 제공 및 서체 크기 조절 기능 지원
시각 (고령자)	노화로 인한 시력 감퇴	충분한 크기의 서체 제공 및 서체 크기 조절 기능 지원
시각 (색맹)	적녹색맹과 같이 색에 의한 내용 구분 불가능	명암, 패턴만으로도 구별할 수 있는 콘텐츠 제공 등
청각 (난청)	보청기로 청력 보강 가능한 정도	자막을 제공하거나 음량 조절 가능 지원
청각 (고령자)	노화로 인한 청력 감퇴	자막을 제공하거나 음량 조절 가능 지원

2. 웹 접근성의 필요성과 평가 도구

웹 접근성 보장은 법률에 명시된 의무사항이다. 장애인차별금지법에 따라 2008년 4월 11일 시행한 후 2009년 4월 11일부터 웹 접근성을 준수해야 하고, 2015년 4월 11일 이후 모든 공공기관과 법인의 웹 사이트에서 ‘웹 접근성 준수가 의무화’ 되었다고 발표되었다.

웹 접근성 평가 도구로는 웹 접근성 연구소에서 대표적으로 몇 가지를 알려주고 있다. 도구의 특징은 다음과 같고, 설치 방법은 사이트에 자세히 나와 있다.

도구	특징
Open-WAX	브라우저 플러그인 방식, 1 페이지씩 검사, 16개 항목 검사
WAVE	서비스 페이지 및 브라우저 플러그인 방식, 1 페이지씩 검사, 검사 결과를 요청한 페이지 위에 직관적인 형태로 표시
AChecker	서비스 페이지 제공, URL, HTML파일, HTML 마크업 평가지원, 옵션을 제공하여 접근성 준수수준 등을 지정하여 평가 가능
Colour Contrast Analyser	응용 소프트웨어 방식, 명도대비 검사

이 외에도 화면 낭독기, 스크린 리더와 같은 도구가 있다. 이것은 시각장애인이 귀로 들을 수 있도록 화면에 나타나는 정보들을 음성으로 출력해준다. 화면에 나타나는 정보들은 웹 개발자가 웹 접근성을 얼마만큼 준수해서 개발했느냐에 따라 제공해주는 정보의 양과 정확도가 달라진다.

3. 적용과 검증

이번 파트는 웹 접근성 프로젝트 시작하기 책에 나와 있는 일부를 소개한다.

키보드 접근성 보장하기

마우스를 사용하기 위해서는 손의 움직임이 매우 정교해야 한다. 손이 조금이라도 떨리거나 힘이 부족하다면 마우스는 다루기 어려운 도구가 된다. 마우스를 클릭할 수 있는 콘텐츠는 키보드로도 이용할 수 있어야 하며, 드래그 앤드 드롭처럼 마우스의 특성을 이용한 기능도 키보드로 실행할 수 있어야 한다.

링크, 버튼 메뉴

네이버 홈에 들어가서 Tab을 계속 누르면 두 번째 이미지에 있는 더 보기에 focus가 된다. 이때 Enter나 Space Bar 키를 누르면 더보기 기능이 실행되면서 더 보기는 접기로 바뀌고, 해당 메뉴들이 아래로 펼쳐진다.
즉, 마우스를 클릭하면 동작하는 링크, 버튼, 메뉴들을 키보드의 Tab 키로도 조작할 수 있어야 한다. 포커스가 있는 링크, 버튼, 메뉴는 Enter나 Space Bar 키로 기능을 실행 할 수 있어야 한다.
입력 서식

네이버 로그인 화면에서 로그인 상태 유지에 focus가 될 때까지 Tab을 계속 누른다. 그러면 왼쪽 이미지처럼 로그인 상태 유지에 focus가 되고 Space Bar 키를 누르면 오른쪽 이미지처럼 로그인 상태 유지 라디오 버튼이 체크된다.
이처럼 입력 서식 요소에 키보드 접근성을 보장하기 위해서는 아래 3가지 조건을 충족시켜야 한다.
1. 입력 서식 요소에 키보드의 Tab 키로 focus를 둘 수 있다.
2. 입력 서식 요소의 값을 방향키 또는 Space Bar로 변경할 수 있다.
3. 이 외에도 키보드로 이동할 때마다 focus를 화면에 표시해줘야 한다.

동영상 플레이어

실행동작	키 조작
컨트롤 버튼 접근	Tab 키
컨트롤 버튼 실행	Enter키 또는 Space Bar
재생 막대 조절	왼쪽, 오른쪽 방향키
볼륨 막대 조절	위, 아래 방향키

동영상 플레이어는 키보드 접근성을 보장하기 위해 아래 2가지 조건을 충족시켜야 한다.

동영상 플레이어에 키보드로 접근할 수 있다.
동영상 플레이어의 컨트롤을 키보드로 조작할 수 있다.

쉽고 빠른 탐색 환경 제공하기

웹 페이지의 제목 지정하기

스크린 리더와 점자 정보 단말기가 웹 페이지를 탐색할 때 가장 먼저 접근하는 콘텐츠다. 웹 브라우저 창이 여러 개 열렸을 때 원하는 페이지를 쉽게 찾을 수 있다.

위 이미지를 보면 구글에서 웹 접근성, 웹 접근성이란, 웹 접근성 필요성에 대해 검색했을 때 표시해준 제목이다. 다시 이 페이지를 찾으려고 할 때 제목만 보고 쉽게 찾을 수 있다. 하지만 모든 브라우저의 제목이 웹 접근성으로만 표시한다면 다시 찾을 때는 시간이 소요될 것이다.

브라우저의 제목은 html의 <title> 요소로 사용되는데, <title>네이버 me: 내 소식과 관심 정보가 모이는 나만의 네이버 홈</title>처럼<title> 요소에 콘텐츠 내용이 잘 나타날 수 있는 웹 페이지 제목을 지정해줘야 한다.

콘텐츠 블록에 제목 지정하기

웹 콘텐츠는 워드 문서와 형식이 유사해서 웹 문서라고도 불린다. 구성이 짜임새 있는 문서에는 장과 절마다 제목을 제공해줘야 한다. 웹 콘텐츠 역시 콘텐츠 블록마다 제목을 제공할 수 있으며, html의 <h1> 요소부터 <h6> 요소까지 6단계로 나뉘어 사용 할 수 있다.

시각장애 환경에서는 전체 콘텐츠를 모두 탐색하는 데 상당한 시간이 소요되므로 원하는 콘텐츠에 쉽게 접근 할 수 있게 콘텐츠 블록의 제목을 반드시 제공해야 한다.

네이버 사전 웹페이지에서는 <h1> ~ <h3>의 요소가 사용되었다.
- <h1>NAVER 사전</h1>
- <h2>어학사전</h2>
- <h3>국어사전 단어</h3>

기타

이미지에 alt(Alternate) 사용하기

alt 속성은 이미지의 대안을 나타낸다. 이미지의 주소가 외부의 주소이고, 서버에 문제가 있어서 이미지를 제대로 못 읽어올 경우 alt 속성의 값으로 대체해서 보여준다. 아래 파란 하늘은 이미지를 제대로 불러오지 못해 alt 속성의 값으로 표시됐다.

또, 시각장애인은 이미지를 볼 수 없기 때문에 alt 속성의 값을 스크린 리더를 통해서 듣는다. 스크린 리더가 어떻게 읽는지는 좋은 예와 나쁜예가 있다.
- 좋은 예
  
  <img src="text.jpg alt="파란 하늘" /> 스크린 리더가 파란 하늘 이미지라고 읽는다.
- 나쁜 예
  
  <img src="text.jpg alt="파란 하늘 이미지" /> 스크린 리더가 파란 하늘 이미지 이미지라고 읽는다.
alt속성을 스크린 리더가 <img> 요소에 의해 이미지라는 단어를 붙여서 읽기 때문에, 이미지라는 단어를 제외하고 작성해야 한다.

4. 마무리

KOSIS(국가통계포털)의 자료에 의하면, 2019년 기준으로 일반인들의 인터넷 이용률은 91.8%이며, 취약계층의 인터넷 이용률은 76.1%이다. 2013년 기준으로 56.7%보다 많이 증가했지만, 아직 부족하다. 여기서 취약계층이라고 하면 장애인, 저소득층, 농어민, 고령층을 말한다.

글에 작성한 접근성 적용과 검증 방법은 극히 일부에 불과하다. 동영상 실시간 자막, 자동완성, 키보드 포커스를 논리적으로 이동시키기 등 신경 써야 할 부분은 너무 많다. 그럼에도 웹에 정보를 제공하는 사람으로서는 모든 사람이 동등하게 웹 정보에 접근 할 수 있도록 웹 접근성을 고려하여 개발해야 한다.