소음 공해를 줄여 주세요.... by 백남중

하루 8시간 컴퓨터를 하면서 모든 내용을 스크린 리더로 듣는다면 어떻게 될까?
상상만 해도 끔찍한 일이다.
불과 몇 년 사이에 장애인의 웹 접근에 대한 문제가 초미의 화두가 되면서 시각장애인이 스크린 리더로 접근하지 못하는 이미지 등에 이를 대체할 만한 각종 텍스트를 제공해 주는 것이 보편화 되었다.
그러나 많은 개발자들이 자신이 제공한 텍스트 부분이 어떻게 소음 공해를 일으키는지는 생각하지도 않고 그저 alt text를 달았다는 것만으로 자신만의 만족을 추구하는 경향이 있다.
접근이라는 것은 기존의 모니터를 활용하지 못하는 시각장애인도 배려하기 위함인데 이것이 소음 공해를 일으켜 실수요자에게 불편함을 준다면 마크업이 맞거나, 품질 마크를 획득한 것이 무슨 의미가 있는가?
여기서는 각종 사이트에서 소음 공해를 일으키는 문제에 대해서 예를 들어보기로 한다.

이미지에 alt text 제공시 문제:
이미지에 alt text를 제공하면 스크린 리더는 이미지, 그래픽 링크, 이미지 맵, 이미지 버튼이라고 해당 이미지의 속성을 음성 출력하기 때문에 시각장애인은 이를 적당하게 활용할 수 있다.
  • 소스: <img src="/images/main_top_img.jpg" alt="메인우측상단이미지" width="328" height="20" />

  • 음성 출력: 메인우측상단이미지 이미지

  • 의견: 우측 상단에 어떤 내용의 이미지가 있는지 모른다. 회사 로고가 있다면 alt="우리 회사 로고"라고만 제공하면 우리 회사 로고 이미지"라고 음성 출력한다. 아무 의미없는 이미지라면 alt=""라고 제공하면 스크린 리더는 이를 건너 뛴다.

  • 소스: <a href="/Index.aspx"><img src="/Images/TopMenu/TopMenuNewsON.gif" alt="뉴스로 가기" width="58" height="31" border="0" /></a>
  • 음성 출력: 뉴스로 가기 그래픽 링크

  • 의견: alt="뉴스로 가기"를 alt="뉴스"라고만 하면 스크린 리더는 뉴스 그래픽 링크라고 음성 출력한다.

  • 소스: <map name="Map1" id="Map"><area shape="rect" coords="1,8,20,73" href="http://..../" target="_blank" alt="이곳을 클릭하고 나타나는 좌측 이미지를 클릭하면 **시 뉴타운 페이지(새창)으로 이동합니다" onclick="hideshow(2);return false;" />

  • 음성 출력: 이곳을 클릭하고 나타나는 좌측 이미지를 클릭하면 **시 뉴타운 페이지(새창)으로 이동합니다 새창 이미지맵 링크

  • 의견: alt="**시 뉴타운"이라고만 입력하면 **시 뉴타운 새창 이미지맵 링크 라고 음성 출력한다. 간단 명료하게 입력해도 스크린 리더는 새창 이미지맵 링크라는 말을 추가로 음성 출력해준다는 점을 유의해야 한다.

  • 소스: <a href="http://www.invil.org/chinese/index.html"><img src="/images/main2009/Main09y_header_language01.gif" alt="중국어로 보기" width="26" height="12" /></a>
  • 음성 출력: 중국어로 보기 그래픽 링크

  • 의견: alt="중국어"라고만 제공하면 중국어 그래픽 링크라고 음성 출력한다.


타이틀 문제:
<title>로 정한 부분은 웹 브라우저에서 3가지 기능을 한다.
첫째, 웹 브라우저 화면 맨 위에 현재 페이지의 제목으로 나타나며,
둘째, 파일로 저장하는 경우파일명으로 나타나고,
마지막으로 즐겨찾기하는 경우 즐겨찾기의 이름으로 나타난다.
따라서 <title>에는 현재 페이지의 특성을 가장 잘 나타낼 수 있도록 간단 명료하게 입력해야 한다. 특히 불필요한 특수 문자는 사용하지 않는 것이 좋다.
  • 소스: <title>***** 홈페이지/CI/BI 제작전문 - 병원,학교,기업 홈페이지 제작업체, 쇼핑몰구축, 웹프로그램개발, CIP,디자인전문회사,브랜드개발,그룹웨어,카타로그디자인,웹사이트전문, 프리젠테이션디자인</title>

  • 음성 출력: ***** 홈페이지/CI/BI 제작전문 - 병원,학교,기업 홈페이지 제작업체, 쇼핑몰구축, 웹프로그램개발, CIP,디자인전문회사,브랜드개발,그룹웨어,카타로그디자인,웹사이트전문, 프리젠테이션디자인

  • 의견: 제목 표시줄은 광고를 하는 곳이 아니다. 그냥 <title>회사명</title>라고만 하면 회사명이라고 음성 출력한다. 위와 같이 길게 정의한 것이 파일명이나 즐겨찾기 명칭으로 저장된다면 생각만 해도 끔찍하다

  • 소스: <title>▒▒▒ **** 홈페이지 ▒▒▒.
  • 음성 출력: 점무늬사각형표 점무늬사각형표 점무늬사각형표 점무늬사각형표 **** 홈페이지 점무늬사각형표 점무늬사각형표 점무늬사각형표 점무늬사각형표 

  • 의견: 무심코 사용하는 특수기호는 시각장애인이 이해할 수 없기 때문에 해당 기호에 맞는 명칭으로 음성 출력한다. 특수 기호는 가능한한 시각적 효과를 위해 사용하지 않으면 좋겠다.  참고로 특수 기호를 시각장애인은 어떻게 음성 으로 이해하는지 예를 들어본다.
    ■ 검정사각형표
    □ 흰사각형표
    ▣ 모알사각형표
    ▤ 가로줄무늬사각형표
    ▥ 세로줄무늬사각형표
    ▦ 그물무늬사각형표
    ▧ 왼쪽빗줄무늬사각형표
    ▨ 빗줄무늬사각형표
    ▩ 빗그물무늬사각형표
  • 소스: <li><a href="http://.../site/mayor/photomovie/sketch/" target="_blank" title="포토갤러리 페이지로 이동합니다."><img src="/Images/index/bt_cj3.gif" width="106px" height="19px" /></a></li>

  • 음성 출력: 포토갤러리 페이지로 이동합니다. 새창 그래픽 링크

  • 의견: title="포토갤러리 페이지로 이동합니다"를 title="포토갤러리"라고만 해도 포토갤러리 새창 그래픽 링크라고 음성 출력한다.


스킵내비게이션 문제:
시각장애인이 원하는 구역으로 쉽게 이동하기 위하여 스킵내비게이션을 제공한다.
  • 소스: <div id="skipnav_topmenu"><a href="#leftMenus">상단메뉴 건너뛰기</a></div>

  • 음성 출력: 상단메뉴 건너뛰기 방문한 현재페이지 링크

  • 의견: 상단 메뉴라고만 제공하면 상단메뉴 현재 페이지 링크라고 음성 출력한다.

  • 소스: <li><a href="#contents">좌측서브메뉴 건너뛰고 본문 바로가기</a></li>

  • 음성 출력: 좌측서브메뉴 건너뛰고 본문 바로가기 현재페이지 링크

  • 의견: 본문이라고만 제공해도 본문 현재 페이지 링크라고 음성 출력한다.

웹 접근성을 제공한다는 것은 마크업만 맞으면 된다는 것이 아니고, 품질마크 인정을 획득하기 위한 것도 아니다.
장차법이 생겨서 벌금을 피하기 위한 방법도 아니다.
또한 내 지적 호기심을 충족하거나 자랑하기 위한 것도 아니다.

기본적으로 나와 다른 방법으로 인터넷을 하는 사람들이 쉽게 접근할 수 있도록 선택의 기회를 제공하고, 기본적인 환경을 제공해 주는 것이다.

핑백

  • IWCAG 1.0 제대로 알기 2: 대체 텍스트의 사용 &#8212; Resistan.com 2009-06-13 14:25:30 #

    ... t attribute W3C schools: HTML &lt;img&gt; longdesc attribute CSS 2.1: Recognized media types 소음 공해를 줄여 주세요&#8230;. 연재 목록 [^1]: 한국시각장애인연합회 사이트에서는 시각장애인을 만날  때의 에티켓에 대해 소개하고 있으므로 참고하시길 바란다. 나 역시 사전에 이런 정보를 ... more

덧글

  • 치프 2009/05/29 10:08 # 삭제

    안녕하세여, 아무레도 소음공해 발생이유는 스크린리더가 저희같은 웹퍼블리셔들에게
    보급이 많이 되지않아서 생기는 거 아닐가 생각됩니다. 저역시도 스크린리더를 사용해본
    경험자분들의 글이나 의견에만 의존해서 작업을 하는 경우가 다반사구요~

    질문이 있는데요,앵커태그안에 이미지가 들어가있는 경우 이미지에 alt를 넣기보다는,
    앵커태그안에 title을 넣는게 좋은건가요?!
    그리고 윗글을 보니, target="_blank" 가 존재하는 경우 스크린리더에서 자동으로
    '새창' 이라고 음성 출력을 해주는 거 같은데 맞는건가요?!

    글 잘 읽고 갑니당~
  • bitty 2009/06/02 12:13 # 삭제

    안녕하세요. ^^ 좋은글 너무 감사합니다~
    요즘 스크린리더기를 설치하고 작업하면서 이전에 제가 넣었던 대체택스트들이 얼마나 많은 소음을 만들어냈는지 알겠더라구요 ;ㅂ; 정말 많이 반성했습니다.
    앞으로는 소음보단 정말 올바른 정보를 전달할 수 있도록 더 공부해야겠습니다.
    다시한번 좋은글 너무 감사합니다~
  • 미희 2009/06/02 13:51 # 삭제

    공해를 줄이도록 노력하겠습니다 :)
  • 구룸타는 소년 2009/12/02 15:38 # 삭제

    너무 조은 글이네요.. 평소에 고민하던 내용이 였던거에요

    많은 참고가 되었습니다.
※ 이 포스트는 더 이상 덧글을 남길 수 없습니다.


me2day