링크 및 버튼과 같은 상호작용 요소는 상태를 나타내고 대화형이 아닌 요소와 구분되어야 합니다. 상호작용 요소가 용도와 상태를 나타내는지 확인하려면 시각적 테스트와 스크린 리더 테스트를 모두 사용하세요.
수동 테스트 방법
상호작용 요소는 시각적으로 그리고 스크린 리더를 사용하여 테스트해야 합니다.
시각적 포커스 테스트
시각적 포커스를 수동으로 테스트하려면 페이지를 TAB 키로 탐색하세요.
- 각 대화형 요소로 탭할 수 있나요?
- 상호작용 요소에 도달했을 때 사용자가 요소와 상호작용할 수 있다는 시각적 단서가 있나요?
- 각 상호작용 요소를 선택하면 모양이 변경되나요?
각 대화형 요소의 포커스 표시기 스타일을 지정하는 방법에는 여러 가지가 있습니다.
한 가지 방법은 :focus 의사 클래스의 스타일을 지정하는 것입니다.
이 스타일은 포커스를 맞추는 데 사용된 입력 장치나 방법과 관계없이 요소에 포커스가 있을 때마다 적용됩니다.
포커스 스타일을 지정하는 방법을 자세히 알아보세요.
스크린 리더로 테스트
스크린 리더를 사용하여 페이지를 탐색하고 스크린 리더가 각 상호작용 컨트롤의 이름, 컨트롤의 역할, 현재 상호작용 상태를 알려주는지 확인합니다. 요소의 역할이 불분명하고 요소의 상태가 불분명한 경우 적절한 ARIA 역할을 추가해야 할 수도 있습니다.
맞춤 컨트롤에 ARIA 역할 포함하기에서 자세히 알아보세요.
상호작용 요소에 라벨이 지정되는 방식에도 주의를 기울여야 합니다. 스크린 리더 및 기타 보조 기술의 사용자는 라벨을 사용하여 해당 요소의 맥락을 이해합니다. 모호한 라벨은 흔히 사용되지만 콘텐츠 탐색에 도움이 되지 않습니다. 라벨 및 대체 텍스트를 개선하는 방법을 알아보세요.
중요한 이유
컨트롤의 기능에 대한 시각적 힌트를 제공하면 사용자가 사이트를 운영하고 탐색하는 데 도움이 됩니다. 이러한 힌트를 어포던스라고 합니다. 어포던스를 사용하면 사용자가 다양한 기기에서 사이트를 사용할 수 있습니다.