웹작업을 할때 화면에서 어떤 Element 를 숨기기 위해 display:none; 을 사용하곤 한다. 하지만 display 라는 attribute 를 사용할 때 none 값을 사용했다면 HTML Markup 에는 있지만 보이고 싶지 않다는 뜻을 내포한다고 봐야 할것 같다. CSS 를 제거해서 HTML Markup 을 확인한다면 확인 가능한 내용이지만 그렇게 사용하지 않는 시각장애인이나 몇몇 유저들이 있을거라 생각한다.
현재의 센스리더 버전에서는 display:none 속성을 가진 element 를 읽어줄 것인지 선택하는 옵션이 존재하고 읽어주는 것이 기본 설정으로 되어있지만 추후, 변경될 예정이라고 한다. 변경되게 되면 우리가 흔히 사용해 왔던 스킵네비게이션이나 게시판 최근글 출력, 대메뉴의 출력등의 방법에 문제가 생기리라 짐작된다. 여러가지 논쟁이 이어지고 있는 상황이지만 논쟁이 있고 display:none; 속성에 대한 센스리더의 대처가 이러하다면 또 의미상으로 그렇다면 다른 방법을 사용해야 하지 않을까. 정말 숨기고 싶은 내용이었다면 display:none 속성을 사용해도 무방하다고 본다. 하지만 그런 것이 아니라면 다른 방법을 사용했으면 한다.
네이버의 널리 웹 표준화 가이드 싸이트에 가면 센스리더 최신버전 리뷰가 나와있는데 이런 글이 있다.
8. Display:none
- 'Display:none' 을 이제 설정을 통해 읽지 않도록 할 수 있습니다. 이제 정말 숨기고 싶은 내용은 다른 방법을 사용해야겠네요.
- 기본설정에서는 Display:none을 읽어줍니다.
- 가상커서 설정에서 설정하면 더이상 display:none을 읽어주지 않습니다.
- 가상커서 설정 (Control-Shift F9) → 설정 → '숨긴 내용 읽기 = 선택' → Space 한번 클릭 → '숨긴 내용 읽기 = 해제' 로 바뀜
아래는 display:none 속성을 대신할 스타일 예제이다.
.displayNone {
position:absolute;
width:0;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
visibility:hidden;
}
