어느 곳에 h1을 위치시키느냐가 문제겠지요
많은 웹 접근 관련 글에서 h1은 한 번만 사용하라고 되어 있습니다.
즉 모든 페이지는 적어도 하나의 h1이 있어야 하며, 페이지의 메인 헤딩에 h1을 적용하라고 권고하고 있습니다.

Better Connected, Better Results: Headings
- Every page must have at least one (the H1)
- Only one H1 per page
- The H1 must be applied to the main heading of the page

wcag2.0의 Understanding Succession Criterion 2.4.10에서는 콘텐츠를 구조화하기 위하여 섹션 헤딩(section heading)을 사용하라고 레벨 AAA로 정의하고 있습니다.
2.4.10 Section Headings: Section headings are used to organize the content. (Level AAA)
또한 헤딩의 중간 단계를 건너 뛰지 말고 적절하게 제공하라고 권고하고 있습니다.
예를 들어 h1에서 h2를 건너 뛰고 h3으로 이동한다든지의 경우처럼 말입니다.

사실 h1 문제는 몇 개를 사용했는냐는 문제보다는 어느 곳을 지정할 것인가 하는 문제입니다.
즉 h1을 문서 처음의 회사 로고에 설정할지, 아니면 본문 중에서 가장 중요한 곳을 설정할지의 문제입니다.
우리나라에서는 대부분의 사이트들이 처음 회사 로고에 h1을 사용하지만 외국도 반드시 그런 것은 아닌 것 같습니다.
W3C의 경우에는 헤딩 사용이 아주 모범적입니다.
미국 정부 홈페이지의 경우 왼쪽 위에 있는 성조기 부분을 h1로 처리하지 않고 본문 시작 부분 Government Information by Topic를 h1로 처리하였습니다.
* 미국 정부는 wcag의 지침을 따르는 것이 아니라 508조에 의하기 때문에 h1, h4, h2, h4로 이동했습니다.

두 사이트 모두 구조도 위에 있는 내비게이션은 헤딩이나 목록 처리를 하지 않고 본문 부분만 처리한 것이 이채롭습니다.

h1을 어디에 설정하느냐 하는 문제는 지난 주 Twitter에서도 문제가 되서 이에 대한 찬성, 반대 사이트 h1debate가 개설 되었습니다.
오늘(2009.6.17 오후 5시) 현재의 찬반은 로고 30.97% : 메인 타이틀 69.03%입니다.

우리하고는 약간 다른 헤딩의 사용에 대한 방식이 무엇을 의미하는지 다시 한번 되새겨 볼 필요가 있을 것 같다.
by 백남중 | 2009/06/17 22:02 | 트랙백(2) | 덧글(8)
목록(<ol> <ul> <dl>)의 올바른 활용 문제

많은 웹 문서에서 목록을 남용하고 있다.
물론 혹자는 코딩에 정도가 없다고 항변할 수 있으나, 기본적인 문법을 따르지 않는 것은 접근성을 논의하기 이전의 문제이다.
여기서는 웹 문서에서 목록의 코딩 오용에 대해 알아보고자 한다.

웹 문서에서 연속된 내용을 나타내는 방법에는 <ul>과 <ol>이 있다.
또한 사전의 표제어처럼 항목에 대한 설명을 달기 위해서는 정의목록 <dl>을 사용한다.

HTML 4.01의 목록에 관한 내용:

  • 앞 목록 예제는 번호없는 목록으로 <UL> 엘레멘트로 만들어진다.
  • <OL> 엘레멘트로 만들어지는 번호있는 목록(ordered)은 번호가 강조되는 정보에 사용된다.
  • 정의 목록(definition list)은 <dl> 엘레멘트로 만들어 지는데, 다른 것도 포함 할 수 있으나, 일반적으로 텀(term:작은제목)/정의(definition)의 짝들로 이루어진다.
-목차-

1. HTML, WCAG와 목록 관련 조항
2. 잘못 사용 사례
    2.1 각각의 목록을 <ul>로 처리한 경우
    2.2 한 개의 목록을 두 개 이상으로 나누는 경우
    2.3 정의 목록(<dl> definition list)의 잘못 사용 문제
    2.4 <li> 대신 <dd>를 사용하는 경우
    2.5 정의 목록과 <li>를 혼용한 경우
3. 스크린 리더 활용자를 위한 목록 코딩을 위한 제언
    3.1 <ol>의 활용
    3.2 정의 목록의 음성 출력 문제

(본 글에서는 내용의 이해를 돕기 위하여 WAT(Web Accessibility Tool)을 사용하여 분석한 화면을 캡춰하여 'WAT의 List item 보기 화면'라는 명칭 하에 원래의 화면과 비교하였다)


이어지는 내용
by 백남중 | 2009/06/12 21:06 | Accessibility | 트랙백 | 덧글(2)
잊혀진 시각장애인, 저시력인
눈이 불편한 사람 중에는 스크린 리더를 활용하여 음성으로 정보를 파악하는 사람도 있지만 잔존 시력이 남아 있는 경우에는 화면을 확대하여 사용하거나, 바탕색과 전경색의 대비를 바꾸어 사용하는 사람도 있다. 또한 바탕색과 전경색을 바꾼 후 화면을 확대하여 사용하는 경우도 있다.
이렇게 사용하는 저시력인의 경우 배경색과 전경색이 대비가 안되는 경우에는 아무리 좋은 정보를 제공한다 해도 제대로 활용할 수 없다.
즉 배경색과 전경색의 대비가 접근에 있어서 대두되는 또 다른 잊혀진 화두이다.
예를 들어 다음과 같이디자인을 우선으로 제공된 경우 어떤 어려움이 있을까?


1. 색 대비(Color Contrast)와 웹 접근 조항
2. 바탕색, 전경색 대비 샘플 보기
3. 인터넷 상에서 색 대비 확인하기
4. Contrast Analyser 2.2
5. 마치며


이어지는 내용
by 백남중 | 2009/06/05 10:12 | Accessibility | 트랙백(2) | 덧글(0)
2008년 장애인 실태조사 자료

장애인 실태조사는 1980년부터 5년 주기로 장애인 실태조사를 실시해 왔으며, 2007년에는 장애인복지법이 개정되면서 3년마다 장애인 실태조사를 실시하도록 규정되어 2008년에 일곱 번째 장애인 실태조사가 실시되었다.

2008년 장애인 실태조사 원문 다운 받기

<2008년 장애인 실태조사 목차>

요 약
제1장 서론
  제1절 조사의 배경
  제2절 조사의 목적
  제3절 조사의 설계
  제4절 보고서의 구성

제2장 표본설계 개요
  제1절 장애인 실태조사의 개요
  제2절 표본 설계
  제3절 오차의 관리

제3장 조사표 개발 및 조사의 실제
  제1절 조사표 개발
  제2절 조사표의 구성 및 내용
  제3절 조사의 실제
  제4절 현지조사

제4장 장애의 범위 및 정의
  제1절 장애의 범위
  제2절 장애의 정의 및 분류
  제3절 장애원인 분류

제5장 조사결과
  제1절 장애인의 일반특성
  제2절 장애특성
  제3절 보건‧의료
  제4절 일상생활 지원
  제5절 장애인보조기구
  제6절 보육‧교육(장애 아동‧청소년)
  제7절 취업 및 직업재활
  제8절 사회 및 여가활동
  제9절 결혼생활/여성장애인
  제10절 생활만족도 및 폭력‧차별경험
  제11절 주거
  제12절 복지서비스
  제13절 경제상태

제6장 정책건의 및 시사점

참고문헌

부록

 

by 백남중 | 2009/06/02 13:04 | Accessibility | 트랙백 | 덧글(0)
소음 공해를 줄여 주세요....
하루 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>

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

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

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

기본적으로 나와 다른 방법으로 인터넷을 하는 사람들이 쉽게 접근할 수 있도록 선택의 기회를 제공하고, 기본적인 환경을 제공해 주는 것이다.
by 백남중 | 2009/05/29 09:00 | Accessibility | 트랙백(2) | 핑백(1) | 덧글(3)
공인인증서와 스크린 리더 접근 문제
(다음은 현재 사용중인 공인인증서(2009년 3월 현재)를 시각장애인이 스크린 리더(센스리더 프로 풀 버전)로 접근했을 경우의 문제와 이에 대한 개인적인 의뎐을 올린 것이다)

(공인인증서 화면)

위 화면을 스크린 리더로는 다음과 같이 음성 출력한다.

로그온할 인증서 선택 대화상자
인증서 암호는 대소문자를 구분합니다. 암호 편집창
확인 버튼
취소 버튼
인증서 보기 버튼
선택 인증서 위치 인증서 위치 1 / 5 라디오버튼
버튼
하드 디스크 버튼
이동식 디스크 버튼
저장 토큰 버튼
보안 토큰 버튼
버튼 버튼
버튼 버튼
휴대폰 버튼
인증서 찾기 버튼
인증서 삭제 버튼
목록상자
인증서 암호는 대소문자를 구분합니다. 암호 편집창
확인 버튼
1. 대화상자 내에서 탭 키 이동 문제:

로그온 할 인증서 선택 대화상자에서 탭 키로 이동하면 전혀 순서에 맞지 않게 이동한다.

'인증서 보기 버튼'은 현재 목록에 있는 인증서(은행개인)에 관한 내용을 아는 곳인데 확인 버튼, 취소 버튼 다음에 인증서 보기 버튼이 갑자기 나타나면 무슨 인증서의 내용을 볼 것인가 알 수가 없다.

이어지는 내용
by 백남중 | 2009/03/26 23:35 | Accessibility | 트랙백 | 덧글(0)
텍스트 웹 브라우저, Lynx

인터넷 소스를 해석하여 필요한 내용만 화면에 보여주는 기능을 하는 것이 브라우저이다.
브라우저는 크게 두 가지 - 텍스트 웹 브라우저, 그래픽 웹 브라우저 -로 나뉜다.
현재 추세는 Internet Explorer, FireFox, Opera 등과 같은 그래픽 웹 브라우저를 사용하지만 초기 인터넷에서는 텍스트 웹 브라우저도 있었다.
텍스트 웹 브라우저는 저급 사양의 컴퓨터, 인터넷 속도가 느린 환경, 그래픽 웹 브라우저를 사용할 수 없었던 시각장애인들이 활용하였다.
 텍스트 웹 브라우저로 대표적인 Lynx는 미국 Kansas 대학에서 교내 정보 시스템을 만들면서 발전한 것으로, 초기에는 UNIX나 VMS 등의 시스템 터미널에서 사용되도록 만들어졌다.
Lynx는 텍스트만을 보여주기 때문에 빠르며 인터넷의 모든 자원을 접속할 수 있다는 장점은 있지만 그래픽을 보여주지 못하고, 폰트 크기, 라인, 특별한 문자 등을 처리할 수 없다는 단점이 있다.

국내에서는 1996년 시각장애인에게 DOS에서 Lynx를 활용한 인터넷 강좌가 개설되었다.

Lynx를 윈도우 XP에서 다른 응용 프로그램처럼 활용할 수 있는 lynx_setup-2.8.5rel-1.zip 을 구하였다.

Lynx를 활용하여 서핑을 해보면 완벽하지는 않지만 시각장애인이 인터넷을 하는 세계를 조금이라도 맛볼수 있다.

1. 설치
2. Lynx 옵션 설정하기
3. Lynx로 인터넷 서핑하기
3.1 이동
3.2 문서정보보기
3.3 History, 방문한 링크 보기
3.4 북마크 하기



이어지는 내용
by 백남중 | 2008/12/25 23:30 | Accessibility | 트랙백(1) | 덧글(3)
W3C, WCAG 2.0 Proposed Recommendation 발표

W3C에서는 2008년 11월 3일 WCAG 2.0 Proposed Recommendation(RP)를 발표하였다.
W3C에서 만드는 문서는 먼저 수 차례에 걸쳐 Working Draft를 만들어 검토를 하고, 2008년 4월 30일 Candidate Recommendation(CR)을 발표하였으며, 금번 Proposed Recommendation(PR)을 발표하였다.
Proposed Recommendation(RP)이 발표되었다는 것은 WCAG 2.0에 대한 기술적 문서(technical material)가 완성되었다는 것을 의미한다.
금번 발표된 RP은 최종안 바로 직전 단계이며, 최종안 Recommendation은 금년 12월에 확정된다.

WCAG 2.0의 4대 원칙은 다음과 같다.
Perceivable
  1. Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language
  2. Provide alternatives for time-based media
  3. Create content that can be presented in different ways (for example simpler layout ) without losing information or structure
  4. Make it easier for users to see and hear content including separating foreground from background
Operable
  1. Make all functionality available from a keyboard
  2. Provide users enough time to read and use content
  3. Do not design content in a way that is known to cause seizures
  4. Provide ways to help users navigate, find content and determine where they are
Understandable
  1. Make text content readable and understandable
  2. Make Web pages appear and operate in predictable ways
  3. Help users avoid and correct mistakes
Robust
  1. Maximize compatibility with current and future user agents, including assistive technologies


관련 페이지:
WCAG 2.0 Proposed Recommendation(2008.11.3)
Overview of WCAG 2.0 Documents
Understanding WCAG 2.0(2008.11.3)
Techniques for WCAG 2.0(2008.11.3)
by 백남중 | 2008/11/08 14:45 | Accessibility | 트랙백 | 덧글(0)
화면 낭독 프로그램과 웹 접근성
(다음 글은 "민간부문의 장애인 웹 접근성 제고를 위한 세미나"(주관: 한국정보문화진흥원 2008년 11월 3일)에서 발표한 ppt자료를 설명을 첨가하여 다시 정리한 것이다.)


시각장애인에 관한 정의는 여러가지가 있지만 정보통신적 의미에서 시각장애인인란 "모니터를 활용할 수 없는 사람"이라고 정의할 수 있다.

시각장애인이 정보통신기기를 활용하는 방법은 3가지가 있다.
화면 확대: 잔존 시력이 있는 저시력인이 사용. 전맹은 활용할 수 없다.
화면 낭독 프로그램: 잔존 시력의 유무에 관계없이 시각장애인 모두 활용할 수 있다.
점자 단말기: 촉각을 활용하여 점자 디스플레이어로 모니터의 내용을 파악한다. 비싼 것이 흠이다.

이어지는 내용
by 백남중 | 2008/11/06 02:28 | Accessibility | 트랙백 | 덧글(4)


<< 이전 페이지 다음 페이지 >>