Haeppa World

Adobe 사는 Flash, Flex 의 접근성을 높이기 위해
관련 기능을 구현하고, 범위를 확대하는 노력을 기울이고 있다.
접근성 관련 세미나까지 열면서 접근성을 보장하기 위해 심열을 기울인다.

헌데 미처 생각지 못한 부분이 있는 것 같다.
바로 Flash Player의 접근성이다.
다들 알다시피 Flex 건 Flash 건 브라우저에서 실행되기 위해서는 Flash Player가 반드시 필요하다.
헌데 Adobe가 직접 제작해서 공급하고 있을 Flash Player를 설치하는 과정에서는 접근성을 보장하지 않고 있다.

Flash Player를 설치하기 위해서는 우선 사용약관에 동의를 선택한 후 설치 버튼을 눌러야 한다.
하지만 약관에 동의하는 체크박스, 종료버튼 설치버튼 모두 해당 컨트롤의 이름을 알 수가 없다.

실제로 스크린리더를 실행하고 Tab키를 눌러보면 계속해서
버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 …
이라고 반복해서 읽어줄 뿐이다.
당연히 전맹 사용자가 스크린리더에만 의지해서 Flash Player를 설치하기란 매우 어렵다.

Adobe가 직접 만드는 비교적 간단한 대화상자인 Flash Player의 설치 과정조차 접근성을 보장하지 않는데
개별 업체의 개발자들에게
“접근성을 보장하는 컨텐츠를 만들기 위해 노력해야 한다. 그 방법은 어렵지 않다.”
라고 강조하면 얼마나 설득력이 있을까?

사소한 부분일 수 있지만 Adobe에서 가장 기본적인 부분에 신경을 쓰지 못했다는 점이 아쉬울 뿐이다.

테스트 환경
Windows XP SP3
Internet Explorer 8
Sense Reader Professional Edition v1.5.0.2
JAWS for Windows Korean v11.0.1430

-------------------------------------------------------------------------------------------------------------------------
이미 컴파일된 프로그램의 내용을 확인하기 어렵고, 보조기기의 별도 API 지원 여부를 확인할 수 없기 때문에 스크린리더의 음성출력 여부를 기준으로 판단한 내용입니다.
2010년 11월 13일에 최종테스트 되었습니다.
-------------------------------------------------------------------------------------------------------------------------

[세미나 자료]

Adobe Plash Platform Runtime Overview  [ PDF ]
Adobe Accessibility Part 1 : PDF와 Adobe Acrobat, Adobe LiveCycle를 활용한 웹접근성 [ PDF ]
2010년 웹접근성 우수 사이트 : 국립 민속박물관 사이트에 구현된 Adobe Flash 웹 접근성 활용사례 [ PDF ]
Adobe Accessibility Part 2 : Adobe Flash, Adobe Flex, Adobe AIR를 활용한 웹접근성 [ PDF ]

 

[느낌!?}

이번 행사는 Adobe 본사의 접근성 담당자가 직접 발표했다는데 큰 의미가 있는 것 같습니다.
_PDF_ 에서도 html처럼 문서의 구조화가 제일 중요한 것 같습니다. 워드 문서의 경우 PDF로 export할 때 문서의 구조 정보가 대부분 PDF로 전달되어 접근성을 보장하는 것이 용이 하다고 합니다. HWP는 PDF로 구조정보 전달하는 방법을 아직(?)찾지 못했습니다.
제가 저시력이라서 그런지 PDF 자체 접근성 기능 중 Reflow 기능이 가장 인상적이었습니다. 이 기능은 화면을 확대했을 때 위/아래 스크롤은 물론 좌/우 스크롤까지 해야하는데, 확대시 옆으로 밀려서 잘리는 텍스트을 자동으로 아래줄로 줄바꿈 해주는 기능이라고 합니다.

_Flex_ 도 접근성을 보장합니다. 하지만 모든 컴포넌트에 대한 것은 아니고 접근성을 지원하는 컴포넌트들이 있습니다. Flex4에서는 이러한 컴포넌트가 확대되었습니다. 그동안 접근성이 보장되지 않았던  RichText, RichEditableText, 무비 플레이어 부분이 접근성을 보장하는 컴포넌트에 추가되어 상당히 반가웠습니다. (이전에는 플렉스 내의 텍스트 편집창과 무비플레이어 이용이 매우 어려웠습니다.)

_Flash_ 는 그동안 접근성 보장한다는 것만 알았지 실제로 구현된 사이트를 찾기가 쉽지 않았습니다.
국립 민속박물관의 플래시 접근성이 좋다고 하니 정말 반가웠습니다.
얼른 사용해봐야겠네요 ^^

-------------------------------------------------------------------------------------------------------------------------
위 자료는 한국 Adobe 사에서 세미나 참석자를 대상으로 이메일로 제공한 것입니다.
AGENDA 부분에 longdesc로 일정을 넣었습니다. (스크린리더 사용자는 Alt+Enter를 눌러서 해당 내용을 확인할 수 있습니다)
-------------------------------------------------------------------------------------------------------------------------

HTML5 오픈 컨퍼런스(http://webappscon.com/html5/)
2010/07/02

"CSS3"에 대해 발표하신 정찬명님의 자료
http://naradesign.net/wp/2010/07/05/1365/

"HTML5 마크업"에 대해 발표하신 신현석님의 자료
http://hyeonseok.com/soojung/event/2010/07/03/588.html

"HTML5 자바스크립트 API" 에 대해 발표하신 경준호님의 자료
hhttp://firejune.com/1616

"한국형 웹 콘텐츠 접근성 지침 2.0" 에 대해 발표하신 현준호님의 자료
http://jhyun.wordpress.com/2010/07/02/html5-%ec%98%a4%ed%94%88-%ec%9b%b9-%ec%bb%a8%ed%8d%bc%eb%9f%b0%ec%8a%a4-%eb%b0%9c%ed%91%9c%ec%9e%90%eb%a3%8c-%ec%9b%b9-%ec%a0%91%ea%b7%bc%ec%84%b1-%ec%a7%80%ec%b9%a8-2-0-%ec%86%8c%ea%b0%9c/

“실전 HTML5 가이드” PDF 다운로드
http://html5.creation.net/html5-guide.pdf

출처 : http://webappscon.com/html5

웹접근성에 대한 오해를 언급해준 좋은 글이 있어서 스크랩합니다.

http://hyeonseok.com/soojung/webstandards/2010/06/19/586.html

Flex3 개발자 가이드 문서입니다.
웹에서 Flex를 활용한 개발을 진행하신다면 이 문서를 참고해보세요.
문서에서 1151(1143) 페이지의
Chapter 37: Creating Accessible Applications
에서 접근성 관련 이슈들을 다루고 있습니다.

Flex에 대한 접근성지원 기능은 Flash와 마찬가지로 MS 윈도우즈에서만 지원합니다.
Flex에서 활용하는 모든 컨트롤에 접근성을 지원하는 것은 아니고, 일부 컨트롤은 접근성을 제공하지 않습니다.
문서 내의 접근성을 지원하는 컨트롤에 대한 내용을 참고해주세요.
참고로 html과는 달리 탭키로 포커스 이동시 이미지에는 포커스가 이동하지 않습니다.

현재 센스리더는 Flex의 일반적인 컨트롤에 대한 음성지원이 가능하지만, 네비게이션 방법에 대한 것은 명확히 정의를 내리지 못하고 있습니다. Flex에서 이동이나 선택/동작 시에는 가상커서를 해제(Ctrl-Shift-F12)하고 Flex에서 제공하는 기능키들을 사용하면 됩니다.

2009년 하반기에 엑스비전과 액츠원(actsone.co.kr)의 공동작업으로 Flex의 접근성에 대한 검토가 이루어졌습니다. 샘플과 문서를 제공해주신 정영원, 강상윤님께 감사드립니다.


출처 : http://livedocs.adobe.com/flex/

WCAG2.0을 준수하는 플래시 접근성 가이드 라인이 나왔습니다.
내용을 다 읽어보진 못 했지만 간략히 살펴보니 시각장애인을 위한 플래시 제작 가이드 라인 같습니다
짐작하시는대로 영문 사이트입니다. 마음의 준비를 하고 클릭하세요 ^^

http://www.w3.org/WAI/GL/WCAG20-TECHS/flash.html

정보화 진흥원에서 장애인 체험관을 만들다고 합니다.

[보도자료]

지방선거 사이버 홍보전, 장애인은 철저히 소외
수도권 광역단체장 후보 홈페이지 웹 접근성 수준 기대 이하

6·2 지방선거가 며칠 안 남은 가운데 온라인 홍보전 역시 뜨겁다. 이를 위해 심여를 기우려 만든 후보자들의 선거 홍보 홈페이지는 후보자들의 선거 공약만큼이나 화려하다. 하지만 이들 홈페이지에서 장애인은 또 한번 소외받고 있었다.

지난 2005년 인터넷에서의 동등한 정보접근을 보장하기 위해 정부는 웹 접근성 준수 지침을 국가표준으로 제정하고, 공공분야를 중심으로 많은 개선 노력을 기울여 왔다. 그 결과 이제는 공공기관 홈페이지뿐만 아니라 국내 주요 포털 사이트 역시 웹 접근성 수준이 크게 향상되어 장애인도 비장애인만큼이나 인터넷을 생활 속에서 널리 활용할 수 있게 되었다.

그럼 이번 지방선거의 출마한 후보자들의 선거 홍보 사이트는 어떨까? 대표적으로 최대 격전지로 꼽히고 있는 수도권 광역단체장 후보자들의 홈페이지를 들여다 보았다. 결론부터 말하자면, 몇몇 후보자들의 경우를 제외하고 장애인을 배려한 모습은 찾아보기 어려웠다. 조금만 관심을 갖고 노력했다면 정보 습득 시 인터넷에 크게 의존하는 장애 유권자들의 표심을 확실히 얻을 수 있었으렸만...

지역별로 살펴보면, 인천광역시장에 출마한 송영길 후보와 안상수 후보 모두 홈페이지의 접근성은 매우 낮았다. 마우스를 사용하지 못하는 중증 지체장애인이나 음성 출력에 의존하는 시각장애인은 거의 대부분의 메뉴를 선택조차 하기 힘든 상태였다.

서울 지역의 경우 한명숙 후보의 홈페이지는 상대 오세훈 후보의 사이트에 비해 장애인이 후보자 양력이나 공약 및 활동 상황을 손쉽게 확인할 수 있었다. 오세훈 후보 페이지는 시각장애인이나 지체장애인에 대한 배려는 부족했던 데 비해서 주요 동영상 자료에서 자막을 제공하고 있어 청각장애 유권자들도 후보자의 여러 활동 모습을 동영상을 통해 확인할 수 있었다.

경기도의 경우 유시민 후보 사이트는 수도권 후보자들의 사이트들 중 가장 접근성이 잘 보장되어 있었다. 어떤 장애를 갖고 있는 유권자라도 유 후보가 누구인지, 어떤 공약을 갖고 출마했는지 등을 메뉴를 하나하나 눌러가며 확인할 수 있었다. 이에 비해 김문수 후보의 홈페이지는 이미지 링크에 대해 대체 텍스트를 제공하고 있지 않아 시각장애 유권자가 방문했을 때 김 후보에 대한 어떤 정보도 얻기 어려운 상태였다. 손동작에 어려움을 겪는 지체장애인 역시 이용에 불편을 겪을 수밖에 없었다. (각 후보 홈페이지 평가 결과는 아래 도표 참조.)

이번 웹 사이트 평가를 직접 담당한 ‘정보접근성사용자모임’ 박문수 활동가는 “출마자들의 면면을 알아보고 투표에 임하는 것은 유권자의 기본 의무이다. 유세장을 찾거나 각종 홍보 유인물을 이용하기 어려운 중증 장애인들은 후보자 선택을 위해 인터넷에 공개된 정보에 크게 의존할 수밖에 없는데, 정작 후보자들의 홈페이지는 이런 처지의 장애 유권자를 전혀 고려하고 있지 않아 안타깝다”며, “인터넷이 점점 더 우리의 생활에서 중요해지고 있는 요즘, 선출직 후보자들부터 솔선하여 웹 접근성 표준을 준수할 때 장애와 차별 없는 인터넷 세상을 좀 더 빨리 실현할 수 있지 않겠는가”라고 평가 소감을 밝혔다.

현행 ‘장애인차별금지 및 권리구제 등에 관한 법률’ 제27조 3항에서는 공직선거후보자 및 정당은 장애인에게 후보자 및 정당에 관한 정보를 장애인 아닌 사람과 동등한 정도의 수준으로 전달할 것을 규정하고 있다. ‘정보접근성 사용자 모임’ 회원 20여명은 이번 평가 결과를 바탕으로 선거 후보자들의 홈페이지에서의 장애인 차별 시정을 인권위에 요청하는 한편, 선거관리위원회에도 문제를 제기할 예정이다.

 

수도권 광역단체장 후보자 홈페이지 평가 결과

후보자	자막 제공	키보드 접근(%)	대체 텍스트  제공(%)	폼 컨트롤 레이블 제공(%)
김문수 www.kimmoonsoo.or.kr	낮음	낮음	21	0
송영길 www.bull.or.kr	낮음	좋음	해당 없음	해당 없음
안상수 www.ahnsangsoo.kr	낮음	낮음	해당 없음	해당 없음
오세훈 www.ohsehoon.kr	보통	보통	8	64
유시민 www.usimin.net	낮음	가장 좋음	84	52
한명숙 www.seoul2010.net	가장 좋음	좋음	99	0

2010.5.31

정보접근성사용자모임
박문수, 김혜일

몇 해 전부터 광고 게시글 때문에 커뮤니티와 사이트들이 가입절차를 까다롭게 만들고 있습니다. 가입등급에 글쓰기 권한을 부여하지 않거나, 별도의 추가 질문에 대한 답변을 요구하고 그 답변의 성실도에 따라 가입을 승인해주는 등 여러 가지 방법이 사용되어 왔습니다.

이런 방법들은 관리자의 처리량이 늘어나기 때문에 사이트 운영 편의를 위해 가입을 확인/승인하는 보안메일을 보내거나 가입 과정에서 보안문자를 입력하도록 하는 경우도 많아지고 있습니다.

보안메일은 크게 문제가 되지 않지만 보안문자 입력의 경우는 시각장애인에게 접근성이 매우 떨어지는 방법입니다. 그림으로 표현되는 글씨를 눈으로 확인해야하는 작업이라 시각장애인이 혼자서 이것을 직접 하는 것을 불가능합니다. 그렇다고 카페나 사이트를 가입할 때마다 보이는 분에게 도움을 요청하기도 어려운 노릇이죠. 다른 정보들은 다 입력해놓고 보안문자에 걸려서 가입을 못하는 경우들이 종종 생기고 있습니다.

그림으로 된 보안문자 입력 부분에 있어서 대표적인 포털사이트인 다음과 네이버를 비교해보겠습니다.

먼저 네이버(www.naver.com) 카페의 가입 부분입니다.

 
카페 가입시 위와 같은 그림문자 입력 부분이 나타납니다. 문자를 입력하는 편집창과 새로고침 링크만 있을 뿐 시각장애인은 아무리 살펴봐도 저 그림문자를 읽어서 입력할 수 있는 방법이 없습니다.

이번엔 다음(www.daum.net) 카페의 가입을 살펴보겠습니다.

다음 카페는 네이버와는 달리 스피커 그림의 버튼이 있습니다. 저 버튼에 적혀있는 대체 텍스트는 “들리는 대로 문자 5개를 입력해주세요”입니다. 저 곳에서 엔터를 누르면 해당 그림문자를 음성으로 출력하는 기능을 합니다. 이 기능을 사용하면 시각장애인이더라도 출력되는 음성을 듣고 혼자서 그름문자를 입력하는 보안절차를 통과할 수 있습니다.

국내 사이트 외에도 구글의 지메일(www.gmail.com)을 가입할 때도 시각장애인에 대한 배려가 있는데요.

지메일에 가입할 때 위와 같은 그림문자 입력하는 절차가 나오는데 편집 창 오른쪽에 휠체어 그림이 있습니다. 저 그림에 달려있는 대체 텍스트는 “Listen and type the numbers you hear”입니다. 저 부분을 클릭하고 들어봤을 때… 당최 무슨 소리인지 알아들을 수는 없었지만;;; 장애인을 위한 배려가 있다는 것만으로도 의미가 있는 것 같습니다.

웹접근성의 기본을 다시 한번 생각해보고 싶습니다. “장애가 있더라도 비장애인과 동일한 웹을 누리게 하자”는 취지가 모든 사이트에 반영되었으면 합니다.
웹접근성을 보장한다는 취지에서 다음 카페의 보안문자 입력은 아주 좋은 본보기라고 할 수 있습니다. 보안문자 입력은 비시각장애인은 그냥 지나칠 수 있는 부분이지만, 이것을 놓치지 않았다는 점에 의미가 있습니다. 특정 장애영역에서 접근할 수 없는 부분에 대해 대체수단을 제공한다는 정신이 아주 중요합니다. 이러한 정신으로 웹을 만들 때만 비로소 진정한 접근성이 보장되는 웹을 구현할 수 있을 것 같습니다.

보안문자에 대한 백남중 부장님의 포스팅을 참고해보세요.
http://njpaiks.egloos.com/2848997

-------------------------------------------------------------------------------------------------------------------------
위 내용은 보안문자 입력을 설정해놓은 카페에만 해당하는 부분입니다. 보안문자 입력을 설정해놓지 않은 카페에서는 시각장애인이 가입을 하는데 문제가 되지 않습니다.
또한 특정 사이트가 나쁘다라는 비방을 하기 위한 것도 아닙니다. 좋은 예를 들어서 앞으로의 발전 방향을 제시하는 것이 목적입니다.
위 내용은 2010년 4월 20일 기준으로 작성되었습니다.
-------------------------------------------------------------------------------------------------------------------------