Chapter 3. 웹 접근성 진단도구

3. 웹 접근성 진단도구 3.1 스크린 리더 3.1.1 Narrator for Windows 3.1.2 VoiceOver for macOS 3.2 웹 브라우저 개발자 도구 3.2.1 접근성 트리(Accessibility Tree) 검사 3.2.2 대비 차(Contrast ratio) 검사 3.2.3 자동화 도구 Lighthouse를 이용한 검사 3.3 W3C Validation 3.3.1. W3C Validation 실행 3.3.2. 기타 W3C Validation 실행 방법 3.4 OpenWAX 3.4.1. OpenWAX 실행 3.4.2. 접근성 지표

3. 웹 접근성 진단도구

3.1 스크린 리더

스크린 리더란 시각장애인들이 컴퓨터를 사용할 수 있도록 도와주는 소프트웨어입니다. 스크린 리더 보조 기술을 통해 사용자는 현재 컴퓨터 화면과 키보드로 입력한 정보의 내용 그리고 마우스의 좌표 등을 음성으로 파악하고 그 정보를 바탕으로 컴퓨터를 사용합니다. 이런 스크린 리더 보조 기술을 통해 사용자는 타인의 도움 없이 독립적인 정보를 수집할 수 있습니다. 앞으로 프론트엔드 개발자로서 사용자가 웹 브라우징을 할 수 있고 보조 기술로 도움을 받을 수 있도록 웹 개발의 표준을 준수한 마크업을 해야 해요.

도스 운영체제에서는 스크린 리더 지원을 위해 음성출력을 지원해주는 하드웨어를 컴퓨터에 장착했습니다. 1990년대 우리나라의 하드웨어 스크린 리더는 ISA카드를 이용한 플랫폼인 ‘가라사대’로 시작되었습니다. 그러나 윈도우 운영체제가 출시된 후 스크린 리더가 나오며 내장 스크린 리더로 화면 읽기 기능을 지원할 수 있게 되었습니다.

아래에서 Windows와 Mac에서 웹 브라우징에 쓰이는 보조과학기술인 스크린 리더를 소개하겠습니다.

3.1.1 Narrator for Windows

Windows는 내장 스크린 리더인 내레이터(Narrator)를 제공하고 있습니다. Windows 10을 기준으로 내레이터를 시작 또는 중지할 수 있는 방법은 다음 두 가지 방법이 있습니다.

Windows로고 키 + Ctrl + Enter를 눌러 내레이터를 바로 실행합니다. 다시 한번 누르면 내레이터가 중지됩니다.

설정 > 접근성 > 내레이터를 클릭하고 내레이터 사용을 설정합니다.

내레이터에서는 탐색 및 읽기 모드인 스캔 모드를 지원하고 있습니다. 스캔 모드는 내레이터 키(Caps lock 또는 Insert)와 Space 키를 눌러 실행 또는 중지할 수 있습니다. 내레이터가 켜진 상태로 웹 페이지에 접근하는 경우 스캔 모드가 자동으로 활성화되며, 화살표 키를 사용하여 웹 페이지를 간편하게 탐색할 수 있습니다.

내레이터를 통해 웹 페이지를 검사하기 위한 기본적인 단축키는 아래와 같습니다.

단축키	기능
내레이터 키(Caps lock 또는 Insert)	내레이터 명령을 보조합니다.
Tab 또는 아래쪽 화살표	다음 항목으로 이동합니다.
Shift + Tab 또는 위쪽 화살표	이전 항목으로 이동합니다.
Ctrl	내레이터의 음성 출력을 즉시 중지합니다.
내레이터 키 + Ctrl + 더하기 기호(+) / 빼기 기호(-)	내레이터의 볼륨을 조절합니다.
내레이터 키 + 더하기 기호(+) / 빼기 기호(-)	내레이터의 음성 출력 속도를 조절합니다.
H / Shift + H	다음 / 이전 Heading 요소로 이동합니다.

이 외의 추가적인 기능과 단축키는 Microsoft에서 제공하는 내레이터 전체 가이드에서 확인할 수 있습니다.

3.1.2 VoiceOver for macOS

VoiceOver는 Mac의 내장 스크린 리더로 기기에서 벌어지는 일을 말로 정확하게 설명해주며 화면 읽기 기능을 지원합니다. VoiceOver를 활성화 시키고 끄는 방법은 세가지 방법이 있습니다.

Mac에 Touch ID가 있는 경우 Touch ID를 빠르게 세번 누릅니다.

Option-Command-F5를 누릅니다.

Apple 메뉴에서 시스템 설정 > 사이드바에서 손쉬운 사용 > 오른쪽에 있는 VoiceOver를 클릭한 후 VoiceOver를 켜거나 끌 수 있습니다.

VoiceOver 명령은 VO-키로 표시됩니다. VoiceOver를 위한 특수 키로, 기본적으로는 아래 키로 동작합니다.

CapsLock키

Control + Option

기본적으로 위 두 개의 키를 VoiceOver 키로 사용하도록 선택되어있으며, 사용자의 요구에 따라 변경할 수 있습니다. 앞으로 나올 단축키 설명에서도 위 특수키를 “VO 키”라고 하겠습니다.

이어서 VoiceOver를 통해 웹 페이지를 탐색하기 위한 기본적인 단축키를 알아보겠습니다.

단축키	기능
VO키 - 위쪽/ 아래쪽 화살표 키	VoiceOver 커서를 위/ 아래로 이동하기
VO키 - 왼쪽/ 오른쪽 화살표 키	VoiceOver 커서를 왼쪽/ 오른쪽으로 이동하기
* Control키를 누른다 * VO키 (VO키가 Caps Lock키일 때 해당 키를 누른다.) * 두 손가락으로 트랙패드 탭	VoiceOver 말하기를 일시 중지하거나 재개한다.
VO키 + Shift키 + Command + 왼쪽/ 오른쪽 화살표	VoiceOver 음성 출력 속도를 조절합니다.
VO키 - H	VoiceOver 도움말 메뉴 사용

3.2 웹 브라우저 개발자 도구

웹 접근성을 준수하는 것은 곧 사용자 경험과 직결되는 것이기 때문에 대부분의 브라우저들은 개발자 도구를 통해 개발자가 손쉽게 접근성을 검사할 수 있는 기능들을 제공하고 있습니다. 다음 장에서는 다양한 웹 브라우저 개발자 도구 중 Chrome 브라우저 개발자 도구를 예시로 접근성 검사 방법을 알아보겠습니다.

3.2.1 접근성 트리(Accessibility Tree) 검사

스크린 리더가 어떻게 웹 페이지를 읽어주는지 생각해보신 적이 있나요? 스크린 리더는 어떠한 과정을 통해 HTML 문서에서 우리에게 필요한 정보만 알려주는 걸까요? 스크린 리더와 같은 보조 기술은 각 운영체제가 제공하는 접근성 API를 통해 접근성 트리(Accessibility tree)에 접근하는 방식으로 웹 콘텐츠와 상호작용합니다. 접근성 트리는 브라우저가 DOM 트리를 기반으로 보조 기술을 위해 생성하는 트리로, 기본적인 구조는 DOM 트리와 유사하나 단순히 스타일링만을 위한 요소들은 무시된다는 특징이 있습니다. 접근성 트리의 각 노드는 다음과 같이 보조 기술이 사용하기에 유용한 속성들을 포함하고 있습니다.

속성	의미
name	보조 기술이 인식하는 이름
role	해당 노드가 수행하는 역할
state	해당 노드의 상태
value	항목의 값

검사 방법을 살펴보기에 앞서 브라우저가 생성하는 접근성 트리를 간단하게 알아보겠습니다.


<html>
  <head>
    <title>사용자 정보 입력</title>
  </head>
  <body>
    <div class="container">
      <label for="age">나이를 입력하세요</label>
      <input id="age" type="number" name="age" />
    </div>
  </body>
</html>

위와 같은 HTML 문서가 있다고 가정해보겠습니다. 위 마크업을 토대로 브라우저가 생성하는 접근성 트리를 개략적으로 나타내면 다음과 같습니다.


role='rootWebArea' focusable name='사용자 정보 입력'
	role='genericContainer' ignored
		role='labelText'
			role='staticText' name='나이를 입력하세요'
		role='spinButton' editable focusable name='나이를 입력하세요'

단순히 자식 요소를 묶고 스타일링하기 위해 사용된 <div> 요소는 genericContainer 라는 role의 노드로 생성되며, 위와 같이 내부 접근성 트리에는 명시되어 있지만 브라우저에 의해 무시된 상태이므로 보조 기술이 읽는 과정에서 노출되지 않습니다. 스크린 리더는 generic 노드를 제외한 노드들의 name , role , state , value 속성을 해석하여 우리에게 정보를 전달하게 됩니다. 따라서 접근성 트리의 각 노드가 포함하고 있는 접근성 속성을 검사해 해당 페이지의 콘텐츠가 보조 기술에 어떻게 노출되고 있는지 확인해야 합니다.

Chrome 개발자 도구는 기본적으로 툴팁에서 간단한 접근성 속성 정보를 제공하고 있습니다. 아래와 같이 툴팁을 통해 각 노드의 이름, 역할, 키보드 포커싱 가능 여부를 확인할 수 있습니다.

또한 개발자 도구의 Accessibility 탭을 통해 해당 웹 페이지 전체의 접근성 트리도 한눈에 확인할 수 있습니다.

Accessibility 탭의 Accessibility Tree 영역으로 접근해 Enable full-page accessibility tree 항목을 체크한 후 개발자 도구를 다시 로드하면 오른쪽 사진과 같이 DOM 트리에서 접근성 트리로 전환할 수 있는 버튼이 활성화됩니다.

접근성 트리 구조와 계산된 속성을 토대로 해당 <input> 요소가 웹페이지 내에서 ‘나이를 입력하세요’라는 이름으로 인식되고 있으며 ‘spin button’의 역할을 수행하고 있다는 것을 알 수 있습니다. 또한 키보드로 운용이 가능하며 텍스트 수정이 가능한 요소인 것을 확인할 수 있습니다. 개발자는 이를 참고하여 자신이 작성한 HTML 문서가 구조적으로 접근성을 준수하고 있는지 검증해야 합니다.

3.2.2 대비 차(Contrast ratio) 검사

「한국형 웹 콘텐츠 접근성 지침 2.1」에서 제안하는 ‘텍스트와 콘텐츠의 명도 대비’ 검사항목에 따라 텍스트 콘텐츠와 배경 간의 명도 대비는 시력 기능에 장애가 있는 이용자들의 콘텐츠 인식을 위해 최소 4.5 : 1이어야 합니다. 본격적인 검사에 들어가기에 앞서 개발자 도구의 렌더링(Rendering)탭을 통해 저시력 장애 환경을 체험해보도록 하겠습니다.

먼저 개발자 도구에서 Customize and control DevTools > More tools > Rendering 경로를 통해 Emulate vision deficiencies 항목으로 이동합니다.

Blurred vision을 선택해 흐린 시야를 체험할 수 있습니다. 흐린 시야가 설정된 상태로 다음 텍스트 콘텐츠를 한번 살펴볼까요?

최소 명도 대비율인 4.5 : 1을 충족하지 못했을 경우 배경과 텍스트 콘텐츠 간의 경계를 한 번에 인식하기 어려운 것을 알 수 있습니다. 물론 오랜 시간 들여다본다면 구분이 가능할 수도 있겠으나 모든 텍스트 콘텐츠를 이런 식으로 경험한다고 가정해볼까요? 한 페이지를 읽는 것만으로도 굉장히 피곤한 경험이 될 것입니다. 따라서 장애 환경에 구애받지 않고 모든 사용자가 웹의 콘텐츠를 원활하게 인식할 수 있도록 배경과 텍스트 간의 명도 대비율을 일정 수준 이상으로 보장해야 합니다. 웹 개발자가 이를 더욱 간편하게 검사할 수 있도록 Chrome 개발자 도구는 Styles 탭에서 대비 차 검사 기능을 지원하고 있습니다.

웹 페이지에서 검사하고자 하는 텍스트 요소에 마우스 커서를 가져다 대면 위와 같이 텍스트와 배경 간의 대비율을 툴팁에 표시해줍니다. 대비율이 「W3C 웹 콘텐츠 접근성 가이드라인 2.1」에서 제안하고 있는 최소 권장 사항(Level AA)인 4.5 : 1 이하일 경우 위와 같이 ⚠ 표시를 통해 접근성 지침에 위배되는 저 대비 텍스트임을 알려줍니다. 해당 텍스트 요소의 색상 미리보기 아이콘을 클릭하면 나타나는 컬러 피커의 Contrast ratio 영역에서 더욱 자세한 정보를 확인할 수 있습니다.

컬러 피커에서 보여주는 두 개의 가이드라인 중 아래쪽 가이드라인 위로는 최소 권장 사항(Level AA)인 4.5: 1 대비율을 충족하는 영역, 위쪽 가이드라인 위로는 고급 권장 사항(Level AAA)인 7 : 1 대비율을 충족하는 영역을 의미합니다. 이를 통해 현재 설정된 배경색을 기준으로 권장 사항을 충족하는 텍스트 색상을 재설정할 수 있습니다. 권장 사항을 충족하게 되면 각 레벨의 아이콘이 ✅ 표시로 변경됩니다.

만일 검사해야 하는 요소가 여러 개일 경우는 어떻게 할까요? 마우스 커서를 일일이 가져다 대면서 찾지 않아도 Customize and control DevTools > More tools > CSS Overview 탭에서 권장 대비율을 준수하지 않은 요소를 모두 찾아서 보여줍니다.

CSS Overview에서 검사된 위반 항목을 참고하여 해당하는 텍스트 콘텐츠의 접근성을 개선할 수 있습니다.

3.2.3 자동화 도구 Lighthouse를 이용한 검사

Lighthouse는 구글이 운영하는 오픈소스 프로젝트로, 웹 페이지 품질 개선을 위한 검사를 제공하는 자동화 도구입니다. 성능, 접근성, 검색 엔진 최적화 등의 검사를 제공하고 있으며 Chrome 브라우저 개발자 도구에 기본 기능으로 내장되어 있으므로 이를 이용해 해당 페이지의 접근성 준수 여부를 손쉽게 검사할 수 있습니다. 기본적인 사용 방법은 다음과 같습니다.

검사하고자 하는 웹페이지에서 개발자 도구를 열어 Lighthouse 탭에 접근합니다.

디바이스 환경과 접근성(Accessibility) 카테고리를 선택해 Analyze page load 버튼을 클릭하면 검사가 시작됩니다.


<form action="">
	<p>나이를 입력하세요</p>
	<input id="age" type="number" name="age" />
</form>

위와 같은 콘텐츠를 담고 있는 페이지를 Lighthouse를 통해 검사해보겠습니다.

검사가 완료되면 점수와 함께 접근성을 준수하지 않은 요소를 보여줍니다. 리포트를 통해 폼 컨트롤 요소인 <input> 에 연결되는 <label> 요소가 존재하지 않아 접근성을 준수하지 못했음을 알 수 있습니다. Lighthouse에서는 접근성 지침에 위배되는 원인뿐만 아니라 이를 해결할 수 있는 제안을 함께 제공하고 있으며, Learn more 링크를 통해 해당 검사 항목에 대해 추가로 학습할 수 있습니다.

3.3 W3C Validation

대부분의 웹 문서는 HTML 및 CSS 마크업 언어로 만들어집니다. 마크업 단계에서 오류를 제거하고 올바르게 렌더링하는 것이 중요한데요. 마크업이 잘 되었는지 사전에 검사를 할 수 있어요. 이를 유효성 검사라고 합니다. 유효성 검사의 대표적인 도구는 W3C( World Wide Web Consortium)의 Markup Validation Service입니다. 실제로 우리가 어떻게 활용할 수 있는지 W3C 유효성 검사 방법을 살펴보겠습니다.

3.3.1. W3C Validation 실행

다음은 W3C 유효성 검사 사이트 주소입니다.

https://validator.w3.org/ (W3C 유효성 검사 사이트)

구글에 '마크업 유효성 검사' 혹은 'W3C validator' 등의 관련 키워드를 검색해도 결과 화면 상단에 노출되는 것을 볼 수 있어요. 해당 사이트에 접속하면 홈 화면에 검사 방법을 선택할 수 있는 3개의 메뉴가 있습니다. ① URL을 직접 입력하는 검사, ② 마크업 문서 파일을 업로드하는 검사, ③ 직접 입력하는 검사가 있어요.

웹 접근성 기본 4원칙 견고성 파트에서 문법 위반 사례와 준수 사례를 직접 입력(Validate by Direct Input)하는 방식으로 테스트해보겠습니다.

요소의 열고 닫음 위반 사례


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>웹접근성에 접근하기</h1>
        <p>견고하게 마크업하세요!</p>
</body>
</html>

<div>요소에 닫기 태그를 하지 않은 오류 코드를 직접 입력(Validate by Direct Input) 메뉴에서 검사했습니다.

다음은 유효성 검사에 대한 결과 화면입니다. 문법 준수를 하지 않은 항목에 대한 오류 메세지를 보여줍니다.

body 의 닫기 태그는 존재하지만 자식 요소 중 닫지 않은 요소가 있음을 알려줍니다.

10번째 줄 <div> 요소의 닫기 태그가 없음을 알려줍니다.

요소의 열고 닫음을 준수하고 유효성 검사를 했을 경우 ‘Document checking completed. No errors or warnings to show.’ 라는 메세지를 보여주며 오류 없이 마크업이 완료 되었음을 보여줍니다.

3.3.2. 기타 W3C Validation 실행 방법

W3C 웹 사이트 주소로 접근할 필요 없이 Visual Studio Code에서 바로 유효성 검사를 할 수 있습니다.

Visual Studio Code의 확장 프로그램 ‘W3C Web Validator’를 설치하면 화면 좌측 하단에 W3C Validation 버튼이 생깁니다. 요소의 열고 닫음에 오류가 있는 코드를 입력하고 해당 버튼을 누르면 아래의 사진처럼 ‘not valid’라는 문구와 함께 2개의 오류가 있음을 알려줍니다.

다음은 <div> 요소의 닫기 태그를 제대로 입력하여 요소의 열고 닫음 오류를 수정하고, 올바른 코드로 검사한 화면입니다.

올바른 코드를 입력하여 W3C Validation 버튼을 클릭하면 ‘This HTML file is valid’라는 문구와 함께 유효성 검사를 통과합니다.

마크업 유효성 검사는 웹 페이지의 기술적 품질을 보장하는 중요한 단계입니다. 코드의 정확성을 판단하고 보다 나은 품질의 콘텐츠를 제공할 수 있어요. W3C validator는 마크업 언어로 작성된 대부분의 문서를 확인할 수 있습니다. 시간과 비용을 절약하고, 복잡하지도 않아요. 마크업 단계에서 기술적 오류가 발생하지 않도록 하는 예방책이 될 수 있습니다.

3.4 OpenWAX

OpenWAX(Open Web Accessibility eXtension)는 웹 페이지의 접근성을 자동으로 진단할 수 있는 도구입니다. OpenWAX는 플러그인 형태로 Google Chrome 브라우저와 Mozilla FireFox 브라우저에서 제공됩니다. 자동 진단이 가능한 항목을 통해 진단 결과를 확인하고 수동 진단을 병행해야 합니다.

3.4.1. OpenWAX 실행

OpenWAX는 Google Chrome 웹 스토어에서 다운받을 수 있습니다. OpenWAX를 설치하면 오른쪽 상단에 확장 프로그램으로 설치된 것을 볼 수 있습니다.

접근성 진단을 원하는 사이트에 접속한 후 대상 페이지에서 Google Chrome 툴바의 OpenWAX 아이콘을 클릭해 검사를 시작합니다.

3.4.2. 접근성 지표

OpenWAX의 접근성 지표에는 1번부터 21번까지 있습니다. OpenWAX를 실행하면 웹 페이지 왼쪽에 실행창이 표시됩니다. 실행창에서는 미래창조과학부가 발표한 「한국형 웹 콘텐츠 접근성 지침 2.1」의 지침에서 자동 검사가 가능한 검사 항목과 검사 결과를 보여주고 있습니다. 검사 항목 중 빨간 배경색이 표시되는 항목은 대부분 접근성 오류입니다. 또한 노란 배경색으로 표시되어있는 항목은 접근성 오류 의심 항목입니다.

적절한 대체 텍스트(img)

img 요소에서 alt속성을 비어있는 값으로 제공한 경우에는 내용을 alt=""으로 표시합니다. 이는 접근성 오류가 의심되는 항목입니다. alt속성이 빠져있는 경우에는 내용을 alt 미정의로 표시하며 접근성 오류 항목입니다. alt속성이 있고 값이 있는 경우에는 이미지에 대체 텍스트가 제대로 입력되어있는지 수동으로 검사해야합니다.

적절한 대체 텍스트(bg)

Background image속성이 지정된 요소의 내용을 표시합니다. display: none되어있는 콘텐츠는 대체 콘텐츠가 없으며 Hidden으로 표시됩니다. 대체 콘텐츠가 있다면 배경 이미지의 의미가 텍스트 콘텐츠로 제공되고 있는지 확인하면 됩니다.

적절한 대체 텍스트(object)

<object>, <embed>, <video>, <audio>, <canvas>, <svg>요소를 표시합니다. 표시만 하기 때문에 검사 결과에 따라 요소의 대체 콘텐츠를 확인하고 키보드로 잘 작동 하는지 수동 진단을 진행해야 합니다.

색에 무관한 콘텐츠 인식

흑백 토글 기능을 제공합니다. 흑백 기능이 구현되었을때 콘텐츠 인식에 문제가 없는지 확인하면 될 것입니다.

초점 이동

키보드 초점이 표시되지 않는 항목을 찾습니다. blur() 함수로 초점을 사라지게 만든 경우, CSS에서 outline 속성을 none으로 설정한 경우는 키보드의 초점이 표시되지 않습니다. 문제가 확실한 경우에만 진단 결과를 내보내기 때문에 접근성 오류로 진단되지 않더라도 해당 웹 페이지에는 초점 이동 문제가 있을 가능성은 남아있으므로 수동으로 추가 진단을 진행해야 합니다.

건너뛰기 링크

페이지에 사용된 1번째 부터 10번째 까지 링크를 표시합니다.

제목 제공 (<title>)

페이지에 사용된 제목을 표시합니다. 제목이 제공되지 않은 경우 접근성 오류입니다.

제목 제공 (frame)

페이지에 포함된 frame요소의 title 속성을 표시합니다. frame 요소에 제목이 부여되지 않은 경우 접근성 오류입니다.

제목 제공 (<h1>~<h6>)

페이지에 사용된 <h1> 부터 <h6> 요소와 해당되는 내용을 표시합니다.

적절한 링크 텍스트

페이지에서 사용된 <a>, <area> 요소에 해당되는 텍스트를 표시합니다.

기본 언어 표시

페이지의 <html> 태그에서 선언된 lang, xml:lang 속성을 표시합니다. lang, xml:lang이 부여되지 않은 경우 접근성 오류입니다.

사용자 요구에 따른 실행

사용자 요구에 따른 실행 항목들 중 오류가 발생될 수 있는 항목을 표시합니다. 표시되는 항목 중에 오류가 있는지 확인한 후, 오류가 발견되지 않았다면 추가적으로 수동 점검을 진행해야 합니다.

표의 구성 (caption, summary, th)

<caption>을 제공하지만 제목 셀(<th>)이 없으면 접근성 오류입니다. 데이터테이블은 데이터 셀의 제목과 내용을 구분하고 관계를 파악할 수 있는 마크업이 필요합니다. 하지만 의미적인 마크업을 붙이지 않는 배치용테이블은 접근성 의심항목으로 표시됩니다. 또한 <th>에 scope속성이 부여되지 않은 경우는 접근성 의심항목입니다.

레이블 제공

input 요소에 <label>이 모두 제공되지 않았다면 접근성 오류입니다. 만약 title 속성만 제공되면 접근성 의심 항목입니다.

마크업 오류 방지

페이지의 마크업 오류 방지를 위한 추가적인 수동 검사를 위해 검사시간이 초과되면 W3C Validation로 통하는 링크가 나옵니다. 추가적인 검사를 통해 웹 표준 오류를 확인할 수 있어요.