스크린리더에서만 caption 읽힐라고하면
display:none 인가요?
visibility:hidden 인가요?
다읽히나요?
자게leader~
visibility:hidden 인가요?
다읽히나요?
자게leader~
댓글 12개
12년 전
스크린리더 : 캡션 디스플레이 콜론 논 입니다.
ㅋ.
ㅋ.
12년 전
display:none, visibility:hidden 은 스크린리더에서 읽히지 않습니다.
두 속성이 visual 속성이므로, aural 속성에서는 읽어주는게 맞다는 주장도 있습니다만, aural 용 속성이 따로 있지 않는한 visual 속성 자체에 집중하여, 컨텐츠 저작자가 의도한 데로 보여주지 않는게 더 정확한 처리 방법이라고 생각합니다.
따라서 다음과 같은 방법을 제안해드립니다.
<style>
caption span {display:inline-block;width:1px;height:1px;overflow:hidden}
</style>
<table>
<caption><span>테스트용 테이블</span></caption>
<thead>
<tr>
<th>1st header</th>
<th>2nd header</th>
<th>3rd header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
caption 자체에 스타일을 적용하면 ie 하위 브라우저나 FF 등에서 원하는 결과와 다른 결과를 마주하게 되실 겁니다.
두 속성이 visual 속성이므로, aural 속성에서는 읽어주는게 맞다는 주장도 있습니다만, aural 용 속성이 따로 있지 않는한 visual 속성 자체에 집중하여, 컨텐츠 저작자가 의도한 데로 보여주지 않는게 더 정확한 처리 방법이라고 생각합니다.
따라서 다음과 같은 방법을 제안해드립니다.
<style>
caption span {display:inline-block;width:1px;height:1px;overflow:hidden}
</style>
<table>
<caption><span>테스트용 테이블</span></caption>
<thead>
<tr>
<th>1st header</th>
<th>2nd header</th>
<th>3rd header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
caption 자체에 스타일을 적용하면 ie 하위 브라우저나 FF 등에서 원하는 결과와 다른 결과를 마주하게 되실 겁니다.
SMaker
12년 전
IE 구버전에서는 display:inline-block;이 의도한대로 안되는 경우가 있던데
그냥 position:absolute를 먹여서 저 구석에 숨겨버리는 게 좋지 않을까요?
그냥 position:absolute를 먹여서 저 구석에 숨겨버리는 게 좋지 않을까요?
12년 전
ie6 에서 테스트한 방법입니다. ^^
SMaker 님이 말씀하신 것도 좋아보이네요. text-indent 를 쓰는 방법도 있구요.
SMaker 님이 말씀하신 것도 좋아보이네요. text-indent 를 쓰는 방법도 있구요.
12년 전
캡션자체에 position:absolute을 먹이는 경우, 경우에 따라 크롬과 사파리에서 테이블 width 값이 제대로 먹히지 않는 경우가 있습니다.
캡션 날리는 방법이야 여러가지 있겠지만 저는
클래스를 따로 지정 후 {width:0;height:0;font-size:0;line-height:0;overflow:hidden;}
이런식으로 처리 하고 있습니다.
캡션 날리는 방법이야 여러가지 있겠지만 저는
클래스를 따로 지정 후 {width:0;height:0;font-size:0;line-height:0;overflow:hidden;}
이런식으로 처리 하고 있습니다.
12년 전
외산 스크린리더는 width:0;height:0 을 읽어주지 않고 있단 얘기가 있더라구요.
그리고 caption 자체에 스타일을 주면 위에도 언급했지만, ie 하위 브라우저나 FF 등에서는 원하는 데로 숨겨지지가 않습니다. 그래서 span 으로 한번 감싸준 다음 스타일을 적용하는 거에요. ^^;;
그리고 caption 자체에 스타일을 주면 위에도 언급했지만, ie 하위 브라우저나 FF 등에서는 원하는 데로 숨겨지지가 않습니다. 그래서 span 으로 한번 감싸준 다음 스타일을 적용하는 거에요. ^^;;
12년 전
외산 스크린리더 정보 감사드립니다.
그런데 제가 테스트하면서 보고 있는데 캡션 자체에 스타일을 주어서 6,7,8,9 부터 파폭 오페라 크롬 사파리 모두 잘 숨겨지고 있습니다.
제가 궁금한건 스크린리더에서 어떻게 읽히느냐였는데 첫번째 정보가 맞다면
다른 방법 또는 지운아빠님께서 공유해주신 정보로 갈아타봐야겠네요.
감사드립니다.
그런데 제가 테스트하면서 보고 있는데 캡션 자체에 스타일을 주어서 6,7,8,9 부터 파폭 오페라 크롬 사파리 모두 잘 숨겨지고 있습니다.
제가 궁금한건 스크린리더에서 어떻게 읽히느냐였는데 첫번째 정보가 맞다면
다른 방법 또는 지운아빠님께서 공유해주신 정보로 갈아타봐야겠네요.
감사드립니다.
12년 전
아 font-size 랑 line-height 빵도 들어있었군요. 이렇게는 테스트를 안해봤는데 함 해봐야겠네요 ㅎㅎ
12년 전
테스트 주소입니다. http://www.sirgle.com/caption_sr_test.php
12년 전
다들 고맙소 !
lainfox
12년 전
추천하는 것은 position:absolute; 를 통해 어딘가로 보내놓는 것입니다.
@마스터K caption 의 position absolute 로 인해 테이블의 width 가 망가지는 경우에 대해서는 예재를 보여주시면 좋겠네요( 아직 경험하지 못 한 부분이라)
참고로 예전 파폭에서는 width:0; height:0; 과 font-size:0; 등을 통해 보이지 않게 만들어 놓은 녀석은
ajax 처리시에 그 안의 내용을 제대로 처리하지 못했습니다. 이것이 스크린리더에도 영향을 줄 수 있다고 생각됩니다. ( 현재는 테스트를 안해봐서 바뀌었을지도 모르겠지만 )
@마스터K caption 의 position absolute 로 인해 테이블의 width 가 망가지는 경우에 대해서는 예재를 보여주시면 좋겠네요( 아직 경험하지 못 한 부분이라)
참고로 예전 파폭에서는 width:0; height:0; 과 font-size:0; 등을 통해 보이지 않게 만들어 놓은 녀석은
ajax 처리시에 그 안의 내용을 제대로 처리하지 못했습니다. 이것이 스크린리더에도 영향을 줄 수 있다고 생각됩니다. ( 현재는 테스트를 안해봐서 바뀌었을지도 모르겠지만 )
lainfox
12년 전
비슷한 녀석으로
body 태그 바로 다음에 스킵네비게이션을 사용할 때도
display:none 이나 width:0 height:0 등을 넣는 것을 지양하고
position:absolute 로 화면에 보이지 않는 곳으로 보내놓는 것을 추천합니다 :D
body 태그 바로 다음에 스킵네비게이션을 사용할 때도
display:none 이나 width:0 height:0 등을 넣는 것을 지양하고
position:absolute 로 화면에 보이지 않는 곳으로 보내놓는 것을 추천합니다 :D
게시글 목록
| 번호 | 제목 |
|---|---|
| 27182 | |
| 27176 | |
| 18634 | |
| 5442 | |
| 18632 | |
| 18629 |
JavaScript
주민번호, 외국인번호 검사 스크립트
2
|
| 5435 | |
| 18627 |
Mobile
Base64.java 파일입니다.
1
|
| 18626 | |
| 18623 | |
| 5409 | |
| 18621 |
MySQL
Mysql Text필드
1
|
| 18617 | |
| 18615 |
Mobile
[안드로이드] 프리퍼런스 사용 방법
1
|
| 18614 | |
| 18608 | |
| 27162 | |
| 18607 |
Mobile
[ios]사진촬영후 이미지 편집 샘플입니다.
|
| 5405 | |
| 18606 |
JavaScript
Html , javascript , css 강좌 사이트 입니다.
|
| 18605 |
JavaScript
주민번호 자바스크립트 체크
|
| 5401 | |
| 27152 | |
| 5397 | |
| 18603 |
jQuery
안녕하세요 jquery에 대해 물어볼게있습니다
1
|
| 27144 | |
| 20667 | |
| 20666 |
정규표현식
설문조사 진행 중입니다. ~1월 28일까지
|
| 24485 | |
| 20651 | |
| 20632 | |
| 20620 | |
| 20607 | |
| 18602 | |
| 30749 | |
| 5396 | |
| 18601 |
Mobile
[안드로이드] 자신의 폰에 깔려있는 앱들 검색하기
|
| 18599 | |
| 18596 | |
| 20590 | |
| 18589 | |
| 18587 | |
| 18586 | |
| 18585 | |
| 18584 | |
| 5387 | |
| 27106 | |
| 18583 | |
| 18580 | |
| 18579 | |
| 27120 | |
| 18574 | |
| 18570 | |
| 18566 |
JavaScript
자바스크립트에서 새창 띄우기입니다.
3
|
| 18562 |
PHP
문자열자르기소스입니다.
3
|
| 18558 | |
| 26490 | |
| 30733 |
웹접근성
자바스크립트를 끈 로그인 폼
15
|
| 18554 |
JavaScript
에디터 글양식 변경 기능 문의
3
|
| 20572 |
정규표현식
정규표현식의 기본구조
17
|
| 20541 |
정규표현식
정규표현식 강좌를 시작하며.....
30
|
| 5377 | |
| 18553 | |
| 5373 | |
| 20534 |
썸네일
언샵마스크효과 추가
6
|
| 20531 | |
| 20527 | |
| 20525 |
썸네일
종합 썸네일 함수 만들기
1
|
| 20519 | |
| 20513 | |
| 20507 |
썸네일
이미지에 워터마크 처리하기
5
|
| 20503 | |
| 20496 | |
| 20490 | |
| 20483 | |
| 20471 | |
| 20464 |
썸네일
이미지 복사하기
6
|
| 20447 | |
| 20419 | |
| 20405 | |
| 30729 | |
| 18549 |
Mobile
유투브 api 실행 결과를 담는 방법요?
3
|
| 18544 | |
| 32084 |
센스리더
센스리더 문제해결
1
|
| 32083 |
센스리더
센스리더 Windows 설정하기
|
| 32082 |
센스리더
센스리더 기능키 리스트
|
| 32081 |
센스리더
센스리더 인터넷의 활용 (가상커서)
|
| 30728 |
CSS
IE6/7 img px 버그
|
| 27097 | |
| 18537 |
jQuery
JQUERY로 제작된 슬라이드 메뉴입니다.
6
|
| 27092 | |
| 32080 | |
| 32079 | |
| 32078 | |
| 32077 | |
| 32076 | |
| 32075 | |
| 32074 | |
| 32073 | |
| 32072 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기