웹표준- 웹접근성 : 이미지 및 설명태그

요즘 웹쪽에서의 화두는 뭐 웹 접근성이겠지.

장애인 차별법으로 생긴 것인지..어떤것인지는.. 깊이 들어가보지 않아서.

일단은 접근성 때문에 피곤하기 때문에,...

일단~

이미지 태그부터.

웹 표준에 따르면 (xhtml) * html에서는 안써도 된다고 함.

이건 또 dtd태그와 연관되고.. 으..

<img src="이미지경로" alt="설명" />

요렇게 /> 단독으로 사용하는 태그는 자체적으로 닫아야지 된다.

예를 들어서.

<h4><img src="/images/myStudy/ttl_prospectiveProgram.gif" alt="오픈 예정 프로그램" /></h4>

이렇게 있다면,

이미지에 나와있는 내용은 alt안에 있어야지 된다.

그리고 h4는 열고, 닫고하는 페어가 있지만 <img 태그는 단독으로 쓰이기 때문에 /> 닫기가 존재함

뭐..이런건 일단 오늘의 주제가 아니기 때문에.. 갈길이 멀군..;; 오늘은 alt, title, longdesc

일단 접근성을 고려한다면, 이미지, 스타일시트를 모두 지웠을때 제대로 알 수 있냐 라는것이 관건이다.

(ie에서 f12를 누르면 사용안함 항목에 css / 이미지 항목에 이미지 사용안함을 선택하면 .~-)

	이미지를 끄고
	css를 꺼보자
	일단 이미지를 사용했을경우 이미지가 없을때 대체 텍스트가 나타난다

alt="이미지에 대한 간단한 설명"

title="이미지에 나온 모든 텍스트"

longdesc="파일로도 가능하고 텍스트가 많을때"

/* 숨김영역 */

#accessibility, .skip, hr, legend, caption {

position : absolute ;

width : 1px ;

height : 1px ;

font-size : 0 ;

line-height : 0 ;

overflow : hidden ;

visibility : hidden ;

}

이런식으로 숨김처리도 한다. 데이터가 많을때(파일을 따로 패지않고 코딩영역에서 텍스트가 많이 차지해서 소스관리 차원에서..)

<p>

    <a href="/Study/Studying/studying05.asp?b_idx=24&b_url=Studying/studying05.asp&GotoPage=1"><img src="/images/Banner/2012/130307_main_studying.jpg" alt="비문학 정복하기 편" title="비문학 정복하기 편" /></a>

    <span class="skip">독해력 좀 제발 키우자</span>

</p>

* 접근성에 대해서 심도있게 다루고 있는 사이트가 어느곳에 더 있는지는 모르겠지만.

http://html.nhncorp.com/accessibility/nwcag/checklist

nhn이 그나마 정리를 잘하고 있다. 

* 참고

웹 접근성 연구소

http://www.wah.or.kr/

센스리더 - 웹 읽어주는...

http://xvtech.com/xvtech/?mid=data&document_srl=5419

웹 접근성 준수방안 : 접근성 평가센터

http://www.kwacc.or.kr/WebAccessibility/ComplianceWay

nhn에서 하는 접근성

http://html.nhncorp.com/

** 이 부분은 나도 공부하면서 진행해볼까 한다.~