brunch

You can make anything
by writing

C.S.Lewis

by SNC Lab Mar 06. 2020

WCAG 2.2 작업 초안 둘러보기 - 첫 번째

Web Content Accessibility Guidelines



지난 2월 27일 W3C는 웹 콘텐츠 접근성 가이드라인 WCAG 2.2 첫 번째 작업 초안(First Public Working Draft)을 공개했습니다. WCAG 2.2는 WCAG 2.1, 2.0을 계승합니다. 따라서 문서 구조는 상위 버전들과 동일합니다. WCAG 2.2에서 성공 기준(Success Criterion) 2.4.7 키보드 초점 시각화(Focus Visible)의 적합성 수준(Conformance Level)이 변경되었으며, 2.4.11 키보드 초점 시각화 향상(Focus Visible (Enhanced))이 새로운 성공 기준으로 추가되었습니다. 아울러 초점(focus)과 초점 표시 영역(Focus indication area)이 용어 설명(glossary)에 새롭게 정의되었습니다.



WCAG 2.2 개요 및 목적

현재 WCAG 실무 그룹은 WCAG 2.2 개발과 병행하여 WCAG 메이저 업데이트 버전 개발을 진행중입니다. 우리에게 Silver로 알려진 버전입니다. 그러나 Silver가 개발 완료되기 전에도 웹 환경은 꾸준히 변화하고 있기에 접근성 가이드라인 역시 이에 대응해야 합니다. WCAG 2.1과 오늘 소개할 WCAG 2.2가 이러한 목적으로 개발되었습니다.


WCAG 2.2는 WCAG 2.1, 2.0과의 하위 호환성을 보장합니다. 하위 호환성과 가이드라인을 적용하는 데에 혼선을 예방하기 위해 새롭게 추가되는 성공 기준은 해당 성공 기준이 포함되는 가이드라인 마지막에 추가됩니다.

이 문서는 WCAG 계층 구조를 비롯한 WCAG 프레임워크를 독자가 알고 있다는 전제하에 작성하였습니다. 현재 WCAG 2.2는 정식 발행된 문서가 아닌 작업 초안이기 때문에 언제든지 내용의 변경이 있을 수 있습니다.



WCAG 2.2 성공 기준 변경 사항

WCAG 2.2 성공 기준 중 2.4.7 키보드 초점 시각화(Focus Visible)의 적합성 수준이 Level AA에서 Level A로 조정되었습니다. 키보드 초점 시각화란 키보드로 조작 가능한 UI에 키보드의 초점을 표시하는 기능이 있는지 여부를 점검하는 성공 기준입니다. 컨트롤 요소에 키보드 초점이 위치했을 때 해당 컨트롤에 테두리가 표시되거나, 입력 창에서 초점이 위치한 영역에 세로 막대 또는 입력 도움말 등의 텍스트가 강조 표시되는 것이 대표적 예시입니다.



초점의 위치를 시각적으로 명확하게 인지할 수 있도록 초점이 진입했을 때, 배경색을 반전한 입력 양식 예시:

A PEN BY Andreas Storm (https://codepen.io/andreasstorm/pen/JXQLdN)



키보드 초점은 사용자가 현재 키보드 초점의 위치를 시각적으로 파악하여 작업 순서를 결정할 수 있고, 주의력 또는 단기 기억 장애 사용자가 원활하게 웹 페이지를 이용할 수 있도록 돕습니다. 특히 입력할 항목이 많은 복잡한 입력 양식에서 키보드 초점 시각화는 주의력 또는 단기 기억에 장애가 있는 사용자뿐만 아니라 다른 유형의 사용자들 역시 작업의 맥락을 잃지 않도록 도울 수 있습니다.


 TIP   WCAG 적합성 수준이란?

WCAG 적합성 수준은 Level A, AA, AAA로 나뉩니다.
Level A는 가장 기본적인 접근성 성공 기준이 포함되어 있습니다. 기본적인 만큼 Level A에 해당하는 성공 기준을 만족하지 않으면 다양한 유형의 사용자가 해당 웹 페이지를 전혀 사용할 수 없습니다.
Level AA는 Level A처럼 준수하지 않았을 때 전혀 사용할 수 없는 수준은 아니지만, 다양한 유형의 사용자가 동등하게 웹 페이지를 사용하기 위해 꼭 필요한 성공 기준을 포함합니다. 일반적으로 웹 페이지의 접근성 요구 사항(VPAT)은 Level AA를 만족해야 합니다. 
마지막 Level AAA는 WCAG가 규정하는 가장 높은 수준의 접근성 기준을 만족하기 위한 성공 기준을 포함합니다.




WCAG 2.2의 새롭게 추가된 항목

WCAG 2.2에는 서두에 언급했듯 2.4.11 키보드 초점 시각화 향상(Focus Visible (Enhanced)) 성공 기준이 새롭게 추가되었습니다. 또한, 초점(focus)과 초점 표시 영역(focus indication area)이 새로운 용어로 정의되었습니다.


키보드 초점 시각화 향상

키보드 초점 시각화 향상은 키보드 초점의 가시성을 높이기 위한 성공 기준입니다. 적합성 수준은 Level AA입니다.


키보드 초점 가시성을 높이기 위해, 먼저 최소 초점 표시 영역의 크기는 포커스 된 컨트롤의 직사각형 둘레 중 긴 쪽을 기준으로 두 배 이상이어야 합니다. 계량 단위는 CSS 픽셀을 기준으로 합니다. 초점 표시 영역의 명도 대비는 포커스 되지 않은 요소와 인접한 요소보다 최소 3:1의 명도 대비를 갖습니다. 혹은 초점 표시 영역의 최소 두께가 다른 요소들에 비해 2픽셀 이상이어야 합니다.



키보드 초점 시각화 향상을 위한 다양한 초점 표현 방식 예시:

모든 컨트롤의 크기는 120px * 50px임



NOTE: 현재 WCAG 2.2 작업 초안에는 키보드 초점 향상에 대한 <How to Meet> 내용이 없습니다. How to Meet 문서는 각 성공 기준을 만족하기 위한 기술 레퍼런스(Sufficient Techniques), 성공 기준을 만족하지 않는 실패 사례(Failures), 추가 도움말(Advisory)을 기술합니다.



초점과 초점 표시 영역 용어에 관하여

각 용어에 대한 WCAG의 용어 규정은 다음과 같습니다.


초점(focus): 
초점이란 입력 장치를 통해 사용자와 웹 페이지가 상호 작용할 수 있는 지점입니다.

초점 표시 영역: 
초점이 된 영역과 아닌 영역 사이에 구별되는 CSS 픽셀의 수를 의미합니다.




이상으로 저희가 준비한 <WCAG 2.2 초안 둘러보기>를 마칩니다. WCAG 2.2 초안이 변경되는 대로 여러분께 관련 내용을 신속히 공유해 드리도록 하겠습니다.

읽어 주셔서 감사합니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari