웹 접근성 확인 - 웹 컨텐츠 감광성 뇌전증(간질) 분석 도구 (PEAT)

이번에는 웹 접근성 시, 유용한 도구 하나를 소개합니다.

 

웹 사이트 개발시, 웹 접근성이라 하면 보통 장애인 차별 금지법에 대한 것을 기반한 것으로 장애인(물론 비장애인들도)이 얼마나 쉽게 웹 사이트에 접근하여 컨텐츠를 열람하고 사용할 수 있는지에 대한 것들을 이야기합니다.

 

그러나 이 이외에도 웹 사이트에서 포함하고 있는 컨텐츠가 어린이나 노약자, 또는 일반 사용자에게 어떤 질병이나 신체적인 문제를 일으키지 않는지에 대한 것도 웹 접근성 범주로 봅니다.

 

그 중 하나가 감광성 뇌전증(Photosensitive Epilepsy)에 대한 것입니다.

말이 조금 어려운데, (저도 어렵네요. ㅎㅎ) 광(빛)에 의한 과민성 발작으로 보시면 됩니다.

 

아주아주 옛날인(?) 1997년에 일본에서 방영된 만화영화 포켓몬스터를 시청하던 700여명의 어린이들이 집단 간질 증세를 보인적이 있었는데요,

너무 현란한 화면에 빠른 영상 전환 및 깜빡임(Flicker 라고도 합니다.)으로 인해 다수의 어린이들이 발작 증세를 일으켰던 큰 사건입니다.

 

- 당시 포켓몬스터 쇼크로 불린 영상 화면 -

http://blog.naver.com/*****/220278202735

 

* 가급적 밝은 곳에서 보시기 바라며 주의하여 보시기 바랍니다. 

* 특히 어린이 분들은 보시지 마세요. 

 

- 포켓 몬스터 쇼크에 대해 더 알아보기 -

http://ko.wikipedia.org/wiki/%ED%8F%AC%EC%BC%93%EB%AA%AC_%EC%87%BC%ED%81%AC

 

 

웹 사이트를 개발할 때에도 연령대에 상관없이 모든 사용자가 접근하는 사이트라면 이러한 예민한 컨텐츠를 포함하고 있지는 않은지, 주의해야 합니다.

요즘 플래시를 통한 현란한 광고라던지, 팝업 영상 등을 출력하는 사이트들도 많은데, 이러한 컨텐츠들이 웹 접근성에 기반하여 사용자들에게 거부감을 줄 수 있는지 확인해 볼 필요가 있습니다.

 

 

위와 같이 광과민성 컨텐츠를 포함하고 있는지를 체크할 수 있는 도구로 PEAT 이라는 것이 있습니다.

위스콘신 대학에서 개발하여 제공하는 것으로 Photosensitive Epilepsy Analysis Tool(PEAT) 라는 이름을 가지며, 도구 이름 그대로 감광성 간질 분석 도구입니다.

 

웹 사이트에 포함된 컨텐츠에 애니메이션이나 비디오 영상(플래시 등)이 발작을 일으킬 가능성이 있는지 여부를 확인하여 줍니다.

발작 가능성 여부는 컨텐츠의 깜빡임, 빛과 어두운 배경 색상 간의 빠른 전환 체크 등을 기초로 PEAT 자체 개발한 분석 엔진을 통해 평가됩니다.

 

먼저 peat을 다운 받을 수 있는 사이트에 접속합니다.

PEAT 웹사이트 : http://trace.wisc.edu/peat/

 

 

 

 

페이지를 조금 더 아래로 내리면 다운 받을 수 있는 링크가 나타납니다.

 

 

[Download PEAT Beta] 버튼을 클릭합니다. 무료로 받으실 수 있습니다.

 

파일을 내려 받은 경로로 이동하여, PEAT.zip 파일의 압축을 풉니다.

압축을 풀면 여러 파일들이 있는데, PEAT.exe 파일을 실행시킵니다.

 

 

 

프로그램 실행 후, 뜨는 화면에서 Accept 를 클릭합니다.

 

 

 

디자인은 왠지 약간은 투박한 프로그램이 실행됩니다. ㅎㅎㅎ

 

 

메뉴도 많아보이고, 자칫 복잡해 보이기도 하지만, 대부분이 사이트 영상 프레임 및 화면에 대한 제어 메뉴이며, 사이트를 촬영(캡쳐)하면서 실제 감광성 컨텐츠를 많이 포함하고 있는지 체크하는 기능만 알면 됩니다.

 

참고로 해당 프로그램은 웹 사이트 뿐만 아니라 영상 매체에 대해서도 사용 가능한 툴입니다.

 

이제 본격적으로 사용하는 방법에 대해 알아 보겠습니다.

 

1) 상단 메뉴의 Capture - Start Capture 메뉴를 선택합니다.

 

 

 

2) Capture to File 다이얼로그에서 사이트 캡쳐를 위한 몇가지 옵션을 설정을 합니다.

 * Window to Capture 선택 항목에서 Open a new browser window or tab at the listed web address adn start capturing. 항목을 선택하고 Web Address 로 사이트 주소를 입력합니다. 저는 제 블로그 주소(http://ozit.tistory.com) 를 입력하였습니다.

 

 * Avi File to Capture to 는 사이트를 캡쳐한 영상 파일을 어디에 어떤 파일명으로 저장할지를 설정합니다. 기본값(Default)로 설정하였습니다.

 

 

 * 만약 아래와 같은 메시지가 뜨는 경우는 PEAT이 캡쳐하기 적당한 사이즈로 웹 브라우저를 조절하겠다는 것으로 그냥 [확인] 버튼을 클릭해주시면 됩니다.

 

 

 

 

3) 사이트를 캡쳐합니다.

 

 사이트 녹화 시간이 올라가고 있습니다. 정적인 블로그 사이트라 녹화 도중에도 큰 변화는 없습니다.

 적당한 시간을 녹화한 후, 아래 빨간 색 영역의 네모 박스 아이콘을 클릭하여 녹화를 중단합니다.

 

 

 

 

4) 녹화된 영상의 감광선 컨텐츠 포함 여부를 분석합니다.

 

 영상 녹화가 완료되면 영상 재생 제어 버튼 우측에 동그란 버튼(Analyze video)이 활성화 됩니다.

 영상 분석 버튼을 클릭합니다.

 

 

 * 사이트의 변화를 확인하면서 감광성 컨텐츠를 포함하고 있는지 가운데 큰 그래프 표시 영역에 표시됩니다.

  FAIL (CAUTION (FAIL)) 영역을 넘어가면 발작을 일으킬 만한 요소를 포함하고 있는 부분이 있다는 것이고,

  PASS (CAUTION (PASS)) 영역 이하면 문제가 발된한 요소를 포함하고 있지 않다는 것입니다.

 

 하단의 영상 바를 보면  전체적으로 녹색으로 되어 있고, 4초 부근(제가 다른 게시물로 이동하는 버튼을 클릭했을 때)에 잠깐 그래프가 올라갔지만, 여전히 PASS 영역 하단에 그래프가 위치하고 있습니다.

 

 

 

 

 이 번에는 포켓몬 쇼크 영상을 포함하고 있는 블로그(http://blog.naver.com/pyw8206/220278202735)를 녹화한 후, 해당 영상을 분석해보도록 하겠습니다.

 해당 블로그 게시물에 삽입되어 있는 포켓몬 영상을 재생시켜 보았는데, 4초 정도부터 깜빡임과 화면 전환이 심한 영상이 나오기 시작했습니다.

 PEAT 그래프 영역을 보시면 4~5초 부근에서 선 그래프가 치솟아 오르는 것을 보실 수 있습니다. 또한 CAUTION(FAIL) 한계선을 아주 가뿐하게 넘어버렸습니다. 발작을 일으킬 수 있는 문제가 있는 영상을 포함하고 있다는 의미입니다.

 

 하단의 영상 바를 보아도 4초부터 녹화가 끝날 때까지 빨간색으로 표시되어 있습니다.

 

 

 

 

PEAT을 이용하여 웹 사이트 개발 시, 사용자에게 거부감이나 발작을 일으킬만한 컨텐츠(보통 플래시입니다.)를 포함하고 있지는 않은지, 꼭 확인해보시기 바랍니다.^^