성공기준 이해 2.2.2:일시정지, 중지, 숨김 (Level A)
요약
- 목표
- 업데이트되거나 이동하는 콘텐츠로 인해 주의가 산만해지는 사용자가 줄어든다.
- 할 일
- 사용자가 다른 콘텐츠와 동시에 발생하는 콘텐츠 변경을 제어할 수 있다.
- 중요성
- 인지 장애와 주의력 결핍이 있는 일부 사람들은 지속적인 움직임에 집중할 수 없다.
의도
이 성공 기준의 목적은 웹 페이지와 상호 작용하는 동안 사용자의 주의를 산만하게 하지 않는 것이다.
"움직이고, 깜박이고, 스크롤되는 것"은 눈에 보이는 콘텐츠가 움직이는 느낌을 전달하는 콘텐츠를 의미한다. 일반적인 예로는 영화, 동기화된 미디어 프리젠테이션, 애니메이션, 실시간 게임 및 스크롤되는 주식 시세 표시기가 있다. '자동 업데이트'란 미리 설정된 시간 간격에 따라 콘텐츠가 업데이트되거나 사라지는 것을 말한다. 일반적인 시간 기반 콘텐츠에는 오디오, 자동으로 업데이트되는 날씨 정보, 뉴스, 주가 업데이트, 자동 진행 프레젠테이션 및 메시지가 포함된다. 콘텐츠 이동, 깜박임, 스크롤 및 콘텐츠 자동 업데이트에 대한 요구 사항은 다음을 제외하고 동일하다.
- 저작자는 콘텐츠가 자동 업데이트될 때 그 빈도를 제어할 수 있는 수단을 사용자에게 제공할 수 있다.
- 몇 초 동안 자동 업데이트한 다음 중지하는 것은 거의 의미가 없으므로 자동 업데이트에 대한 5초 예외는 없다.
움직이거나 자동 업데이트되는 콘텐츠는 고정된 텍스트를 빠르게 읽는 데 어려움을 겪는 사람은 물론 움직이는 개체를 추적하는 데 어려움을 겪는 사람에게 장벽이 될 수 있다. 또한 화면 낭독기에 문제가 발생할 수도 있다.
움직이는 콘텐츠는 일부 사람들에게 심각한 방해가 될 수 있다. 특히 주의력 결핍 장애를 가진 사람들은 깜박이는 콘텐츠에 주의가 산만해져 웹 페이지의 다른 부분에 집중하기 어려워한다. 5초라는 시간은 사용자의 주의를 끌기에 충분하지만, 필요하다면 페이지를 사용하는 동안 그 산만함을 견딜 수 있을 정도의 시간이기에 지정되었다.
일시 중지된 콘텐츠는 실시간으로 다시 시작되거나 사용자가 중단한 지점부터 이어 재생할 수 있다.
-
사용자가 중단한 지점에서 일시 중지하고 다시 시작하는 것은 콘텐츠를 읽기 위해 일시 중지하려는 사용자에게 가장 적합하며 콘텐츠가 실시간 이벤트 또는 상태와 연결되지 않을 때 가장 잘 작동한다.
참고
읽기 시간 제한과 관련된 추가 요구 사항은 2.2.1: 시간 제한 조정을 참조하라.
-
일시 정지 및 현시점 화면으로 이동(일시 정지가 해제될 때)은 실시간 또는 본질적으로 "상태" 정보에 더 좋다. 예를 들어, 기상 레이더, 주식 시세 표시기, 교통 카메라 또는 경매 타이머는 콘텐츠가 다시 시작될 때 일시 중지로 인해 이전 정보가 표시되는 경우 잘못된 정보를 표시한다.
참고
콘텐츠를 숨기는 것은 일시 중지하고 현시점 화면으로 이동하는 것과 동일한 결과를 가져온다(일시 중지가 해제된 경우).
매커니즘이 "사용자가 일시 정지하는 매커니즘"으로 간주되려면 페이지를 사용할 수 없도록 사용자나 초점을 묶어두지 않는 일시 정지 수단을 사용자에게 제공해야 한다. 여기서 "일시 정지"라는 단어는 "일시 정지 버튼"이라는 의미를 의미하지만 버튼 이외의 다른 매커니즘도 사용할 수 있다. 사용자가 포커스를 두고 있는 동안에만 애니메이션을 중지하는 것(사용자가 포커스를 다른 곳으로 옮기자마자 애니메이션이 다시 시작되는 경우)은 프로세스에서 페이지를 사용할 수 없게 만들기 때문에 "사용자가 일시 정지하는 매커니즘"으로 간주되지 않는다. 이 성공 기준에 맞지 않을 것이다.
"깜박임"과 "번쩍임"이라는 용어가 때때로 동일한 내용을 나타낼 수 있다는 점에 유의하는 것이 중요하다.
- "깜박임"은 주의를 산만하게 하는 문제를 일으키는 콘텐츠를 의미한다. 깜박임은 멈추는 한 짧은 시간 동안 허용될 수 있다(또는 멈출 수 있는 한).
- "번쩍임"은 발작을 유발할 수 있는 콘텐츠를 의미한다(초당 3회 이상이고 충분히 크고 밝은 경우). 이는 단 1초도 허용할 수 없으며 발작을 일으킬 수 있다. 그리고 대부분의 사용자가 플래시를 끌 수 있는 것보다 발작이 더 빨리 발생할 수 있으므로 플래시를 끄는 것도 선택 사항이 아니다.
- 깜박임은 보통 초당 3회 이상의 속도로 발생하지 않지만, 그렇게 발생할 수도 있다. 만약 깜박임이 초당 3회 이상의 속도로 발생한다면, 이는 번쩍임으로 간주된다.
이점
- 5초 후에 깜박임을 멈추는 콘텐츠를 제공하거나 사용자가 콘텐츠 깜박임을 멈추는 매커니즘을 제공하면 특정 장애가 있는 사람들이 웹 페이지와 상호 작용할 수 있다.
- 깜박이는 콘텐츠를 사용하는 방법 중 하나는 해당 콘텐츠에 방문자의 주의를 끄는 것이다. 이는 시력이 있는 모든 사용자에게 효과적인 기술이지만 지속되면 일부 사용자에게는 문제가 될 수 있다. 읽고 쓰는 능력이 낮은 사람, 읽기 및 지적 장애가 있는 사람, 주의력 결핍 장애가 있는 사람을 포함한 특정 그룹의 경우 깜박이는 콘텐츠로 인해 웹 페이지의 나머지 부분과 상호 작용하는 것이 어렵거나 심지어 불가능할 수도 있다.
예제
- 활동에 영향을 주지 않고 일시 정지 가능한 필수 애니메이션
- 웹 사이트는 과정을 보여주는 애니메이션을 통해 사용자가 '사물이 어떻게 작동하는지'를 이해하도록 돕는다. 애니메이션에는 "일시 정지" 및 "재생" 버튼이 있다.
- 주식 시세 표시기
- 주식 시세 표시기에는 "일시 정지" 및 "재생" 버튼이 있다. 티커를 일시 정지하면 현재 표시된 주식에서 일시 정지된다. 다시 시작하면 티커가 중단된 지점에서 다시 시작되지만 표시가 지연된다는 알림이 표시된다. 주식 시세 표시기의 목적은 일반적으로 실시간 정보를 제공하는 것이므로 가장 최근에 거래된 주식 시세 표시기를 앞당기는 버튼이 있을 수도 있다.
- 실시간으로 경쟁하는 대신 사용자가 순차적으로 플레이하도록 설계된 게임
- 한쪽 당사자는 게임의 경쟁적 측면을 무효화하지 않고 게임을 일시 중지할 수 있다.
- 웹 광고
- 시청자의 관심을 끌기 위해 광고가 깜박이지만 5초 후에 중단된다.
- 양식 프롬프트
- 사용자가 양식 작성을 완료했지만 제출 버튼을 사용하지 않은 경우 양식의 제출 버튼 근처에 화살표가 깜박인다. 5초 후에 깜박임이 멈춘다.
- 애니메이션
- 애니메이션은 페이지 상단에서 실행되지만 애니메이션 하단 근처에 "애니메이션 정지" 버튼이 있다.
- "로딩" 애니메이션
- 재생을 시작하려면 일정 비율의 대용량 파일을 다운로드해야 하는 프리로드 애니메이션이 페이지에 표시된다. 애니메이션은 페이지의 유일한 콘텐츠이며 사용자에게 동영상이 로드되는 동안 기다리라고 안내한다. 움직이는 콘텐츠는 다른 콘텐츠와 동시에 표시되지 않기 때문에 연결 속도가 느린 사용자의 경우 애니메이션이 5초 이상 실행될 수 있더라도 이를 일시 중지하거나 중지하거나 숨기는 매커니즘을 제공할 필요가 없다.
- 전체 화면 광고
- 사이트에서는 모든 사용자가 해당 사이트에서 제공되는 무료 콘텐츠에 액세스하기 전에 15초 광고를 시청해야 한다. 광고를 보는 것은 모든 사용자의 요구 사항이고 다른 콘텐츠와 동시에 표시되지 않기 때문에 광고를 일시 중지하거나 중지하거나 숨기는 매커니즘을 제공할 필요가 없다.
기법
이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기법 또는 기법의 조합을 나타낸다. 그러나 이러한 특정 기법을 사용할 필요는 없다. 다른 기법 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기법 이해, 특히 "기타 기법" 섹션을 참고하라.
충분 기법
- G4: Allowing the content to be paused and restarted from where it was paused
- SCR33: Using script to scroll content, and providing a mechanism to pause it
- G11: Creating content that blinks for less than 5 seconds
- G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)
- SCR22: Using scripts to control blinking and stop it in five seconds or less
- G186: Using a control in the Web page that stops moving, blinking, or auto-updating content
- G191: Providing a link, button, or other mechanism that reloads the page without any blinking content
오류
다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.
- F16: Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content
- F47: Failure of Success Criterion 2.2.2 due to using the blink element
- F4: Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds
- F50: Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less
- F7: Failure of Success Criterion 2.2.2 due to an object or applet for more than five seconds
점검 규칙
다음은 이 성공 기준의 특정 측면에 대한 점검 규칙이다. WCAG 준수 여부를 확인하기 위해 이러한 특정 점검 규칙을 사용할 필요는 없지만 이것은 정의되고 승인된 검사 방법이다. 점검 규칙 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 점검 규칙 이해를 참고하라.