널리

안녕하세요. 웹표준화팀 한혜진입니다.

2008년 7월쯤 국내 스크린리더기인 센스리더 최신버전v1.5 에 대해서 리뷰를 쓴적이 있습니다.

센스리더 최신버전 v1.5 리뷰 보기

그때 이후로도 계속 업데이트되어 현재는 2.5.0.6 버전입니다.
기존에는 웹표준에 맞춰 마크업을 진행해도 센스리더에서 읽어주지 않거나 잘못 읽어줬던 사항들이 종종 있었습니다.
이번 업데이트에서는 그런 부분들이 개선이 되었고, 센스리더 사용자가 좀 더 편리하고 풍부한 콘텐츠를 경험할 수 있도록 개선되었습니다.

어떤 부분들이 업데이트되었는지 몇가지만 살펴보겠습니다.

센스리더 v1.5 배포 이후 업데이트된 내용

1. <a>링크에서 target을 blank로 설정하면 '새 창'이라고 음성 출력함
2. 폼콘트롤내에 title이 없이 연계된 <label>만 있을 때 <label>의 내용을 읽어주지 않던 문제 수정.
3. title 속성을 <label>,< legend>, <span>, <div>, <p>, <form>, <fieldset> 태그 등에서도 읽어주도록 수정.
4. 링크, 이미지맵링크, 이미지버튼, 이미지에서 내용이나 title을읽을 수 없던 문제를 "툴팁 읽기 기능"을 이용해서 확인할 수 있도록 수정.
5. 테이블 제목을 읽어주지 않던 문제 수정
6. 가상커서상태에서 입력 가능한 프레임을 만났을 경우 '멀티라인 편집창'이라고 읽어줌. Enter 키를 누른 후 입력 가능.

1.<a>링크에서 target을 blank로 설정하면 '새 창'이라고 음성 출력함.

기존에는 새창으로 뜨는 경우도, 그냥 링크라고 읽어주어 갑작스런 새창의 등장에 혼란스러웠는데
이제는 target="blank"로 되어 있으면 '새창'이라고 읽어줍니다.

2. 폼콘트롤에서 title 속성이 없이 <label>만 있을 때 읽어주지 않던 문제 수정

기존에는 폼콘트롤(input, select 등) 에 title 속성이 없으면 <label>을 읽어 주지 않는 버그가 있었습니다.
지금은 폼콘트롤에 title이 없어도 <label>을 잘 읽어주고 있습니다.

3. title 속성을 < label>, <legend>, <span>, <div>, <p>, <form>, <fieldset> 태그 등에서도 읽도록 수정함.

title을 <label>,< legend>, <span>, <div>, <p>, <form>, <fieldset> 등에 사용하는 경우는 거의 없지만,
어떻게 읽어주는 지는 알아두면 좋을 것 같습니다.

3-1. <span>, <div>, <p>에 title 이 있을 경우
(해당 태그의 영역 확인을 위해 노란색으로 배경을 주었음)

3-2. form과 fieldset에 title이 있을 경우

기본 설정상태 에서는 <form>과 <fieldset>의 title을 읽어주지 않습니다.
하지만 아래 처럼 설정을 바꿔주면 읽을 수 있습니다.

설정방법
스크린리더 → 설정 (Crtl+Shift+F9) → 가상커서설정→ 에서 아래와 같이 '폼시작, 끝읽기' 와 '필드셋 시작, 끝읽기'를 '선택' 으로 바꿔줍니다.
(스페이스 바를 눌러서 '해제'를 '선택' 으로 바꿀 수 있습니다. )



실제로 스크린리더 사용자가 이렇게 설정을 바꿔서 사용하는 경우는 거의 없다고 하니,
<form>,<fielset>에 title을 사용해서 뭔가를 제공하려고 하는 것은 불필요한 작업일 수 있습니다.
그래도 <form>과 <fieldset>의 title을 읽어주도록 설정 한 후에는 어떻게 읽어주는지 궁금하니 알아보도록 하겠습니다.

3-2-1. <form>에 title 이 있을 경우

3-2-2. <fieldset>, <legend>에 title 이 있을 경우

4. 링크, 이미지맵링크, 이미지버튼, 이미지에서 title을 읽을 수 없던 문제를
툴팁 읽기 기능을 이용해서 확인할 수 있도록 수정.

이미지맵 링크, 이미지버튼, 이미지 등에는 거의 대부분 alt만을 씁니다.
<a>링크에도 title을 사용할 경우가 거의 없습니다.
하지만 title을 꼭 써야만 하는 특별한 경우에 title을 읽어줄 수 있도록 개선되었습니다.
다만, 아래와 같이 '툴팁 읽기' 설정을 '선택' 으로 바꾼 후에 읽어주는 것이 가능합니다.

툴팁 읽기 설정 방법
스크린리더 → 설정 (Crtl+Shift+F9) → 가상커서설정→ 툴팁 읽기 를 '선택' 으로 바꿔줍니다.
(스페이스 바를 눌러서 '해제'를 '선택' 으로 바꿀 수 있음. )
※ 툴팁 읽기 기능은 '해제' 상태가 기본 설정 상태이며 ,스크린리더 사용자가 기본 설정을 바꿔 사용하는 경우는 거의 없다고 합니다.

'기본 설정'상태와 '툴팁 읽기 선택' 상태에서 음성 출력에 대한 비교

예제	코드	음성출력
	<img src="img_sam_01.gif" alt="석양" width="100" height="75" />	기본 설정 상태: 석양 이미지 툴팁 읽기 선택 상태: 석양 이미지
	<img src="img_sam_01.gif" alt="석양" title="빨간 석양이 바다를 아름답게 비춥니다" width="100" height="75" />	기본 설정 상태: 석양 이미지 툴팁 읽기 선택 상태 : 석양 이미지 툴팁 빨간 석양이 바다를 아름답게 비춥니다.
	<input type="image" alt="확인" title="클릭하세요" src="confirm.gif" />	기본 설정 상태: 클릭하세요 이미지버튼 툴팁 읽기 선택 상태 : 클릭하세요 이미지버튼 툴팁 클릭하세요 이미지버튼 툴팁 읽기 선택 상태에서 title이 있는 경우 title이 우선순위가 높아져 alt를 읽어주지 않음.
네이버	<a href="http://www.naver.com" title="클릭하세요">네이버</a>	기본 설정 상태: 네이버 링크 툴팁 읽기 선택 상태 : 네이버 툴팁 클릭하세요.

5.테이블 제목을 읽어주지 않던 문제 수정.

caption을 읽어줄 때 기존에는 해당 내용만 읽어주어 정확하게 무엇을 읽어주는 것인지 알기 어려웠으나,
지금은 '테이블 제목' 이라고 먼저 읽어주어 무엇을 읽어주는 지 명확해 졌습니다.

6.입력 가능한 프레임을 만났을 경우 '멀티라인 편집창'이라고 읽어주며, Enter 키를 누른 후 입력 가능.

네이버 메일의 경우 기존에는 글쓰기 창이 어디 인지 알기가 어렵고 가상커서를 해지해야만 글을 쓸 수 있었는데,
이제는 Ctrl+Tab, Ctrl+Shift+Tab 으로 프레임간 이동을 할 수 있어 글편집창으로 빠르게 이동 가능해졌고,
"프레임 시작 ~ 멀티라인 편집창" 이라고 읽어줄 때 엔터를 치면 바로 글을 쓸 수 있어 편리해 졌습니다.
( 물결(~) 표시는 페이지내 프레임 갯수인데 생략 표시 했습니다)

네이버에서 메일 쓰기

예제	음성출력
	Ctrl+Tab을 누르면 프레임이 여러개 있지만, 그중에서 멀티라인 편집창 이라고 읽어주는 곳이 글쓰기창입니다. 프레임시작 ~ 멀티라인 편집창 이라고 읽어주며 엔터를 친후에 글을 쓸 수 있음

위의 내용 외에도 많은 부분이 업데이트되었지만, 이 정도가 인터넷관련 부분에서 업데이트된 내용입니다.

오래전에 만들어진, 웹표준에 맞춰 작업되지 않은, 수많은 사이트들때문에 스크린리더 사용자가 웹을 자유롭고 빠르게 사용하긴 아직은 어렵습니다.
하지만, 센스리더 측에서 센스리더를 사용해서 인터넷을 이용할때 불편한 점들을 알려주시면 저희는 개선 방법을 모색하고,
반대로 저희가 센스리더에서 개선되었으면 하는 사항들이나 버그들을 센스리더 측에 제안하면, 적극 수용해서 반영해주고 계십니다.

이렇게 양방향으로 노력하고 있으니, 웹표준만 잘지켜서 마크업하면
모든 사람들이 동일하게 보고, 들을 수 있는 시대가 멀지 않아 보이죠? ^^

앞으로도 업데이트되는 사항을 모아서 지속적으로 업데이트할 예정입니다.
궁금한 점이 있으시면 hyejin.han앳nhn.com 으로 문의주세요.

행복한 하루되세요~