'웹 접근성' 향상을 위한 생각의 팁 - 시작

전문 칼럼리스트가 아닌 저로써 이런 글을 쓰는 것은 역시나 어려움이 많습니다. 그러나 하나의 프로젝트를  끝내면서 스스로에게 질문하고 또 부족하지만 누군가에게 '웹 접근성'의 생각을 전달하며 좀 더 많은 공유가 있었으면 하는 생각에...

 이 글은 지극히 개인적인 관점에서 작성되었으며, 사실과 다른부분이 있다면 댓글과 트랙백으로 공유하며 하나 더 배우는 시간이 되겠습니다.

『장애인차별금지 및 권리구제 등에 관한 법률』이하 "장차법"이 2009년 4월 11일 시행됨에 따라 공공기관의 대대적인 '웹 접근성'관련 프로젝트가 진행하고 있으며, 저 또한 해당 프로젝트를 완료하였습니다.

그러나, 장차법이 아니여도 '웹 접근성'은 반드시 지켜야 되며, 최소한의 노력을 해야된다는 게 저의 생각입니다.

『장애인차별금지 및 권리구제 등에 관한 법률』

• 동법 제21조 (정보통신·의사소통에서의 정당한 편의제공)
  - 행위자는 장애인에게 전자정보 및 비전자 정보를 동 등하게 접근 이용할 수 있는 필요한 수단을 제공
  
• 동법 시행령 제14조 [정보접근·의사소통에서의 정당한 편의 제공의 단계적 범위 및 편의의 내 용)
  - <필요한 수단> 누구든지 신체적 · 기술적 여건과 관계없이 웹사이트를 통하여 원하는 서비스를 이용할 수 있도록 접근성이 보장되는 웹사이트
  

Update : undead님 도움을 받아 아래와 같이 수정하였습니다. - 2009년 4월 3일 20:30

• 동법 21조 (정보통신·의사소통에서의 정당한 편의제공의무)
  ..중략.. 당해 행위자 등이 생산·배포하는 전자정보 및 비전자정보에 대하여 장애인이 장애인 아닌 사람과 동등하게 접근·이용할 수 있도록 수화, 문자 등 필요한 수단을 제공하여야 한다.
  
  
• 동법 시행령 제14조 [정보접근·의사소통에서의 정당한 편의 제공의 단계적 범위 및 편의의 내용)
  <필요한 수단>
  1. 누구든지 신체적ㆍ기술적 여건과 관계없이 웹사이트를 통하여 원하는 서비스를 이용할 수 있도록 접근성이 보장되는 웹사이트
  
  2. 수화통역사, 음성통역사, 점자자료, 점자정보단말기, 큰 활자로 확대된 문서, 확대경, 녹음테이프, 표준텍스트파일, 개인형 보청기기, 자막, 수화통역, 인쇄물음성변환출력기, 장애인용복사기, 화상전화기, 통신중계용 전화기 또는 이에 상응하는 수단]

 

 

■ 웹 접근성 VS 웹 표준

'웹 접근성'은 '웹 표준'과는 약간의 차이는 있습니다. 예를들면, 뭐가 있을까요?

<table summary="웹 접근성과 웹표준의 차이를 설명합니다." >
<caption>웹 접근성 VS 웹 표준</caption>

위 <table>에서 Summary와 Caption을 생략하면 웹접근성에 문제가 될 수 있습니다.

물론 이렇게도 가능하겠죠.

<h3>웹 접근성 VS 웹 표준<h3>
<table summary="웹 접근성과 웹표준의 차이를 설명합니다." >

Caption을 생략했지만 표의 제목에 해당되는 <h3>의 제목태그가 들어가 있습니다. <h>태그와 Caption이 동시에 들어가면 중복되는 부분이니 2번 읽혀지는 단점이 있겠지요.


웹표준VS웹접근성 또 뭐가 있을까요?

• 동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체수단(자막, 원고 또는 수화)를 제공해야 한다.
• 반복되는 링크를 건너뛸 수 있도록 건너뛰기 링크(Skip Navigation)를 제공해야 한다.

위 항목 또한 '웹 접근성'에  해당되는 항목입니다. 뭐 그 외 다른 항목이 있을 수 있겠죠.

그러나! '웹 접근성'과 '웹 표준'의 차이를 아는것이 중요한 것이 아닙니다.
어떻게 하면 누구나 만족할 만한 웹페이지를  완성하느냐의 문제겠죠!

■ 이미지에 대한 '웹 접근성'

• 이미지의 의미나 목적을 이해할 수 있도록 적절한 대체 텍스트를 제공해야 한다.
• 배경 이미지가 의미를 갖는 경우, 의미를 이해할 수 있도록 대체 콘텐츠를 제공해야 한다.

위 부분은 alt태그, longdesc태그 또는 CSS로 해결할 수 있을 것 입니다.

단순한 이미지나 로고와 같은 경우 아시겠지만 ...

<img src="..." alt="Hanvalley">라고 하면 되겠죠!

기본적으로 티스토리에서는 alt="블로그 이미지"라고 보여지더라고요. 그러나 해당 이미지에 맞게 수정하는 것이 정확한 의미전달에 좋겠죠^^

문제는 '웹 접근성 향상을 위한 국가표준 기술 가이드라인'에서 예제로 나와있는 이미지의 해결 방안입니다.
>>참고 하세요  웹 접근성 향상을 위한 국가표준 기술 가이드라인 발표(2009년 3월 17일)

이미지 설명을 정리해 보면

복잡하고 무슨의미조차 모르겠네요 ㅡㅡ
일단 컨텐츠를 만든분과 협의가 있으면 좋겠지만 이미지만 보고 일단 정리를 좀 하겠습니다.

특허행정혁신 비전과 목표

• 미션 - 지식재산의 창출 권리화 활용을 촉진하고 보호를 강화하여 기술혁신과 산업발전에 기여
• 비젼 - 특허행정 혁신을 통한 지식재산 강국실현
• 혁신목표 - 고객 감동 특허행정서비스 제공
• 단계별 혁신목표
  1. 보호기능의 안정화 및 창출/촬용기능 기반강화
     - Establishmemt:05~06년: 특허심사처리기간(10개월)
  2. 창출/촬용기능으로의 확대
     - Extend: 07~08년: 3국(미국, 일본, 유럽)특허청에 모두 출원, 등록된 누적특허건수 기준 세계 6위권 집입
  3. 국가 지식재산 관리 주관부처(CKO)로서의 위상강화
     - Enhancement: 09~10년 : 지식재산권의 통합적 관리체계 구축, 기술수지 측자전환 등 지식재산 4대강국 진입을 위한 범정부적 추진체계 구축, '지식재산강국'실현의 주무부처로서 성과창출을 위한 정책주도.
• 5개 Value Chain에 대한 혁신단계별 세부과제(21개) 및 추진전략 로드맵
• 전사적 혁신 절략 (성과주의경영 / 6시그마경영 / 지식경영 / 고객감동경영)

위와 같이하면 이미지의 논리적인 구조와 설명문구로서 괜찮을 것 같네요!

이것에 대한 HTML 코드를 보면 다음과 같습니다. 

<h4>특허행정혁신 비전과 목표</h4>
<ul>
    <li>미션 - 지식재산의 창출 권리화 활용을 촉진하고 보호를 강화하여 기술혁신과 산업발전에 기여</li>
    <li>비젼 - 특허행정 혁신을 통한 지식재산 강국실현</li>
    <li>혁신목표 - 고객 감동 특허행정서비스 제공</li>
    <li>단계별 혁신목표
        <ol>
            <li>보호기능의 안정화 및 창출/촬용기능 기반강화<br />
            - Establishmemt:05~06년: 특허심사처리기간(10개월) </li>
            <li>창출/촬용기능으로의 확대<br />
            - Extend: 07~08년: 3국(미국, 일본, 유럽)특허청에 모두 출원, 등록된 누적특허건수 기준 세계 6위권 집입</li>
            <li>국가 지식재산 관리 주관부처(CKO)로서의 위상강화<br />
            - Enhancement: 09~10년 : 지식재산권의 통합적 관리체계 구축, 기술수지 측자전환 등 지식재산 4대강국 진입을 위한 범정부적 추진체계 구축, '지식재산강국'실현의 주무부처로서 성과창출을 위한 정책주도.</li>
        </ol>
    </li>
    <li>5개 Value Chain에 대한 혁신단계별 세부과제(21개) 및 추진전략 로드맵</li>
    <li>전사적 혁신 절략 (성과주의경영 / 6시그마경영 / 지식경영 / 고객감동경영)</li>
</ul>

그러면 어떻게 대체컨텐츠를 제공하죠?

1. longdesc로 설명할 수 있겠죠!

<img longdesc="desc.html" alt="특허행정혁신 비전과 목표" src="..." />

desc.html에 위와 같은 Page로 구성하면 끝!

2. 배경이미지 + CSS
해당 이미지를 배경이미지로 처리하고 CSS제거 시 위와 같은 페이지가 보이면 되겠죠.

■ 이 글을 마치며

언제 또 '웹 접근성'에 대한 글을 쓸지는 모르겠습니다. 처음 의도는 '이미지에 대한 '웹 접근성'에 글을 쓸려고 했는데 서두가 조금 길었던 감이 있습니다.

그리고 다음에 기회가 된다면 동영상, <a>태그, <label>태그에 대하여 서로의 생각을 공유하도록 하죠! 왜냐하면, 홈페이지 관리자는 동영상을 컨텐츠를 등록하는데 있어  꼭 알아야 할 하며, 퍼블리셔, 개발자 분들은 <a>와 <label>태그에 대해 꼭 알아야 되기 때문입니다.

뭐 알지만, 어쩔 수 없는 상황 때문에 완벽한 '웹 접근성'이 힘들 수도 있겠죠^^


저 또한 다음 글을 기대하며... To be continued...