display:none을 다른 방식으로 대체할 수 있을까

백남중님의 웹 접근과 개발자 그리고 보조공학기기 업체란 글에서 보듯 스크린 리더에서 display:none 인 컨텐츠는 상당히 민감한 문제입니다. 원래 내가 이 분야에서 처음 일할때만 해도 display:none 이라고 해도 센스리더에서는 낭독을 해준다고 했기 때문에 특별히 display:none 에 대한 고려는 하지 않았는데 점진적으로 업그레이드 되면서 현재는 선택사항을 통해 display:none 된 컨텐츠는 읽지 않도록 설정이 가능해졌습니다.

사실 처음부터 css를 이용해서 display:none 시킨다는 것은 “이건 있어도 그만 없어도 그만인 컨텐츠야” 라는 생각에서 아니면 접근성에 대한 이해가 부족해서 이뤄지는 것이라고 생각합니다. 뭐 또 아무래도 현실적인 제약사항도 있으리라고 봅니다. 어쨌든, display:none 과 스크린 리더의 이런 관계로 인하여 최근에는 여러가지 대체기법 중 display를 이용하는 방식을 visibility를 이용하는 방식으로 많이 대체하는 추세입니다.

visibility를 이용한 방식은 visibility:hidden을 이용하여 컨텐츠를 숨기는데, visibility는 컨텐츠의 영역은 그대로 잡고 있기 때문에 overflow, position 등을 같이 이용해서 공간을 잡지 않고 숨겨주는 방식입니다. 이렇게 하면 화면상에서는 숨겨주지만 스크린 리더에서는 인식을 하게 됩니다.

이론상으로는 충분히 display:none을 대체가 가능합니다만, 아쉽게도 그동안 작업해오면서 몇가지 태그에 대해서는 브라우저마다 약간의 해석차이로 인하여 원하는 대로 구현이 안되는 부분이 있었습니다. 이 부분에 대해 정리해 보도록 하겠습니다.

테스트 CSS 적용

일단 display:none의 대체기법으로 사용할 CSS는 가장 보편적인 것 같은(제맘대로?) {visibility:hidden;overflow:hidden;width:0;height:0;margin:0;padding:0;} 속성을 기준으로 사용하겠습니다. 그 외에 font-size:0 이나 line-height:0을 추가하시기도 하는데, 저 속성이 특별히 영향을 끼치지 않았으므로 빼도록 하겠습니다.

테스트1. <hr>

hr은 수평선을 그어주는 태그인데 흔히 레이아웃 상에서 큰 구분들을 나눠주는 역할로 사용되고 있습니다. 센스리더를 써본 적이 없어서 hr 태그를 낭독해주는지 잘 모르겠으나, hr 태그는 CSS를 제거했을때도 그렇고 나름 있으면 도움이 되는 태그인 것 같습니다.

일단 4대 메이저 브라우저 최신버젼에서 {visibility:hidden;overflow:hidden;width:0;height:0;margin:0;padding:0;} 만으로도 문제없이 display:none을 대체 했습니다만, IE6, IE7 계열에서는 일정 공간을 차지하였습니다. hr이 선 + margin 일거라 생각했는데 브라우저마다 렌더링 되는 방식이 역시 다른것 같았습니다. 이에 {position:absolute;top:-10000px;} 을 추가하니 hr이 absolute 포지셔닝 되면서 영역을 차지하지 않는 것을 확인하였습니다.

테스트 CSS 적용 속성의 변경

hr의 테스트를 통해 일단 제가 생각하기에 가장 문제가 없을 것 같아진 {position:absolute;top:-10000px;visibility:hidden;overflow:hidden;width:0;height:0;margin:0;padding:0;} 으로 기준을 변경 하였습니다.

테스트2. <caption>

caption은 표의 제목을 표기하는 태그입니다. HTML 4에서는 caption 내에 inline 요소만 올 수 있었는데 HTML5 부터는 block 요소도 허용하도록 바뀐 것 같군요. caption은 표 데이터의 접근성 향상 부분에서 상당한 역할을 할 수 있는 태그라고 생각합니다.

하지만 불행히도 caption 같은 경우 테스트 CSS 적용으로는 display:none을 완벽히 대체 할 수는 없었습니다. 저 겉보기에 완벽할 것으로만 보였던 CSS도 IE6, IE7 에서는 공간이 붕 뜨는 현상이 발생하였습니다.

테스트3. <legend>

legend는 fieldset 요소의 제목을 표기하는 태그입니다. caption과 비슷한 역할을 해주는 태그로 역시 fieldset 데이터의 접근성 향상 부분에서 상당한 역할을 하게 됩니다.

legend 같은 경우에는 IE6, IE7에서도 문제가 없었습니다만 오히려 FF3.5에서는 공간이 붕 뜨는 현상이 발생하였습니다.

파덕님께서 FF에선 font-size와 line-height를 조절해줌으로써 대체가 가능하다는 제보를 주셨습니다. 감사합니다 (__)

테스트 소스 및 캡쳐화면

상기 테스트에 대한 html 소스 및 테스트 브라우저(IE6, IE7, IE8, FF3.5, Opera9.6, safari3.1)의 캡쳐화면 입니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Display:none 속성 대체 Test</title>

<style type="text/css">
*	{margin:0;padding:0;}
</style>

</head>

<body style="width:300px;">

<h1 style="border:1px solid #000;">제목</h1>
<table width="100%" border="1">
<caption style="display:block;visibility:hidden;width:0;height:0;overflow:hidden;position:absolute;top:-10000px;">표</caption>
<thead>
	<tr>
		<th scope="col">제목1</th>
		<th scope="col">제목2</th>
		<th scope="col">제목3</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>내용1</td>
		<td>내용2</td>
		<td>내용3</td>
	</tr>
</tbody>
</table>

<hr style="visibility:hidden;width:0;height:0;overflow:hidden;position:absolute;top:-10000px;" />

<h1 style="border:1px solid #000;">제목</h1>
<form action="" style="">
	<fieldset style="border:none;margin:0;padding:0">
		<legend style="display:block;visibility:hidden;width:0;height:0;overflow:hidden;position:absolute;top:-10000px;font-size:0;line-height:0;">폼제목</legend>
		<p style="margin:0;padding:0">폼내용</p>
	</fieldset>
</form>

</body>
</html>

각 브라우저 캡쳐화면

이처럼 일부 브라우저에서 빈공간이 생겨버리는 caption, legend에 대하여 display:none을 완벽히 대체할 수 있는 방법은 찾지 못했습니다.(찾으신 분 알려주세요 ㅜㅜ) 그리고 대부분의 태그는 대체가 가능했지만 모든 태그를 테스트 한 것이 아니기 때문에, 몇가지 문제가 더 있는 태그들이 존재할 수도 있습니다(사실 이건 브라우저간의 렌더링 방식의 차이지 태그의 문제는 아니죠). 하지만 제 경험으로는 기획서나 디자인상으로 caption, legend을 사용할 만한 부분은 많지 않았고 접근성 향상을 위해 임의로 추가해주는 경우가 많지만 display:none의 속성을 대체할 방법을 찾지 못해 display:none을 사용했었는데 스크린 리더가 이를 읽어주지 않는다면, 접근성을 위해 사용한 부분이 아무런 효과를 발휘하지 못하게 되어지는 것 같습니다. 이렇게 봤을때 백남중님의 말씀대로 보조기기에 대한 기술 또한 브라우저, 보조기기, 마크업 등 상호간에 깊은 이해와 도움이 필요하다는 것을 다시한번 느끼게 됩니다.

p.s 뭐 마크업을 하고있는 개인적인 제 입장으로 봤을때는, 처음부터 display를 none 할꺼면(안보여줄꺼면) 그게 왜 들어가냐는 입장인지라(초기 display를 javascript로 제어하고 숨겨진 것을 다시 보이게 할 수 있는 기능을 갖춘 것은 별개지요) 다 필요한 컨텐츠이므로 스크린 리더 설정도 낭독해도 무방하게 설계된 웹 페이지를 처음부터 만들어야 한다입니다;;