코드/Html & CSS

display:none 스크린 리더 음성 출력문제

Yeah-Panda 2013. 3. 6. 09:48

<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 ....   안보여줌     읽음             읽음

업데이트 문제: 센스리더는 사용자가 사용을 시작하면 자동으로 인터넷으로
사용자 정보를 확인하고 있습니다. 그리고 인터넷으로 인증이 되면 자동으로
업그레이드 창이 뜹니다. 따라서 업그레이드가 나와도 시각장애인의 컴퓨터에
각각 설치를 할 필요가 없습니다.


https://groups.google.com/forum/?fromgroups=#!topic/kwag/_GeHGnA8cAY


'코드 > Html & CSS' 카테고리의 다른 글

브라어저별 투명도 관련 CSS  (0) 2013.08.19
QuickLinks  (0) 2013.03.19
height 100% 높이 잡기  (0) 2013.02.27
css 알파값 설정  (0) 2013.02.20
<col width ="xxx"></col>  (0) 2013.01.03