|
많은 웹 접근 관련 글에서 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을 어디에 설정하느냐 하는 문제는 지난 주 Twitter에서도 문제가 되서 이에 대한 찬성, 반대 사이트 h1debate가 개설 되었습니다. 오늘(2009.6.17 오후 5시) 현재의 찬반은 로고 30.97% : 메인 타이틀 69.03%입니다. ![]() 우리하고는 약간 다른 헤딩의 사용에 대한 방식이 무엇을 의미하는지 다시 한번 되새겨 볼 필요가 있을 것 같다. 많은 웹 문서에서 목록을 남용하고 있다. 물론 혹자는 코딩에 정도가 없다고 항변할 수 있으나, 기본적인 문법을 따르지 않는 것은 접근성을 논의하기 이전의 문제이다. 여기서는 웹 문서에서 목록의 코딩 오용에 대해 알아보고자 한다. 웹 문서에서 연속된 내용을 나타내는 방법에는 <ul>과 <ol>이 있다. 또한 사전의 표제어처럼 항목에 대한 설명을 달기 위해서는 정의목록 <dl>을 사용한다. HTML 4.01의 목록에 관한 내용:
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 보기 화면'라는 명칭 하에 원래의 화면과 비교하였다) 이어지는 내용
눈이 불편한 사람 중에는 스크린 리더를 활용하여 음성으로 정보를 파악하는 사람도 있지만 잔존 시력이 남아 있는 경우에는 화면을 확대하여 사용하거나, 바탕색과 전경색의 대비를 바꾸어 사용하는 사람도 있다. 또한 바탕색과 전경색을 바꾼 후 화면을 확대하여 사용하는 경우도 있다.
이렇게 사용하는 저시력인의 경우 배경색과 전경색이 대비가 안되는 경우에는 아무리 좋은 정보를 제공한다 해도 제대로 활용할 수 없다. 즉 배경색과 전경색의 대비가 접근에 있어서 대두되는 또 다른 잊혀진 화두이다. 예를 들어 다음과 같이디자인을 우선으로 제공된 경우 어떤 어려움이 있을까? ![]() ![]() 1. 색 대비(Color Contrast)와 웹 접근 조항 2. 바탕색, 전경색 대비 샘플 보기 3. 인터넷 상에서 색 대비 확인하기 4. Contrast Analyser 2.2 5. 마치며 이어지는 내용 장애인 실태조사는 1980년부터 5년 주기로 장애인 실태조사를 실시해 왔으며, 2007년에는 장애인복지법이 개정되면서 3년마다 장애인 실태조사를 실시하도록 규정되어 2008년에 일곱 번째 장애인 실태조사가 실시되었다.
하루 8시간 컴퓨터를 하면서 모든 내용을 스크린 리더로 듣는다면 어떻게 될까?
상상만 해도 끔찍한 일이다. 불과 몇 년 사이에 장애인의 웹 접근에 대한 문제가 초미의 화두가 되면서 시각장애인이 스크린 리더로 접근하지 못하는 이미지 등에 이를 대체할 만한 각종 텍스트를 제공해 주는 것이 보편화 되었다. 그러나 많은 개발자들이 자신이 제공한 텍스트 부분이 어떻게 소음 공해를 일으키는지는 생각하지도 않고 그저 alt text를 달았다는 것만으로 자신만의 만족을 추구하는 경향이 있다. 접근이라는 것은 기존의 모니터를 활용하지 못하는 시각장애인도 배려하기 위함인데 이것이 소음 공해를 일으켜 실수요자에게 불편함을 준다면 마크업이 맞거나, 품질 마크를 획득한 것이 무슨 의미가 있는가? 여기서는 각종 사이트에서 소음 공해를 일으키는 문제에 대해서 예를 들어보기로 한다. 이미지에 alt text 제공시 문제: 이미지에 alt text를 제공하면 스크린 리더는 이미지, 그래픽 링크, 이미지 맵, 이미지 버튼이라고 해당 이미지의 속성을 음성 출력하기 때문에 시각장애인은 이를 적당하게 활용할 수 있다.
타이틀 문제: <title>로 정한 부분은 웹 브라우저에서 3가지 기능을 한다. 첫째, 웹 브라우저 화면 맨 위에 현재 페이지의 제목으로 나타나며, 둘째, 파일로 저장하는 경우파일명으로 나타나고, 마지막으로 즐겨찾기하는 경우 즐겨찾기의 이름으로 나타난다. 따라서 <title>에는 현재 페이지의 특성을 가장 잘 나타낼 수 있도록 간단 명료하게 입력해야 한다. 특히 불필요한 특수 문자는 사용하지 않는 것이 좋다.
스킵내비게이션 문제: 시각장애인이 원하는 구역으로 쉽게 이동하기 위하여 스킵내비게이션을 제공한다.
웹 접근성을 제공한다는 것은 마크업만 맞으면 된다는 것이 아니고, 품질마크 인정을 획득하기 위한 것도 아니다. 장차법이 생겨서 벌금을 피하기 위한 방법도 아니다. 또한 내 지적 호기심을 충족하거나 자랑하기 위한 것도 아니다. 기본적으로 나와 다른 방법으로 인터넷을 하는 사람들이 쉽게 접근할 수 있도록 선택의 기회를 제공하고, 기본적인 환경을 제공해 주는 것이다.
(다음은 현재 사용중인 공인인증서(2009년 3월 현재)를 시각장애인이 스크린 리더(센스리더 프로 풀 버전)로 접근했을 경우의 문제와 이에 대한 개인적인 의뎐을 올린 것이다)
(공인인증서 화면) ![]() 위 화면을 스크린 리더로는 다음과 같이 음성 출력한다. 로그온할 인증서 선택 대화상자1. 대화상자 내에서 탭 키 이동 문제: 로그온 할 인증서 선택 대화상자에서 탭 키로 이동하면 전혀 순서에 맞지 않게 이동한다. '인증서 보기 버튼'은 현재 목록에 있는 인증서(은행개인)에 관한 내용을 아는 곳인데 확인 버튼, 취소 버튼 다음에 인증서 보기 버튼이 갑자기 나타나면 무슨 인증서의 내용을 볼 것인가 알 수가 없다. 이어지는 내용 인터넷 소스를 해석하여 필요한 내용만 화면에 보여주는 기능을 하는 것이 브라우저이다. Lynx를 활용하여 서핑을 해보면 완벽하지는 않지만 시각장애인이 인터넷을 하는 세계를 조금이라도 맛볼수 있다. 이어지는 내용
W3C는 2008년 12월 11일자로 WCAG 2.0을 발표하였다.
Understanding WCAG 2.0 Techniques for WCAG 2.0 How to Meet WCAG 2.0 ![]() 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
![]() 관련 페이지: 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)
(다음 글은 "민간부문의 장애인 웹 접근성 제고를 위한 세미나"(주관: 한국정보문화진흥원 2008년 11월 3일)에서 발표한 ppt자료를 설명을 첨가하여 다시 정리한 것이다.)
![]() 시각장애인에 관한 정의는 여러가지가 있지만 정보통신적 의미에서 시각장애인인란 "모니터를 활용할 수 없는 사람"이라고 정의할 수 있다. ![]() 시각장애인이 정보통신기기를 활용하는 방법은 3가지가 있다. 화면 확대: 잔존 시력이 있는 저시력인이 사용. 전맹은 활용할 수 없다. 화면 낭독 프로그램: 잔존 시력의 유무에 관계없이 시각장애인 모두 활용할 수 있다. 점자 단말기: 촉각을 활용하여 점자 디스플레이어로 모니터의 내용을 파악한다. 비싼 것이 흠이다. 이어지는 내용
|
카테고리
최근 등록된 덧글
글잘읽었습니다. 알면 ..
by 치프 at 06/30 그런데 웹페이지는 하나.. by 윤좌진 at 06/22 저 역시 h1은 1번만 사용.. by 윤좌진 at 06/22 본문에 나오는것이 좋긴.. by 황규연 at 06/21 정찬명// 저 역시 h1은 한.. by 조현진 at 06/21 저는 h1이 단 한번만 선언.. by 정찬명 at 06/19 저도 title 한표요 by 백남중 at 06/19 저도 title 쪽에 한표 던지.. by 조현진 at 06/19 백부장님~ 안녕하세요~.. by 김혜일 at 06/19 좋은 글 잘 보았습니다... by 삐돌이 at 06/18 최근 등록된 트랙백
정찬명의 생각
by naradesign's me2DAY free7942g의 생각 by free7942g's me2DAY 스탠다드매거진의 생각 by cdk's me2DAY 미희의 생각 by mi-hee's me2DAY Adderall xr side effec.. by Adderall women weight.. 소음 공해를 줄여 주세요.. by Tag & Brace의 웹표준.. 중독의 생각 by naxer's me2DAY Adderall and migrain.. by Adderall. Vicodin with no memb.. by No prescription vicod.. Tamiflu side effects. by Tamiflu and appetite. 태그
|