웹접근성과 품질인증 책표지

웹 접근성과 관련된 일을 하다보니 어찌어찌해서 책을 출판하게 되었어요~!
책을 준비한 기간은 1년 남짓~
1년이란 준비기간은 좋은 분들과 함께한 오래 기억에 남을 시간들이었어요. ^^
글을 쓰는 동안엔 미처 느끼지 못했는데 막상 출판되고 책을 받아보니 매우 민망하고 부끄럽고 그렇습니다. ㅎㅎ

책의 제목은 “웹접근성과 품질인증” 이에요.
품질인증이라는 이슈에 대응하기에는 다소 늦은 감이 있지만 지침에 대한 설명과 사례, 구현방법, 난제해결, 직군의 역할분담, 각종 노하우, 품질인증제도 싱세, 접근성 평가방법, 화면낭독기에 대한 상세설명까지 웹 접근성을 총 망라하는 매우 폭넓은 내용으로 구성되어 있어요.

전반적으로 좋은 내용을 담고 애정을 갖고 준비한 내용이지만 제가 전담하고 가장 중점을 두었던 꼭지는 화면낭독기에 관한 내용이니까 살짝 소개를 하자면요~

화면낭독기 쪽에서는 국내에서 사용할 수 있는 화면낭독기들을 찾아보고 비교를 해봤어요.
각 요소에 대한 화면낭독기의 반응과 구현 방법의 차이에 다른 화면낭독기의 음성출력 차이를 비교/분석했구요. 화면낭독기마다 서로 다른 기능키와 운용방법에 대한 설명도 담고 있어서 구축한 사이트를 직접 평가해보고자 하는 사람에게도 유용할 것 같아요.
헤헤~ ^^*

책에 대한 자세한 정보는 책 파는 사이트에 가보시면 보실 수 있어요.
가격이 다소 비싸지만 그만큼 엄청나게 무거운 책이에요. 
840쪽이나 되다보니 한 권의 무게가 무려 1624g!!
왠만한 노트북만큼 무겁지요 ;;;;

책에 대한 정보는 네이버 책에서~~
http://book.naver.com/bookdb/book_detail.nhn?bid=7398412

리뷰도 있네요~ ㅎㅎ
http://messinger00.blog.me/130186154988

 

끝~~~

2014/01/23 01:29 2014/01/23 01:29
해빠 이 작성.

JAWS 설치하는 방법에 대한 문의가 간혹 있어서 예전에 Freedom Scientific 홈페이지를 뒤지다가 찾아낸 방법을 공유합니다.

JAWS for windows 는 원래 영어권에서 사용하는 스크린리더이기 때문에 공식적으로는 한국어 음성지원은 하지 않았습니다. 영어권외의 국가에서는 localization을 해서 현지어로 제품을 새로 출시하곤 했습니다. 국내에도 2010년에 “실로암시각장애인복지관”에서 한글화한 “JAWS for windows v11”을 출시했는데 그 이후로 업데이트가 안되고 있습니다. 스크린리더의 특성상 잦은 기능개선이 이루어지고 v13이 거론되는 시점에서 한글화된 버전을 그대로 적용하기에는 좀 무리가 있습니다.

Freedom Scientific 홈페이지를 방문해 보면 최신 버전을 DEMO로 사용해볼 수 있습니다. DEMO 의 시간 제한은 40분입니다. 날짜 제한은 없구요. 40분이 경과한 후 재부팅하면 다시 40분을 사용할 수 있는 형태입니다. 실사용이 아닌 테스트 목적이라면 “부팅 후 40분”의 시간은 100여 만원을 절약하기에 충분한 가치가 있다고 생각합니다.

 

A. JAWS 와 한국어 TTS 다운로드

우선 Freedon Scientific 홈페이지(http://www.freedomscientific.com)에 접속해서
Products > JAWS® screen reading software 로 들어갑니다.

HOME > Products > JAWS screen reading software

JAWS의 제품소개 페이지에 들어가면 오른쪽 하단에 “Free downloads” 링크가 있습니다.
설치파일은 32bit, 64bit 버전이 나뉘어 있어서 자신의 윈도우 버전에 맞는 파일을 다운 받으시면 됩니다.

JAWS 제품소개 페이지 : http://goo.gl/dUJ4

JAWS 제품소개 페이지의 Free downloads 링크 부분

이제 영문 JAWS 프로그램을 다운 받았으니 한국어를 말할 수 있는 TTS를 다운받으면 됩니다.
국내에서는 한국어 TTS를 주로 Voiceware 사의 Yumi 엔진으로 사용하는데
Freemdom Scientific사는 RealSpeak Direct Solo Voice를 사용하고 데모 버전도 다운받을 수 있습니다.
JAWS 제품소개 페이지 좌측하단 “JAWS Features” 부분의 “Sample and download RealSpeak Solo Direct voices in various languages”로 이동합니다.

RealSpeak Solo Driect Voices 다운로드 페이지 : http://goo.gl/lUcQ7

JAWS 제품소개 페이지의 Sample and download RealSpeak Solo Direct voices in various languages 링크 부분

RealSpeak Solo Driect Voices 페이지에서 아래로 쭉 내려가다 보면
반가운 태극기 그림과 함께 “KOREAN NARAE” TTS를 다운받는 링크가 나타납니다.

KOREAN NARAE TTS 다운로드 링크 부분

 

 

B. JAWS 설치하기

JAWS와 NARAE 설치파일, J12.0.1170-64bit.exe, RSD1.0.84.101-kok-Narae-enu.exe

우선 다운 받은 JAWS와 NARAE TTS 파일을 실행해서 각각 설치합니다.
NARAE는 설치 과정 중 주의할 점이 없어서 언급하지 않고 JAWS를 설치할 때 참고할만한 부분 몇 가지를 점검할게요.

첫번째, 일반 사항

설치 과정 중 재부팅이 필요합니다. 작업중인 파일은 반드시 저장하세요. 또한 시스템에 따라서 오류를 일으킬 수 있습니다. 안전을 위해 설치 전에 시스템을 백업하세요.

두번째, 드라이버 설치

설치 과정 중 드라이버 설치에 대한 경고창이 나타납니다. 스크린리더가 화면정보를 얻기 위한 드라이버이므로 “이 드라이버 소프트웨어를 설치합니다”를 선택하세요.

이 드라이버 소프트웨어를 설치합니다. 선택

 

세번째, 원격지원 서비스 설치하지 않기

JAWS는 자체적으로 JAWS 사용자 간에 혹은 본사 고객지원을 통해 원격지원하는 기능을 포함하고 있습니다.
데모버전을 사용하면서 원격지원 할 일이 없고, 윈도우즈 터미널 서비스를 사용하기 때문에 보안에 예민한 환경에서는 설치하지 않는 것이 좋을 것 같습니다.

JAWS 설치 과정 중 “Choose Setup Type”에서 “Custom”을 선택합니다.

설치 중 Choose Setup Type 과정에서 Custom 선택

“Custom Setup”과정이 나오면 “Remote Access Support…” 항목을 클릭하고 “Entire feature will be unavailable”을 선택해서 설치항목에서 제외하도록 합니다.

Remote Access Support...항목을 설치 과정에서 제외

 

 

C. JAWS가 한국말을 하도록 설정하기

JAWS를 설치해 보면 기본적으로 영문 음성엔진이 말(?)을 합니다. 한국어 TTS를 설치했어도 설정을 바꿔주지 않으면 영어로만 말을 합니다. 우리는 한국인이니까 미리 다운받아서 설치한 NARAE의 목소리를 들을 수 있도록 설정하는 방법을 알려드릴께요.

JAWS 메인메뉴의 Options > Voices > Select a Voice Profile…로 들어갑니다.

JAWS > Options > Voices > Select a Voice Profile 메뉴로 진입하기

Default 항목을 “RealSpeak Solo Direct – (factory)”로 변경하고 OK를 클릭합니다.

RealSpeak Solo Direct 를 선택

설정하는 순간부터 JAWS가 한국말을 구사하는 것을 들으실 수 있을거에요. ㅎㅎㅎ

D. 부탁과 당부의 글

JAWS for windows 는 국내에 실제 사용자가 거의 없습니다. 정식으로 구입한 사용자가 20명도 채 안 되는 것으로 짐작되고, 그나마도 대부분이 테스트를 목적으로 하는 사용자로 보입니다. 절대 다수의 시각장애인들은 실제 컴퓨터 활용에 있어 국내 스크린리더(센스리더, 드림보이스 등)를 사용하고 있습니다.

그 이유는 일단 엄청난 가격 떄문입니다. 국내 스크린리더는 무료 제품도 있고, 유료 제품도 몇 십만원의 비용이면 구입해서 업데이트 비용없이 수년간 사용할 수 있습니다. 하지만 JAWS는 초기 구입비용이 100만원이 넘고 해마다 업데이트 비용이 200달러 정도 필요한 것으로 알고 있습니다. 더구나 대부분의 일반사용자들이 사용하는 기본 기능들에 있어서는 JAWS와 국내 스크린리더와 큰 차이가 없기 때문에, 실제 사용자들은 더더욱 JAWS를 사용하지 않고 있습니다.

가격 뿐만 아니라 기능의 차이도 있습니다. 모두 아시다시피 해외는 소프트웨어나 웹사이트 환경이 국내와 전혀 다릅니다. 이외에도 사용자들의 컴퓨터 사용패턴이나 요구사항(정말 매우 다양한)도 현저하게 차이가 납니다. 국내 스크린리더들은 이에 대한 대응으로 기능보완이 되어 있고, 수년간 비슷한 프로그램 사용패턴을 유지해 왔기 때문에 사용자들이 편하게 느끼는 반면, JAWS는 이런 대응이 전혀 되어 있지 않아서 사용자들에게는 비싸고 불편한 존재로 인식되어 있습니다.

이런 말씀을 드리는 이유는 JAWS를 근거로 접근성을 평가하거나 제작기준을 제시하면, 현실과 많이 동떨어진 결과물을 만들어낼 우려가 있다는 점입니다. 제가 이 글을 포스팅을 한 이유는 국내 스크린리더가 미처 지원하지 못하는 최신 기술, 특히 웹페이지 제작기술들에 대한 테스트에 사용되었으면 하는 바람 때문입니다. 테스트의 용도에서 벗어나 JAWS를 기준이 되어야 한다는 의견이 나타날 수 있습니다. 하지만 실제 사용자들이 부딪혀야 하는 현실은 JAWS와는 전혀 무관하다는 점을 잊지 말아야 합니다.

JAWS를 근거로 국내 스크린리더에게 기능개선을 요구할 수는 있습니다. 하지만 대다수의 국내 스크린리더 사용자를 고려하지 않은채 JAWS만을 기준으로 최신 기술을 사용하고, 이렇게 제작된 페이지나 소프트웨어로 서비스를 제공하게 되면 실제 이를 이용하는 시각장애인 사용자들은 매우 불편해질 수 있다는 점을 반드시 고려해주시길 부탁드립니다.

 

-------------------------------------------------------------------------------------------------------------------------
※ 위 내용은 2011년 9월 27일 기준으로 작성되었습니다.
------------------------------------------------------------------------------------------------------------------------

2011/09/27 17:41 2011/09/27 17:41
해빠 이 작성.

센스리더 프로페셔널 에디션 v1.5.0.1 (7/XP/VISTA)

1. 센스리더 일반

-Alt 키가 포함된 조합키를 누를 때 응용 프로그램의 메뉴가 호출되는 문제 수정
-편집창 등의 콘트롤을 '프레임'으로 음성출력하는 문제 해결
-싸이월드에서 1촌 목록을 링크로 처리 변경
-한/영 전환시 일부 오류 수정
-로그온창에서 프로그램 실행 옵션 선택시 센스리더가 정상적으로 실행되지 않는 문
제 수정
-SAPI 4 음성엔진 제어 일부 오류 수정

 

2. 센스 독서기

-녹음, 오디오 파일 변환 기본 폴더가 없는 경우 폴더를 생성하도록 수정
-독서창의 설정 메뉴에 원격 조정 메뉴 추가.
이 옵션이 해제된 경우 원격 제어 기능이 동작하지 않음. 기본값은 해제.
-완성형으로 다시 열기 기능 오류 수정

 

※ v1.2.0.3~1.5.0.0 을 설치하신 경우 인터넷을 통해 1.5.0.1로 자동 업그레이드 할 수 있습니다.
※ 업그레이드 메뉴는 센스리더메뉴>도움말 에 있습니다.

 

※ 센스리더 프로 v1.5.0.0 설치파일은 아래 링크에서 다운받을 수 있습니다.
http://haeppa.kr/70

2010/09/18 12:07 2010/09/18 12:07
해빠 이 작성.

센스리더 프로페셔널 에디션 v1.5.0.0 다운로드

 

1. 센스리더 기본

- 윈도우즈 7 운영체제 지원(32비트)
- UI Automation 지원(스크린리더나 시뮬레이션 프로그램을 위해 윈도우즈에서 지원하는 접근성 지원 기능)
- 프로그레스바 읽기 방식 변경: 하나의 윈도우에 프로그레스바가 여러 개 있는 경우 진행율을 음성 출력한 이후 프로그레스바의 갯수를 음성 출력함.
- 비스타, 윈도7 운영체제에서 디스플레이 설정 대화상자 활성(기본 디스플레이는 비활성화 되어 있음)
- 도움말 형식을 일반 HTML 구조로 변경.
- 센스리더 도움말 호출 기능 추가(기능키는 <Insert-F1>)

 

2. 센스리더 인터넷

- Alt 속성 처리 오류 수정
- 링크 처리 기능 보강 (싸이월드에서 1촌 목록 클릭 가능)

 

3. 센스 사전

- 검색 이후 포커스 문제 개선.

 

-------------------------------------------------------------------------------------------------------------------------

설치파일 다운로드 (네트워크 상황에 따라 적절한 곳 선택)

다운로드1 : xvsrd_pro-v1500.part1.rar / xvsrd_pro-v1500.part2.rar  (RAR, 199MB/185MB)
1) 좌측하단의 저속다운로드를 클릭합니다.
2) 10초를 기다린 후 원본파일 다운로드를 클릭해서 파일을 다운로드 받습니다.

다운로드2 : xvsrd_pro-v1500.part1.rar / xvsrd_pro-v1500.part2.rar  (RAR, 199MB/185MB)
1) 좌측하단의 저속다운로드를 클릭합니다.
2) 10초를 기다린 후 원본파일 다운로드를 클릭해서 파일을 다운로드 받습니다.

다운로드3 : xvsrd_pro-v1500.zip (ZIP, 393MB)
1) 우측상단의 그림문자를 입력하고 파일 다운로드(download file)를 클릭합니다.
2) 45초를 기다린 후 일반 다운로드(Regular download)를 클릭해서 파일을 다운로드 받습니다.
* 다운로드 속도가 가장 빠름.

 

* 센스리더의 라이센스가 없는 경우 데모 상태로 30분간 사용이 가능합니다.

2010/08/24 11:55 2010/08/24 11:55
해빠 이 작성.

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

http://hyeonseok.com/soojung/webstandards/2010/06/19/586.html
2010/07/06 01:19 2010/07/06 01:19
해빠 이 작성.

전국 동시 지방선거가 있기 며칠 전…
수도권의 주요 후보 6명의 홈페이지에 대한 접근성 테스트를 진행했습니다.
테스트를 진행하고 결과를 보니 의외의 부분도 많았고 참 답답하기도 했습니다.
예민한 부분이라 특정 후보를 거론하지 않으면서 후보자 홈페이지에 대한 얘기를 해보려고 합니다.
구체적인 페이지주소와 캡쳐이미지를 생략하고, 포괄적으로 적는 것이기 때문에 표현이 부정확할 수 있습니다.

일단!!
대부분의 홈페이지에서 시각장애인에 대한 배려는 거의 없었습니다.
이미지에 가장 기본적인 대체 텍스트 조차 달지 않았더군요.


사례1. 플래시 메뉴(네비게이션)의 접근성 부재

플래시 개체의 경우 접근성을 보장하는 방법들이 이미 나와있습니다. Adobe사는 접근성 관련 페이지(www.adobe.com/accessibility)를 통해 관련 문서를 제공하고 있고, 웹접근성연구소(www.wah.or.kr)의 자료실에 는 이미 해당 부분에 연구 보고서가 등록되어 있습니다. 또한 많은 업체에서 이에 대한 내용을 알고 있고, 제작해본 경험들을 가지고 있습니다.

후보자 홈페이지 6곳 중 5곳이 플래시 메뉴를 사용하고 있었고, 이 중 단 1곳만 접근성을 보장하는 메뉴를 제공하고 있었습니다.

상식적으로 생각해봐도 다른 항목들에 비해 메뉴는 상당히 중요한 비중을 차지합니다. 메뉴를 이용할 수 없다면 해당 홈페이지에서 접근할 수 있는 항목은 상당히 줄어들게 됩니다. 메인 페이지에 최근 글 목록이나 핫링크로 제공되지 않은 항목들은 아예 들어가 볼 수가 없게 되죠. 메뉴를 제외한 모든 항목에 대체 텍스트를 제공한다고 하더라도 메뉴를 이용할 수가 없다면 거의 무용지물이 되고 맙니다. 메뉴의 접근성은 이래서 매우 중요합니다.

예> 접근성을 보장하는 플래시 메뉴
www.xvtech.com / www.thinkforbl.com


사례2. 정보를 포함하는 이미지에 대한 대체 텍스트 제공 부재

선거 후보자 홈페이지에서 가장 중요한 부분은 후보자 프로필과 공약입니다. 많은 후보자 홈페이지에서 프로필과 공약을 감각적으로 꾸미기 위해 이미지를 사용하고, 하나의 이미지에 모든 내용을 넣어서 이미지 파일 하나로 올리곤 합니다. 이 방법 자체는 전혀 문제가 되지 않습니다. 텍스트 정보까지 이미지로 넣은 경우 대체 텍스트를 분명하게 제공해줘야 하는데 그렇지가 않다는 것이 문제입니다.

후보자 홈페이지 6곳 중 4곳은 프로필과 선거공약을 담은 이미지에 대한 대체 텍스트를 전혀 제공하지 않았습니다. 접근성 테스트 툴로 확인해보면 대체텍스트 제공률이 90%를 넘지만 실제 제공되는 대체 텍스트는 <01.gif>, <profile.gif>, <01-1.gif>, <공약최종.gif>, <사용자정의이미지> 같은 식이었습니다. 모두 에디터에서 자동으로 입력해주는 대체텍스트지요. 이런 경우 시각장애인이 스크린리더로 접근한다면 해당 후보의 프로필과 공약에 대한 내용은 전혀 확인을 할 수 없습니다.

후보자 홈페이지 중 1곳은 부분적으로 대체 텍스트를 제공해서 완전하지는 않지만 조금이라도 공약이나 프로필 정보를 얻을 수 있었습니다. 또 다른 후보의 홈페이지 1곳은 이미지와 함께 일반 텍스트로도 공약과 프로필 정보를 제공하고 있어서 시각장애인이 정보를 접하기 매우 수월했습니다.

단순한 이미지의 경우 대체 텍스트 제공에 “alt”값을 사용하지만, 공약과 프로필처럼 많은 내용을 담은 경우 “longdesc”속성을 사용해서 별도로 정보를 제공해주는 것이 좋습니다. longdesc는 대체 텍스트를 제공하는 별도의 페이지를 구성하기 때문에 많은 내용을 시각장애인이 쉽고 정확하게 확인할 수 있습니다.


사례3. 동영상에 소리 없이 나오는 텍스트 정보.

후보자 홍보동영상을 보면 밝고 빠른 분위기의 음악을 배경으로 여러 문구들이 화려한 effect를 뿜어내면서 나타났다 사라지고, 효과음과 함께 움직이고 지나갑니다.
시각장애인의 경우 동영상 플레이어에 대한 접근성 제공이 부족하기 때문에 동영상 재생하기조차 힘들지만 동영상을 재생하더라도 성우의 목소리나 동영상에 대한 정보를 제공하는 텍스트 정보가 없기 때문에 해당 동영상의 내용을 인지할 수가 없습니다.

동영상에서 성우가 멋진 목소리로 문구들을 읽어나갈 경우는 그나마 다행이지만 후보자 홈페이지 6곳 중 4곳은 동영상에 대한 텍스트(음성) 정보를 전혀 제공하지 않았습니다. 후보자 홈페이지 중 2곳은 동영상을 제공하는 페이지 안에 (완전하진 않지만) 동영상에 나타나는 글자와 대화 내용을 텍스트로 제공하고 있어서 시각장애인은 물론 청각장애인에 대한 접근성을 보장하고 있었습니다.

시각장애인에게 동영상의 어떤 부분에 텍스트 정보가 필요한지 궁금하시면, 동영상을 틀어놓고 눈을 감고 소리만 들어보시면 쉽게 아실 수 있습니다. ^^


사례4. 스킵 네비게이션과 체계적인 헤딩 정보의 제공

처음 테스트를 진행할 때만 해도 후보자 홈페이지에서 스킵 네비게이션은 기대도 하지 않았습니다. 대다수의 후보자 홈페이지는 선거를 앞두고 새로 만들어지기 때문에 전혀 기대하지 않았죠. 역시나 후보자 홈페이지 6곳 중 5곳은 스킵 네비게이션은 물론 논리적인 헤딩 구조 조차 제공하지 않았습니다.

홈페이지에서 시각장애인에게 중요한 것 중 하나가 페이지 내의 빠른 이동입니다. 웹페이지를 눈으로 보는 경우 메뉴항목와 정보를 제공하는 내용 부분을 한 번 바라보는 것(시선을 보내는 것)만으로 확인할 수 있지만, 스크린리더를 사용하는 경우 방향키나 탭키 등을 하나씩 누르고 소리를 들어서 내용을 확인하고 이동해야 합니다. 시간이 매우 많이 걸리는 작업입니다. 간단히 말해서 눈으로 스치듯이 보면서 지나가는 항목 하나하나를 키보드를 일일이 눌러가면서 확인해야 하는 것입니다. 이런 반복작인(매우 소모적인) 작업을 피하고 원하는 항목으로 빠르게 이동하기 위해 필요한 것이 스킵 네비게이션과 논리적인 헤딩구조 입니다.

스킵네비게이션은 현재 페이지 링크를 통해 메뉴나 메인컨텐츠 부분으로 빠르게 이동하는 기능을 제공합니다. 또한 논리적인 헤딩 구조는 페이지내의 구조(depth)를 알 수 있도록 하며, 스크린리더의 기능으로 헤딩의 구조를 따라서 손쉽게 원하는 항목으로 이동하는 것이 가능합니다.

주목할만한 점은 후보자 홈페이지 1곳은 <본문으로 바로가기> 스킵네비게이션과 논리적인 헤딩 구성으로 시각장애인이 홈페이지안을 이동하는데 큰 도움을 주고 있었습니다.

참고> 스킵네비게이션에 대한 설명
http://naradesign.net/wp/2010/03/13/1221/
http://www.jangkunblog.com/wp/skip-navigation-is-not-a-quick-link/


테스트 진행 후 결론

후보자 홈페이지 접근을 시작할 때는 매우 부정적인 결과를 예상하고 답답한 마음으로 테스트를 진행했습니다. 물론 예상대로 대부분의 페이지에서 접근성을 보장하지 않고 있었지만…. 일부 후보자의 홈페이지는 (전혀 기대하지 않았던) 생각보다 높은 수준의 접근성을 보장하고 있었습니다.

이번 테스트는 현실을 알려보자는데 목적이 있었습니다. 테스트 결과는 부정적이었지만, 부분적으로나마 웹에서 시각장애인의 사용성을 고려하는 움직임이 일고 있다는 것을 확인했다는 것에 큰 의미를 두고 싶습니다.


테스트 기간 : 2010.5.17~24 (약 7일간)

2010/06/02 23:57 2010/06/02 23:57
해빠 이 작성.

접근성을 보장하는 플래시에 대한 관심이 많고 제작도 되고 있지만
실제로 제작에 대한 팁은 많이 공유되지 않고 있는 것 같습니다.
참고가 될만한 포스팅이 있어서 소개합니다.

 
플래시 네비게이션의 웹접근성 향상방안 1
http://blog.naver.com/qenie/60062695258

플래시 네비게이션의 웹접근성 향상방안 2
http://blog.naver.com/qenie/60062695117
2010/04/26 16:36 2010/04/26 16:36
해빠 이 작성.

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

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

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


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


먼저 네이버(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일 기준으로 작성되었습니다.
-------------------------------------------------------------------------------------------------------------------------

2010/04/20 13:59 2010/04/20 13:59
해빠 이 작성.

이미지에 대한 alt 태그 사용과 alt=”” 버그

센스리더는 웹페이지내의 이미지에 대해 기본적으로는 파일명을 음성출력합니다. 하지만 파일명만으로는 해당 이미지에 대한 정보를 정확히 알 수 없기 때문에 alt 태그의 정보를 활용하게 됩니다. 이미지에 대해 alt 태그로 정보를 넣어줄 경우 스크린리더는 해당 내용을 파일명 대신 음성출력하게 됩니다.



이미지의 alt 태그 유무에 따른 음성출력 예
<img src=”sub_g01.gif”>
<img src=”sub_go1.gif: alt=”전송”>
sub_g01.gif 이미지
전송 이미지


alt 태그의 정보를 활용해 음성출력하면 모든 이미지에 대해 alt 정보를 제공해야 하는지에 대한 논란이 발생할 수 있습니다. 일반적으로 의미를 갖지 않는 경계선/배경/불릿 등에 대해서는 alt=””과 같이 공백문자 처리를 함으로서 스크린리더가 이미지 파일명 조차 읽지 않고, 아무것도 없는 듯이 지나가도록 처리하고 있습니다.



이미지의 alt태그 활용 예
<img src=”sub_g01.gif”>
<img src=”hor_line01.gif” alt=””>
<img src=”sub_go1.gif: alt=”전송”>
sub_g01.gif 이미지
(아무것도 없는 듯 지나감) 
전송 이미지


위와 같이 이미지에 대해 alt=”” 태그를 사용하면 불필요한 이미지에 대한 음성출력을 막을 수 있습니다. 하지만 센스리더 프로 1.2.0.3 의 경우 이에 대한 처리에 버그가 있어서 이미지로 음성을 출력하게 됩니다. 이 버그는 1.2.0.4 BETA 이후 수정되었습니다.


센스리더 프로 v1.2.0.3 버그 (v1.2.0.4 이후 수정)
<img src=”sub_g01.gif”>
<img src=”hor_line01.gif” alt=””>
<img src=”sub_go1.gif: alt=”전송”>
sub_g01.gif 이미지
이미지
전송 이미지


이미지를 링크로 사용하는 경우가 많은데 이에 대한 음성출력은 다음과 같습니다.


이미지 링크에서 alt와 title
<a href=”#”><img src=”sub_g01.gif” alt=”전송”></a>
<a href=”#” title=”새창으로”><img src=”sub_g01.gif” alt=”전송”></a>
<a href=”#” title=”새창으로”target=”_blank”><img src=”sub_g01.gif” alt=”전송”></a>
<a href=”#” title=”새창으로”><img src=”sub_g01.gif”></a>
전송 그래픽 링크
전송 그래픽 링크
전송 새창 그래픽 링크

새창으로 그래픽 링크


이미지에서는 alt 값이 title 보다 우선합니다. a 태그 안에 있는 title 값도 img 안에 alt값이 있기 때문에 alt 값을 음성출력하게 됩니다. 링크에서 target=”_blank”는 스크린리더에서 인지해서 새창으로 음성출력하기 때문에 굳이 사용하지 않으셔도 문제가 없습니다.


-------------------------------------------------------------------------------------------------------------------------
위 내용은 센스리더 프로페셔널 에디션 v1.2.0.4를 기준으로 Internet Explorer 8에서 확인된 내용이며
2010년 4월 12일 기준으로 작성되었습니다.
------------------------------------------------------------------------------------------------------------------------

2010/04/12 14:15 2010/04/12 14:15
해빠 이 작성.

폭폭이 님이 리뷰하신 내용이 좋아서 스크랩합니다.

목록 태그에 대한 내용과 플래시 지원에 대한 내용들이 포함되어 있습니다.

http://blog.naver.com/butygal/50080391250

내용 중 새창 링크의 경우는 오해가 있는 것 같습니다.
가상커서 기본값에서는 target="_blank"를 '새창링크'라고 음성출력이 됩니다.
해당 내용은 <Ctrl-Shift-F9>를 눌러서 가상커서 설정에 들어가사면 음성출력이 되지 않도록 설정하실 수 있습니다.
2010/02/08 11:24 2010/02/08 11:24
해빠 이 작성.

« Prev : 1 : 2 : 3 : Next »