웹 접근과 개발자 그리고 보조공학기기 업체 by 백남중


CSS의 미디어 타입에는 aural (음성 출력), braille (점자 출력), handheld (포켓, 모바일), print (인쇄), projection (투사 장치), screen (스크린, 모니터), tty (전신 타자기, Tele Type Writer), tv (텔레비전, Television)이 있고 이 모든 장치를 정의할 경우에는 all(모든 출력 장치)을 사용한다. 기본적으로 미디어 타입이 지정되어 있지 않은 경우에는 모든 장치 media="all"을 지정한 것과 같다.
정찬명: CSS와 웹 접근성. 그리고 장치의 표준화
위와 같은 미디어 타입으로 출력하지 않기 위해서는 display:none을 사용한다.
CSS2 규격에서는 display:none의 속성에 대해 다음과 같이 설명하고 있다.
이 값은 양식화 구조 안의 박스에 엘레멘트를 생성하지 않는다(그 엘레멘트는 배열 효과가 없다). 하위(descendant) 엘레멘트들도 어떤 박스 생성하지 않는다; 이 작용은, 하위에 'display' 속성을 설정함으로서, 덮어씌워(override) 질 수 없다.
'none'의 디스플레이(display)는 보이지 않는 박스를 생성하지 않는다는 점에 유의하라; 이는 아무 박스도 생성하지 않는다. CSS 기능들을 엘레멘트가 양식화 구조 안에서, 그 자체는 보이지 않으나 양식화에 영향을 주는 박스를 생성할 수 있다. 세부사항 보임성(visibility)를 참조하라.
보이는 양식화 모델
즉 display:none은 홈 페이지 내에서 특정 엘레멘트나 콘텐츠를 감출 때 많이 사용하며, 해당 내용을 보이게 하기 위해서는 display:block을 사용한다.
대표적인 사용 방법 예로 주메뉴에서 부메뉴를 감추는 것을 들 수 있다.

그런데 현재 사용하고 있는 방법이 스크린 리더와의 음성 출력에 있어서 문제가 있다.
1. 주메뉴와 부메뉴의 display:none, display:block
2. 센스 리더와 display:none 처리 역사
3. display:block과 스크린 리더
4. 바램

1. 주메뉴와 부메뉴의 display:none, display:block

주메뉴에서 부메뉴를 감추고 싶을 때는 display:none을 사용하고, 해당 주메뉴의 항목에 포커스되면 부메뉴를 보이게 하기 위하여 display:block을 사용한다.
예를 등어 웹 접근성 연구소에 주메뉴는 기본적으로 부메뉴가 감춰진 상태로 보여진다.
위와 같이 주메뉴 내의 부메뉴는 보이지 않다가 주메뉴의 해당 항목이 포커스를 받으면 밑에 부메뉴가 나타난다.

스크린 리더로 웹 접근성의 이해에 위치하면 6개의 부메뉴가 보이고, 이동을 하면 다음과 같이 음성 출력해야 정상이다.

목록 시작 개수 6
웹 접근성의 이해 링크
목록 시작 개수 6 단계 1
웹 접근성의 정의 링크
우리나라의 현황 링크
법·제도 링크
장애인의 웹 사이트 이용 이해 링크
관련 사이트 링크
홍보 동영상 링크
목록 끝 단계 1
품질마크 링크

즉 6개의 목록을 먼저 알려주고(목록 시작 개수 6), 웹 접근성의 이해에는 6개의 목록이 있으며(목록 시작 개수 6) 한 단계 더 들어 간다는 것을(단계 1) 음성으로 알려 준다. 그리고 단계 1의 목록이 끝났음을 음성으로 알려준다(목록 끝 단계 1).
이렇게 알려 주면 시각장애인이 부메뉴가 있다는 것을 음성으로 알게 된다.
그런데 위와 같이 부메뉴가 있다는 것을 알려주지 않고, 부메뉴의 내용은 화면에 나오는데도 주메뉴의 6개 목록만 다음과 같이 음성 출력하는 데 문제가 있다.

목록 시작 개수 6
웹 접근성의 이해 링크
품질마크 링크
교육/세미나 링크
개발자 아카이브 링크
자문서비스 링크
자료실 링크
목록 끝

특히 이 문제는 스크린 리더로 제대로 출력이 되는데 무슨 이야기냐 라고 반문하는 사람들도 있어서 더욱 커다란 문제이다.

2. 센스 리더의 display:none 처리 역사

센스리더는 display:none을 처리하지 못하다가 2007년 8월 출시한 센스리더 파워 1.4 버전부터 지원하였다.
기본적으로 가상 커서 설정 대화상자(Ctrl-Shift-F9)에서 숨긴 내용 읽기를 해제를 기본값으로 하였다.

그러나 센스리더 파워 1.4의 숨긴 내용 읽기는 Inline style sheet에서 display:none만을 음성 출력하지 않고, Embedded Style Sheet, External Style Sheet, Imported Style Sheet에서 display:none으로 정의한 것을 음성 출력하는 오류를 범하였다.

센스리더가 본격적으로 display:none을 처리한 것은 2008년 7월 센스리더 프로페쇼날 1.0부터이다.
센스리더 프로페쇼날은 파워 1.4 버전과는 달리 그 어떤 CSS에서도 display:none으로 설정을 하면 음성 출력을 하지 않게 되었다.
또한 숨긴 내용 읽기를 파워 1.4 버전에서는 기본값을 해제로 설정하였으나, 프로페쇼날에서는 선택을 기본값으로 하였다.

그러면 센스리더는 왜 숨긴 내용 읽기를 기본값으로 선택하였는가?

한국정보문화진흥원(현 한국정보화진흥원)에서는 2003년 여름부터 한국형 WCAG를 만들기로 정하고 노력한 결과 2005년 12월 인터넷 웹 콘텐츠 접근성 지침을 국가표준으로 정하였다. 이를 기준으로 장애인의 웹 접근성 향상을 목적으로 2007년 처음으로 웹 접근성 품질마크 인증 제도를 실시하였다.

인터넷 웹 콘텐츠 접근성 지침을 제정하고 품질마크 인증 제도를 실시하게 되니 웹 개발자들은 자연히 웹 접근에 있어서 가장 어려움을 겪고 있는 시각장애인의 웹 접근에 대해 관심을 가지게 되었다.

특히 시각장애인의 웹 접근 중에서도 홈 페이지를 음성으로 출력해주는 스크린 리더에 대해 관심을 갖게 된 것은 당연한 순서였다.
그 중에서도 웹 개발자들은 화면에는 나타나지 않으나 스크린 리더가 음성 출력을 해주는 방법을 모색하게 되었다. 더구나 센스리더 파워에서는 css를 지원하지 않아 화면에서는 보이지 않아도 음성 출력을 해주니 개발자들이 display:none을 사용하게 된 것은 당연한 결과였다.

이렇게 display:none에 대한 기본 이해없이 사용하다 보니 센스 리더 입장에서는 숨긴 내용 읽기를 기본값으로 선택하게 된 것이다. 물론 이 부분의 가장 큰 책임은 센스 리더 개발자자가 이 기능을 파워 버전부터 제대로 해결하지 못한 데에 있다.

개발자 중에서도 자신이 만든 웹 페이지를 display:none을 하였어도 음성 출력 해주고 시각장애인은 숨긴 내용읽기를 기본값으로 선택하고 읽기 때문에 어떤 클레임도 없으니 그냥 사용하고 있는 것이다.

즉 시각장애인의 웹 접근에 있어서 중요한 축을 담당하는 보조기기업체나 웹 개발자들 모두 오류를 범한 것이다.
심지어는 웹 접근성 연구소의 접근성 예제에서도 반복 내비게이션 읽기를 display:none으로 처리하라고 제공하였으니 개발자들은 모두 이것을 따를 수 밖에 없었다.
접근성 예제 항목 2.5 반복 네비게이션 링크

예를 들어 네이버의 경우 메인 페이지에서의 음성 출력을 보자.

센스 리더 숨긴 내용 읽기 해제의 경우
네이버 :: 세상의 모든 지식, 네이버
헤딩1
네이버 그래픽 링크

센스 리더 숨긴 내용 읽기 선택의 경우
네이버 :: 세상의 모든 지식, 네이버
정의목록 시작 개수 1
AD캐스트 도움말
닫기 그래픽 링크
AD캐스트는 우측에 노출되는 광고를 이용자가 직접
찾아 보거나 다시 볼 수 있는 컨트롤 기능을 제공합니다.
AD캐스트 이용안내 링크
목록 끝
헤딩1
네이버 그래픽 링크


네이버에서는 시각장애인의 스크린 리더 출력과는 관계없이 CSS를 제거할 때 AD캐스트 도움말을 보여 주고자 하는 의도로 제작하였기 때문이라고 풀이된다. 이렇게 작성할 당시에는 display:none의 음성 출력이 시각장애인에게 어떤 영향을 미치는 것인지 논의되지 않은 상태에서 제작했기 때문이라고 생각된다.

이외에도 아직까지도 화면에 나타내지 않으면서 시각장애인에게 음성 출력하는 방법으로 스킵내비게이션에서 display:none을 사용하는 경우는 상당히 많다.

3. display:block과 스크린 리더

또 한가지 문제는 특정 부분을 화면에 보이지 않게 하다가 포커스를 받으면 화면에 나타나게 하는 경우 display:none으로 정의하다가 display:block로 정의한다. 이 경우 센스 리더가 제대로 음성 출력을 못하는 문제가 있다.
홈 페이지 내의 주된 기능을 나타내는 방법으로 메인 메뉴를 제공한다. 마우스로 메뉴에 위치하면 자동으로 부메뉴가 나타나 클릭하면 원하는 곳으로 이동한다.
그러면 시각장애인이 키보드로 이동하는 경우 어떤 경우에는 부메뉴가 나타나고, 어떤 경우에는 부메뉴가 나타나지 않는다고 하소연한다.
어떻게 된 일일까?
예를 들어 웹 접근성 연구소의 경우를 들어보자.
방향키로 이동하면 '웹 접근성의 이해'에 위치하면 자동으로 6개의 부메뉴가 열린다. 이 부분을 센스리더로 들으면 두 가지 경우가 생긴다.

경우 1:
목록 시작 개수 6
웹 접근성의 이해 링크
품질마크 링크
교육/세미나 링크
개발자 아카이브 링크
자문서비스 링크
자료실 링크
목록 끝

경우 2:
목록 시작 개수 6
웹 접근성의 이해 링크
목록 시작 개수 6단계 1
웹 접근성의 정의 링크
우리나라의 현황 링크
법·제도 링크
장애인의 웹 사이트 이용 이해 링크
관련 사이트 링크
홍보 동영상 링크
목록 끝단계 1
품질마크 링크
.....


원래 소스에서는 주메뉴 부분을 display:none으로 처리하다가 포커스를 받으면 display:block로 바꾸어서 부메뉴도 자동으로 처리하게끔 하였다.
이 부분을 센스리더의 가상 커서의 숨긴 내용 읽기를 해제한 상태에서 읽기를 하면 정상적인 경우 2처럼 음성 출력해야 한다. 그런데 숨긴 내용 읽기를 해제한 상태에서는 경우 1처럼 화면에 부메뉴가 나타나더라도 부메뉴는 읽지 않고 주메뉴 부분만 음성 출력하는 것이다.

이 문제는 센스 리더의 또 다른 문제점을 제공한다.
즉 동적으로 바뀌는 상황에서 제대로 음성 출력하지 못한다는 것이다.
이러한 문제는 키보드나 마우스로 발생하는 이벤트는 센스 리더 가상커서로 해결하지 못하는 것이 아니냐 라고 생각할 수 있지만 이 보다는 센스 리더가 스크립트로 작성한 것을 제대로 소하하지 못해서 나타난 결과라고 생각된다.
웹 접근성 연구소의 주메뉴, 부메뉴 부분을 JAWS로 확인해 보면 현재 센스 리더의 가상커서 숨긴 내용 읽기에서처럼 주메뉴 부분만 음성 출력한다.
외국의 경우도 2007년 경에 스크린 리더가 동적인 상황에서 제대로 음성 출력하지 못하여 개발자들이 display:none이 아닌 다른 방법들을 개발하여 제시한 예를 들수 있다.
백남중: 소리시각화

4. 바램

장애인이 웹을 쉽고 편안하게 활용하게 하기 위해서는 여러 부분의 노력이 필요하지만 그 중에서도 두 가지 분야에서 노력이 선행되어야 한다.

먼저, 센스 리더와 같은 보조공학기기 업체에서는 웹의 새로운 기술에 관한 것을 빨리 습득하여 활용할 수 있어야 한다. 웹은 새로운 기술의 각축장이다. 기존의 기술에만 의존하다가는 앞서 나가고 있는 신기술을 처리하지 못해 뒤떨어지게 된다.
이미 일반화되고 있는 Ajax에 관한 것은 전혀 처리하지 못하고 있는 것이 우리 나라 스크린 리더의 현실이다.
지금이라도 센스 리더의 업그레이드시 가상 커서의 숨긴 내용 읽기를 해제를 기본값으로 설정하고, 사용자들에게 필요한 경우에만 숨긴 내용 읽기를 선택으로 설정하여 사용하도록 권고해야 할 것이다. 숨긴 내용 읽기는 기본값이 해제라는 것은 모든 사람이 인정하는 부분이다.

두 번째로 웹 콘텐츠를 제작하는 개발자들의 문제이다. 이것은 보조공학기기 업체의 몫이니 우리는 관계하지 않고 새로운 기술만 추구하겠다 하면 할 말이 없다. 웹 접근을 말로 떠들면서 내가 만든 웹 문서는 장애인이 접근할 수 없게끔 한다는 것은 이율배반 아닌가라는 생각이 든다.
새로운 기술을 사용하지 말라는 뜻은 아니다. 새로운 기술을 사용하더라도 현재의 보조공학 기술이 접근할 수 있는 방법도 모색하면서 같이 더불어 가야하는 것이 진정한 접근성이 아닐까 한다.

이 글을 쓰기 위하여 도움을 주신 정찬명, 신현석, 윤좌진, 장성민, 조현진, 방미희 님께 감사를 드립니다.


덧글

  • 윤좌진 2009/07/08 10:45 # 삭제

    저야말로 매번 많이 배웁니다. ^^
  • 성민장군 2009/07/08 11:17 # 삭제

    백부장님이 아니었다면 스크립트상의 none, block에 대해 당연스레 생각할 뻔했습니다.
    저역시 백부장님 덕분에 공부 많이 했습니다. ^^
  • mihee 2009/07/08 12:44 # 삭제

    말씀 주신 부분에 대해 제대로 정리드리지도 못해서 죄송한 맘이 큽니다. 좋은 글 많은 분들이 보시고, 조금씩 조금씩 변화가 모였으면 하는 바람입니다. (_ _)*
※ 이 포스트는 더 이상 덧글을 남길 수 없습니다.


me2day