[CSS] 텍스트 숨기기(웹 접근성 고려...)

텍스트 숨기기

작업을 하다 보면 버튼이나 a링크에 텍스트가 보이자 않아야 하는 경우 또는 <table> 에서 <caption>을 숨겨야 하는 경우..

등등의 이유로 텍스트를 숨겨야 하는 경우가 있다.

이럴때 무조건 안보이기만 한다면 간단히 display:none 혹은 visibility:hidden 으로 숨기면 된다.

하지만 문제는 웹 접근성이다.

웹 접근성을 지키면서 텍스트를 숨겨야 하는게 문제가 된다.

<table> 에서 <caption>의 경우 화면에서는 보이지 않아야 하지만 스크린 리더는 읽을 수 있어야 한다.

display:none 혹은 visibility:hidden 으로 숨기면 스크린 리더가 해당 내용을 읽을 수 없기 때문에 사용 해서는 안된다.

이외에도 font-size:0; / line-height:0; / width:0px; height:0px 등을 사용 해서 숨기기도 하는데 이 역시 스크리 리더가 읽을 수 없다.

그럼 스크린 리더가 읽을 수 있으면서 안보이게 하려면 어떻게 해야 할까...

1. text-indent:-10000px

이 방법은 텍스트를 화면 밖으로 밀어버려서 안보이도로록 하는 방법이다.

실제로 사용했던 방식인데 문제가 있다고 한다. form 또는 link 요소에 할 경우 포커싱 되었을때 스크린 밖에 위치해 있기 때문에 정확한 위치를 표시 할 수 없어 혼란을 줄 수 있고 우리와 다르게 오른쪽에서 왼쪽으로 언어를 읽는 경우(RTL 언어권) 문제가 된다.

But 페이징(paging) 디자인 할때 혹은 이와 비슷한 디자인의 경우 사용하는건 큰 문제가 없지 않을까??

a링크를 사용하고 아무런 글자도 넣지 않으면 그것 또한 웹 접근성 자가진단 테스트에서 오류로 잡기 때문에 이런 디자인에는 사용해도 무방 할 것 같다.

2. position:absolute를 이용해 화면 밖으러 밀어내는 방법

.hidden {
 position: absolute !important; 
 top:auto;
 left:-10000px; 
 width:1px; 
 height:1px; 
 overflow:hidden; }

- 이 방법은 현재 <caption>을 숨길때 사용하고 있는 방법이다.

- 첫번째 방법의 문제점을 알고 난 후 같은 문제점이 있지 않을까? 하는 생각이 든다.

3. CSS clip 사용

.hidden {
 position:absolute !important;  
 width:1px; 
 height:1px; 
 overflow:hidden;
 clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
 clip:rect(1px, 1px, 1px, 1px);}

- 1px이 안되는 공간을 만들어 화면상에서 콘텐츠를 없애주고 스크린 리더에서 읽혀진다.

- position:absolute;  : 레이아웃에 영향을 끼치지 않도록...

- width:1px;, height:1px;  : 스크린 리더가 읽을 수 있도록...

- clip:rect(1px, 1px, 1px, 1px);  : 눈에 보이는 부분 제거

이 방법은 이번에 알게 된 방법으로 사용 여부는 좀 더 알아봐야 할 것 같다.