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