자동으로 깜빡이거나 움직이는 요소는 사용자에게 불편함을 줍니다. 그러므로 정지 시킬 수 있는 버튼을 주는 것이 좋습니다.
기술설명
이 기술의 목적은 자동으로 이동이나 깜빡임이는 콘텐츠에 대한 제어기술을 제공하는 것입니다.
(이런 제어기술이 제공되어야 WCAG의 기준에 준수 할 수 있습니다.)
이런 제어 기술을 담은 제어기(= 메뉴 또는 버튼)은 눈에 잘 보여야 하고 키보드로도 사용이 가능해야 합니다.
제어기는 페이지의 상단, 또는 움직이는 콘텐츠 옆에 위치해야 합니다.
제어기 하나로 모든 깜빡임이나 이동을 제어할 수 있게 하거나, 깜빡임이나 이동이 있는 콘텐츠 옆에 별도의 제어기를 두는 것도 방법입니다.
예시
[예시1] 주식시장의 티커 테이프
웹 페이지의 화면 하단에 자동으로 스크롤 되는 '티커 테이프(ticker tape)'에 최신 주식 시장 정보가 표시됩니다.
'일시 정지' 버튼을 사용하면 티커 테이프가 정지 됩니다. 일시 정지를 해제하면 다시 주식 시장 정보가 표시됩니다.
*티커 테이프: 전보처럼 한 줄로 쭉 출력되는 내용을 말한다.
[예시2] 텔레컨퍼런싱 도구(Teleconferencing Tool)
원격 화상회의를 하는 웹 페이지에서 말하고 싶은 사람들의 순서가 표시됩니다.
페이지 내에 있는 체크 박스를 사용하여 사람을 추가하거나 제거 할 수 있습니다.
이때 변경된 순서 표시를 자동으로 업데이트 할지 또는 '새로고침'을 누를 때만 업데이트 할지를 선택할 수 있습니다.
자동 업데이트를 선택하면 '새로 고침' 버튼은 비활성화 됩니다.
자료
G4: 콘텐츠가 일시 중지되고 일시 중지된 지점에서 다시 시작할 수 있도록 허용
G191: 깜박이는 콘텐츠 없이 페이지를 다시 로드 하는 링크, 버튼 또는 기타 메커니즘 제공
SCR22: 스크립트를 사용하여 깜박임을 제어하고 5초 이내에 중지합니다.
점검절차
1. 웹 페이지에 동작을 멈출 수 있게 하는 메뉴나 버튼이 있는지 확인합니다.
2. 활성화 시켜봅니다.
3. 이동, 깜빡임, 자동 업데이트가 정지 되는지 확인합니다.
나의 정리
홈페이지 내에 사용자의 의사와는 상관없이 자동으로 업데이트가 되거나 움직이거나 깜빡이는 요소들이 있을 수 있습니다.
이렇게 자동으로 작동되는 요소들을 불편해 하는 사용자들이 있습니다.
그러므로 자동으로 작동되는 요소를 정지 시킬 수 있는 기능을 사용자에게 제공해 주어야 합니다.
사용자가 쉽고 빠르게 찾아 사용할 수 있게 하려면 웹 페이지 제일 상단에 배치하거나 해당 요소 옆에 배치해야 합니다.
제어기는 키보드로도 사용이 가능해야 합니다.
제어기를 제공하는 방법에는 크게 두 가지가 있습니다.
하나의 제어기가 모든 깜빡이는 요소와 움직이는 요소와 자동 업데이트 되는 요소를 정지 시키는 것입니다.
예를 들어 한 페이지에 깜짝이는 요소와 움직이는 요소 그리고 실시간 정보를 제공하는 요소가 있다면 상단에 있는 '정지'버튼 하나로 이 모든 요소를 정지하게 만드는 것입니다.
다른 하나는 깜빡이거나 움직이거나 자동으로 업데이트되는 요소 마다 각각의 '정지'기능을 주는 것입니다.
자동으로 깜빡이거나 움직이는 요소는 사용자에게 불편함을 줍니다. 그러므로 정지 시킬 수 있는 버튼을 주는 것이 좋습니다.
G186: Using a control in the Web page that stops moving, blinking, or auto-updating content
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G186.html
G186: Using a control in the Web page that stops moving, blinking, or auto-updating content | Techniques for WCAG 2.0
The objective of this technique is to provide the user a control that allows him to stop moving or blinking content. Since the control is in the web page, the control itself meets the appropriate level of WCAG conformance e.g., it has appropriate contrast,
www.w3.org
