사이트 제작일기 | 웹 접근성 연구소

[검수] 시각장애인 사이트 사용성 테스트2009. 02. 19

웹 사이트 최종 점검을 하면서 시각장애인사용성 테스트를 의뢰하고 검사 결과에 대해 듣기 위해 시각장애복지관에 다녀왔었습니다. 복지관 현관임을 알려주는 규칙적인 알림 소리가 먼저 귀에 들어왔고, 엘레베이터 안의 교육일정표에서는 센스리더 교육 프로그램이 눈에 들어왔습니다.

테스트를 진행하여 주신 오준석님과 만나고 바로 사이트 검수에 대한 이야기, 그리고 간단한 이야기 시간을 가졌습니다.

아래 내용을 보시기 전에 시각장애인의 컴퓨터 활용- 전맹, 저시력인 동영상 2가지를 먼저 보시면 이해에 많은 도움이 됩니다. (백문이불여일견! 있는 자료들을 최대한 활용해 보아요.)

기본적으로 시각장애가 있는 경우 웹 이용시 불편사항, 바라는 점이라는 것을 기본 전제로 이야기 된 내용들입니다.

테스트에 이용된 화면낭독프로그램은 센스리더 프로페셔날 최신 버젼, 브라우저는 Explorer 6.0 입니다. 페이지 내 이동은 키보드의 단축키와 방향키등으로 진행 되었습니다.

전체적 측면 지적 사항

이미지와 동등한 정보를 가지고 있지 않는 대체 텍스트 (예: '콘텐츠 바로가기' 이미지의 대체 텍스트가 '본문 바로가기')
이 부분들은 전체 확인 후 수정 하였습니다.
본문 바로가기 링크와 주메뉴 부메뉴(서브메뉴) 의 이동이 부정확함.
예로 본문 바로가기의 경우 기존에는 서브페이지의 제목을 뛰어넘어 바로 콘텐츠 접근으로 하였는데 페이지 헤딩이 있는 위치가 더 낫다는 의견을 주셔서 수정 하였습니다.
전체적으로 헤딩 설정의 체계적이지 않고, 헤딩의 수가 많음, 이미지로 설정 된 헤딩과 텍스트로 설정 된 헤딩이 특정한 기준 없이 혼재 되어 있다는 지적을 받아 몇몇 중복 되어 제공되는 헤딩들을 제거 하고 순서의 흐름이 끊어지는 헤딩을 체크하는 방향으로 정리하였습니다.
센스리더의 읽기 특징 중 하나가 헤딩이 이미지인 경우는 ' 헤딩이 회사소개 이미지' 텍스트인 경우는 '회사소개 헤딩이' 이렇게 헤딩을 안내하는 순서가 틀려서 위와 같은 지적이 나왔습니다.
화면 상단에서 제공하는 skip navigation을 초기에는 '본문바로가기' 하나만 제공하였는데 '주요메뉴'도 있으면 좋겠다는 의견을 주셔서 반영하였습니다.
문장의 흐름을 자연스럽게 정리하는 것이 좋다는 의견.
이 부분은 키보드로 화면을 읽을 때 br를 이용한 강제 줄바꿈이 된 부분들에서는 한 번 더 키보드 제어가 필요하게 되므로 문장을 어색하게 만들었습니다.
예로 하단의 Copyright©2009 Korea Agency For Digital Opportunity & Promotion email to: webmaster@wah.or.kr 이 문장은 링크가 들어있는 email to: 에서 음성이 끊겼습니다. 문장이 어색하게 끊기게 되어 카피라이트정보와 이메일 정보를 각 각의 문단으로 구분하여 주는 방향으로 수정하고, 불필요한 br는 줄이는 수정을 진행하였습니다.

메인 화면

자료실과 전문가칼럼 2개의 탭 중에서 현재 어느 것이 실행 중인지 알 수 없음 -> 아래와 같이 숨김 텍스트로 정보 제공하여 음성정보 제공 할 수 있도록 수정.
<li class="on"><a href="#pds" id="psd">자료실선택</a></li> <li class="off"><a href="#column">전문가칼럼비선택</a></li>
자료실, 전문가칼럼, 공지사항의 '더보기'링크 이미지속성이 부정확하다는 지적이 나와 이 부분은 스크린리더 테스트시에도 코드상에서는 문제가 없는데 제대로 읽어주지 않아 제작사에 직접 문의하게 되었습니다.
<a href="notice.html" title="공지사항"><img src="moer.gir" alt="더보기"></a> 스크린리더 음성: 공지사항 그래픽 링크

위와 같이 이미지는 이미지와 동일한 대체텍스트를 갖게하고 링크의 title 속성으로 링크의 방향(목적)을 설정하는 것으로 작업 했었습니다. 현재 센스리더의 업데이트하면서 title의 속성이 중요해지고 있어 title이 우선순위를 갖게 되어 이미지의 대체텍스트를 읽어주지 않아 의미 전달이 제대로 되지 않았습니다. 다음과 같이 수정 진행하였습니다.

<a href="notice.html"><img src="moer.gir" alt="공지사항 더보기"></a> 스크린리더 음성: 공지사항 더보기 그래픽 링크
관련기관 링크 목록에서 이미지와 링크가 반복적으로 나오는 부분은 이미지의 alt속성을alt="0" 으로 빈값으로 처리하였습니다. 아래는 수정 전 코드입니다.
```
<img src="images/main/banner1.gif" alt="행정안전부 로고">
<a href="http://www.mopas.go.kr">행정안전부</a>
```

회원가입, 로그인, 게시판

회원가입 절차를 나타내는 단계 구분이 음성 출력으로 구분되지 않고 있으며, 단계를 설명하는 내용이 여러줄로 나뉘어져 있어 읽기에 불편한 부분을 아래와 같이 수정하고 의미없는 br없애고 CSS의 width와 padding을 이용하여 수정하였습니다.
약관 동의 라디오 버튼이나 개인정보보호정책 등의 라디오 버튼을 선택하지 않고 회원가입을 진행할 경우 이를 지적하는 메시지 확인은 출력되나 이 메시지를 확인한 후 포커스가 해당 위치로 이동하면 좋을 것 같다는 의견을 주셨습니다. 하지만 선택정보를 계속 가지고 있거나, 아님 새창으로 개인정보보호정책 콘텐츠를 보여줄 수는 없어서 실제로 구현하지는 못하였습니다.
2단계의 아이디 입력시 사용가능 여부가 화면에 표시되는데 이를 음성으로 확인할 수 없다는 지적. 오히려 이 부분은 alert 창으로 표시되는 것이 소리로도 알려줄 수 있어 좋다는 의견을 들 을 수 있었습니다. 마찬가지로 로그인 성공여부도 alert등을 이용하여 시각적으로 상단 텍스트가 변하는 것 외에 청각정보도 같이 제공하여 주면 좋겠다고 하였습니다.
2단계 마지막의 2개의 버튼은 등록은 버튼으로 취소는 링크로 서로 다르게 음성출력 됨. (게시글 등록에도 마찬가지)이 부분은 어떻게 풀어야 할 지 고민을 하였으나, 단순한 링크를 굳이 input 버튼으로 처리할 수 도 없는 부분이어서 시각적으로 2개는 버튼의 모양으로 정보를 제공할 수 있지만, 통일할 수 없어 한계를 느꼈습니다.
게시판 테이블의 설명의 경우 꼭 필요한 경우가 아니면 굳이 붙이지 않아도 될 것 같다고 하셨습니다. 단 테이블 제목 등은 필수로 있어야겠지요.
게시물에 글쓰기 할 때 첨부파일 부분에서 화면상에는 편집창과 찾아보기 버튼이 구분되어 나타나지만 음성으로는 편집버튼으로 음성 출력되며 찾아보기 버튼에만 포커스가 위치 하여 다음과 같은 어려움이 있다고 합니다.
- 따라서 첨부파일을 첨부한 경우 음성으로는 편집창에 나타난 첨부파일의 경로를 확인할 수 없음.
- 따라서 첨부파일 부분을 읽기전용편집창과 찾아보기 벝튼으로 구분되도록 설정해야함.
- 첨부파일을 세개까지 첨부할 때 구분하기 어려움. (물론 label 속성으로는 구분이 되지만 방향키로 한 줄씩 이동할 때는 순서 확인이 어려움.)
이 부분은 파일첨부 input의 기본구조의 문제이므로 해결이 불가능 하였으며 스크린 리더의 개선도 같이 필요한 부분으로 느껴졌습니다.
첨부파일을 처음엔 아래 이미지와 같이 3개의 칸을 합치고 1개의 label을 만들었으나 인식이 오히려 어렵다는 의견이 나와 합친 칸을 나누고 첨부파일1, 첨부파일2, 첨부파일3 으로 label을 수정 하였습니다.

평가를 마치며

평가를 마치며, 개인적으로 웹 사이트를 만들어 나가는 사람으로 궁금한 것들에 대해 이야기 하는 시간을 가졌습니다. 답변을 주시면서도 개인적인 의견이라는 부분에 대해서 다시한번 설명하여 주셨습니다. 나온 이야기를 간략하게 정리해 봅니다.

질문: 시각장애인 분들에게 웹 사이트에서 필요한 기능은 무엇이 있나요?

답변: 으로 글자크기조절, 배경색 조절, 글자색 조절에 대해 이야기 주셨습니다. 이유는, 약시인 분들의 경우 흰색 바탕색에 검은 글씨는 눈이 부셔서 읽기 어려워 화면을 반전시켜주는 외국의 화면확대 프로그램에서 화면 반전모드를 이용하여 보는데, 그런 경우 일반 사진들도 반전 된 칼라로 나와 아쉽다고 합니다.

질문: 그러면 익스플로러 7에서는 화면 확대기능을 제공하는데 업데이트 하는것이 좋지 않나요?

답변: 실제적으로 스크린리더기가 브라우저 업데이트 및 운영체제(예로 윈도우즈 비스타)등을 바로 바로 지원이 안되며 기술 개발에 시간이 들어가므로, 쉽게 브라우저 업데이트는 현실적으로 어렵다고 합니다. 그리고 이미 사용에 익숙해져 새로운 것을 익히는 것이 어렵기도 하고요. 이 부분은 보편적인 사용자들도 큰 혜택등을 느끼지 못하면 업데이트를 하지 않는 것과 마찬가지 같습니다.

질문: 이용하기에 좋았던 사이트는 어떤 것이 있는지?

답변: 워낙 이용할 수 있는 사이트들이 제한적이기도 하여서 무어라 이야기 할 수 없지만, 다음과 네이버 사이트가 많이 좋아지고 있다고 합니다. 개인적으로 시각장애인 전용 사이트의 콘텐츠 제공이 궁금하여 시각장애인 전용 사이트 회원 가입을 하였지만 오히려 비장애인이라 회원가입이 거부 된 적이 있다는 이야기를 드렸더니 잘 구성 된 사이트는 없다는 이야기를 주셨습니다. ^^; 그와 함께 시각장애인 전용 사이트라고 바탕색, 글자색, 글자크기 기능을 제공하지만 실제 콘텐츠의 구성은 본래 사이트에 비하면 부족하고, 콘텐츠 업데이트 및 관리가 안되어 이용하기 어렵다고 합니다. 음성을 같이 제공하면서 제어가 안 되는 경우 스크린리더기와 겹칠 수 도 있고, tab키의 이동을 위해 모든 텍스트문장에 <a href="#">문장</a> 같은 가짜링크들은 오히려 접근성을 헤 한다고 합니다.

질문: 웹 접근성을 지켜서 사이트를 만들면 사이트 이용에 정말 도움이 되나요?

답변: 많은 도움이 된다고 합니다. 시각장애인복지관 엘레베이터안 교육일정 안에는 스크린리더 교육도 있었지만, 국내 시각장애인 분들 중 컴퓨터를 이용하시는 분들은 소수입니다. 그 중에서도 웹에 접속하고 시각장애인 전용 사이트가 아닌 일반 웹을 서핑하시는 분들은 얼마나 될까요?
'에이. 이 소수의 사람들 때문에 (일명)크로스브라우징 맞추기도 힘든데 우리가 이런 고생을 해야해?' 이런 생각보단 '최소한의 접근성이라도 보장되는 사이트들이 많이 늘어나서, 사이트 이용에 두려움 없이 자유롭게 웹을 이용할 수 있는 환경을 만들어야 겠구나' 란 생각을 해 보는 것은 어떨까 합니다. 웹 접근성 연구소 사이트 하단에 있는 팀 버너스 리 경의 이야기도 다시 한 번 되새겨 보고요.