접근성 참고
standard guide 2012. 7. 2. 10:006월 28일 접근성관련 강의를 들었다. 평소 마크업을 하며 매우 궁금했던 작업들에대해 명확하게 알 수 있어서 참 좋았는데....강의를 듣고 나니 내 작업이 얼마나 엉망이었는지 부끄러워진다.
한국형 웹 콘텐츠 접근성 지침 2.0의 적용방법
1. CDK (커뮤니티)
2.tabIndex 는 논리적인 마크업이 되어있으면 필요없다
3.플래시는 tabIndex 필수
longdesc값은 기획자한테….(그래프나 조직도등)
ㅡ> alt값도 필수 ***에 대한 이미지의 설명
4.동영상자막/원고 – 기획자
5.품질마크는 최소한의 법칙만 지킨 것이고 소송과는 상관 없다.
6.WCAG를 위주로 공부해본다. (우리나라는 3단계중 1단계만 쓰고 있다.)
7.22가지 준수항목은 반드시 지켜야한다. 한가지라도 준수하지 않으면 마크는 획득할 수 없다.
8.레이아웃테이블을 써도 되지만 <table><tr><td> 만 써야된다. Colgruop, thead, tbody 등은 쓰면 안된다.
시각장애
전맹,
약시(컨텐츠가 중구난방일경우, 명도가 낮은 경우)
색각장애 (어떤색과 어떤색을 같이 쓸 경우 구분이 안감)
명도대비 툴 (#767676 기본)
스킵네비게이션 (바로가기가 아닌 컨텐츠로 바로진입하기 위한 것)
청각장애
요약된 원고제공X (현재지침은 한가지; 두가지 이상이 좋다. / 원고, 수화,자막-열린자막/닫힌자막 )
지체장애
지적/지체장애
tab키는 앵커에만 먹기떄문에 여기(더보기)등으로 바로 가면 문맥을 이해할수 없다. Title로 문맥내용을 적어준다.
지침
1. 동영상원고제공의 경우 오른쪽에 제공/ 아래에 제공하면 스크롤을 내릴경우 보이지 않음.
2. 포커스 영역을 넓혀주어야 인지장애를 가진 사람들이 사용하기 쉬워진다. (18px *18px) 페이지네비/회원가입의단계 등등
3. 확인/취소 버튼이 있을경우 작성한 서식을 제출하려면 파란색버튼을 누르시오. (파란색버튼은 색구분이 안가는 사람에게는 힘듦. 파란색확인 버튼을 누르시오)
4. 현재 콘텐츠의 명도대비는 컨텐츠영역중에 <p>태그 영역만 검사하고 있다. (시작단계라 축소되었으며 범위가 넓어질 수 있다)
또한 폰트사이즈 역시 대비를 지켜야 했으나 현재는 확대축소버튼이 있으므로 px값을 사용해도 괜찮다. (18px미만? 12px미만?)
5. 인풋이나 텍스트에어리어에 자막이나 alt값 등을 적는 란을 넣어준다.
6. 초점을 받거나 마우스오버에 의해 콘텐츠가 활성화되고 배경음이 자동적으로 제공하는 것 등은 하지 않는다. (네이버광고등)배경음을 정지상태로 제공해서 멈춤/재생 버튼을 제공한다. 그러나 가장 좋은것은 배경음은 없는게 낫다.
7. 버튼 이미지에 onclick 은 넣지 않는다. 포커스이동 불가 (<button>태그를 이용한다.)
8. 플래시의 경우 wmode값을 쓸 때 transparent 를 쓰게 되면 화면 낭독기 인식이 불가. (플래시가 링크영역이 없을 경우는 transparent 를 쓰고 링크가 있으면 window를 쓴다.)
9. 레이어팝업의 경우 컨텐츠를 가리면 접근성 위배. 비쥬얼영역은 상관 없음.
10. 초점이동 : tab 과 shift+tab 이동시 순서대로…
11. focus역시 반드시 넣는다.(ie6은 지원안함)
12. 롤링컨텐츠/배너 ( 앞 정지 뒤 - 버튼 반드시 필요) / 전체배너보기 필요 / 밑에 12345 번호가 있고 이미지가 순서대로 보이는것은 괜찮다. 대신 마우스나 포커스가 되면 멈출수 있게 해야된다.
13. 광과민성반응(깜빡임, 번쩍임 – 옥션같은곳…) – 포캣몬쇼크…
14. 건너뛰기 링크를 반드시 노출시켜야함 – 컨텐츠영역으로 바로 가는 링크(메뉴 건너뛰기)를 만들어 body 바로 밑에 넣고 인크루드 시켜버림.
15. Title 에 제목/아이프레임에 타이틀을 반드시 넣는다. 개발을 위해 넣은 빈 프레임도 타이틀을 (빈프레임)이라고 쓰든해서 반드시 넣어준다. h1~h6까지 논리적으로 활용한다. 타이틀을 한가지로 통일하지 않는다. 메인은 현재 하는대로/ (ex) 찾아오시는길|삼성병원) – 탭브라우저방식…때문에 타이틀을 통일하지 않음. 회사노출도 앞에 오지 않게 한다. >>> 페이지의 타이틀은 기획자에게..(자유게시판 목록/수정/쓰기 전부 따로 타이틀을 적는다.)
16. 파이어폭스 헤딩스맵 (헤딩구조)
17. <h2>대메뉴</h2><h2>left메뉴 제목(h3이 있을 경우 사이드바메뉴)</h2> <h3>숨겨진 사이드메뉴제목<h3>
18. 더보기 버튼을 어떤 것의 더보기버튼인지 명시를 해주어야 한다. 이전/다음 버튼도 어떤 것의 이전 다음버튼인지 title을 이용해 앵커에 표시해준다.
19. <html lang=”ko”>에 lang 표시를 반드시 작성한다. (주로 쓰고 있는 언어) / xhtml일 경우 xml:lang=”ko” lang=”ko” 둘다 써주는게 좋다. 중간에 언어가 바뀔경우 <span lang=”zh”>韓</span> 이런식으로 표시한다.
20. 표가 복잡할 경우 id/headers 를 넣는다. th만으로도 표의 이해는 가능하지만 복잡하면 넣기도 한다. Id는 고유하기 때문에 제목에 headers는 아이디에 해당하는 내용부분 <td>에 넣는다.
Label을 input보다 먼저 넣어도 읽을 땐 id값을 체크해서 label을 먼저 읽고 input을 읽는다. 또 개발과 퍼블의 id값이 겹치지 않게 개발가이드/퍼블가이드를 만든다. 예)id=”lb_guide”
'standard guide' 카테고리의 다른 글
| 웹 접근성을 고려한 콘텐츠 제작 기법 (0) | 2012.03.13 |
|---|---|
| 실전 웹표준 가이드 (0) | 2010.04.06 |
| 웹표준을 시작하면서.. (0) | 2010.04.01 |
웹 접근성을 고려한 콘텐츠 제작 기법 v2.0(111.pdf