What's New in WCAG 2.2?
WCAG 2.1에서 WCAG 2.2로의 변경 사항
WCAG 2.2는 WCAG 2.1 이후 9가지 추가 성공 기준을 제공합니다.
WCAG2.0과 WCAG2.1 성공 기준은 WCAG2.2에서 기본적으로 동일하지만 한 가지 예외는 다음과 같습니다.
- 4.1.1 Parsing은 더 이상 사용되지 않으며 WCAG 2.2에서 제거되었습니다.
Guideline 2.4 Navigable
: 사용자가 탐색하고, 콘텐츠를 찾고, 현재 위치를 파악하는 데에 도움이 되는 방법을 제공해야 합니다.
SC 2.4.11 Focus Not Obscured (Minimum) (AA)
요약하자면, 항목이 키보드 포커스를 받았을 때 포커스 아웃라인이 부분적으로 확인 가능해야 합니다.
마우스를 사용할 수 없는 사람은 키보드 초점이 위치한 항목을 확인해야 하기 때문입니다.
WCAG success criteria:
사용자 인터페이스 컴포넌트가 키보드 포커스를 받으면 페이지 내 개발자가 만들어 낸 (Author) 콘텐츠로 인해 컴포넌트가 완전히 숨겨지지 않습니다.
Note1: 구성 가능한 인터페이스의 콘텐츠의 위치를 사용자가 변경할 수 있는 경우, 이동 가능한 콘텐츠의 초기 위치만 이 성공 기준의 테스트 및 적합성 준수에 고려됩니다.
Note2: 사용자가 연 콘텐츠는 포커스를 받는 컴포넌트를 가릴 수 있습니다. 사용자가 키보드 포커스를 진행하지 않고도 포커스가 있는 컴포넌트를 표시할 수 있는 경우, 포커스가 있는 컴포넌트는 작성자가 만든 콘텐츠로 인해 숨겨진 것으로 간주되지 않습니다.
SC 2.4.12 Focus Not Obscured (Enhanced) (AAA)
요약하자면, 항목이 키보드 포커스를 받았을 때 포커스 아웃라인이 부분적으로 확인 가능해야 합니다.
마우스를 사용할 수 없는 사람은 키보드 초점이 위치한 항목을 확인해야 하기 때문입니다.
(위 AA 항목과 작동 방식이 동일합니다.)
WCAG success criteria:
사용자 인터페이스 컴포넌트가 키보드 포커스를 받으면 페이지 내 개발자가 만들어 낸 (Author) 콘텐츠로 인해 컴포넌트가 완전히 숨겨지지 않습니다.
SC 2.4.13 Focus Appearance (AAA)
요약하자면, 충분한 크기와 대비 (명도 대비)를 가지는 포커스 아웃라인 (초점 표시기) 를 사용해야 합니다. 노인을 포함하여 많은 사람들이 시각적으로 조그마한 변화를 확인할 수 없습니다.
WCAG success criteria:
키보드 포커스가 표시될 때, 포커스 아웃라인이 다음을 모두 충족해야 합니다.
- 초점이 맞춰지지 않은 요소 또는 하위 요소와 2 CSS Pixel 두께 둘레의 면적만큼 차이가 나야 합니다.
- 초점이 맞춰진 상태와 맞춰지지 않은 상태의 동일한 픽셀 간 명도 대비 비율이 3:1 이상이어야 합니다.
Exceptions:
포커스 아웃라인은 사용자 에이전트 (-기본적으로 button, a 태그의 아웃라인 색은 지정되어 있는 것을 의미) 에 의해 결정되며, 개발자가 조정할 수 없는 경우, 또는 아웃라인과 아웃라인 배경색은 개발자가 수정할 수 없습니다.
Note1: 사용자 인터페이스 구성 요소 또는 하위 구성 요소로 인식되는 것(둘러싸기 또는 크기 결정)은 시각적 표현에 따라 달라집니다. 시각적 표현에는 컴포넌트의 보이는 콘텐츠, 테두리 및 컴포넌트별 배경이 포함됩니다. 컴포넌트의 콘텐츠, 배경 또는 테두리 외부의 그림자 및 광선 효과는 포함되지 않습니다.
Note2: 포커스 표시기를 받을 수 있는 하위 컴포넌트의 예로는 열린 드롭다운 메뉴의 메뉴 항목 또는 그리드의 포커스 가능한 셀이 있습니다.
Note3: 대비 계산은 기술(예: HTML, CSS 및 SVG) 내에서 정의된 색상을 기반으로 할 수 있습니다. 사용자 에이전트의 해상도 향상 및 앤티 앨리어싱에 의해 수정된 픽셀은 무시될 수 있습니다.
Guideline 2.5 Input Modalities
: 사용자가 키보드 이외의 다양한 입력을 통해 기능을 더 쉽게 조작할 수 있도록 합니다.
SC 2.5.7 Dragging Movements (AA)
드래그가 수반되는 모든 동작에 대해 간단한 포인터 대안(Next, previous 버튼 등) 을 제공하세요. 일부 사용자들은 마우스를 사용하여 항목을 끌 수 (드래그 할 수) 없습니다.
WCAG success criteria:
드래그 동작을 사용하여 조작하는 모든 기능은 드래그가 필수적이거나, 사용자 에이전트가 기능을 결정하거나, 개발자가 수정하지 않는 한 드래그 없이 단일 포인터로 수행할 수 있어야 합니다.
Note1: 이 요구 사항은 포인터 동작을 해석하는 웹 콘텐츠에 적용됩니다. (즉, 사용자 에이전트 또는 보조 기술을 작동하는 데 필요한 동작에는 적용되지 않음.)
SC 2.5.8 Target Size (Minimum) (AA)
페이지 내 포커스를 받는 요소들은 최소 크기를 충족하거나, 요소들 주변에 충분한 간격이 제공되어야 합니다. 신체적 장애가 있는 일부 사용자들은 서로 가까이 있는 작은 버튼을 올바르게 실행할 수 없습니다.
WCAG success criteria:
포커스를 받는 모든 요소는 다음 4가지를 제외하고 24 by 24 CSS Pixel 이상이어야 합니다.
- spacing: 24 x 24 CSS 픽셀보다 작은 대상은 24 CSS 픽셀 지름의 원이 각각의 경계 상자의 중앙에 위치할 때 원이 다른 대상이나 크기가 작은 다른 대상의 원과 교차하지 않도록 배치되면 예외입니다.
- Equivalent: 페이지 내 동일한 기능을 수행하는 요소가 24px 이상이거나 spacing 기준이 충족되면 예외입니다.
- Inline: 요소가 문장 안에 있거나, 텍스트 줄 높이에 의해 크기가 제한되는 경우 예외입니다.
- Essential: 요소가 표현되는 위치나 정보가 필수적이거나 법적으로 요구되는 경우 예외입니다.
Note1: 요소 내의 위치에 따라 공간적으로 값을 선택할 수 있는 콘텐츠는 성공 기준의 목적에 따라 하나의 대상으로 간주됩니다. 예를 들어 세분화된 값이 있는 슬라이더, 색상 그라데이션을 표시하는 색상 선택기 또는 커서를 위치시키는 편집 가능한 영역 등이 있습니다.
Note2: 인라인 대상의 경우 줄 높이는 텍스트의 흐름에 수직인 것으로 해석해야 합니다. 예를 들어, 위에서 아래로 표시되는 언어의 경우 줄 높이는 수평이 됩니다.
Guideline 3.2 Predictable
: 웹 페이지가 예측 가능한 방식으로 표시되고 작동하도록 합니다.
SC 3.2.6 Consistent Help (A)
도움말은 동일 규칙을 가지는 페이지들에서는 같은 위치에 배치되어야 합니다. 도움말이 같은 위치에 있으면 도움이 필요한 사람들이 더 쉽게 찾을 수 있습니다.
WCAG success criteria:
웹 페이지에 다음 도움말 메커니즘 중 하나가 포함되어 있고 이러한 메커니즘이 웹 페이지 집합 내의 여러 웹 페이지에서 반복되는 경우, 사용자가 변경을 시작하지 않는 한 다른 페이지 콘텐츠와 동일한 상대적 순서로 위치해야 합니다.
- 사람 연락처 정보 (전화번호, 주소 등 연락처 정보)
- 사람 연락처 메커니즘 (SNS)
- 셀프 도움말 옵션 (Self-help contents)
- 완전 자동화된 문의 메커니즘. (챗봇)
Note1: 도움말 메커니즘은 페이지에서 직접 제공되거나 해당 정보가 포함된 다른 페이지로 바로 연결되는 링크를 통해 제공될 수 있습니다.
Note2: 이 성공 기준의 경우 페이지가 연재될 때 콘텐츠가 정렬되는 방식과 동일한 상대적 순서를 고려할 수 있습니다. 도움말 메커니즘의 시각적 위치는 동일한 페이지 변형(예: CSS 중단점)에 대해 여러 페이지에서 일관되게 유지될 가능성이 높습니다. 사용자가 페이지의 확대/축소 또는 방향 변경과 같은 변경을 시작하면 다른 페이지 변형이 트리거될 수 있습니다. 이 기준은 동일한 페이지 변형(예: 동일한 확대/축소 수준 및 방향)으로 표시되는 페이지 간의 상대적 순서와 관련이 있습니다.
Guideline 3.3 Input Assistance
: 사용자가 실수를 방지하고 수정할 수 있도록 해야 합니다.
SC 3.3.7 Redundant Entry (A)
같은 세션에서 동일한 정보를 두 번 요청하지 마세요. 인지 장애가 있는 일부 사람들은 이전에 입력한 내용을 기억하는 데 어려움을 겪습니다.
WCAG success criteria:
이전에 사용자가 입력했거나 사용자에게 제공한 정보 중 동일한 프로세스에서 다시 입력해야 하는 정보는 다음과 같습니다.
- 자동 입력 되거나
- 사용자가 선택할 수 있어야 합니다.
다음 세 가지 사항은 예외입니다.
- 정보 재입력이 필수적인 경우,
- 콘텐츠의 보안을 보장하기 위해 필요한 정보이거나
- 이전에 입력한 정보가 더 이상 유효하지 않은 경우.
SC 3.3.8 Accessible Authentication (Minimum) (AA)
사람들이 로그인하기 위해 무언가를 풀거나, 기억하거나, 필사적으로 행동하도록 만들지 마세요. 인지 장애가 있는 일부 사람들은 퍼즐을 풀거나, 사용자 이름과 비밀번호를 외우거나, 일회용 비밀번호를 다시 입력하지 못합니다.
WCAG success criteria:
인증 프로세스의 어떤 단계에서도 다음 중 하나 이상을 충족하지 않는 한 인지 기능 테스트(예: 비밀번호 기억하기 또는 퍼즐 맞추기)가 필요하지 않습니다.
- 대안: 인지 기능 테스트에 의존하지 않는 다른 방법
- 메커니즘: 사용자가 인지 기능 테스트를 완료하는 데에 도움이 되는 메커니즘을 사용할 수 있음.
- 물체 인식: 인지 기능 테스트는 물체를 인식하여 풀어야 하는 것을 의미합니다.
- 개인 콘텐츠: 인지 기능 테스트는 사용자가 웹 사이트에 업로드 한 비텍스트 컨텐츠를 식별하는 테스트입니다.
Note1: '객체 인식'과 '개인 콘텐츠'는 이미지, 동영상 또는 오디오로 표현될 수 있습니다.
Note2: 이 기준을 충족하는 메커니즘의 예는 다음과 같습니다.
비밀번호 관리자를 통한 비밀번호 입력 지원. (확장 프로그램 - password entry manager)
다시 입력해야 하는 인지적 부담을 줄이기 위한 복사 및 붙여넣기. (ID/PW 입력창 내 copy & paste 기능 지원)
SC 3.3.9 Accessible Authentication (Enhanced) (AAA)
사람들이 로그인하기 위해 무언가를 풀거나, 기억하거나, 필사적으로 행동하도록 만들지 마세요. 인지 장애가 있는 일부 사람들은 퍼즐을 풀거나, 사용자 이름과 비밀번호를 외우거나, 일회용 비밀번호를 다시 입력하지 못합니다.
WCAG success criteria:
인증 프로세스의 어떤 단계에서도 다음 중 하나 이상을 충족하지 않는 한 인지 기능 테스트(예: 비밀번호 기억하기 또는 퍼즐 맞추기)가 필요하지 않습니다.
- 대안: 인지 기능 테스트에 의존하지 않는 다른 방법
- 메커니즘: 사용자가 인지 기능 테스트를 완료하는 데에 도움이 되는 메커니즘을 사용할 수 있음.
- 물체 인식: 인지 기능 테스트는 물체를 인식하여 풀어야 하는 것을 의미합니다.
- 개인 콘텐츠: 인지 기능 테스트는 사용자가 웹 사이트에 업로드 한 비텍스트 컨텐츠를 식별하는 테스트입니다.
마무리
WCAG 2.2 업데이트 항목에 대해 간단히 살펴보았습니다. 다음은 상단에 위치한 S.C 부터 understanding 항목에 대해 세세히 살펴볼 예정입니다.
Refer.
