- [검수] 음성낭독장치(Screen Reader)인 센스리더의 몇 가지 특징2009. 02. 20
-
[검수] 시각장애인 사이트 사용성 테스트에서도 부분 부분 적었지만, 특징적인 부분들을 정리해 봅니다.
- 이미지는 ~이미지라고 읽어 주며, 대체 텍스트에 ~ 이미지 등의 부가 설명은 겹치므로 안 적는 것이 좋음.
이미지의 대체 텍스트 삽입시alt=" 대체텍스트"처럼 첫 시작에 빈 공간이 들어가지 안도록 작업해야 함. - h 태그 읽는 방법
(이미지일 경우, 텍스트일 경우 헤딩 음성 안내 순서 틀림)
<h2><img src="h2_title.gif" alt="회사소개"></h2>: 헤딩이 회사소개 이미지<h2>회사소개</h2>: 회사소개 헤딩이
alt와title의 혼재 시<a href="notice.html" title="공지사항"><img src="moer.gir" alt="더보기"></a>
: 공지사항 그래픽 링크이전 버젼에서는 a태그 내의 타이틀을 처리하지 않았으나, 접근성에서 타이틀의 비중이 높아집에 따라 타이틀의 처리 순서를 상위로 배치 하면서 이미지의 alt 태그를 읽어주지 않는 현상 있었음.
- 링크는 띄어 읽음. 키보드로 한 번 더 조작하여야 함.
예) 네이버바로가기<a href="http://naver.com">네이버</a>: 네이버바로가기 (멈춤 키보드로 이동 후) 네이버 링크 - 키보드 ctrl + F6 의 조합으로 헤딩간 이동 가능. (구조화 된 문서 구조의 필요성에 대해 다시 한번 더 생각하면 좋은 부분입니다.)
- display 속성을 읽거나 읽지 않도록 선택 가능 함. 디자인적으로만 안보이게 하는 경우는
display: none아닌visibility: hidden속성을 이용하는 것이 좋습니다. - 스크린리더 실행시 브라우저 상 포커스가 사라지는 데 이 부분은 환경 설정에서 설정 가능함. (가상커서 옵션)
- 특수기호 및 부호들은 기본 옵션 상황에서는 읽지 않고, 읽기 설정해 주어야지 인식.
예) 처음 -> 끝 : 처음 끝 (중간에 있는 기호들은 안 읽으며, 설정을 바꾸어 주면 읽어 줌) - 대체 텍스트, 테이블에 대한 설명은 간단 명료하게. (과잉친절은 좋지 않아요)
- 게시판 설명은 중요한 설명이 있는 경우가 아니면 굳이 필요없게 느껴진다는 의견.
- 대체텍스트가 굳이 필요없는 경우는 (텍스트와 중복 설명이 되는 경우가 간혹 발생할 수 있음) alt="" 이런 식으로 처리하는 것이 도움이 나음.
- ~ 입니다. 등의 꾸민 문장보단 간단하게.
- alert? 경고창은 어떻게 인식 될까?
- 접근성 항목 중 자바스크립트 부분에 대해 예민하게 고려하게 되너 alert를 거의 배제 하고 작업 진행 함.
- 로그인 성공 시 자동으로 로그아웃으로 설정이 바뀌는 것 외에 추가로 로그인 되었다고 알려주는 정보가 없음.
- alert 같은 경고창으로 소리와 함께 로그인 되었다는 상태를 안내해 주는 것이 직관적으로 로그인 되었음을 느낄 수 있음.
- optgroup은 어떻게 읽나?
- 전체를 쭉 읽어주는 경우에는 첫번째 옵션 항목 콤보박스라고 읽고 넘어갑니다. (예: 한국어 콤보박스)
- 키보드를 이용하여 셀레트박스에 접근하여 셀렉트 박스를 활성화 시키면 "가상커서 선택 해제 언어선택 한국어 콤보상자" 라는 메세지가 나오고 방향키로 셀렉트 박스 내용을 하나하나 내리면 아래와 같이 읽어줍니다. 특이사항은 중간에 설정 된 그룹명은 읽어주지 않지만 순서상으로는 인식하고 건너 뜀.
코드예제
<select id="a" class="a" name="a" title="언어선택">
<option selected="" value="1">한국어</option>
<option value="2">미국어</option>
<option value="3">중국어</option>
<optgroup label="나라별">
<option value="가">중국</option>
<option value="나">대만</option>
<option value="다">홍콩</option>
</optgroup>
<option value="4">일본어</option>
</select>선택 옵션 읽는 방법: 한국어 일의팔, 미국어 이의팔, 중국어 삼의팔, 중국 오의팔, 대만 육의팔, 홍콩 칠의팔, 일본어 팔의팔
- 이미지는 ~이미지라고 읽어 주며, 대체 텍스트에 ~ 이미지 등의 부가 설명은 겹치므로 안 적는 것이 좋음.
