소리 시각화 by 백남중




스크린 리더는 화면에 나타난 내용을 시각장애인을 위해 음성출력 해주는 프로그램이다.

기본적으로는 화면에 나타난 내용을 모두 음성출력하지만, 화면에는 나타나지 않지만 시각장애인만을 위하여 음성출력할 필요가 있다. 이를 위하여 display:none을 많이 활용하였다. 그러나 본문이나 스타일 시트에 display:none을 하면 스크린 리더가 읽어주지 않게 됨에 따라 화면에 나타나지 않지만 음성출력만 하는 방법이 문제가 된다.

이 문제는 센스리더 파워 버전에서 본문에 display:none을 한 경우에는 화면에 나타나지 않고 음성 출력을 하지 않았지만, 스타일 시트에 정의한 경우에는 화면에 나타나지 않지만 음성 출력을 해주었기 때문에 나타난 현상이다. 즉 display:none을 본문이나 스타일 시트에서 정의하면 무조건 화면에 나타나지 않고 음성 출력을 하지 않아야 하는데 스크린 리더는 스타일 시트에 정의한 경우 음성 출력을 해주었기 때문이다.
또한 이 시기에 웹 접근성 문제가 대두되고 많은 사람들이 시각장애인의 음성 출력에 대해 관심을 가지고 화면에는 나타나지 않지만 음성으로 출력하는 방법으로 display:none을 활용하였기 때문이다.

그런데 센스리더가 프로 버전을 출시하면서 어떤 경우에도 djsplay:none을 화면이나 음성출력 하지 않기 때문에 이 방법을 채택한 많은 웹 문서에서 시각장애인이 필요한 정보를 음성으로 들을 수 없게 되었다.
예를 들어 일부 포털업체의 메인 페이지에서 시각장애인이 바로 이동할 수 있게 하기 위하여 현재 페이지 내에서 직접 이동할 수 있도록 하기 위해 accessibility link를 display:none으로 설정하여 제공하고 있지만 막상 시각장애인은 스크린 리더로 이를 들을 수 없으니 아이러니일 수 밖에 없다.

이에 화면에 보임과 스크린 리더의 음성 출력 관계를 본문에 직접 입력하거나 스타일 시트를 활용하거나 다른 방법을 활용하는 것을 사례를 들어 제시할 필요가 생겼다.
위와 같은 목적으로 Access Matters(http://www.access-matters.com)에서 다양한 방법으로 테스트한 내용을 국내외 스크린 리더를 활용하여 비교하여 보았다.
위와 관련하여 혹시라도 고민하시는 분들게 조금이라도 도움이 되었으면 하는 마음 간절하다.

테스트 프로그램:
- 센스리더 프로 Full Version
- Jaws for Windows 9.0.519U
- WinEye 6.1

1. display:none 사용
2. class: hide 활용
3. imported style sheet에 display:none 사용
4. 본문에 display:none 입력하고, embedded aural style sheet에 normal:speak 사용
5. 1x1 픽셀짜리 이미지(spacer.gif)에 Alt text 사용하고 감추기
6. 10x1 픽셀짜리 이미지(spacer.gif)에 Alt text 사용하고 감추기
7. no size를 활용하여 감추기
8. class=hidden 활용하여 감추기
9. class=offlet 활용하여 감추기
10. position:absolute 활용
11. text-indent: -5000px 활용
12. LETTER-SPACING: -1000em 활용


Style Sheet를 사용하지 않고 본문에 직접 style 지정

본문:
<P style="DISPLAY: none">These are hidden words.</P>

결과:
센스리더, JAWS, WinEye 모두 화면에 나타나지도 않고, 음성 출력도 안함.

테스트 1 페이지


본문:
<P class=hide>These are hidden words.</P>

Style Sheet:
<LINK media=screen href="Quiz%205_2_2_files/style.css" type=text/css rel=stylesheet>
<STYLE type=text/css media=all></STYLE>

결과:
센스리더 pro: 화면에 나타나고, "These are hidden words." 라고 음성 출력
JAWS 9.0: 화면에 나타나고, "These are hidden words." 라고 음성 출력
WinEye 6.1: 화면에 나타나고, "These are hidden words." 라고 음성 출력

테스트 2 페이지


본문:
<P class=srhide>These are hidden words.</P>

Style Sheet:
.srhide {
DISPLAY: none
}

결과:
센스리더, JAWS, WinEye 모두 화면에 나타나지도 않고, 음성 출력도 안함.

테스트 3 페이지


본문:
<DIV style="DISPLAY: none">
<P class=sayit>These are hidden words.</P></DIV>

Embedded Style Sheet:
<STYLE type=text/css media=all>
@media Aural
{
.sayit {
speak: normal
}
}
</STYLE>

결과:
센스리더, JAWS, WinEye 모두 화면에 나타나지도 않고, 음성 출력도 안함.

테스트 4 페이지


본문:
<IMG height=1 alt="These are hidden words." src="Quiz%205_2_5_files/spacer1x1.gif" width=1>

결과:
센스리더 pro: 화면에는 나타나지 않지만 "These are hidden words. 이미지"라고 음성 출력
JAWS 9.0: 화면에는 나타나지 않지만 "Graphics These are hidden words."라고 음성 출력
WinEye 6.1: 화면에는 나타나지 않지만 "These are hidden words."라고 음성 출력

테스트 5 페이지


본문:
<IMG height=1 alt="These are hidden words." src="Quiz%205_2_6_files/spacer10x1.gif" width=10>

결과:
센스리더 pro: 화면에는 나타나지 않지만 "These are hidden words. 이미지"라고 음성 출력
JAWS 9.0: 화면에는 나타나지 않지만 "Graphics These are hidden words."라고 음성 출력
WinEye 6.1: 화면에는 나타나지 않지만 "These are hidden words."라고 음성 출력

테스트 6 페이지


본문:
<P class=nosize>These are hidden words.</P>

Style Sheet:
<STYLE type=text/css media=all>.nosize {
FONT-SIZE: 0px;
OVERFLOW: hidden;
WIDTH: 0px;
POSITION: absolute;
HEIGHT: 0px
}
</STYLE>

결과:
센스리더 pro: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력
JAWS 9.0: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력
WinEye 6.1: 화면에 나타나지도 않고 음성 출력도 하지않음

테스트 7 페이지


본문:
<P class=hidden>These are hidden words.</P>

Style Sheet:
<STYLE type=text/css media=all>.hidden {
LEFT: 0px;
OVERFLOW: hidden;
WIDTH: 1px;
POSITION: absolute;
TOP: -500px;
HEIGHT: 1px
}
</STYLE>

결과:
센스리더 pro: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력
JAWS 9.0: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력
WinEye 6.1: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력

테스트 8 페이지


본문:
<P class=offleft>These are hidden words.</P>

Style Sheet:
<STYLE type=text/css media=all>.offleft {
LEFT: -9000px;
OVERFLOW: hidden;
WIDTH: 0px;
POSITION: absolute
}
</STYLE>

결과:
센스리더 pro: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력
JAWS 9.0: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력
WinEye 6.1: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력

테스트 9 페이지


본문:
<P class=clipped>These are hidden words.</P>

Style Sheet:
<STYLE type=text/css media=all>.clipped {
POSITION: absolute
}
</STYLE>

결과:
센스리더 pro: 화면에 나타나고, "These are hidden words." 라고 음성 출력
JAWS 9.0: 화면에 나타나고, "These are hidden words." 라고 음성 출력
WinEye 6.1: 화면에 나타나나 다음 줄과 겹치고, "These are hidden words." 라고 음성 출력

테스트 10 페이지


본문:
<P class=mod-phark>These are hidden words.</P>

Style Sheet:
<STYLE type=text/css media=all>.mod-phark {
OVERFLOW: hidden;
TEXT-INDENT: -5000px
}
</STYLE>

결과:
센스리더 pro: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력
JAWS 9.0: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력
WinEye 6.1: 화면에는 나타나지 않지만 "These are hidden words." 라고 음성 출력

테스트 11 페이지


본문:
<P class=malarky>These are hidden words.</P>

Style Sheet:
<STYLE type=text/css media=all>.malarky {
LETTER-SPACING: -1000em
}
</STYLE>

결과:
센스리더 pro: 화면에 "T"라고만 나타나고, "These are hidden words." 라고 음성 출력
JAWS 9.0: 화면에 "T"라고만 나타나고, "These are hidden words." 라고 음성 출력
WinEye 6.1: 화면에 "T"라고만 나타나고, "These are hidden words." 라고 음성 출력


테스트 12 페이지

핑백

덧글

  • 장성민 2008/08/11 19:14 # 삭제

    그동안 웹접근성을 향한 노력들을 하느라 모두들 수고가 많았지만,
    국내 스크린리더의 잘못된 음성출력 방식에 의존적인 작업들이 진행되었기때문에 그런것 같습니다.
    지금부터라도 기기의존적인 방식의 웹접근성 향상보다는 원칙적인 작업과 더불어 스크린리더 제조사에 끊임없이 문제제기를 병행하는 적극적인 개발방식으로의 전환이 필요하다고 생각합니다.
    좋은 글 잘 읽고 돌아갑니다. ^^
  • 치프 2008/11/16 02:41 # 삭제

    안녕하세요, 좋은 글 감사합니다. 저는 소개해주신 방법중에서 주로
    11번째 방법을 마니 이용했습니다.
    윗분들이 그 방식을 사용하셔서 저두 그걸로 배웠거든요... 그럼, 수고하세욤~
  • 치프 2008/11/16 02:44 # 삭제

    아울러 글 내용이 좋아서 제 블로그 링크메뉴에서 이 글을 볼 수 있게 링크를
    연결하였는데, 원치않으신다면 바로 삭제하도록 하겠습니다. 감사합니다!!
  • 백남중 2008/11/17 17:28 #

    링크하셔도 무관합니다.
    고맙습니다.
  • 치프 2008/12/05 11:14 # 삭제

    안녕하세요 질문이있습니다.
    css 속성에 display:none 을 할 경우 스크린리더에서 음성을 출력하지 않는 다고 하셨는데, display:none 은 없고 height:0; 속성을 사용하였을경우 높이값이 0 으로 설정되있는데 이것도 음성으로 읽어주지 못하는 지 질문합니다.
    제가 음성출력 기계가 없는 퍼블리셔라서염 ㅡ.ㅡ^
    상세 css 소스는 아래와 같습니다.. 이 속성을 줬을경우 문제가 발생할수있나요?!

    text-indent:-5000px;
    overflow:hidden;
    height:0;
  • 백남중 2008/12/09 01:49 #

    예제 11번 text-indent:5000px 처럼 화면에는 해당 내용이 나타나지 않고, 스크린 리더로는 음성 출력을 합니다.

    이미 text-indent를 -5000px를 주어 화면에 안나타나는데 height값은 의미가 없겠지요.
  • 치프 2008/12/09 09:08 # 삭제

    음, height 값을 0 으로 준 이유가요, 텍스트길이가 무지 길때 <br /> 코드를 삽입하면 text-indent를 -5000px 를 줘도 텍스트가 화면에 보이는 버그가 있어서입니다.
    텍스트가 한줄이 너무 길면 미관상 좋지않아서 습관적으로 <br /> 을 넣서 발생하는 문제일수도 있습니다만 <br />코드를 스크린리더는 어떻게 해석하나요?!
    <br /> 코드는 무시하고 그냥 줄바꿈된 텍스트 긴문장을 하나로 읽어주는건가요?!

    자꾸 물어바서 죄송합니다.
  • 율마 2014/04/23 14:35 # 삭제

    약간은 다른 이야기지만, width:0을 주는 경우 글이 세로로 나타나는 경우가 있어 저 같은 경우에는 white-space:nowrap 를 추가로 줍니다.
    그런데 치프님의 글을 보니, white-space:nowrap준 요소 안의 <br/>태그가 스크린리더로 어떻게 처리되는 지 살짝~ 궁굼하네요. 화면상으로는 줄바꿈은 없지만, 줄을 바꾸어서 읽어줄려나요?!?!?
  • 백남중 2008/12/09 22:15 #

    마찬가지로 화면에는 텍스트 내용이 안 나타나나 스크린 리더로는 모두 음성 출력합니다.
    br 태그를 사용했기 때문에 긴 텍스트 문장을 하나로 읽어주는 것이 아니라 <br />와 <br /> 사이를 한 줄로 음성 출력합니다.
    예를 들어
    아버지<br /> 어머니 </br /> 아들<br /> 딸<br />
    라고 입력하였으면 4줄로 인식하지요.

    자꾸 물어보셔도 괜찮습니다. 조금이라도 도움이 되었다면 좋겠습니다.
    참 도움을 주신 신현석님, 감사합니다.
  • 치프 2008/12/10 00:27 # 삭제

    음 height:0 을 써도 음성출력엔 문제가 없군요..
    많은 도움 됬습니다 감사합니다~
  • haeppa 2009/05/13 14:52 # 삭제

    좋은 정보 잘 읽고 갑니다.
    저도 조만간 제 블로그에 링크를 걸거나 퍼갈게요
    당연히 출처는 밝히구요.
    감사합니다.
  • 클로에 2011/06/08 16:01 # 삭제

    스크린리더기가 없다보니 어떻게 표현되는지가 제일 난감했는데 이렇게 보니 정말 다양한 방법이 있네요.
    접근성 관련해서 공부할게 끝이 안 보입니다;;;
    좋은 정보 개인블로그에 링크 합니다 ^^
  • 율마 2014/04/23 14:30 # 삭제

    display:none의 대체 방법을 찾다가 들어오게 되었습니다.
    다양한 방법이 소개되어 있어 고민을 덜었습니다. 갑사합니다.
※ 이 포스트는 더 이상 덧글을 남길 수 없습니다.


me2day