본문가기 메뉴가기 분류가기 하단가기

HIWEB :blog

‘웹접근성 실무’으로 분류된 글들.

  1. 2011/08/26 웹접근성 준수지침 2.0 집중교육 (19)
  2. 2011/05/02 모바일 웹 관련자료 모음 (1)
  3. 2009/11/06 보편적인 웹 접근성 관계 요소 (4)
  4. 2009/04/30 웹 접근성 실무예제소스
  5. 2009/04/07 다소 복잡한 데이터 테이블 (2)
  6. 2009/04/07 웹 접근성을 고려한 데이터테이블 (2)
  7. 2009/04/03 [동영상] 시각장애인의 컴퓨터 활용 - 저시력자
  8. 2009/04/03 [동영상] 개발자 여러분! 웹 접근성을 향상을 도와주세요
  9. 2009/04/03 [동영상] 시각장애인의 컴퓨터 활용 - 전맹
  10. 2009/03/27 명함 받으시고 포인트 적립하세요 (3)
  11. 2009/03/19 웹접근성 향상을 위한 국가표준 기술 가이드라인 발표
  12. 2009/02/06 웹 접근성 품질마크 실태조사 항목별 체크리스트
다음글>

웹접근성 준수지침 2.0 집중교육

본문 건너뛰기

웹접근성 강의 안내

장애인 차별금지 및 권리 구제등에 관한 법률시행 등 웹 접근성에 대한 관심과 수요 증가와 최근 개정된 한국형 웹 콘텐츠 접근성 2.0(KWCAG 2.0)에 맞추어 개발자들의 웹접근성 전문성 제고를 위해 웹 접근성 전문교육을 실시합니다.
웹 사이트 관리자 및 웹 접근성에 관심이 있는 민간 개발자들도 무료 참여가 가능합니다.

강의개요

참가안내

참가를 희망하시는 분은 하단에 참가 코멘트와 함께 찾아오시면 됩니다.

강의는 종료되었으며, 후기 사진이 추가되었습니다. 참가해 주신분은 후기를 작성해 주세요!

강의후기

집중중인 웹 퍼블리셔 참가자들

호연과장님 표정이 왜 이래?(앗 저런것도 있었구나 하는 표정?)

더운날씨에도 개정된 웹접근성 준수지침 2.0 에 대해 자세하고 친절하게 강의하시는 찬명님.

점심먹고 한 컷

참가해주신 웹퍼블리셔 현정님, 창수님, 선미님, 수연님, 진희님, 선영님, HIWEB 팀원, 그리고 찬명님, 모두 고생 많으셨습니다.

헛! 댓글이 있어요

  1. 이화정2011/08/26 16:04

    참가희망 합니다~

  2. 이종국2011/08/26 16:04

    참가 희망합니다

  3. 여선희2011/08/26 16:04

    참석요~ ^^ 토요일에 뵙겠습니다.

  4. 고인규2011/08/26 16:09

    참가희망합니다!!

  5. 박선미2011/08/26 16:09

    참가희망합니다~!!

  6. 이신영2011/08/26 16:09

    참가신청합니다~

  7. 김수연2011/08/26 16:10

    참가희망해요

  8. 임국태2011/08/26 16:10

    I hope to attend.

  9. 하진희2011/08/26 16:11

    참가희망합니다.

  10. 이현정2011/08/26 17:39

    참가희망합니다 ^____^

  11. 강희창2011/08/27 02:01

    참가희망합니다

  12. 장호연2011/08/27 03:44

    참가희망합니다.

  13. 한창수2011/08/27 06:59

    저도 참가 희망합니다.

  14. 장호연2011/08/27 19:53

    정말 좋은 강의였고 단시간에 많은 도움이 되었습니다. 강의 하시느라 고생이 많으셨던 정찬명님과 자리를 만들어주신 김일규팀장님께 감사드립니다.

  15. 이종국2011/08/27 19:58

    강의 내용이 참 좋았습니다. 접근성에 대해서 다시 한번 생각해보는 계기가 되었네요.
    이런 기회가 자주 자주 있었으면 좋겠습니다. 다들 수고 많으셨습니다.

  16. EveR™2011/08/27 21:06

    오늘 정말 즐거웠습니다. ^^
    모두들 즐거운 주말 되세요.

  17. 박선미2011/08/29 09:09

    정말 알차고 좋은 강의 시간이였습니다.
    지금 하고 있는 프로젝트의 많은 도움이 될것같습니다~~~ *_*)/

    아 저도 정찬명님과 사진찍고 싶었는데요..아.. 용기좀 내볼껄!
    다음에도 좋은 강의 있으면 참석하고 싶네요~~
    아 그리고 강의자료~~ 꼬~옥 보내주실꺼죠? ㅎㅎ 그럼 오늘도 좋은하루들 보내세요~!

  18. 한창수2011/08/29 12:02

    정찬명 님의 꼼꼼한 강의에 감동받았습니다. 그리고 하이웹솔루션 회사도 멋있었습니다. 다음에도 이런 기회가 있다면 아는 퍼블리셔들과 참여하겠습니다.

    찬명 님, 일규 님, 하이웹솔루션 가족 모두! 정말 수고 많이 하셨습니다.

  19. 임국태2011/08/29 14:46

    평상시에 뵙고 싶었던 분 강의를 눈 앞에서 봐서 너무 좋았습니다. 강의 내용도 평상시 알고 있던 지식이 잘못된
    지식이 많은 것도 알게 되었고 모르던 지식도 알게되어 좋은 시간이였습니다. 오랜만에 일규팀장님, 호연씨 봐서
    반가웠습니다. 일규팀장님 초청해주셔서 감사했습니다^^

댓글 남기기

모바일 웹 관련자료 모음

본문 건너뛰기

모바일 웹 관련하여 수집한 자료들입니다. 각각의 pdf 자료의 출처는 문서 자체에 기재되어 있습니다.
용량이 많을 경우 파일열람이 다소 느릴 수 있습니다.

문서자료

외부링크

모바일 웹?

모바일 웹이란 무엇일까요? 한동안 바쁜 일상속에 살다가 제안서 작업으로 모바일에 대해 2주 정도? 진지하게 공부를 했다.
제가 내린 모바일 웹의 결론은,

스마트폰의 보급 및 확산, 모바일 인터넷 활성화 등으로 인터넷 이용환경이 유선에서 무선기반으로 급속 변화하여 기존 웹사이트의 풀 브라우징 인터페이스 단점을 해결하기 위해 모바일 웹을 구축한다.
결국 가장 베스트는 ONE WEB, 즉 데스크탑 환경과 모바일 환경을 최대한 단일화 방향으로 지향하고 최신 스마트폰의 성능을 고려하는 것, 데스크탑 웹사이트와 최대한 동등하게 정보를 제공하는 것!

결론! 관공서의 경우 콘텐츠가 매우 많고 광범위하므로, 풀브라우징 인터페이스 단점을 해결하기 위해 요약 정리한 모바일 웹을 필요로 하지만, 더 좋은 방법은 웹표준과 웹접근성을 준수하여 간결한 사이트로 지향하고 모바일 풀브라우징에서도 무리없도록 애초에 하나의 웹을 만들자. http://jennyhouse.info 모바일웹이 필요없다. ㅋㅋ

동일한 html 로 모바일접속과 데스트탑 접속을 구별하여 다른 css 를 적용할 수도 있다. 재작년 나의 기획작품 http://somang.skysoft.co.kr/

헛! 댓글이 있어요

  1. 문혜영2011/08/16 18:00

    위에 몇개 pdf가 안 읽히네요^^

댓글 남기기

보편적인 웹 접근성 관계 요소

본문 건너뛰기

사람에 따른 분류

웹 제작자

웹 이용자

환경에 따른 분류

하드웨어환경(Hardware)

소프트웨어환경(Software)

원글자료출처 : 나라디자인, 웹 뒤에 숨은 Web

헛! 댓글이 있어요

  1. 정찬명2009/11/07 04:55

    이 문서의 출처를 표기해 주시면 안될까요?

  2. 김일규2009/11/07 08:25

    와.. 여기에도 방문자가 오는군요.. 작성중였는데 오셨군요.. 근데 추지호님의 글에서 NHN의 접근성 관계요소로 보았는데, 지금보니깐 찬명님 블로그에 원본 게시글이 있네요.. ㅎㅎ
    어제 말씀 너무 감사했습니다.

  3. 칭구2009/11/20 14:16

    미대출신....??

  4. 김일규2009/11/25 13:08

    친구 누고?

댓글 남기기

웹 접근성 실무예제소스

본문 건너뛰기

그 동안 작업했던 웹 접근성 약 100개의 템플릿들을 올릴 예정입니다. 잠시만 기다려 주세요.

레이아웃

참고소스

댓글 남기기

다소 복잡한 데이터 테이블

본문 건너뛰기

다수의 th 부모들이 존재할 경우

2008년 1분기 누적금액 현황
수입 저축 프로젝트 금액
년월 주수입 부수입 수입총액 청약 적금 남는돈 프로젝트통장 추가금액 누적금액
달성율 5.1%
2008년 01월 3,450,000 0 3,450,000 100,000 1,000,000 0 0 0 51,000,000
2008년 02월 2,338,000 0 2,338,000 100,000 1,000,000 0 0 0 51,000,000
2008년 03월 4,700,000 0 4,700,000 100,000 1,000,000 0 0 0 51,000,000

복잡시런 테이블 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample01.txt (새창은 Shitf+클릭)

여러개의 헤더셀을 포함한 큰 헤더셀이 있으며, 좌측 컬럼에도 헤더셀이 있습니다. 마크업을 살펴보겠습니다. summary 뒤에 있는 rules 속성은 셀의 구분선 표시형식을 정의하는 것으로 행 사이의 구분선을 표시할 경우에 ‘rows’, 열 사이에 구분선을 표시할 경우에 ‘cols’, 그룹핑 단위로 구분선을 표시할 경우에는 ‘groups’를 지정합니다. 이때 그룹핑은 thead, tbody, tfoot 이 되며 저는 ‘all’ 로 지정하였습니다. thead 속성에도 디자인이 가능하지만 rules 속성으로도 디자인이 가능합니다. colgroup 요소는 열의 그룹핑을 위한 요소로써, 둘 이상의 열을 그룹핑 할 경우 span 속성을 통해서 갯수를 정의할 수 있습니다. 내용셀과 헤더셀을 살펴보면 각 헤더셀에 id 를 부여하고, 여러개의 제목셀을 갖는 내용셀에는 headers 속성을 사용하여 현재의 내용셀의 제목이 여러개 존재함을 알리고 있습니다. 아니 근데,

테이블 하나가지고 div, css 코딩하는것도 아니고 접근성 개선사업으로 바쁜데 언제 이렇게 하고 있을까요?

더 단순한 마크업 방법이 있습니다!

scope 속성만으로도 위와 동일한 결과를 간단히 만들 수 있습니다. 바로 scope 속성값중에 ‘colgroup’ 속성값과 ‘rowgroup’ 속성값이 있습니다.

scope 의 colgroup 속성값으로 만든 동일한 결과를 만들다

웹 접근성 툴바를 이용하여 scope 의 속성값을 분석해 본 테이블 구조도

scope 속성만을 이용한 해결법 예제소스 : http://www.hiweb.kr/sample/ex00/table_sample02.txt (새창은 Shitf+클릭)

scope 속성만을 이용한 예제와 같이, scope 속성값중 colgroup 값을 사용하여 행을 그룹화 하였고, 좌측 컬럼에 존재하는 헤더셀에는 scope 값으로 row 를 지정해 주어 모든 헤더셀과 내용셀이 명시적으로 논리적인 관계를 갖기 때문에 굳이 id, headers 속성을 사용하지 않아도 됩니다. 또한 html 의 파싱순서에 따라 화면낭독기는 좌상단으로부터 우하단으로 Z 모양으로 반복해서 읽을 것 입니다. 위 예제에는 없지만, 좌측 컬럼의 헤더셀이 rowspan 속성으로 상하셀이 결합되어 그룹화가 되어 있고 바로 옆에 또 다른 자식 헤더셀이 존재할 경우 scope="rowgroup" 이 되겠죠. 때문에 id, headers 속성까지 사용하는 일은 거의 전무하다고 판단됩니다.

이렇게 제목셀과 내용셀의 관계를 명시적으로 지정한 경우 화면낭독기 또는 그 외의 장치가 이것을 의미있게 받아들이는 경우 내용셀을 읽기 전에 현재 내용셀과 연관된 제목셀을 먼저 읽어 주는등 다양한 확장성과 향상된 경험을 줄 수 있습니다.

axis 라는 속성도 있습니다. axis 속성은 id 속성과 headers 속성으로 연결된 셀들을 카테고리화 할 수 있어서 사용자가 표로부터 원치 않는 정보(셀)를 제외한 보다 정확한 정보를 제공받을 수 있도록 처리하는데 도움을 줍니다.

우습게 시작했던 테이블이 가면 갈수록 어려워지는 건

테이블을 css 로 디자인하면서 언젠가 "아 thead 와 tbody 로도 디자인이 가능하구나" 라고 느꼈던것이 그리 오래되지 않았는데 rules 속성으로도 디자인이 가능하다는 것을 새로 알게 되었고, 절대 복합한 테이블에서 등장하는 axis 속성의 원치 않는 셀 분리, 헤더셀들의 그룹화, 스크린리더 읽는 순서 지정문제등 알면 알수록 어려워 지는 바로 이 테이블, 국내 스크린 리더의 미비한 지원 문제점까지 있는 이 상황에 저는 이렇게 생각해 봅니다.

Table 요소를 표로써 제대로 사용하는 것. 쉬운 결정이지만 결코 만만치 않은 일이다.

헛! 댓글이 있어요

  1. DestWin2009/04/16 22:05

    어렵당 ㅡ-)

  2. 옥2009/04/29 23:29

    그러게 어렵다 나도 배워야 하는데 뉴뉴

댓글 남기기

웹 접근성을 고려한 데이터테이블

본문 건너뛰기

테이블 요소는 가장 많이, 가장 쉽게 사용하는 요소중 하나이지만, 알면 알수록 어려워지는것이 바로 이 테이블인 것 같습니다. 기본적으로 테이블에서 자주 사용되는 속성(summary, caption, colgroup, thead, tfoot, tbody)은 알고 있으리라 생각하고 시작하겠습니다. 간단한 테이블 하나가 있습니다.

흔히 사용되는 테이터 테이블

김일규가 한달 사용하는 지출비 순위
순위 지출 용도 금액
한달 총 지출비 : 400,000원
1 교통비 200,000원
2 식대비 100,000원
3 개인 용돈 100,000원

상단테이블 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample03.txt (새창은 Shitf+클릭)

마크업을 살펴보면 summary 속성과 border 속성을 가지고 있고, caption, colgroup, thead, tfoot, tbody 요소를 차례대로 가지고 있으며, 프린터 출력시 tbody 가 두 페이지 이상으로 끊어질 때 페이지마다 tfoot 요소가 출력될 수 있도록 thead 와 tbody 사이에 tfoot 이 위치하고 있습니다. border 속성의 경우 css 가 지원되지 않는 경우 시각적인 가독성을 떨어뜨리는 문제로 기본값을 1로 정의하고 css 로 표현하였습니다.

테이블 Structure 보기

웹 접근성 툴바를 이용하여 분석해 본 테이블 구조도

웹 접근성을 고려한 데이터테이블에서는 테이블의 내용을 이해할 수 있는 정보(summary/제목, caption/요약정보)를 제공해야 한다는 것은 누구나 알고 있지만, 조금 더 의미있게 설명하는 테이블은 거의 못본 것 같습니다. summary 에서는 테이블의 상세한 제목 또는 이 테이블을 통해 정보제공자가 전달하고자 하는 핵심 제목을 넣어야 합니다.

그럼, 상단의 테이블의 summary 는 어떻게 넣어야 할까요?

결국, summary 에서는 테이블의 모든 내용을 구구절절(1열 순위, 2열 지출용도, 3열 금액등..) 설명하는 것만이 아니라는 것을 알 수 있으며, 시각장애인은 스크린리더를 통해 이 테이블의 summary 만 들어도 테이블 내용을 직감할 수 있을 것입니다. 저는 이 테이블을 통해 한달에 교통비가 제일 많이 나간다는것을 호소하고 있는 것 입니다. caption 또한 summary 와 중복되지 않는 적절한 요약정보를 넣었습니다.

scope 속성의 col(세로로읽어라)속성값 row(가로로읽어라) 속성값으로 스크린리더에서 테이블의 읽는 순서를 지정해 주었으며, 이와 비슷한 id(너는) headers(너다) 직접연결 속성은 하단에서 설명하겠습니다.. 빠른 진행을 위해 abbr 속성을 사용하였고 음성 장치는 abbr 속성값의 약자만을 읽을 것 입니다.

그럼 하단예제로 제목셀과 내용셀의 논리적인 관계를 의미있게 설정하는 몇가지 방법을 보겠습니다.

제목셀과 내용셀의 읽는 순서를 연결해주자

보통 scope 속성은 테이블형식이 가로 세로가 일정할 때 사용됩니다. 다음과 같이 말이죠.

scope 속성의 col 예제

하이웹솔루션 문의제안 게시판
번호 제목 작성자
1 테이터 테이블에 대해서 알고 싶습니다. 이명박
2 뭔 테이블 하나에 1년을 공부해도 더 배울게 있는거냐구요 노무현

scope 속성의 col 예제 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample04.txt (새창은 Shitf+클릭)

th 제목요소에 col 을 지정하여 모든열의 범위를 지정하였으므로 스크린리더기는 다음과 같이 읽을 것 입니다.

“번호, 1, 제목, 테이터 테이블에 대해서 알고 싶습니다, 작성자, 이명박 번호, 2, 제목, 뭔 테이블 하나에 1년을 공부해도 더 배울게 있는거냐구요, 작성자, 노무현”

시각적으로 테이블을 보는것이 아니라, 음성으로 듣기 때문에 제목셀을 지그제로 한번 더 읽으므로써, 명확하게 테이블을 이해할 수 있습니다.

scope 속성의 row, id 와 headers 예제

문의제안 게시판 글보기
작성자 이명박 회원등급 부유층
본문내용
부유층을 섬기겠습니다.

scope 속성의 row, id 와 headers 예제 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample05.txt

row 속성값으로 범위에 속한 행에 대하여 가로로 읽게 해주었으며, id 와 headers 속성으로 직접 연결해주었습니다. 물론 id="sample-content" 대신 scope="col" 만으로도 헤더셀과 내용셀의 명시적 연결이 가능 합니다. 읽는 순서는

“작성자, 이명박, 회원등급, 부유층, 본문내용, 부유층을 섬기겠습니다. ”

간단한 테이블이라면 headers 속성 대신 scope 속성만으로도 동일한 결과를 가져 올 수 있으며, headers 는 상황이 매우 복잡한 표나 영역을 설정하기 곤란한 경우에 사용합니다.

헛! 댓글이 있어요

  1. 정환나라2009/04/10 01:02

    내용에 상관없이 예제에 대해 트집잡는 한심한 인간들이 있을듯..
    뭐 드림위버가 다 알아서 해주는줄 알았는데 그게 아니었군요 ㅋ

  2. 장호연2011/07/02 03:47

    예제가 재밌네요 ㅎㅎㅎㅎ

댓글 남기기

[동영상] 시각장애인의 컴퓨터 활용 - 저시력자

본문 건너뛰기

대본 보기

http://www.hiweb.kr/file/low_vision.html

동영상출처

정보통신 접근성 향상 표준화 포럼 > 장애없는 사이버세상 웹 접근성 향상 캠페인

댓글 남기기

[동영상] 개발자 여러분! 웹 접근성을 향상을 도와주세요

본문 건너뛰기

동영상출처

정보통신 접근성 향상 표준화 포럼

댓글 남기기

[동영상] 시각장애인의 컴퓨터 활용 - 전맹

본문 건너뛰기

시각장애인의 컴퓨터 활용 - 전맹-

  1. 시각장애인의 컴퓨터 활용
  2. 내 컴퓨터에서의 활용
  3. 인터넷에서의 활용

대본 보기

http://www.hiweb.kr/file/blindness.html

동영상출처

정보통신 접근성 향상 표준화 포럼 > 장애없는 사이버세상 웹 접근성 향상 캠페인

댓글 남기기

명함 받으시고 포인트 적립하세요

본문 건너뛰기

감각있는 예술고, 미대출신의 웹에이전시 - 하이웹솔루션 김일규 개인명함

위와 같은 이미지일때 대체텍스트는 어떻게 넣어야 할까요?

  1. alt 값으로 쭉 넣어준다.
  2. 하단에 보이지 않는 문서로 대처한다.
  3. longdesc 속성으로 대체문서를 작성하여 보완한다.

답변을 달아주시는 분께는 명함 무료배송과 더불어 20,000 포인트를 적립해 드립니다.

짤리기전에 응모해주세요.

헛! 댓글이 있어요

  1. 장화신은고양이2009/03/28 18:25

    저는 "1. alt 값으로 쭉 넣어준다." 이게 답인거 같아요.
    -> alt 속성에 대표적인 정보만 넣어주고, title 속성에 나머지 내용들을 넣어주는게 맞지 않나요?

  2. 민경환2009/04/01 02:15

    정답은 없다고 생각합니다.
    하지만 2번, 하단에 보이지 않는 문서로 대처하는게 적절할것 같네요.

    HIWEB - 실장 김일규
    주소 : 서울특별시 금천구 시흥동 827-13번지 301호, 전화번호 : 02-6408-4002, 팩스 : 02-6408-4002, 이메일 : rock191919@lycos.co.kr, 홈페이지 : www.hiweb.kr

  3. 신연옥2009/04/01 18:59

    3번~

댓글 남기기

웹접근성 향상을 위한 국가표준 기술 가이드라인 발표

본문 건너뛰기

웹 접근성 국가표준인 인터넷 웹 콘텐츠 접근성 지침의 준수여부를 평가할 수 있는 기준을 새로 마련하여 2009년 3월 17일 공포하게 되었습니다. 기준의 명칭은 웹 접근성 향상을 위한 국가표준 기술 가이드라인이며, 총 18개 항목으로 구성되었습니다.

본 작업을 해주신 충북대 김석일 교수님, 성신여대 노석준 교수님, 신현석님, 신승식님, 정찬명님, 조훈님 등 많은 전문가 여러분과 본 작업을 검토해 주신 포털업체 관계자, 장애인단체 등 많은 분들께 감사드립니다.

18개 항목은 다음과 같이 구성되었습니다.

웹접근성 향상을 위한 국가표준 기술 가이드라인

  1. 이미지의 의미나 목적을 이해할 수 있도록 적절한 대체 텍스트를 제공해야 한다.
  2. 배경 이미지가 의미를 갖는 경우, 배경 이미지의 의미를 이해할 수 있도록 대체 콘텐츠를 제공해야 한다.
  3. 동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단(자막, 원고 또는 수화)를 제공해야 한다.
  4. 색상을 배제하여도 원하는 내용을 전달할 수 있도록, 색상 이외에도 명암이나 패턴 등으로 콘텐츠 구분이 가능해야 한다.
  5. 서버측 이미지 맵을 제공할 경우, 해당 내용 및 기능을 사용할 수 있는 대체 콘텐츠를 제공해야 한다.
  6. 프레임을 제공할 경우, 해당 내용을 이해할 수 있도록 적절한 제목(title 속성)을 제공해야 한다.
  7. 깜빡이는 콘텐츠를 제공할 경우, 사전에 경고하고 깜빡임을 회피할 수 있는 수단을 제공해야 한다.
  8. 모든 기능을 키보드로 이용할 수 있어야 한다.
  9. 반복되는 링크를 건너뛸 수 있도록 건너뛰기 링크(skip navigation)를 제공해야 한다.
  10. 시간 제한이 있는 콘텐츠를 제공할 경우, 시간 제어 기능을 제공해야 한다.
  11. 새 창(팝업창 포함)을 제공할 경우, 사용자에게 사전에 알려야 한다.
  12. 데이터 테이블을 제공할 경우, 테이블의 내용을 이해할 수 있는 정보(제목, 요약정보 등)를 제공해야 한다.
  13. 데이터 테이블을 제공할 경우, 제목 셀과 내용 셀을 구분할 수 있어야 한다.
  14. 해당 페이지를 잘 이해할 수 있도록 페이지 제목()을 제공해야 한다.
  15. 콘텐츠는 논리적인 순서로 구성되어야 한다.
  16. 온라인 서식을 제공할 경우, 레이블()을 제공해야 한다.
  17. 애플릿, 플러그인(ActiveX, 플래시) 등 부가 애플리케이션을 제공하는 경우, 해당 애플리케이션이 자체적인 접근성을 준수하거나 사용자가 대체 콘텐츠를 선택하여 이용할 수 있어야 한다.
  18. 마크업 언어로 구현할 수 있는 기능(링크, 서식, 버튼, 페이지 제목)을 자바스크립트로만 구현하지 말아야 한다.

PDF 파일보기 (제정일 : 2009년 3월 17일)

웹접근성 향상을 위한 국가표준 기술 가이드라인 다운로드 : http://www.hiweb.kr/accessibility_technicalguide.pdf

댓글 남기기

웹 접근성 품질마크 실태조사 항목별 체크리스트

본문 건너뛰기

1. 인식의 용이성 (43점)

인식의 용이성 체크리스트와 배점
항목 [13] 지표 [26] 웹 접근성 품질마크 체크리스트[53]- 의무 27, 권고 21, 권장 5 중요도
1-1. 텍스트 아닌 콘텐츠의 인식 1-1-1. 텍스트가 아닌 콘텐츠에는 모두 대체 텍스트가 제공되어야 한다.
  • (1) 텍스트가 아닌 콘텐츠에 대해서는 대체 텍스트를 제공하고 있는가?
 (1의무) 11점
1-1-2. 대체 텍스트의 내용은 적절하게 제공되어야 한다.
  • (2) ~링크, ~버튼과 같이 중복된 내용을 대체 텍스트로 제공하지 않으며, 콘텐츠를 파악할 수 있는 구체적인 설명을 제공하고 있는가?
  • (3) 콘텐츠 이미지의 경우 이미지를 설명하는 적절한 대체 텍스트를 제공하고 있는가? ※ 이미지의 의미가 없는 경우 대체 텍스트를 blank(alt="")alt=""로 제공
  • (4) 대체 텍스트의 내용이 길거나 복잡한 경우 longdesc 속성을 이용하여 적절한 추가적인 정보를 제공하고 있는가?
 (1의무) 7점
1-1-3. 정보가 있는 콘텐츠를 배경 이미지로 사용하지 않아야 한다.
  • (5) 텍스트로 표현이 가능한 내용을 전부 이미지로 제작하여 배경으로 삽입하는 경우 대체 텍스트를 넣을 수 없으므로, 일반적인 텍스트로 표현하거나 전경 이미지와 대체 텍스트로 표현하고 있는가?
 (1의무) 3점
1-2. 멀티미디어 매체의 인식(영상매체의 인식) 1-2-1. 동영상 등의 시청각 멀티미디어 콘텐츠에는 동기화된 자막이 제공되어야 한다.
  • (6) 동영상, 오디오 등 멀티미디어 콘텐츠는 동기화된 자막을 제공하고 있는가? ※ 동기화된 자막이 원칙이나, 콘텐츠의 내용을 즉시적으로 충분히 이해할 수 있는 자막 또는 원고를 제공할 경우 허용됨
  • 실시간 멀티미디어 콘텐츠는 동기화된 자막을 제공하고 있는가?
 (1의무) 10점
1-3. 콘텐츠의 시각적 명료성(색상에 무관한 인식) 1-3-1. 색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.
  • (7) 색상 이외에도 명암이나 패턴으로 콘텐츠 구분이 가능한가?
 (1의무) 3점
1-3-2. 전경색과 배경색은 충분한 대비를 가지고 있어야 한다.
  • (8) 흰 바탕에 밝은 회색글자처럼 판독이 어려운 색조합을 피하고, 흰 바탕에 검정 글자처럼 판독이 쉬운 대비가 큰 색조합을 제공하고 있는가?
 (2권고) 4점
1-3-3. 텍스트는 쉽게 읽을 수 있도록 충분한 크기로 제공되어야 한다.
  • (9) 약시자 저시력자나 다양한 환경의 사용자도 텍스트를 쉽게 읽을 수 있도록 적절한 크기로 텍스트를 제공하고 있는가?
  • 사용자가 텍스트의 크기를 키우거나 줄일 수 있도록 텍스트 크기를 상대적인 단위로 적용하고 있으며, 크기가 변하더라도 내용을 인식할 수 있도록 바르게 표시되고 있는가?
 (2권고) 5점

2. 운용의 용이성 (25점)

운용의 용이성 체크리스트와 배점
항목 지표 체크리스트 중요도
2-1. 이미지맵 기법 사용 제한 2-1-1. 서버측 이미지맵을 불필요하게 사용하지 않아야 한다.
  • (10) 불필요하게 서버측 이미지맵을 사용하는 경우는 없는가?
  • (11) 서버측 이미지맵을 사용할 경우, 해당 내용 및 기능을 동등하게 사용할 수 있는 대체 수단을 제공하고 있는가?
 (1의무) 1점
2-2. 프레임의 사용 제한 2-2-1. 불필요하거나 과도하게 많은 프레임을 사용하지 않아야 한다.
  • (12) 화면을 분할하거나 외부 콘텐츠를 불러들이는 용도 이외로 프레임을 사용하는 경우는 없는가?
  • (13) 한 페이지 내에 과도하게 많은 수(4개 이상)의 프레임을 사용하는 경우는 없는가?
 (1의무) 3점
2-2-2. 각 프레임의 title속성을 적절하게 제공하여야 한다.
  • (14) 프레임 별로 적절한 title속성을 제공하고 있는가?
 (1의무) 2점
2-3. 깜빡거리는 객체 사용 제한 2-3-1. 깜빡이는 콘텐츠를 사용할 경우, 이에 대한 경고 및 제어방안을 제공하여야 한다.
  • (15) 깜빡이는 콘텐츠가 있을 경우 사전 경고를 제공하고 있는가? (※ 깜박임 기준: 초당 3~49번 4~59번을 깜박이는 콘텐츠)
  • (16) 깜빡임을 중지 또는 제어할 수 있는 컨트롤을 제공하고 있는가?
  • (17) 동영상/멀티미디어 콘텐츠를 정지된 상태에서 제공하고 있는가?
 (1의무) 3점
2-4. 키보드로만 운용 가능 2-4-1. 키보드만으로 모든 콘텐츠를 제어할 수 있어야 한다.
  • (18) 키보드만으로 콘텐츠가 제공하는 모든 기능에 대한 제어가 가능한가? ※ 온라인 입력서식은 중요도가 높으므로 '3-3-2'항목에서 별도 체크
  • (19) 키보드로 폼 컨트롤, 링크, 객체 사이를 이동할 때, 논리적 이동 순서가 적절한가?
  • (20) <select>(목록상자) 사용시 해당 목록을 선택한 후 [이동]버튼을 반드시 제공하고 있는가? (키보드로 모든 목록을 선택할 수 있는 방법을 제공)
  • (21) focus만으로 급격하게 상황이 바뀌지 않으며, 활성화(activate)에 의해 상황이 바뀌고 있는가?
  • (22) 하위 메뉴를 제공하는 주(상단) 메뉴의 경우, 키보드만으로도 서브 메뉴를 이용할 수 있는가?
 (1의무) 9점
2-5. 반복 내비게이션 링크 2-5-1. 반복되는 링크가 많은 페이지를 효율적으로 이용하기 위한 스킵 내비게이션 링크를 제공하여야 한다.
  • (23) 스킵 내비게이션을 제공하고 있는가?
  • (24) 링크가 이동되는 위치보다는 링크로 인해 건너뛰는 부분을 알려줄 수 있도록 링크명을 정하는 등 제공 내용이 적절한가?
 (3권장) 3점
2-6. 반응 시간의 조절기능 2-6-1. 이용에 시간제한이 있는 콘텐츠의 경우 경고 및 시간조절 기능을 제공하여야 한다.
  • (25) 이용에 시간제한이 있는 콘텐츠의 경우 경고를 적절히 제공하고 있으며, 경고의 시점(사전경고, 시간 만료전 재경고 등)이 적절한가?
  • (26) 이용에 시간제한이 있는 콘텐츠의 경우 시간 설정을 변경할 수 있는 기능을 제공하고 있는가?
 (2권고) 2점
2-6-2. 팝업창을 불필요하게 사용하지 않아야 한다.
  • (27) 사용자의 입력 없이 자동으로 발생하는 팝업창을 사용 하는 경우는 없는가?
  • (28) 사용자의 입력에 의해서 발생하는 팝업창은 미리 팝업창임을 알리고 있는가?
 (2권고) 2점

3. 이해의 용이성 (22점)

이해의 용이성 체크리스트와 배점
항목 지표 체크리스트 중요도
3-1. 데이터테이블 구성 3-1-1. 테이블에 대한 summary와 caption을 제공하여야 한다.
  • (29) summary 속성을 통해서 미리 표의 전체 내용과 표의 항목을 내용을 요약해서 전달하고 있는가?
  • (30) 표의 제목을 <caption> 태그로 제공하고 있는가? ※ <h1>~<h6> 태그를 이용하여 표의 제목을 제공할 수 있음
 (2권고) 3점
3-1-2. 데이터 테이블을 의미적으로 이해할 수 있도록 적절히 태그를 사용하여야 한다.
  • (31) 행단위 구분을 위한 태그를 제공하고 있는가? ※ <thead>, <tbody>, <tfoot> 등
  • 열단위 구분을 위한 태그를 제공하고 있는가? ※ <colgroup>, <col> 등
  • (32) 제목셀과 내용셀의 구분을 위한 태그를 제공하고 있는가? ※ <th>,<td> 등
  • (33) 헤더는 1행과 1열에 행과 열의 범위를 구분하여 적절히 배치하고 있는가?
  • (34) colspan, rowspan이 많이 사용되어 헤더 구조가 복잡한 테이블의 경우 적절하게 사용되고 있는가?
  • (35) 헤더에 긴 내용이 들어갈 경우 abbr속성을 사용해 약어를 표시하고 있는가?
 (2권고) 3점
3-2. 페이지의 논리적 구성 3-2-1. 의미에 맞는 적절한 HTML태그를 사용하여야 한다.
  • (36) 모든 문서마다 문서의 제목(<title>)을 제공하고, 문서의 제목은 문서의 특성을 잘 나타내도록 간단명료하게 기술하고 있는가?
  • (37) 제목 (<h1>~<h6>), 문단 (<p>), 목록, (<ul>,<ol>, <dl>) 등을 나타내기 위한 적절한 HTML태그를 사용하고 있는가?
  • (38) 디자인 요소를 CSS를 사용하여 분리하고 있는가?
  • (39) 스타일 시트 기능을 해제하여도 콘텐츠를 이해할 수 있는가?
 (2권고) 3점
3-2-2. 콘텐츠의 내용은 선형화(순서대로 나열) 했을 때에도 무리 없이 인식을 할 수 있어야 한다.
  • (40) 레이아웃을 설정하는 CSS(테이블을 사용했을 경우는 테이블)를 제거하여도 콘텐츠의 구성 순서가 논리적으로 배치되는가?
 (1의무) 3점
3-2-3. 레이아웃 테이블 작성에 테이블의 구조 정보를 정의하는 태그를 사용하지 않아야 한다.
  • (41) <caption>, <thead>, <tbody>, <tfoot>, <th>, <td> 등 테이블 구조화를 위한 태그를 레이아웃용 테이블에 사용하는 경우는 없는가?
 (3권장) 1점
3-2-4. 각 링크의 목표 위치를 명확하게 하여야 한다.
  • (42) 주변 맥락을 제거하고 링크만 독립적으로 접근하여도 링크의 목표 위치가 명확히 드러나도록 링크 텍스트를 만들거나, 부가적인 설명을 title 속성으로 제시하고 있는가?
 (3권장) 2점
3-3. 온라인 서식 구성 3-3-1. 각 서식 제어 요소를 설명하는 레이블을 사용하여야 한다.
  • (43) <label> 태그를 이용하여 서식 제어 요소와 레이블을 서로 연결하고 있는가? ※ id와 for를 이용할 수도 있고, 서식과 레이블을 <label>태그로 감쌀 수 있음※ id와 for를 적절히 매칭시키고 있는가?
  • (44) 전화번호, 우편번호와 같은 필드를 여러 개로 나누어 입력해야 하는 경우 정확한 title 속성을 제공하고 있는가?
 (1의무) 3점
3-3-2. 키보드만으로도 온라인 서식 입력 및 서식 간 이동이 가능하여야 한다.
  • (45) 키보드만으로 서식의 이용이 가능한가? ※ 주민등록번호 입력시 자동으로 포커스가 이동되지 않아야 하고 않고 있는가?
  • (46) 키보드로 서식을 이용할 때 포커스의 이동 순서가 논리적인가?
 (1의무) 4점

4. 신기술적 진보성 (10점)

신기술적 진보성 체크리스트와 배점
항목 지표 체크리스트 중요도
4-1. 신기술의 사용 4-1-1. 스크립트, 애플릿, 플러그인 등 부가 어플리케이션에 의한 콘텐츠는 자체적인 접근성을 지니고 있어야 한다.
  • (47) 자바스크립트, 자바애플릿, ActiveX, 플래시 등 외부 콘텐츠가 자체적인 접근성을 지원하고 있는가?
  • 내비게이션, 검색, 로그인 등 주요한 요소에 플래시 등의 플러그인이 필요한 콘텐츠를 사용하는 경우가 있는가?
 (2권고) 3점
4-1-2. 부가 애플리케이션이 작동하지 않을 경우에도 동일한 내용을 전달할 수 있는 대체 콘텐츠를 제공하여야 한다.
  • (48) 대체 콘텐츠는 간단명료하면서 원본과 동일한 기능을 수행하고 있는가?
  • (49) 텍스트 브라우저로도 해당 기능을 제어하고 있는가?
  • (50) 링크는 자바스크립트 없이도 작동하고 있는가?. ※ 자바스크립트로만 링크를 구성하지 않아야 함
 (1의무) 5점
4-1-3. 부가 애플리케이션의 설치가 요구되는 페이지는 해당 페이지에서 직접 어플리케이션을 설치할 수 있는 링크를 제공하여야 한다.
  • (51) 어플리케이션의 링크나 어플리케이션을 다운받을 수 있는 페이지의 링크를 제공하고 있는가?
 (3권장) 2점
다음글>