접근성 테스트: color-contrast 및 포커스

CSS는 색상 대비, 포커스 표시기의 가시성, 요소의 가시성(display:none은 접근성 트리에서 요소를 제거함), 읽기 순서(플렉스박스의 순서를 통한 시각적 재배치와 DOM 순서의 차이)를 제어합니다. CSS 선택은 장애가 있는 사용자가 인터페이스를 사용할 수 있는지에 직접 영향을 줍니다.

WCAG 2.1 AA는 일반 텍스트에 4.5:1, 큰 텍스트(18px 이상 굵은 글꼴 또는 24px 이상 일반 글꼴)에 3:1의 대비 비율을 요구합니다. AAA는 각각 7:1과 4.5:1을 요구합니다. 이 비율은 전경 텍스트 색상의 휘도와 배경 색상의 휘도를 비교합니다.

DevTools에서 텍스트 요소를 클릭한 다음 스타일 패널을 여십시오. 색상 견본에 대비 비율 배지가 표시됩니다. 확인 표시는 통과를, X는 실패를 나타냅니다. 색상 선택기에는 색상 그라데이션에 AA/AAA 임계값 선이 표시됩니다.

axe-core, Lighthouse 및 Pa11y는 모든 텍스트 요소의 대비 비율을 자동으로 검사합니다. 개발 중에 @axe-core/react와 함께 axe-core를 실행하면 브라우저 콘솔에서 실시간 대비 경고를 확인할 수 있습니다.

:focus에 CSS outline: none 또는 outline: 0을 적용하면 브라우저의 기본 포커스 링이 제거되어 키보드 탐색이 보이지 않게 됩니다. 이는 심각한 접근성 실패입니다. 포커스 표시기를 완전히 제거하지 말고 사용자 지정된 가시적 포커스 스타일로 바꾸십시오.

:focus는 마우스 클릭을 포함한 모든 포커스 이벤트에 적용되므로 클릭할 때도 보이는 링이 나타나며, 이는 디자이너가 선호하지 않을 수 있습니다. :focus-visible은 브라우저가 키보드 탐색이 사용 중이라고 판단한 경우에만 적용되므로, 마우스 클릭에는 표시하지 않고 키보드 사용자에게만 포커스 링을 제공합니다.

WCAG 2.2는 성공 기준 2.4.11(포커스 표시 AA)을 도입했습니다. 포커스 표시기는 인접한 색상과 최소 3:1의 대비를 가져야 하며 컴포넌트의 둘레를 감싸야 합니다. 사용자 지정 포커스 스타일은 단순히 존재하는 것을 넘어 이러한 요구 사항을 충족해야 합니다.

Windows 고대비 모드는 CSS 색상을 사용자가 정의한 시스템 색상으로 덮어씁니다. @media (forced-colors: active)를 사용하여 고대비 모드에서 작동하는 대체 스타일을 제공하십시오. Windows 설정 → 접근성 → 고대비에서 테스트하십시오.

WCAG 1.4.1은 정보를 전달하는 유일한 방법으로 색상을 사용하는 것을 금지합니다. 빨간색으로만 바뀌는 오류 상태는 이 기준을 충족하지 못합니다. 색상을 아이콘, 텍스트 레이블, 패턴 또는 밑줄과 결합하여 색상에 의존하지 않는 정보가 항상 제공되도록 하십시오.

WCAG 1.4.4는 콘텐츠 손실 없이 텍스트 크기를 200%까지 조정할 수 있어야 한다고 요구합니다. WCAG 1.4.12는 텍스트 간격 재정의(늘어난 문자 간격 및 줄 높이)가 레이아웃을 깨뜨리지 않아야 한다고 요구합니다. 두 요구 사항을 지원하려면 타이포그래피에 상대 단위(rem, em)를 사용하십시오.

포괄적인 접근성 CSS 테스트에는 개발을 위한 axe DevTools 브라우저 확장 프로그램, 자동화된 파이프라인 검사를 위한 Lighthouse CI, 명령줄 페이지 검사를 위한 Pa11y, 그리고 포커스 표시기의 가시성과 순서를 확인하기 위한 Tab/Shift+Tab 수동 키보드 탐색 테스트가 포함됩니다.

요소의 :focus 상태에 outline: none을 최종 CSS로 사용해서는 안 되는 이유는 무엇입니까?

CSS 접근성 테스트는 색상 대비 비율(AA 최소 4.5:1), :focus-visible을 사용한 가시적이고 WCAG 2.2를 준수하는 포커스 표시기, 정보를 전달하는 유일한 수단으로 색상을 사용하지 않는 방법, 강제 색상 모드 지원, 크기 조정 준수를 위한 상대 타이포그래피 단위를 다룹니다. 자동화 도구와 수동 키보드 테스트를 함께 사용하면 포괄적인 범위를 확보할 수 있습니다.