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
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6030 | 12년 전 | 2822 | ||
| 6029 | 12년 전 | 2849 | ||
| 6028 | 12년 전 | 1475 | ||
| 6027 | 12년 전 | 891 | ||
| 6026 |
kiplayer
|
12년 전 | 801 | |
| 6025 | 12년 전 | 586 | ||
| 6024 | 12년 전 | 2809 | ||
| 6023 | 12년 전 | 2948 | ||
| 6022 |
 울랄라커뮤니케이션스 |
12년 전 | 2103 | |
| 6021 |
Holyreign
|
12년 전 | 1335 | |
| 6020 | 12년 전 | 786 | ||
| 6019 | 12년 전 | 2862 | ||
| 6018 | 12년 전 | 3189 | ||
| 6017 | 12년 전 | 1238 | ||
| 6016 |
kiplayer
|
12년 전 | 10566 | |
| 6015 |
itlang
|
12년 전 | 1415 | |
| 6014 | 12년 전 | 424 | ||
| 6013 |
senseme
|
12년 전 | 1362 | |
| 6012 | 12년 전 | 3113 | ||
| 6011 | 12년 전 | 7126 | ||
| 6010 | 12년 전 | 8961 | ||
| 6009 | 12년 전 | 2864 | ||
| 6008 | 12년 전 | 2991 | ||
| 6007 | 12년 전 | 6674 | ||
| 6006 | 12년 전 | 10513 | ||
| 6005 | 12년 전 | 4046 | ||
| 6004 |
 byfun |
12년 전 | 578 | |
| 6003 | 12년 전 | 882 | ||
| 6002 | 12년 전 | 2353 | ||
| 6001 | 12년 전 | 685 | ||
| 6000 |
kiplayer
|
12년 전 | 3738 | |
| 5999 | 12년 전 | 430 | ||
| 5998 |
울랄라커뮤니케이션스 |
12년 전 | 2941 | |
| 5997 |
울랄라커뮤니케이션스 |
12년 전 | 3438 | |
| 5996 | 12년 전 | 2095 | ||
| 5995 |
kiplayer
|
12년 전 | 2168 | |
| 5994 |
울랄라커뮤니케이션스 |
12년 전 | 3265 | |
| 5993 |
windowhan
|
12년 전 | 676 | |
| 5992 | 12년 전 | 2899 | ||
| 5991 | 12년 전 | 5230 | ||
| 5990 | 12년 전 | 1638 | ||
| 5989 |
AMDbest
|
12년 전 | 1347 | |
| 5988 | 12년 전 | 1215 | ||
| 5987 |
kiplayer
|
12년 전 | 1135 | |
| 5986 |
한번잘해보자
|
12년 전 | 925 | |
| 5985 |
kiplayer
|
12년 전 | 3140 | |
| 5984 |
dsv421
|
12년 전 | 805 | |
| 5983 |
dsv421
|
12년 전 | 1508 | |
| 5982 |
dsv421
|
12년 전 | 5836 | |
| 5981 | 12년 전 | 3211 | ||
| 5980 |
MFBob
|
12년 전 | 2612 | |
| 5979 | 12년 전 | 3097 | ||
| 5978 |
AMDbest
|
12년 전 | 1460 | |
| 5977 | 12년 전 | 789 | ||
| 5976 | 12년 전 | 1204 | ||
| 5975 | 12년 전 | 1267 | ||
| 5974 | 12년 전 | 608 | ||
| 5973 |
kiplayer
|
12년 전 | 3541 | |
| 5972 |
kiplayer
|
12년 전 | 3965 | |
| 5971 |
kiplayer
|
12년 전 | 2294 | |
| 5970 |
kiplayer
|
12년 전 | 8289 | |
| 5969 |
kiplayer
|
12년 전 | 945 | |
| 5968 | 12년 전 | 8738 | ||
| 5967 |
 돼지코구뇽 |
12년 전 | 16901 | |
| 5966 | 12년 전 | 1225 | ||
| 5965 | 12년 전 | 704 | ||
| 5964 | 12년 전 | 6244 | ||
| 5963 | 12년 전 | 696 | ||
| 5962 | 12년 전 | 884 | ||
| 5961 | 12년 전 | 634 | ||
| 5960 | 12년 전 | 782 | ||
| 5959 |
 AKASIA |
12년 전 | 1124 | |
| 5958 | 12년 전 | 976 | ||
| 5957 |
웹디자인되고파
|
12년 전 | 1083 | |
| 5956 | 12년 전 | 3655 | ||
| 5955 | 12년 전 | 2134 | ||
| 5954 | 12년 전 | 4385 | ||
| 5953 | 12년 전 | 3074 | ||
| 5952 | 12년 전 | 4260 | ||
| 5951 | 12년 전 | 2070 | ||
| 5950 | 12년 전 | 1274 | ||
| 5949 | 12년 전 | 925 | ||
| 5948 | 12년 전 | 2070 | ||
| 5947 | 12년 전 | 4998 | ||
| 5946 |
dsv421
|
12년 전 | 1271 | |
| 5945 |
dsv421
|
12년 전 | 4115 | |
| 5944 |
dsv421
|
12년 전 | 5639 | |
| 5943 | 12년 전 | 1275 | ||
| 5942 | 12년 전 | 2532 | ||
| 5941 |
프로프리랜서
|
12년 전 | 1639 | |
| 5940 |
atria
|
12년 전 | 606 | |
| 5939 | 12년 전 | 2324 | ||
| 5938 | 12년 전 | 2070 | ||
| 5937 |
프로프리랜서
|
12년 전 | 761 | |
| 5936 |
프로프리랜서
|
12년 전 | 712 | |
| 5935 |
프로프리랜서
|
12년 전 | 3206 | |
| 5934 |
프로프리랜서
|
12년 전 | 1622 | |
| 5933 |
AMDbest
|
12년 전 | 641 | |
| 5932 |
AMDbest
|
12년 전 | 498 | |
| 5931 | 12년 전 | 8139 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기