들어가며

웹 접근성과 관련하여 지난 두 글에서는 웹 접근성의 개념과 중요성, 접근성 체크리스트와 구체적인 적용 사례들을 살펴보았습니다.

이번 글에서는 한 걸음 더 나아가, 웹사이트가 실제로 얼마나 접근성 기준을 잘 충족하고 있는지 직접 점검할 수 있는 자가진단 방법 몇 가지를 안내해 드리고자 합니다.

이전 글에서도 이야기하였지만 웹 접근성은 단순한 법적 의무를 넘어 모든 사용자에게 동등하고 편리한 경험을 제공하기 위한 필수 요소입니다.

따라서 이번 자가진단을 통해 웹사이트의 현재 접근성 현황을 정확히 파악하고, 개선이 필요한 부분을 찾아 웹 접근성을 효과적으로 준수할 수 있는 계기가 되기를 바랍니다.

 

OpenWAX

---

아주 오래전에 많이 쓰인 툴이며, 현재는 다른 도구에 비해 활용도가 그다지 높지 않습니다.

다만 놓치기 쉬운 부분들을 쉽게 찾아볼 수 있으며, 다음 항목들을 빠르게 파악할 수 있는 장점이 있습니다.

• 대체 텍스트
• 제목 제공(title, frame)
• 링크 텍스트
• 표의 구성
• 레이블 제공

 

대체 텍스트나 제목 제공등을 쉽게 찾아 볼 수 있다.

 

크롬 브라우저 확장 프로그램으로 설치하여 간단하게 사용 할 수 있습니다.

 

kwcag a11y inspector

---

사용자 입력 및 컨트롤의 크기를 체크할 수 있는 크롬 브라우저 확장 프로그램입니다.

확장 프로그램을 실행하면 선택 영역의 가로, 세로 크기와 px 크기 및 box model이 어떻게 되어 있는지 쉽게 알 수 있습니다.

 

선택한 요소의 가로, 세로 및 px값을 표시해준다.

 

Keyboard Navigation

---

접근성 준수를 위해 가장 중요하다고 생각되는 항목은 바로 Keyboard Navigation입니다.

논리적인 구조로 마크업을 작성하였다면 큰 문제는 없겠으나 생각하지 못한 부분에서 Keyboard Navigation이 제대로 동작하지 않을 수 있습니다.

이 부분은 크롬의 기본적인 '소스 순서 표시' 기능을 활용할 수도 있지만, 이 기능이 제대로 작동하지 않는 경우가 많아 개인적으로는 파이어폭스 브라우저 사용을 추천합니다.

파이어폭스의 개발자 도구에서 접근성 탭에 있는 '탭 이동 순서 표시'를 활성화하면 현재 보고 있는 사이트의 탭 이동 순서를 시각적으로 쉽게 확인할 수 있습니다.

파이어폭스 브라우저의 탭 이동 순서 표시.

 

WAVE

---

이번에 소개할 자가진단 법은 웹 사이트 입니다.

이번에 소개할 자가진단법은 웹사이트인 WAVE입니다.

WAVE 사이트에 접속하여 확인하고자 하는 웹사이트 주소를 입력하면 전체적인 웹 접근성 체크 후 레포트를 제공합니다.

 

WAVE를 활용한 모습

단, 현재 서비스 중인 웹사이트만 진단 가능해 실제 개발 중 활용도가 다소 떨어지므로 개인적으로는 다음에 소개할 크롬의 Lighthouse를 더 자주 사용합니다.

 

Lighthouse

---

접근성뿐 아니라 종합적인 성능과 SEO 등을 모두 진단할 수 있는 크롬 브라우저의 기본 도구입니다.

Lighthouse를 실행하면 일정 시간 후 종합 레포트를 확인할 수 있습니다.

 

Lighthouse의 접근성 항목

대체 텍스트, 컨트롤의 크기, 명도 대비 등을 진단하므로 평소 위에서 소개한 툴을 활용하다 최종 진단 시 유용하게 사용할 수 있습니다.

 

iOS

---

접근성 진단이나 테스트 시 모바일 기기는 다양한 에뮬레이터나 툴이 있지만, 실제 기기를 활용하는 것이 가장 효과적입니다.

PC 환경과 달리 각 OS에 내장된 스크린 리더를 활성화하면 비교적 간단하게 테스트와 자가 진단이 가능합니다.

 

1. 설정 → 손쉬운 사용 진입

 

2. VoiceOver 진입

 

3. VoiceOver 켜기

 

4. 자막 패널 활성화

 

이렇게 하면 내장된 스크린 리더가 실행되고 자막 패널도 화면 하단에 나타납니다.

그리고, 매번 설정을 방문하지 않고 간단하게 단축키를 등록해 VoiceOver를 켜고 끌 수 있습니다.

 

1. 설정 → 손쉬운 사용 → 손쉬운 사용 단축키 진입

 

2. 리스트에서 VoiceOver 활성화

 

이렇게 설정하면 전원 버튼을 3번 눌러 쉽게 VoiceOver를 켜고 끌 수 있습니다.

 

스크린 리더가 익숙하지 않은 분들을 위해 필수적인 조작법을 소개합니다.

1. 한 손가락으로 좌우 스와이프: 이전/다음 초점 이동

2. 화면 두 번 터치: 선택(클릭)

3. 화면을 길게 누르기: 임의 탐색 (원하는 영역 이동)

4. 세 손가락으로 상하 스와이프: 페이지 스크롤

 

Android

---

안드로이드 역시 iOS와 마찬가지로 기본 내장된 TalkBack을 사용하면 됩니다.

 

1. 설정 → 접근성 메뉴 진입

 

2. TalkBack 진입

 

3. TalkBack 활성화

 

TalkBack 역시 단축 버튼을 설정할 수 있습니다.

TalkBack 메뉴에서 'TalkBack 바로가기'를 활성화하면 하단 앱바 우측에 접근성 버튼이 생성되어 쉽게 켜고 끌 수 있습니다.

TalkBack바로가기 활성화

Android의 TalkBack도 iOS의 VoiceOver와 사용 방법은 동일하지만 화면 스크롤 기능에 차이점이 있습니다.

VoiceOver에서는 세 손가락으로 상하 스와이프였다면, TalkBack에서는 두 손가락으로 상하 스와이프라는 차이점이 있으며, VoiceOver는 스크롤시 페이지 단위로 스크롤이 되는 반면 TalkBack은 손가락이 이동한 만큼만 스크롤이 됩니다.

 

마치며

---