WCAG 2.1에 추가된 지침, 성공기준
WCAG 2.1에 추가된 새로운 17개의 가이드라인을 정리해봅니다.
W3C 권고안 WCAG 2.0이 만들어진 시기(2008년)는 스마트폰을 사용하는 모바일 시대가 아니었기에 미처 다루지 못했던 장애 유형이 몇 가지 있었습니다. 저시력, 인지 장애가 그러합니다. WCAG 2.0은 업그레이드가 필요했고, W3C는 2018년 지난 10여년간 바뀐 환경에 대응하여 업그레이드를 시행, WCAG 2.1을 발표했습니다.
새롭게 추가된 17개의 성공기준
전체적으로 WCAG 2.1은 터치를 이용한 상호작용(Interaction)을 지원하고 보다 복잡한 제스처(gestures)를 처리하며 의도하지 않은 인터페이스 활성화를 방지함으로써 모바일 기기 사용자를 위한 가이드 라인으로 17개의 새로운 성공 기준을 제공합니다. 모바일 기능을 더욱 친근하게 개선하고 최종 사용자에게 최고의 사용성을 제공하기 위한 것입니다.
WCAG 2.0 vs WCAG 2.1
WCAG 2.1은 1개의 지침, 17개의 성공 기준이 추가되었습니다.
추가된 17개의 성공 기준을 정리하면 다음과 같습니다.
추가된 17개의 성공 기준은 저시력, 인지, 언어, 학습 장애 사용자를 포함한 모든 사용자의 접근성을 향상 시킵니다.
적합성 수준
각 성공 기준은 서로 다른 상황의 요구를 충족시키기 위해 페이지 디자인이나 시각적 표현에 미친 영향을 기반으로 3가지 적합성 수준(A, AA, AAA)으로 분류됩니다.
화면 방향을 고정해야 하는 필수 상황이 아니면, 특정 방향 모드(가로 또는 세로)로 고정되어 표시되도록 제한해서는 안됩니다. 일부 사용자는 기기를 회전할 수 없을 경우 사용에 제한을 받아 접근하기 어렵기 때문입니다. 회전/고정 여부는 전적으로사용자가 선택할 수 있도록 해야 합니다.
장애를 가진 사람들의 관점에서 보다 쉽게 입력할 수 있도록 해야 합니다. 학습 장애인도 쉽게 이해할 수 있는 기호, 아이콘을 사용하거나 입력을 보다 쉽게 완성할 수 있도록 자동완성 폼을 제공해야 합니다.
보조기술은 장애인 사용자가 의미를 이해할 수 있는 여러 아이콘 및 기호를 제공합니다. 보조기술이 장애인 사용자가 인지할 수 있는 기호와 아이콘으로 변환할 수 있도록 웹 콘텐츠를 구조화 해야 합니다. 웹 페이지의 각 영역에 WAI-ARIA 랜드마크 역할(Role)을 제공하는 것이 좋은 예가 될 수 있습니다.
세로 방향으로 스크롤 할 수 있도록 설계된 콘텐츠는 사용자가 확대(400%까지) 했을 때, 가로 방향으로 스크롤 바가 표시되지 않아야 하고, 가로 방향으로 스크롤 할 수 있도록 설계된 콘텐츠는 확대 시 세로 방향으로 스크롤 바가 표시되지 않도록 해야 합니다. 쉽게 말해 화면을 확대할 경우 스크롤 바는 가로나 세로 한 방향만 표시되어야 하고, 모든 콘텐츠 이용이 가능해야 합니다.
1.4.3 가이드라인에서 텍스트나 이미지 텍스트를 표시하는 경우 특정 수준의 명도대비를 준수해야 한다고 명시 되어 있습니다. 뿐만 아니라 입력 필드 및 아이콘 상의 경계 처럼 텍스트가 아닌 콘텐츠 역시 사용자가 충분히 인지할 수 있도록 명도 대비를 제공해야 합니다.
사용자가 텍스트 행간, 마진, 어간, 자간 등을 변경 하더라도 콘텐츠는 완벽하게 이해 가능해야 합니다. 이러한 설정은 저시력 장애나 인지 장애가 있는 사람들이 텍스트 내용을 보다 쉽게 이해할 수 있도록 합니다.
사용자가 키보드 포커스를 주었거나, 마우스나 터치 기기에 호버(마우스 오버) 했을 때 콘텐츠가 표시되는 경우 사용자는 이를 인지할 수 있어야 하며, 필요에 따라 표시된 콘텐츠를 안 보이도록하는 수단을 제공해야 합니다. 예를 들어 저시력 사용자가 페이지를 확대한 상태에서 툴팁(Tooltip)이 페이지의 콘텐츠를 가리고 있을 경우, 사용자가 가려진 콘텐츠를 다시 볼 수 있도록 툴팁을 감출 수 있는 방법을 제공해야 합니다.
문자 키를 활용하여 키보드 단축키를 제공하는 경우 키보드 사용자에게 도움이 되지만 특정 사용자에게는 오히려 문제가 될 수 있습니다. 따라서 단축키를 활성화하거나, 비활성화 할 수 있는 설정을 옵션으로 제공해야 합니다.
특정 과업을 수행하기 위한 충분한 시간을 사용자에게 제공해야 합니다. 저시력 혹은 인지 장애 사용자의 경우 다른 사용자에 비해 온라인 폼을 완성하는데 보다 많은 시간이 필요할 수 있습니다. 보안 상의 이유로 시간제한이 필요한 경우에는 가능한 충분한 시간을 제공함과 동시에 남은 시간, 시간 초과 시 발생하는 결과, 시간 연장 방법 등에 대한 정보를 제공해야 합니다.
2.2.2 가이드라인에서 ‘움직이거나 깜박이거나 혹은 스크롤링 되는 콘텐츠는 사용자가 정지, 일시정지 혹은 숨길 수 있어야 한다’고 규정 합니다. 나아가 사용자가 커서를 움직이거나 스크롤 했을 때 배경색과 전경색이 다른 속도로 움직여 애니메이션이 발생하는 경우 애니메이션 기능을 끌 수 있도록 만들어야 합니다. 애니메이션으로 인해 현기증을 느끼는 사용자가 있기 때문입니다.
터치스크린이 보편화되면서 핀치(pinch) 제스처, 확대, 두 손가락 스와이프(swipe), 세 손가락 탭(tap) 및 여러 복잡한 제스처를 사용하게 되었습니다. 그러나 장애로 인해 이러한 복잡한 제스처를 사용할 수 없는 사용자도 있습니다. 따라서 복잡한 제스처에 대한 대안을 제공해야 합니다. 예를 들면 온라인 지도 서비스는 핀치 제스처로 확대하거나 밀어내어 지도 위치를 이동할 수 있는데 +나 – 혹은 화살표 버튼과 같은 대안을 제공해야 합니다.
일반적으로 사용자가 특정 요소를 클릭 한다는 것은 click 또는 down 이벤트가 발생 함을 의미합니다. 그리고 클릭한 상태에서 손을 떼는 것은 up 이벤트를 발생 시키며 이것은 터치 기기에서도 그대로 적용됩니다. 하지만 장애가 있을 경우 요소를 잘못 누르거나 클릭하기 쉬운데, 클릭 혹은 누른 상태에서 손가락을 떼지 않는 이상 해당 요소가 실행되지 않도록 하고 요소를 누른 상태로 손가락을 이동했을 때는 요소가 실행되지 않도록 하거나 이와 유사한 대안을 제공해야 합니다.
음성 명령을 이용하여 웹 페이지를 내비게이션 하는 경우는 화면에 보이는 메뉴나 링크의 레이블을 말하게 됩니다. 그런데 화면에 보이는 레이블과 읽히는 레이블이 다를 경우에는 음성 명령을 수행하는 보조기술이 사용자가 말하는 목적을 이해하지 못할 수 있습니다. 인지 장애 사용자는 화면에 보이는 레이블과 읽히는 이름이 다를 경우 혼란을 느낍니다. 따라서 접근성 가능한 이름은 화면에 보이는 레이블과 동일하거나 유추할 수 있어야 합니다.
모바일 기기에 내장된 모션 제스처를 통해 실행할 수 있는 기능(흔들어 실행 취소, 손 전등 켜기 등)이 구현된 경우에는 이러한 모션 제스처를 사용할 수 없는 장애인 사용자가 사용할 수 있도록 기기가 고정된 상태에서도 키보드 인터페이스 등을 통해 대신할 수 있는 방법이 제공 되어야 합니다.
버튼이나 링크와 같이 실행할 수 있는 요소는 터치 혹은 클릭할 수 있는 충분한 크기를 가져야 합니다. 웹 페이지의 경우 적어도 44×44 CSS 픽셀이 되어야 합니다. 하지만 다음의 경우는 예외가 적용됩니다.
해당 페이지에 적어도
44×44CSS 픽셀을 가진 동등한 링크나 버튼 등이 있는 경우클릭할 요소가 한 문장 이거나 긴 텍스트를 가진 경우
마크업이 아닌, 웹 콘텐츠를 렌더링하는 유저 에이전트에 의해 사이즈가 결정되는 경우
특정 영역에 요소가 표시되는 것이 정보 적 측면에서 필수적일 때
웹 콘텐츠의 모든 요소는 보조 입력 장치로도 충분히 상호작용 할 수 있어야 합니다. 예를 들어 터치 기기의 보조 입력 장치는 블루투스 키보드나 스위치 등이며, 터치 기기에서만 상호작용이 가능하다면 접근성에 부합하지 않습니다.
보조 기술을 통하여 웹 페이지와 같은 곳에서 제공되는 상태 메시지에 접근할 수 있어야 합니다. 특정 키워드를 검색 했을 때 검색 결과 개수 등이 상태 메시지의 예이며 스크린리더로 해당 요소를 읽게 하려면 role="alert" 와 같은 속성을 사용해야 합니다.
Last updated
