Chrome 개발 도구의 접근성
모든 사람들이 접근 가능한 세상을 만들어 주세요.
접근성을 향상하는 데 도움이 되는 Chrome 개발 도구(DevTools)의 몇 가지 유용한 기능을 소개합니다.
개발자 대부분은 개발 과정에서 웹 브라우저의 개발 도구(DevTools)에서 많은 시간을 보내면서 개발 도구의 기능 중 일부에 대해 배우고 사용합니다. 이 글은 그 기능 중 접근성에 관한 기능에 대해 이야기합니다.
Chrome의 개발 도구를 다루지만 Firefox, Safari, Edge 등 대다수 브라우저는 모두 개발자 도구에서 접근성 관련 기능을 제공하고 있습니다. 기회가 된다면 다른 웹 브라우저의 접근성 도구도 다뤄보도록 하겠습니다.
웹 브라우저대비 차(Contrast ratio) 검사
검사된 텍스트의 배경색 대비 색상 대비가 만족스러운지 확인하는 기능입니다. 일반적으로 텍스트 색상과 배경색 사이의 대비 차가 크면 사용자가 콘텐츠를 읽기 용이하고, 저 시력 장애를 가진 사용자 또한 콘텐츠를 읽고 이해하는데 큰 도움이 됩니다. 시력에 문제가 없는 일반 사용자 일지라도 일시적으로 콘텐츠를 구분하기 어려울 수 있습니다. 예를 들어 다음과 같은 경우를 생각해보세요.
햇살로 눈부심이 심한 실외에서 스크린(스마트폰 또는 노트북 등)을 볼 경우
휴대용 기기(스마트폰 또는 노트북 등)의 배터리 방전을 막기 위해 밝기 모드를 최대한 낮출 경우
문제 확인
Chrome 개발 도구에서 텍스트를 선택한 후 Styles 패널의 색상(color) 속성에 설정된 값 옆의 작은 사각형(◼︎)을 클릭하면 컬러 피커가 화면에 표시됩니다. 현재 선택된 텍스트의 색상과 배경색의 대비 차 정보는 Contrast ratio 영역에서 살펴볼 수 있으며, 웹 콘텐츠 접근성 지침(WCAG) 성공 기준 1.4.3 최소 대비 차 권장 수준(AA: 3.0, AAA: 4.5 이상)에 미치지 못할 경우 ⊘ 아이콘을 표시해 접근성이 부족함을 알려줍니다.
Chrome 개발 도구의 컬러 피커 대비 검사 기능문제 개선
확대 가능한 화면일 경우 AA 수준인 3:1까지 보장하면 접근성을 준수했다고 보므로, 색상 영역에서 AA 수준(3 등분된 영역 중 가운데 부분)에서 적절한 색을 선택하여 접근성을 개선할 수 있습니다. 접근성이 보장될 경우 각 수준의 아이콘이 ✔︎ 모양으로 변경됩니다.
Chrome 개발 도구의 대비 차 검사를 사용해 접근성 개선개선 시, 주의할 점
AAA 수준의 4.5:1까지 고려하여 색상 대비 차를 더욱 높일 수 있지만, 디자이너와 의견을 조율하여 결정해야 합니다. 디자이너 동의 없이 색상을 임의로 조정해서는 안됩니다. 디자이너와 협의 하에 최소 AA 수준 이상의 색상을 선택해 변경 개선해야 합니다.
시각 장애 간접 경험
W3C의 저시력 장애인을 고려한 접근성 요구사항 문서에 따르면 전 세계 남성 12명 중 1명(약 8%), 여성 200명 중 1명(약 0.5%)이 색각 장애를 가지고 있음을 이야기하고 있습니다. 즉, 사물이 뿌옇게 보여 잘 보기 힘든 저 시력 장애 사용자, 특정 색상을 볼 수 없거나 혹은 색을 구분할 수 없는 색각 이상 사용자는 웹 애플리케이션 콘텐츠를 쉽게 인식하고 이해할 수 없습니다.
렌더링 모드 변경
개발 도구의 Rendering 패널을 통해 시각 장애 사용자가 겪는 경험을 간접적으로 체험할 수 있습니다. 개발 도구에서 Rendering 패널을 보려면 Customize and Control DevTools 버튼을 누른 후, More tools > Rendering을 선택합니다.
Customize and Control DevTools → More tools → Rendering저시력 장애 체험
블러 모드를 선택하면 화면이 뿌옇게 표시되어 저시력 장애를 간접 체험할 수 있게 합니다.
저시력 장애 간접 경험색각 이상 체험
적색맹 이상(Protanopia) 또는 녹색맹(Deuteranopia) 모드를 선택하면 빨간색과 녹색 대신 노란색과 갈색으로 표시되는 색각 이상을 체험할 수 있습니다.
적녹 색각 이상 간접 경험
청황 색각 이상 간접 경험전색맹(Achromatopsia) 모드를 선택하면 빨간색, 녹색, 파란색을 모두 구분할 수 없는 흑백 비전(Vision)으로 화면에 표시되어 간접적으로 체험할 수 있습니다.
전 색맹 간접 경험
DOM 노드 접근성 검사
개발 도구에서 DOM 노드를 선택하면 간단하지만 필수적인 접근성 정보를 화면에 툴팁으로 표시합니다. 보다 자세한 접근성 정보를 확인하려면 Accessibility 탭 패널을 선택해 확인할 수 있습니다.
Name — 정보 통신 보조기기(예: 스크린 리더 등)에서 인식하는 레이블(label)
Role — 선택된 DOM 노드의 역할 (예시는 "버튼" 역할 요소 임을 표시)
Keyboard-focusable — 키보드 운용 가능 여부 (☑ 사용 가능 / ⊘ 사용 불가)
Accessibility 탭 패널의 ARIA(Accessibile Rich Internet Application)는 접근 가능한 리치 웹 애플리케이션(WAI-ARIA)을 말합니다. ARIA는 HTML에서 사용되는 접근성 속성을 말하며, ARIA를 통해 웹 애플리케이션 접근성을 향상할 수 있습니다.
예를 들어 다음의 HTML 구조를 웹 브라우저 또는 정보 통신 보조기기(예: 스크린 리더 등)에서 어떻게 해석하는지 툴팁 또는 탭 패널을 통해 정보를 표시합니다. 이를 통해 구문 또는 구조적으로 접근성을 준수하여 올바르게 개발하고 있는지를 개발자는 검증할 수 있습니다.
SVG 이미지(코드)를 포함하는 버튼 요소에 설정된 레이블(aria-label)
"글로벌 내비게이션 열기 버튼"으로 읽히며, 키보드로 접근 가능함을 표시
자동화 검사 도구
Lighthouse는 웹 애플리케이션의 접근성 또는 보안 문제 등을 진단해 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse와 같은 자동화 도구를 사용한 검사 결과를 개선하면 확실히 애플리케이션 품질(접근성, 보안 등)이 향상되니 Chrome 브라우저에 설치해 사용해보세요.
도구 설치 및 사용법
Lighthouse 확장을 Chrome 브라우저에서 설치합니다. 확장을 설치하면 개발 도구에 Lighthouse 패널이 표시됩니다. 검사하려는 항목과 검사 기기를 선택한 후, Generate Report 버튼을 눌러 리포트를 생성합니다.
생성할 Lighthouse 리포트의 카테고리, 디바이스 설정 화면검사가 완료되면 웹 애플리케이션의 성능(Performance), 접근성(Accessibility), 검색엔진 최적화(SEO) 등 체크한 항목에 대한 리포트를 패널에 표시합니다.
Lighthouse 리포트 결과 화면Lighthouse 리포트 결과를 통해 미진한 부분의 문제를 확인할 수 있습니다. 문제 해결을 위해서는 먼저 문제 원인을 파악해야 하는데 이러한 자동화 도구를 사용하면 손쉽게 문제를 확인할 수 있을 뿐만 아니라, 원인이 무엇이며 어떻게 해결해야 할지 학습도 가능합니다.
글을 마무리하며.
Chrome 개발 도구(DevTools)는 수년에 걸쳐 빠르게 접근성 향상에 도움이 되는 기능이 추가되었지만, 이러한 도구 소개 및 사용법에 대한 문서화가 안 갖춰져 현업에서 잘 활용되고 있지 않아 안타깝습니다. 이 글에서 소개된 몇 가지 유용한 접근성 도구를 활용하여 보다 품질 좋은 서비스를 만들어 주셨으면 좋겠습니다.
