[웹표준/웹접근성] table css caption, legend, label, .hidden 안보이게 처리.

table 코딩할 때 caption, legend, label, .hidden CSS 처리로 안보이게 할 때

웹접근성을 위해 표준 코딩을 하고자 할 때, 디자인의컨셉과 맞지 않는 테이블의 캡션,폼필드의 legend, label등을 보이지 않게 처리해줄 필요가 있다.

이럴 때 보통 display:none을 쓰는 경우가 많은데, display:none을 쓰면 validator는 인정을 하지만, 장애인들을 위한 스크린 리더는 텍스트를 읽지 못한다.

   

아무튼 이러한 경우에는 다음과 같이 visibility를 조정하는 것이 합당하다.

   

caption, legend, label, .hidden {visibility:hidden;position:absolute;left:-9999em;width:1px;height:1px;margin:0;padding:0;background:none;font-size:0;line-height:0;text-indent:-9999em}

   

이 중에서 label은 가급적, 활용을 하는쪽으로 맞추는 것이 좋다. 

따라서 label 태그 자체의 CSS에는 위와 같은 속성을 주지 말고 .hidden 같은 클래스를 이용해서 안보이게 처리해야할 레이블에만 .hidden 클래스를 주는 것이 합당하다.

이런 이미지의 경우에는 visibility:hidden을 하면 안된다!