[웹접근성 지침-일반기술 G152] 깜빡이 있는 '애니메이션 GIF 이미지'는 5초 이내에 깜빡임이 정지되어야 합니다.

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G152.html

---

'애니메이션 GIF 이미지'의 깜빡임으로 인해 사용자가 불편함을 느끼지 않도록, 깜빡임 효과를 5초 이상 주지 않도록 합니다.

---

기술설명

이 기술의 목적은 '애니메이션 GIF 이미지'가 5초 이내에 깜빡임을 정지하게 하는 것입니다.

'애니메이션 GIF 이미지'를 만들 때 얼마나 오랫동안 깜빡이게 하는지를 결정하는 3가지요소가 있습니다. 

그 3가지 요소를 통해 깜빡임의 지속 시간을 알 수 있습니다. 3가지 요소는 다음과 같습니다.

 

- 애니메이션에 삽입된 이미지의 수를 말하는 '프레임 수'

- 각각의 이미지가 보여지는 시간을 말하는 '프레임 속도'

- 애니메이션 전체에 대한 '반복 횟수'

 

쉽게 말해 애니메이션의 지속 시간은 '프레임 수'와 '프레임 속도', 그리고 '반복 횟수'를 모두 곱한 값입니다.

예를 들어 '프레임 수'가 2개이고 '프레임 속도'가 0.5초이며, '반속 횟수'가 3회라면 이 이미지의 지속 시간은 3초(= 2 × 0.5초 × 3회)가 됩니다.

 

대부분의 '애니메이션 GIF 이미지'는 일정한 프레임 속도를 가지고 있습니다. 즉 각 프레임이 표시되는 시간이 동일하다는 것입니다. 하지만 일부 프레임의 속도만 다르게 적용할 수도 있습니다.

이런 경우의 애니메이션의 지속 시간은 '각 프레임별 속도의 합계'와 '반복 횟수'를 곱한 값이 됩니다.

예를 들어 첫 번째 프레임은 0.75초 동안 표시되었고 두 번째 프레임은 0.25초 동안 표시합니다. 그리고 반복 횟수는 3회 입니다. 

그러면 이 이미지의 지속 시간은 3초(= (0.75+0.25) × 3회)가 됩니다.

 

이미지가 5초 이내에 깜빡임을 정지 시키려면 3가지 요소 중에 하나는 값을 조정해야 합니다.

5초를 넘었다면 다음과 같이 합니다. '반복 횟수'와 '프레임 속도'를 먼저 곱한 뒤에 5초를 나뉘어 줍니다.

이 과정에서 나오는 값의 소수점 이하는 버립니다. 반올림 하지 않습니다. 그리고 이 값을 각 이미지의 속도로 지정해 줍니다.

이렇게 하면 5초 이내에 정지합니다.

 

한번만 반복하는 '애니메이션도 GIF 이미지'라도 5초 이상 지연된다면, 3가지 요소 중에 하나는 값을 조정해야 합니다.

프레임수를 줄이거나, 프레임 속도를 높여야 합니다.

프레임 속도를 높이면 이미지가 일반적인 깜빡임 속도보다 더 빨라질 수 있습니다.

특히 큰 이미지의 경우 더 빠르게 느껴질 수 있습니다. 이점을 주의하세요.

 

 

예시

짧게 깜박이는 이미지가 있습니다. 이 이미지의 '프레임 수'는 2개, '프레임 속도'는 0.5초 이며 3회 반복합니다.

이 이미지의 지속 시간은 3초(= 2 × 0.5초 × 3회)로서 앞에서 말한 성공기준 5초를 초과하지 않습니다.

 

 

 

점검절차

1. '애니메이션 GIF 이미지'가 있다면 얼마나 오랫동안 깜빡이는지를 측정합니다.

2. 또는 이미지 편집기를 이용해서 프래임 수, 프레임 속도, 반복 횟수를 확인합니다.

    이것을 모두 곱합니다. 만약 프레임별로 속도가 일정하지 않다면 모든 프레임의 속도를 합한 다음에 반복 횟수를 곱합니다.

3. 값을 구하여 애니메이션 지속 시간이 5초를 초과하는지 확인합니다.

 

 

---

 

나의 정리

'애니메이션 GIF 이미지'가 반복적으로 깜빡임을 보이는 경우 5초 내에 그 깜빡임은 정지되어야 합니다.

장기간 지속적으로 깜빡임이 있으면 사용자가 불편함을 느끼므로 '5초'라는 기준을 정한 것입니다.

 

5초 이내에 정지 시키려면 '애니메이션 GIF 이미지' 가 몇 초간 깜빡이는지를 알아야 합니다.

그 시간을 알아내기 위해서는 '애니메이션 GIF 이미지'에 삽입된 이미지 수를 의미하는 '프레임 수'.

각 이미지에 적용된 시간을 의미하는 '프레임 속도'.

그리고 전체 몇 번을 반복하는지를 의미하는 '반복 횟수'를 알아야 합니다.

 

예를 들어 'NEW'라는 글자가 보였다가 안보였다 하는 '애니메이션 GIF 이미지'가 있습니다.

이 이미지는 'NEW'라는 글자가 있는 이미지'와 '글자가 없는 이미지' 두 개로 이루어 져있으며, 각각의 이미지의 프레임 속도는 0.5초입니다. 그리고 총 4회를 반복합니다. 즉 아래의 표와 같이 움직입니다.

반복	1회 반복		2회 반복		3회 반복		4회 반복
프레임	NEW		NEW		NEW		NEW
속도	0.5초	0.5초	0.5초	0.5초	0.5초	0.5초	0.5초	0.5초

 

0.5초짜리 이미지가 총 8번 나왔으므로 이 이미지가 깜빡인 시간은 총 4초가 됩니다.

5초 이하로 깜빡였으므로 사용해도 이상이 없습니다.

 

만약 5초를 넘겼다면 제작자는 이를 수정을 해야 합니다.

'프레임 수'나 '반복 횟수'를 줄이거나 '프레임 속도'를 줄여서 전체적인 시간을 줄여야 합니다.

단 '프레임 속도'를 너무 줄이면 너무 빠르게 깜빡여서 사용자에게 시각적으로 더 큰 고통을 줄 수 있으므로 적절히 조절해 주어야 합니다.

 

'애니메이션 GIF 이미지'의 깜빡임으로 인해 사용자가 불편함을 느끼지 않도록, 깜빡임 효과를 5초 이상 주지 않도록 합니다.

 

 

---

 

G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G152.html

G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds) | Techniques for WCAG 2.0

---

https://blog.naver.com/redoxup/223134941372

혼자서 웹퍼블리싱(HTML+CSS)입문과정 마스터 할 수 있다! + 도움을 받으면 더 잘 할 수 있다!!