모든 맞춤 컨트롤에 적절한 role 및 속성과 상태를 부여하는 필수 ARIA 속성이 있는지 확인합니다.
예를 들어 맞춤 체크박스는 상태를 올바르게 전달하기 위해 role="checkbox" 및 aria-checked="true|false"가 필요합니다.
ARIA 및 HTML을 사용하여 커스텀 컨트롤에 누락된 시맨틱을 제공하는 것이 가장 좋은 시점을 파악하는 방법을 알아봅니다.
테스트 방법
모든 맞춤 대화형 컨트롤에 적절한 ARIA 역할이 있는지 확인하려면 Chrome DevTools 접근성 창 또는 화면 리더를 사용하여 페이지를 테스트합니다.
JAWS 및 NVDA는 Windows용으로 가장 많이 사용되는 스크린 리더 중 하나입니다. VoiceOver는 macOS에 내장된 스크린 리더입니다.
CSS를 사용하면 <div> 및 <button> 요소에 스타일을 지정하여 동일한 시각적 어포던스를 전달할 수 있지만 스크린 리더를 사용할 때는 환경이 매우 다릅니다. <div>은 일반 그룹 요소일 뿐이므로 스크린 리더는 <div>의 텍스트 콘텐츠만 안내합니다.
<button>는 '버튼'으로 발표되므로 사용자가 상호작용할 수 있는 항목이라는 점을 더 강력하게 전달합니다.
시맨틱 및 스크린 리더도 참고하세요.
해결 방법
이 문제를 해결하는 가장 좋은 방법은 맞춤 대화형 컨트롤을 아예 사용하지 않는 것입니다. 예를 들어 버튼처럼 작동하는 <div>를 실제 <button>로 바꿉니다.
<button>Learn more</button>
<div>를 사용해야 하는 경우 role="button" 및 aria-pressed="false"를 추가합니다.
<div role="button" aria-pressed="false">Learn more</div>
이제 스크린 리더가 <div>의 역할과 대화형 상태를 알려줍니다.
중요한 이유
이전에 보조 기술을 사용해 본 적이 없다면 보조 기술 사용자에게 콘텐츠가 어떻게 표시되는지 알 수 없습니다. 지원 기술을 정기적으로 사용하고 웹사이트 또는 웹 애플리케이션의 작동 방식에 관한 의견을 공유할 수 있는 사용자와 대화하는 것이 좋습니다.
지원 기술 사용자가 콘텐츠를 어떻게 이용하는지 파악하는 또 다른 방법은 지원 기술을 사용하여 테스트하는 것입니다. 스크린 리더를 사용하면 콘텐츠에 라벨이 지정된 방식과 탐색에 장애가 있는지 더 명확하게 파악할 수 있습니다.
리소스
맞춤 컨트롤에 ARIA 역할이 있음 감사의 소스 코드를 확인할 수 있습니다.