모든 사용자설정 컨트롤에 적절한 role 및 속성과 상태를 부여하는 필수 ARIA 속성이 있는지 확인합니다.
예를 들어 맞춤 체크박스의 상태를 올바르게 전달하려면 role="checkbox" 및 aria-checked="true|false"가 필요합니다.
ARIA가 맞춤 컨트롤에 누락된 의미 체계를 제공하는 방식에 관한 일반적인 개요는 ARIA 소개를 참고하세요.
수동 테스트 방법
모든 맞춤 대화형 컨트롤에 적절한 ARIA 역할이 있는지 확인하려면 Chrome DevTools 접근성 창 또는 스크린 리더를 사용하여 페이지를 테스트합니다. JAWS와 NVDA는 Windows에서 널리 사용되는 두 가지 스크린 리더입니다. VoiceOver는 MacOS에 내장된 스크린 리더입니다.
CSS를 사용하면 <div> 및 <button> 요소의 스타일을 지정하여 동일한 시각적 어포던스를 전달할 수 있지만 스크린 리더를 사용할 때는 두 환경이 매우 다릅니다.
<div>은 일반적인 그룹화 요소이므로 스크린 리더는 <div>의 텍스트 콘텐츠만 알려줍니다.
<button>는 '버튼'으로 발표됩니다. 이는 사용자가 상호작용할 수 있음을 알리는 훨씬 더 강력한 신호입니다.
시맨틱 및 스크린 리더도 참고하세요.
해결 방법
이 문제를 해결하는 가장 간단하고 좋은 방법은 맞춤 대화형 컨트롤을 완전히 피하는 것입니다.
예를 들어 버튼처럼 작동하는 <div>를 실제 <button>로 바꿉니다.
<div>를 유지해야 하면 role="button" 및 aria-pressed="false"를 <div>에 추가합니다.
이제 스크린 리더가 <div>의 역할과 상호작용 상태를 알려줍니다.
중요한 이유
보조 기술 사용자가 콘텐츠를 경험하는 방식을 제대로 이해할 수 있는 유일한 방법은 스크린 리더를 사용하여 직접 콘텐츠를 확인하는 것입니다. 스크린 리더를 직접 사용하면 콘텐츠에 라벨이 지정되는 방식, 보조 기술 탐색에 방해가 되는 요소를 명확하게 파악할 수 있습니다. 시맨틱 마크업을 보조 기술이 해석하는 방법을 잘 모르는 경우 시맨틱 소개를 복습하세요.
접근성 검토 방법도 참고하세요.