display:none과 스크린 리더 음성 출력 문제
백남중
얼마 전 display:none 이라고 설정한 내용을 스크린 리더가 읽어 주어서
고민이었다라는 글이 올라온 적이 있어습니다.
어제 국내 스크린 리더중 하나인 센스 리더가 업그레이드 하면서
이 문제를 해결하였습니다.
즉 display:none 으로 설정하면 해당 내용은 음성 출력을 하지 않습니다.
물론 센스 리더 가상 커서 옵션 상에서는 읽을 수 있는 옵션도 마련하였습니다.
정찬명님께서 보내 주신 display 관련 부분을 센스리더와 드림보이스가
각각 어떻게 음성 출력하는지 비교해 보았습니다.
정찬명님에게 감사 드리며 웹 표준에 조금이나마 도움이 되시기를 바랍니다.
백남중
<원래 소스>
.......
<p style="display:block">이 문장은 display:block 된 문장입니다.</p>
<p style="display:none">이 문장은 display:none 된 문장입니다.</p>
<p style="visibility:hidden">이 문장은 visibility:hidden 된 문장입니다. </p>
<p style="display:block; width:0; height:0; overflow:hidden"> 이 문장은
display:block 되었지만 너비와 높이가 0px 이라서 눈에 보이지는 않는 문장입니다. </p>
.......
화면 센스리더 드림보이스
display:block 보여줌 읽음 읽음
display:none 안보여줌 (안읽음) 읽음
visibility:hidden 안보여줌 읽음 읽음
display:block .... 안보여줌 읽음 읽음
업데이트 문제: 센스리더는 사용자가 사용을 시작하면 자동으로 인터넷으로
사용자 정보를 확인하고 있습니다. 그리고 인터넷으로 인증이 되면 자동으로
업그레이드 창이 뜹니다. 따라서 업그레이드가 나와도 시각장애인의 컴퓨터에
각각 설치를 할 필요가 없습니다.
deute
감사합니다
작업할때 많은 참고가 되겠는데요 :)
deux Forever
Hyeonseok Shin
http:://hyeonseok.com/temp/screenreaderdisplaynone.html
읽어줄 필요가 없는 글자의 경우 CSS를 사용하여 감추지 말고 서버에서 코드 자체를 출력하지 말아야 한다는 의견을 제시한 적이 있습니다. 따라서 display: none 으로 지정했다고 해서 무조건 읽지 않게 하는 것이 맞는 것인지 잘 모르겠습니다. 화면에 보이지는 않아도 사용자가 클릭을 한다든가 하여 보여지게 되는 콘텐츠의 경우는 읽어주는 것이 더 편할 수도 있습니다. 스크립트로 디스플레이 속성을 변경하는 경우도 있을 수 있습니다.
http://hyeonseok.com
백남중
인라인 스타일로 선언하지 않고 외부 파일로 선언해도 센스 리더가 인식 할 수 있나요?
라고 하시면서 다양한 css 적용 테스트 페이지를 제시하셨습니다.
http://hyeonseok.com/temp/screenreaderdisplaynone.html
동 페이지에 나타난 예제를 국내 스크린 리더 센스 리더와 미국 스크린 리더 Wineye 6.1, JAWS 8.0으로 음성 출력하
는 것을 비교해 보았습니다.
지난 번 display:none 테스트에서 드림보이스는 모든 경우 음성 출력을 했기 때문에 제외 하였습니다.
Wineye는 제가 가지고 있고, JAWS는 데모 버전을 다운받아 테스트 하였습니다.
관심있으신 분들께 조금이라도 도움이 되기를 .....
백남중
<원래 소스>
...........
<H2>인라인 스타일 선언</H2><PRE><CODE><p style="display: none;">인라인 스타일로
선언 한 경우</p></CODE></PRE>
<P style="DISPLAY: none">인라인 스타일로 선언 한 경우</P>
<H2>다른 속성과 함께 선언</H2><PRE><CODE><p style="background: #f00;
display: none; border: 1px solid #f00;">다른 속성과 함께 인라인 스타일로 선언 한 경우
</p></CODE></PRE>
<P style="BORDER-RIGHT: #f00 1px solid; BORDER-TOP: #f00 1px solid;
DISPLAY: none; BACKGROUND: #f00; BORDER-LEFT: #f00 1px solid; BORDER-
BOTTOM: #f00 1px solid">다른 속성과 함께 인라인 스타일로 선언 한 경우</P>
<H2>문서에 포함해서 선언</H2><PRE><CODE><p class="hidden-text">문서 안에 스타일 요
소로 선언한 경우</p></CODE></PRE>
<P class=hidden-text>문서 안에 스타일 요소로 선언한 경우</P>
<H2>외부 파일 선언(클래스를 지정)</H2><PRE><CODE><p class="external"> 외부 파일로
선언하고 클래스를 지정한 경우</p></CODE></PRE>
<P class=external>외부 파일로 선언하고 클래스를 지정한 경우</P>
<H2>외부 파일 선언(하위 선택자 이용)</H2><PRE><CODE><div class="external-
descendant"><p class="display-none-external">외부 파일로 선언하고 클래스를
지정하지 않은 경우</p></div></CODE></PRE>
<DIV class=external-descendant>
<P>외부 파일로 선언하고 클래스를 지정하지 않은 경우</P></DIV>
<H2>중복선언</H2><PRE><CODE><p style="display: none; display:
block;">화면에 출력 되도록 중복 선언이 된 경우. 이 문장은 화면에 출력 됩니다.</p></CODE></
PRE>
<P>아래의 문장에 적용되었습니다..</P>
<P style="DISPLAY: block">화면에 출력 되도록 중복 선언이 된 경우. 이 문장은 화면에 출력됩니다.</P>
...........
센스리더
Wineye 6.1 JAWS 8.0
인라인스타일선언 안읽음 안읽음 안읽
음
<P style="DISPLAY: none">
다른 속성과 함께 선언 안읽음 안읽음 안읽음
...........
문서에 포함해서 선언 읽음 안읽음 안읽음
<P class=hidden-text>
외부 파일 선언(클래스를 지정) 읽음 안읽음 안읽음
<P class=external>
외부 파일 선언(하위 선택자 이용) 읽음 안읽음 안읽음
<DIV class=external-descendant>
외부 파일 선언, 클래스 지정 안함 읽음 안읽음 안읽음
<DIV class=external-descendant>
중복 선언 읽음 읽
음 읽음
<P style="DISPLAY: block">
<참고>
wineye 6.1 데모버전 얻을수 있는 곳: http://www.gwmicro.com/Window-Eyes/Demo/index.php
JAWS 8.0 데모버전 얻을수 있는 곳: http://www.freedomscientific.com/fs_downloads/jaws.asp
On 7월12일, 오후1시27분, "Hyeonseok Shin" <hyeons...@gmail.com> wrote:
> 인라인 스타일로 선언하지 않고 외부 파일로 선언해도 센스 리더가 인식 할 수 있나요? 다양하게 CSS를 적용한 테스트 페이지를 만들어
> 봤습니다.
>
> http:://hyeonseok.com/temp/screenreaderdisplaynone.html
>
> 읽어줄 필요가 없는 글자의 경우 CSS를 사용하여 감추지 말고 서버에서 코드 자체를 출력하지 말아야 한다는 의견을 제시한 적이 있습니다.
> 따라서 display: none 으로 지정했다고 해서 무조건 읽지 않게 하는 것이 맞는 것인지 잘 모르겠습니다. 화면에 보이지는 않아도
> 사용자가 클릭을 한다든가 하여 보여지게 되는 콘텐츠의 경우는 읽어주는 것이 더 편할 수도 있습니다. 스크립트로 디스플레이 속성을 변경하는
> 경우도 있을 수 있습니다.
>
> On 7/12/07, deute <myde...@gmail.com> wrote:
>
>
>
>
>
>
>
> > 아 한눈에 확들어오는데요?
> > 감사합니다
>
> > 작업할때 많은 참고가 되겠는데요 :)
>
> --http://hyeonseok.com- 따온 텍스트 숨기기 -
>
> - 따온 텍스트 보기 -
윤좌진
왠지 기분좋습니다 :D
좋은 자료 감사합니다.
display:none에 관하여 신현석님께서
인라인 스타일로 선언하지 않고 외부 파일로 선언해도 센스 리더가 인식 할 수 있나요?
라고 하시면서 다양한 css 적용 테스트 페이지를 제시하셨습니다.
http://hyeonseok.com/temp/screenreaderdisplaynone.html
동 페이지에 나타난 예제를 국내 스크린 리더 센스 리더와 미국 스크린 리더 Wineye 6.1 , JAWS 8.0으로 음성 출력하
Hyeonseok Shin
그리고 테스트 중에 마지막 부분은 테스트 코드를 옮기는 과정에서 코드가 변경되었을 가능성이 있습니다. 아마 IE가 코드를 변경한 것 같은데요. style="display: none; display: block" 과 같이 적용해서 CSS 파싱을 제대로 하고 있는 것을 테스트 하고 싶었는데 display: none 부분이 없어졌습니다.
결과도 업데이트 하였습니다. http://hyeonseok.com/temp/screenreaderdisplaynone.html
> -- http://hyeonseok.com- 따온 텍스트 숨기기 -
>
> - 따온 텍스트 보기 -
--
http://hyeonseok.com
정찬명
저희가 보통 코딩을 할 때 CSS를 인라인 스타일로 삽입하는 경우는 매우 드문데...
외부 CSS를 인식하지 못한다면 결국 인식하지 못하는 상태라고 봐야 옳겠네요.
휴...
On 7월13일, 오전9시57분, "Hyeonseok Shin" <hyeons...@gmail.com> wrote:
> 결과가 좀 충격적인데요. 외산 스크린 리더는 1) 자체적으로 CSS 파싱을 하거나, 2) 코드레벨에서 접근하는 것이 아니라 윈도우의
> API을 잘 사용하여 화면 자체를 읽는 것 같습니다. 사실 1번의 가능성은 별로 없을 것 같고, 2번의 방법을 사용하고 있을 것 같은데
> 우리 스크린리더도 작동 방식을 개선하는 것을 고려해 볼 필요가 있어 보입니다.
>
> 그리고 테스트 중에 마지막 부분은 테스트 코드를 옮기는 과정에서 코드가 변경되었을 가능성이 있습니다. 아마 IE가 코드를 변경한 것
> 같은데요. style="display: none; display: block" 과 같이 적용해서 CSS 파싱을 제대로 하고 있는 것을
> 테스트 하고 싶었는데 display: none 부분이 없어졌습니다.
>
> 결과도 업데이트 하였습니다.http://hyeonseok.com/temp/screenreaderdisplaynone.html
>
> On 7/13/07, 윤좌진 <ifree1...@gmail.com> wrote:
>
>
>
>
>
> > 이 자료는 콱 회원들만의 특권이군요 ^^
> > 왠지 기분좋습니다 :D
>
> > 좋은 자료 감사합니다.
>
> > 07. 7. 13, 백남중 <njpa...@chollian.net>이(가) 작성:
> > > > --http://hyeonseok.com-따온 텍스트 숨기기 -
한정기
화면에 보이지 않는 것은 읽어 주지 않는 것이 좋을 것 같습니다.
별로 좋은 예는 아니지만, 예전에 카도와를 돌릴 때,
이런일이 있었습니다.
화면에는 안보이지만 숨겨진 URL이 있었는데, 그걸 카도와에서 호출하는 순간
해당 자료가 삭제 되었다는....
그래서 카도와로 평가한 후, 사이트의 모든 게시판 자료가 삭제 되었었죠. ㅠ.ㅠ
물론, 그건 황당하게 프로그램을 개발해 놓은 개발자의 잘못이 크겠지만,
숨겨놓은것을 굳이 들어가서 일을 이렇게 만들었느냐는 원망을 들었답니다.
(그 때, 그 쪽에서는 카도에서 자기네 사이트를 해킹 했다고 하더군요.. >_< )
하여간 안보여 줄라고 하는 것은 굳이 접근할 필요가 없다는 것에 한표....
근데 그럼 본문으로 바로 가기 등의 "스킵네비게이션"은 어떻게 구현해야 하죠? ㅠ.ㅠ
> > > > -- http://hyeonseok.com-따온 텍스트 숨기기 -
Hyeonseok Shin
말씀 하신 예는 접근성이 아니라 보안과 관련된 내용이기 때문에 display: none과 연결지어서 생각하면 안된다고 생각합니다. 카도와의 미숙한 분도 있었지만 그쪽 사이트의 보안에 심각한 결점이 있었던 것이니까요.
그리고 display: none은 안보여 주려고 하는 콘텐츠에만 적용되는 것이 아니라 화면 효과를 위한 경우도 많습니다. 안보여 주려고 했다고 생각하기는 힘든 경우도 많습니다. 그래서 일괄적으로 처리하는 것이 옳은지를 생각해 봐야 한다고 의견을 제시한 것입니다.
그리고 현재의 외산 스크린리더들이 테스트와 같은 처리 방식을 취하고 있기 때문에 AJAX와 관련된 문제가 발생한 것 같습니다. 센스리더와 같은 처리 방식이면 자바스크립트 분리만 제대로 해도 별 문제가 발생하지 않죠.
http://hyeonseok.com
Hyeonseok Shin
정찬명
첫째,
일단 서버측으로부터 데이터를 불러와서 출력해야 하는 콘텐트를 클라이언트 측에서 display:none 으로 감춘다음 상황에 따
라 보여주거나 숨기는 행태는 잘못 된 방법이라는 점. (쉬운 예 : 이미 로그인 했는데 "로그인 하세요" 라는 메시지를 숨겨놓
는 상황.) 이런 문장은 display:none 이 아닌 서버측 언어를 이용하여야 하고 로그인 했다면 더이상 해당 문장은 코드상
에 존재하지 않아야 한다는 겁니다.
둘째,
W3C의 CSS 스펙상에는 display:none 상태의 텍스트를 어떤 장치도 출력하지 않도록 규정되어 있습니다. 따라서 일단
국산 스크린리더의 CSS 표준 미지원 문제는 스크린리더 제작사가 해결하여야 할 문제이고 웹페이지 제작자는 W3C의 표준 스펙에
의존하여 웹페이지를 개발하여야 하고 특정 스크린리더에서 잘 보이도록 하기 위하여 별도의 조치를 취하는 것은 장기적으로 바람직 하
지 않다고 봅니다.
따라서 결국 display:none 을 이용하여 스킵네비게이션 링크를 구현하는 것은 장기적(스크린리더가 display:none
을 읽지 않는 방식의 표준을 구현하게 되는 상황이 올것이므로..)으로 바람직한 대안이 못된다고 생각하고 display:none
이 아니더라도 눈에 보이지 않는 스킵 네비게이션 링크를 구현하는 방법은 많습니다.
한 가지 예를 소개하면 이런 방법도 있습니다.
a#skipToContent { display:block; height:0; overflow:hidden;}
a#skipToContent:hover,
a#skipToContent:focus,
a#skipToContent:active { height:auto}
너비 또는 높이를 0px 로 만들고 넘치는 부분을 보이지 않게 overflow:hidden 시키는 방법이죠.
(또 키보드에 의하여 포커싱 되면 해당 영역이 다시 보이게 됩니다. 저는 이렇게 눈에 보이는 것이 좋다고 생각하는데 이 기능을
시각장애인만 사용하도록 만든것은 아니기 때문입니다. 키보드를 잘 쓰는 사람도 이 기능의 도움을 받을 수 있습니다.)
이렇게 되면 스크린리더의 CSS 표준 지원 여부에 관계없이 접근성 높은 웹페이지를 제작할 수 있게 됩니다.
On 7월13일, 오후2시09분, "Hyeonseok Shin" <hyeons...@gmail.com> wrote:
> 별로 좋은 예가 아니네요. :)
>
> 말씀 하신 예는 접근성이 아니라 보안과 관련된 내용이기 때문에 display: none과 연결지어서 생각하면 안된다고 생각합니다.
> 카도와의 미숙한 분도 있었지만 그쪽 사이트의 보안에 심각한 결점이 있었던 것이니까요.
>
> 그리고 display: none은 안보여 주려고 하는 콘텐츠에만 적용되는 것이 아니라 화면 효과를 위한 경우도 많습니다. 안보여 주려고
> 했다고 생각하기는 힘든 경우도 많습니다. 그래서 일괄적으로 처리하는 것이 옳은지를 생각해 봐야 한다고 의견을 제시한 것입니다.
>
> 그리고 현재의 외산 스크린리더들이 테스트와 같은 처리 방식을 취하고 있기 때문에 AJAX와 관련된 문제가 발생한 것 같습니다. 센스리더와
> 같은 처리 방식이면 자바스크립트 분리만 제대로 해도 별 문제가 발생하지 않죠.
>
> > > > > > 동 페이지에 나타난 예제를 국내 스크린 리더 센스 리더와 미국 스크린 리더 Wineye 6.1 , JAWS 8.0으로음성 출력하
> ...
>
> 추가 정보