성공기준 이해 1.4.13:마우스오버 혹은 키보드 초점을 받은 콘텐츠 (Level AA)
요약
- 목표
- 더 많은 사용자가 비지속적 콘텐츠를 인식하고 무시할 수 있다.
- 할 일
- 마우스를 올리거나 초점을 맞추면 콘텐츠가 변경되는 경우 상호 작용을 예측할 수 있는지 확인하라.
- 중요성
- 예측할 수 없는 임시 콘텐츠는 일부에게는 사용하기 어려울 수 있으며 다른 일부에게는 방해가 될 수 있다.
의도
키보드 포커스나 마우스오버에 따라 추가 콘텐츠가 나타나고 사라지면 접근성 문제가 발생하는 경우가 많다. 이러한 문제의 원인은 다음과 같다.
- 사용자가 상호작용을 실행할 의도가 없었을 수도 있다.
- 사용자는 새로운 콘텐츠가 등장했다는 사실을 모를 수 있다.
- 새로운 콘텐츠가 사용자의 작업 수행 능력을 방해할 수 있다.
이러한 상호 작용의 예로는 사용자 정의 툴팁, 하위 메뉴 및 마우스오버나 초점을 맞추면 표시되는 기타 비모달 팝업이 있다. 이 성공 기준의 목적은 이러한 방식으로 추가 콘텐츠가 나타나고 사라지는 경우 사용자가 다음을 수행할 수 있는 방식으로 저작자가 상호 작용을 설계하도록 보장하는 것이다.
- 추가 콘텐츠를 인식하고
- 페이지 경험을 방해하지 않고 닫는다.
일반적으로 페이지에 콘텐츠를 추가하는 더 예측 가능하고 접근 가능한 방법이 있으며 저작자는 이를 사용하는 것이 좋다. 이 성공 기준은 마우스 오버 및 키보드 초점에 따라 추가 콘텐츠가 나타나고 사라지도록 저작자가 선택한 경우 충족해야 하는 세 가지 조건을 정한다.
- 닫을 수 있는(dismissable)
- 호버 가능한(hoverable)
- 지속적인(persistent)
이것은 각각 별도의 섹션에서 논의된다.
닫을 수 있는
이 조건의 목적은 추가 콘텐츠가 페이지의 원래 콘텐츠를 보거나 작동하는 데 방해가 되지 않도록 하는 것이다. 확대할 경우 뷰포트에 표시되는 페이지 영역이 상당히 줄어든다. 마우스 사용자는 화면의 다른 부분을 보기 위해 자주 포인터를 움직여 확대된 뷰포트를 이동한다. 그러나 제한된 뷰포트에 표시되는 페이지 영역 거의 전체가 추가 콘텐츠를 불러올 수 있어 사용자가 콘텐츠를 다시 불러오지 않고는 이동하기 어려울 수 있다. 추가 콘텐츠를 키보드로 닫을 수 있는 수단을 제공하면 이 문제를 해결할 수 있다.
또는 키보드를 통해서만 탐색할 수 있는 저시력 사용자는 확대된 뷰포트의 작은 영역이 호버 텍스트로 어수선해지는 것을 원하지 않는다. 현재 초점 영역을 가리는 것을 키보드로 닫을 방법이 필요하다.
이 조건을 충족하고 간섭을 방지하기 위해 두 가지 방법을 사용할 수 있다.
- 정보를 제공하지 않는 배경 그래픽과 같은 순전히 장식적인 콘텐츠와 공백을 제외하고, 호출자(trigger)를 포함한 다른 콘텐츠를 가리지 않도록 추가 콘텐츠를 배치한다.
- Esc를 누르는 등 추가 콘텐츠를 쉽게 닫을 수 있는 매커니즘을 제공한다.
비교적 작은 크기의, 대부분의 호출자(trigger)의 경우 두 가지 방법을 모두 구현하는 것이 바람직하다. 호출자가 크면 추가 콘텐츠가 호출자에서 멀리 나타날 경우 이를 알아차리는 데 문제가 있을 수 있다. 이러한 경우에는 두 번째 방법만이 적절할 수 있다.
이 성공 기준은 주의가 필요하거나, 명시적 확인 또는 개선 조치가 필요한 경우에 대해 입력 오류 메시지가 지속적으로 표시될 수 있도록 허용한다.
호버 가능한
이 조건의 목적은 대상을 가리키면 나타날 수 있는 추가 콘텐츠도 그 자체를 가리킬 수 있도록 하는 것이다. 사용자가 마우스 포인터를 호출자 위에 유지해야 하는 경우 마우스오버로 나타나는 콘텐츠를 인식하기 어렵거나 불가능할 수 있다. 추가된 콘텐츠가 큰 경우 확대해서 보는 사용자가 콘텐츠 전체를 보려면 스크롤하거나 이동해야 함을 의미할 수 있으며, 이는 사용자가 추가 콘텐츠가 사라지지 않고 호출자 밖으로 포인터를 이동할 수 없으면 불가능하다.
또 다른 일반적인 상황은 플랫폼 설정이나 보조 기술을 통해 큰 포인터가 선택된 경우이다. 여기서 포인터는 추가 콘텐츠의 상당 부분을 가릴 수 있다. 두 상황 모두에서 컨텐츠를 완전히 보는 기술은 마우스 포인터를 호출자에서 새 컨텐츠로 직접 이동하는 것이다. 이 기능은 마우스 상호 작용에 대한 화면 낭독기 응답을 활용하는 사용자에게도 상당한 이점을 제공한다. 이 조건은 일반적으로 추가 콘텐츠가 대상과 겹치거나 인접하게 위치함을 의미한다.
지속적인
이 조건의 목적은 추가 콘텐츠가 표시된 후 사용자가 해당 콘텐츠를 인식할 수 있는 적절한 시간을 갖도록 하는 것이다. 장애가 있는 사용자는 배율 변경, 포인터 이동 또는 단순히 새 콘텐츠를 볼 수 있는 영역으로 가져오는 등 여러 가지 이유로 더 많은 시간이 필요할 수 있다. 일단 표시된 콘텐츠는 다음 상황 이전에는 계속 표시되어야 한다.
- 사용자는 일반적인 사용자 경험에 따라 호출자 및 추가 콘텐츠에서 마우스오버 또는 초점을 제거한다.
- 사용자는 해제 가능 조건을 충족하기 위해 제공된 매커니즘을 통해 추가 콘텐츠를 닫는다. 또는
- 'busy' 메시지와 같이 더 이상 유효하지 않은 추가 콘텐츠로 전달된 정보가 무효화된다.
추가적인 참고 사항
- 이 기준은 추가 콘텐츠의 모양이 사용자 에이전트에 의해 완전히 제어되는 경우 이러한 문제를 해결하려고 시도하지 않는다. 눈에 띄는 예는 HTML의
title속성을 작은 툴팁으로 표시하는 브라우저의 일반적인 동작이다. - 모달 대화 상자는 키보드 포커스를 받아야 하고 마우스오버 또는 초점을 받은 상태에서 나타나서는 안 되기 때문에 이 기준의 범위를 벗어난다. 성공 기준 3.2.1, 초점 활성을 참조하라.
- 포인터 가리키기를 통해 실행될 수 있는 콘텐츠는 키보드 포커스에 의해서도 실행될 수 있어야 한다. 성공 기준 2.1.1, 키보드를 참조하라.
이점
- 콘텐츠를 확대해서 보는 저시력 사용자는 원하는 확대 비율을 줄이지 않고도 마우스를 올리거나 초점을 맞춘 상태에서 콘텐츠를 더 잘 볼 수 있다.
- 플랫폼 설정이나 보조 기술을 통해 마우스 커서의 크기를 키운 사용자는 마우스를 올리면 숨겨진 콘텐츠를 볼 수 있는 기술을 사용할 수 있다.
- 저시력이거나 인지 장애가 있는 사용자는 마우스오버 또는 초점을 받아서 나타나는 추가 콘텐츠를 인식하고 방해를 덜 받으며 호출하는 콘텐츠를 볼 수 있는 적절한 시간을 갖는다.
- 포인터 정확도가 낮은 사용자는 의도치 않게 나타난 추가 콘텐츠를 더 쉽게 닫을 수 있다.
예제
예 1: 닫을 수 있는 툴팁
예 2: 호버 가능한 툴팁
관련 자료
자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.
기법
이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기법 또는 기법의 조합을 나타낸다. 그러나 이러한 특정 기법을 사용할 필요는 없다. 다른 기법 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기법 이해, 특히 "기타 기법" 섹션을 참고하라.
충분 기법
- SCR39: Making content on focus or hover hoverable, dismissible, and persistent
- ARIA: Using role="tooltip" (Potential future technique)
- CSS: Using hover and focus pseudo classes (Potential future technique)
오류
다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.
- F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable
- Failure to make content dismissable without moving pointer hover or keyboard focus (Potential future technique)
- Failure to meet by content on hover or focus not remaining visible until dismissed or invalid (Potential future technique)