마스터K님

· 2013-02-26 (화) 09:11:59 · 3895 · 18
caption 에 클래스로
{width:0;height:0;font-size:0;line-height:0;overflow:hidden;} 먹여서 날리는 방법은 되질 않네요.
어제는 퇴근길이어서, 출근해 xp/ie6 에서 테스트해봤는데 개미눈꼽만한 크기로 caption 이 그대로 나옵니다.


http://sirgle.com/caption_sr_test.php 참고해보세요.

html5 에서 테스트했습니다.


xhtml, html4.01 은 저는 이제 쓸 일이 없어서... ㅎㅎㅎ;; ☞☜
|

댓글 18개

<style type="text/css">
#zero {width:0;height:0;font-size:0;line-height:0;visibility:hidden;}
</style>

<table id="zero">
<caption>테스트용 테이블</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>

이리하믄 안되나염..
display:none 는 아실텐데 안쓰는이유라도 있나용?..

사실 뭐하는지도 모르고 댓글을...
2013-02-26 (화) 09:17:35
display:none 은 스크린리더에서 읽어주지 않습니다.
아 그렇군요 스크린리더가 뭐지....ㅋㅋㅋ
2013-02-26 (화) 09:18:26
스크린골프 동생이에요 ㅋㅋ
ㅋㅋㅋㅋㅋ스크린 리더가 시각장애분들 눈이 되어주는거였군요.
왜 DTD는 파일 업로드 할때 1과 3에 올리면
DB에서 1, 2, 3 증감 이되서 값이 들가믄... 필요없는 데이터 생성할까요...
또 수정시에도 DTD 파일 이 순차적으로는 아니지만 수정시 이미지가 두개만 나와버립니다.
4개올려도 수정시에는 2개 ㅋㅋ 그누보드 순정 dtd 순정도 그런거같던데..
2013-02-26 (화) 09:29:10
dtd 관련 내용은 github issue 을 이용해주세요.
https://github.com/gnuboard/g4dtd/issues

그누보드 순정 관련된 내용은 질문과 답변 혹은 [email protected] 을 이용해주세요.
어머 이미 올려버렸는데 ㅋ
뭔말인지 모르는 1인....ㅠㅠ
2013-02-26 (화) 10:38:57
.popup1 caption span {display:inline-block;font-size:0px;line-height:0px;overflow:hidden;}

heigh:1px width:1px 대신 font-size랑 line-height로 했더니 ie에선 문제없어보이네요.
2013-02-26 (화) 10:41:55
아, 제가 쓰는 방법은 5에서는 안되는 방법입니다 ㅠㅠ
table 안에 cellpadding="0" cellspacing="0" 이 속성을 넣어준다음 날려야 6에서도 날라가거든요

html5에선 {width:0;height:0;font-size:0;line-height:0;overflow:hidden;} 여기에다가 visibility:hidden; 을 꼭
써줘야 겠네요.

또는 지운아빠님 방법을 사용하는것도 좋은방법 같습니다.
2013-02-26 (화) 10:45:49
cellpadding cellspacing 같은 표현 태그는 css 로 쓰세요...
visibility:hidden 을 쓰면 스크린리더가 읽지 않습니다... ㅠㅠㅠ
2013-02-26 (화) 10:52:50
보통 스크린리더 사용자를 위한 블라인드 css는
{position:absolute;width:0px;height:0px;font-size:0;line-height:0;overflow:hidden;visibility:hidden;} 와 같이 visibility:hidden; 이 들어가는데요.

웹접근성 연구소의 블라인드 css 또한

{visibility:hidden; position:absolute; font-size:0; width:0; height:0; line-height:0; margin:0; padding:0; background:none} 아래와 마찬가지로 visibility:hidden; 이 들어갑니다.

하지만 제가 직접 스크린리더로 확인하지는 못한거라 확답은 못드리겠네요.
2013-02-26 (화) 10:58:52
visibility:hidden display:none 는 센스리더만 읽어줍니다.
http://html.nhncorp.com/forum/a11y/topic/7

수정하던 중에 코멘트가 달려서 쓰던 글이 날라갔는데... ㅠㅠ
다시 간략하게 쓰자면

border-collapse:collapse;border-spacing:0 을 기본적으로 css 로 먹여놓으면 말씀하신 방법대로 처리는 되지만, 위지윅 에디터까지 생각하면 caption 자체를 날리는 방법은 그다지 좋은 방법은 아닌 것 같습니다. ㅠㅠㅠ
2013-02-26 (화) 11:11:15
좋은링크 감사드립니다.

Jaws, NVDA에서 visibility:hidden이 안먹힌다는게 충격이네요
2013-02-26 (화) 11:13:49
제가 올린 링크에서도 마키님 같은 의견을 가진 분들이 계신데,

제 짧은 소견에 visibility:hidden 을 읽어줘야 한다는 생각은 지극히 '퍼블리셔' 스러운 생각이라고 생각합니다.
visibility:hidden 을 왜 쓰는가에 대한 고찰이 먼저 선행되어야 할 것 같습니다.
저는 아직 고찰을 못했기 때문에 마키님께 바톤을 넘겨봅니다. 하하하
.hidden{position:absolute;top:-9999em;left:-9999em;width:0;height:0;padding:0;margin:0;font-size:0;line-height:0;overflow:hidden} 제가 쓰는 히든 방식인데요.
아래글에서 absolute 일 경우 무언가 버그가 있는건가요..? 항상 저식으로 전 cation 에 클래스로 먹여왔엇는데;; 각종 숨겨야 할것들도요. 마키님하고 지운아빠님걸 한번 써봐야겟네요~
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
16-05-11 조회 2,945
16-03-11 조회 2,743
16-03-09 조회 2,768
16-02-18 조회 2,873
16-01-28 조회 2,412
16-01-26 조회 2,432
16-01-22 조회 2,370
16-01-21 조회 2,430
16-01-14 조회 2,516
16-01-13 조회 2,405
16-01-12 조회 2,455
16-01-03 조회 3,207
16-01-03 조회 2,546
16-01-03 조회 2,708
16-01-02 조회 2,500
16-01-02 조회 2,564
16-01-02 조회 2,409
16-01-01 조회 2,679
16-01-01 조회 2,549
16-01-01 조회 2,615
15-12-31 조회 2,703
15-12-31 조회 2,709
15-12-31 조회 2,608
15-12-30 조회 2,618
15-12-30 조회 2,447
15-12-30 조회 2,437
15-12-29 조회 2,647
15-12-29 조회 2,759
15-12-29 조회 2,525
15-12-28 조회 2,505
15-12-28 조회 2,491
15-12-28 조회 2,430
15-11-26 조회 2,699
15-11-03 조회 3,156
15-11-02 조회 2,455
15-10-30 조회 3,040
15-10-30 조회 2,474
15-10-29 조회 2,561
15-10-03 조회 3,449
15-10-03 조회 2,719
15-10-02 조회 2,651
15-09-30 조회 2,547
15-09-30 조회 2,697
15-09-30 조회 2,771
15-09-30 조회 2,769
15-09-24 조회 2,734
15-09-24 조회 2,650
15-09-23 조회 3,026
15-09-23 조회 2,568
15-09-23 조회 2,634
15-09-23 조회 2,708
15-09-21 조회 2,566
15-09-21 조회 2,587
15-09-21 조회 2,647
15-07-02 조회 3,046
15-02-09 조회 4,474
15-01-24 조회 5,137
14-12-18 조회 5,141
14-11-21 조회 4,003
14-08-23 조회 3,756
14-08-11 조회 4,406
14-08-06 조회 5,971
14-08-01 조회 3,829
14-06-24 조회 5,628
14-05-18 조회 4,610
14-05-15 조회 4,480
14-05-15 조회 5,241
14-05-13 조회 4,676
14-05-09 조회 3,998
14-04-22 조회 4,480
14-04-16 조회 5,433
14-03-17 조회 7,177
13-11-12 조회 5,351
13-10-18 조회 4,347
13-10-15 조회 4,522
13-08-22 조회 4,492
13-08-18 조회 8,251
13-07-23 조회 7,071
13-07-23 조회 8,330
13-07-07 조회 5,211
13-05-18 조회 6,405
13-04-02 조회 5,997
13-04-02 조회 6,855
13-04-02 조회 7,213
13-04-02 조회 4,353
13-03-25 조회 3,785
13-03-20 조회 1.2만
13-02-12 조회 3,777
13-01-25 조회 4,563
13-01-17 조회 3,888
13-01-11 조회 4,125
13-01-01 조회 6,928
12-12-30 조회 5,856
12-12-17 조회 3,583
12-12-02 조회 7,171
12-11-29 조회 3,728
12-11-27 조회 4,782
12-10-05 조회 5,591
12-10-03 조회 4,475
12-09-14 조회 4,179