본문 바로가기

1.4.13 마우스를 올리거나 초점을 받은 콘텐츠

(Level AA)

목표
더 많은 사용자가 일시적으로 표시되는 콘텐츠를 인식하고 닫을 수 있다.
할 일
마우스를 올리거나 초점으로 인해 콘텐츠가 변경되는 경우, 상호작용을 예측할 수 있도록 한다.
중요성
예측하기 어려운 임시 콘텐츠는 일부 사용자에게는 사용하기 어렵고, 다른 사용자에게는 방해가 될 수 있다.

성공 기준(SC)

마우스 포인터를 올리거나 키보드 초점을 받은 뒤 이를 제거하는 동작으로 추가 콘텐츠가 표시되었다가 숨겨지는 경우, 다음을 모두 충족해야 한다.

해제 가능

추가 콘텐츠가 입력 오류를 전달하거나 다른 콘텐츠를 가리거나 대체하지 않는 경우를 제외하고, 마우스 포인터를 올리거나 키보드의 초점을 이동하지 않고도 추가 콘텐츠를 해제할 수 있는 메커니즘이 제공되어야 한다.

마우스 포인터를 올릴 수 있음

마우스 포인터를 올려 추가 콘텐츠가 표시될 수 있는 경우, 추가 콘텐츠가 사라지지 않은 상태에서 포인터를 그 추가 콘텐츠 위로 이동할 수 있어야 한다.

지속적

추가 콘텐츠는 마우스 포인터를 내린 경우나, 초점 받은 상태가 해제되거나, 사용자가 이를 해제하거나, 해당 정보가 더 이상 유효하지 않게 될 때까지 계속 표시되어야 한다.

예외: 추가 콘텐츠의 시각적 표현이 사용자 에이전트에 의해 제어되고 저작자가 수정하지 않는 경우.

참고 1

사용자 에이전트가 제어하는 추가 콘텐츠의 예로는 HTML title 속성[HTML]을 사용해 생성되는 브라우저 툴팁이 있다.

참고 2

마우스 포인터를 올리거나 초점을 받았을 때 표시되는 사용자 정의 툴팁, 하위 메뉴, 기타 모달이 아닌 팝업은 이 기준이 적용되는 추가 콘텐츠의 예이다.

참고 3

이 기준은 추가 콘텐츠를 표시하게 만든 구성요소 자체가 아니라, 그 밖에 추가로 나타나는 콘텐츠에 적용된다. 키보드 초점을 받을 때 표시되는 숨겨진 구성요소(예: 페이지의 다른 부분으로 건너뛰는 링크)는 추가 콘텐츠를 제공하는 것이 아니므로 이 기준의 적용 대상이 아니다.

키보드 초점 또는 마우스 포인터를 올리는것과 연동되어 추가 콘텐츠가 나타났다가 사라지는 경우 접근성 문제가 자주 발생한다. 이러한 문제의 원인은 다음과 같다.

  • 사용자가 해당 상호작용을 의도적으로 실행한 것이 아닐 수 있다.
  • 사용자가 새 콘텐츠가 나타났다는 사실을 알지 못할 수 있다.
  • 새 콘텐츠가 사용자의 작업 수행을 방해할 수 있다.

이런 상호작용의 예로는 포인터를 올리거나 초점을 받았을 때 표시되는 사용자 정의 툴팁, 하위 메뉴, 기타 모달이 아닌 팝업이 있다. 이 성공 기준의 목적은 추가 콘텐츠가 나타났다가 사라지는 경우 사용자가 다음을 할 수 있는 방식으로 저작자가 상호작용을 설계하도록 하는 것이다.

  • 추가 콘텐츠를 인식하고
  • 페이지 이용 경험을 방해받지 않으면서 이를 해제한다.

일반적으로 페이지에 콘텐츠를 추가하는 더 예측 가능하고 접근성 높은 방법이 있으며, 저작자는 이러한 방법을 사용하는 것이 권장된다. 저작자가 마우스 포인터를 올리거나 키보드 초점과 연동해 추가 콘텐츠가 나타나고 사라지도록 결정한 경우, 이 성공 기준은 충족해야 할 세 가지 조건을 제시한다.

  • 해제 가능
  • 마우스 포인터를 올릴 수 있음
  • 지속적

각 조건은 별도의 섹션에서 설명한다.

이 조건의 목적은 추가 콘텐츠가 페이지의 원래 콘텐츠를 보거나 조작하는 데 방해가 되지 않도록 하는 것이다. 화면이 확대되면 뷰포트 안에 보이는 페이지 영역이 크게 줄어들 수 있다. 마우스 사용자는 화면의 다른 부분을 보기 위해 확대된 뷰포트를 이동하면서 포인터를 자주 움직인다. 그러나 이 제한된 뷰포트에 보이는 페이지 영역의 거의 전체가 추가 콘텐츠를 발생시킬 수 있어, 사용자가 추가 콘텐츠를 다시 발생시키지 않고 화면을 이동하기 어렵다. 추가 콘텐츠를 키보드로 해제할 수 있으면 이러한 문제를 완화할 수 있다.

또한 키보드로만 탐색할 수 있는 저시력 사용자는 확대된 뷰포트의 작은 영역이 마우스를 올릴 수 있는 텍스트로 잡혀 복잡해지는 것을 원하지 않을 수 있다. 현재 초점 영역을 가리는 콘텐츠를 키보드로 해제할 수 있는 방법이 필요하다.

이 조건을 충족하고 이러한 방해를 방지하기 위해 다음 두 가지 방법을 사용할 수 있다.

  1. 추가 콘텐츠를 표시하게 만든 구성요소를 포함한 다른 콘텐츠를 가리지 않도록 추가 콘텐츠를 배치한다. 다만 여백과 정보를 제공하지 않는 배경 그래픽 같은 순수 장식 콘텐츠는 예외로 한다.
  2. Esc 키를 누르는 방식 등 추가 콘텐츠를 쉽게 해제할 수 있는 메커니즘을 제공한다.

비교적 작은 구성요소에는 대부분 두 방법을 모두 구현하는 것이 바람직하다. 구성요소가 큰 경우, 추가 콘텐츠가 해당 구성요소에서 떨어진 위치에 나타나면 사용자가 이를 알아차리기 어려울 수 있다. 이러한 경우에는 두 번째 방법만 적절할 수 있다.

이 성공 기준은 주의, 명시적 확인 또는 수정 조치가 필요한 경우가 있으므로 입력 오류 메시지가 계속 표시되는 것을 허용한다.

이 조건의 목적은 대상에 마우스를 올렸을 때 나타나는 추가 콘텐츠 자체에도 마우스를 올릴 수 있도록 하는 것이다. 사용자가 추가 콘텐츠를 보려면 사용자가 마우스 포인터를 트리거위에 계속 두어야 하는데, 마우스 포인터를 올렸을 때 나타나는 콘텐츠를 인식하기 어렵거나 불가능할 수 있다. 추가 콘텐츠가 큰 경우, 확대된 화면에서는 사용자가 전체 콘텐츠를 보기 위해 스크롤하거나 화면을 이동해야 할 수 있다. 이때 포인터를 해당 구성요소 밖으로 이동하여 추가 콘텐츠가 사라진다면, 사용자는 전체 콘텐츠를 볼 수 없다.

또 다른 일반적인 상황은 플랫폼 설정이나 보조 기술을 통해 큰 포인터가 선택된 경우이다. 이 경우 포인터가 추가 콘텐츠의 상당 부분을 가릴 수 있다. 두 상황 모두에서 콘텐츠 전체를 보기 위한 방법은 트리거에서 새 콘텐츠 위로 마우스 포인터를 직접 이동하는 것이다. 이 기능은 마우스 상호작용에 대한 스크린리더 피드백을 사용하는 사용자에게도 큰 이점을 제공한다. 이 조건은 일반적으로 추가 콘텐츠가 대상과 겹치거나 인접해 위치함을 의미한다.

이 조건의 목적은 추가 콘텐츠가 표시된 후 사용자가 이를 인식할 충분한 시간을 갖도록 하는 것이다. 장애가 있는 사용자는 확대 비율을 바꾸거나, 포인터를 이동하거나, 단순히 새 콘텐츠를 시야 안으로 가져오기 위해 더 많은 시간이 필요할 수 있다. 추가 콘텐츠가 나타난 뒤에는 다음 중 하나가 발생할 때까지 계속 표시되어야 한다.

  • 일반적인 사용자 경험에 따라 사용자가 추가 콘텐츠를 표시하게 만든 트리거나 추가 콘텐츠에서 마우스를 올린 상태 또는 초점을 받은 상태를 벗어 난 경우.
  • 사용자가 해제 가능 조건을 충족하기 위해 제공된 메커니즘을 통해 추가 콘텐츠를 해제 한 경우. 또는
  • 추가 콘텐츠가 전달하는 정보가 더 이상 유효하지 않는 경우. 예를들어 유효하지 않은 “사용 중” 메세지가 있다.
  • 이 기준은 추가 콘텐츠의 표시 방식이 사용자 에이전트에 의해 완전히 제어되는 경우 이러한 문제를 해결하려고 하지 않는다. 대표적인 예는 브라우저가 HTML의 title 속성을 작은 툴팁으로 표시하는 일반적인 동작이다.
  • 모달 대화상자는 키보드의 초점을 받아야 하며, 마우스를 올린 상태 또는 초점을 받은 상태에서 나타나서는 안 되므로 이 기준의 범위를 벗어난다. 성공 기준 3.2.1, 초점을 받은 경우를 참조한다.
  • 마우스 포인터를 올려서 트리거될 수 있는 콘텐츠는 키보드 초점으로도 트리거될 수 있어야 한다. 성공 기준 2.1.1, 키보드를 참조한다.
  • 확대 상태에서 콘텐츠를 보는 저시력 사용자는 원하는 확대 비율을 줄이지 않고도 마우스를 올리거나 초점을 받은 상태에서 콘텐츠를 더 잘 볼 수 있다.
  • 플랫폼 설정이나 보조 기술을 통해 마우스 커서 크기를 키운 사용자는 마우스를 올린 상태에서 가려진 콘텐츠를 볼 수 있는 기법을 활용할 수 있다.
  • 저시력 또는 인지 장애가 있는 사용자는 마우스를 올리거나 초점을 받은 경우 나타나는 추가 콘텐츠를 인식하고 방해를 덜 받으면서 트리거 콘텐츠를 볼 충분한 시간을 가질 수 있다.
  • 포인터 정확도가 낮은 사용자는 의도치 않게 트리거된 추가 콘텐츠를 더 쉽게 해제할 수 있다.
마우스 포인터가 올라가 있고 버튼 아래에 툴팁이 표시된 버튼의 스크린샷마우스 포인터가 올라가 있고 툴팁이 표시되지 않은 버튼의 스크린샷

그림 1. 버튼 자체를 가리지 않도록, 마우스를 올리면 LVTF 버튼 아래에 툴팁이 표시된다. 그러나 이 툴팁은 버튼 아래의 콘텐츠(다음 빨간색 버튼, ~comment-zoom-content)를 가린다. 해제 가능 요구 사항을 충족하기 위해, 두 번째 이미지처럼 사용자는 마우스를 움직이지 않고 Esc 키를 눌러 툴팁을 닫을 수 있다.

툴팁이 표시되지 않고 초점 표시기가 있는 버튼의 스크린샷

그림 2. 버튼에 초점이 있을 때 툴팁이 표시되며, Esc 키를 사용해 제거할 수 있다. 스크린샷에는 동일한 LVTF 버튼이 초점을 받은 상태로 표시되지만, 툴팁은 닫혀 더 이상 표시되지 않는다.

예 2: 마우스 포인터를 올릴 수 있는 툴팁

Section titled “예 2: 마우스 포인터를 올릴 수 있는 툴팁”
 큰 마우스 포인터가 버튼 위에 있으며, 버튼 아래에 표시된 툴팁이 큰 포인터에 의해 가려지는 스크린샷버튼 아래에 툴팁이 표시되고, 툴팁 하단에 큰 마우스 포인터가 있는 스크린샷

그림 3. 버튼의 툴팁은 마우스를 올리면 버튼 바로 아래에 표시되며, 큰 포인터로 인해 쉽게 가려질 수 있다. 툴팁 자체에 마우스를 올릴 수 있으면, 사용자는 툴팁 텍스트를 보기 위해 마우스 포인터를 아래쪽 가장자리로 이동할 수 있다.

자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.

이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.

다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.

의견 남기기