접근성을 고려한, 컨텐츠를 가리는 방법

반응형 웹 강좌를 준비하면서, 웹 접근성 측면에서 display:none의 문제점을 지적?한 글을 읽었습니다.

즉, 반응형 웹에서 스크린 폭에 따라서 조건부로 보이거나, 또는 마우스 클릭을 해야  보여야 하는 경우, 많은 경우 display:none을 이용하는데, 웹 접근성에 문제가 있다는 것입니다.

CSS 규칙	화면 표현	접근성
visibility: hidden;	적용된 요소가 화면에 나오지는 않지만, 원래 차지하는 공간은 남습니다.	스크린 리더가 무시합니다.
display: none;	적용된 요소가 화면에 나오지 않고, 공간도 없습니다.	스크린 리더가 무시합니다.
height: 0; with: 0; overflow: hidden;	차지하는 공간이 없어지고 적용된 요소도 화면에 나오지 않습니다.	스크린 리더가 무시합니다.
text-indent: -999em;	적용된 요소가 화면에 보이지 않는 좌측으로 사라지지만, 링크에 포커스가 잡힐 수 있는 등 예측하지 못한 결과가 나올 수 있습니다.	스크린 리더가 접근할 수 있으나, 이 방법은 텍스트와 인라인 요소에만 적용 가능합니다.
position: absolute; left: -999em;	적용된 요소가 화면에 보이지 않는 좌측 으로 사라지고, 공간도 차지하지 않습니다.	스크린 리더가 접근할 수 있습니다.

결국, position: absolute; left: -999em; 으로 가리는 것이 웹 접근성을 고려한다면 가장 적절한 방법이라고 합니다.

하지만, 직접 CSS를 적용하는 경우는 가능하지만, jQuery의 많은 화면 관련 기능들은 display:none 을 내부적으로 사용하고 있기에 이를 위한 별도의 조치가 필요하다고 합니다. 아래는 #myButton과 #myText 를 찾아서 적절한 클래스 (이경우 asseccibly-hidden, 즉 위의 position:absolute; left: -999em)로 적용하는 것입니다.

(function(){
  var $button = $('#myButton'),
      $text   = $('#myText'),
      visible = true;
  $button.click(function(){
    if ( visible ) {
      $text.slideUp('fast',function(){
        $text.addClass('accessibly-hidden')
             .slideDown(0);
      });
    } else {
      $text.slideUp(0,function(){
        $text.removeClass('accessibly-hidden')
             .slideDown('fast');
      });
    }
    visible = ! visible;
  });
})();

출처: Aaron Gustafson, Now You Can Me, A List Apart, 2011