HTML [웹접근성] 표준 테그
페이지 정보
본문
1. 모든 요소와 속성은 소문자여야 한다.
XHTML 코드를 생성하거나 정리할 때 태그 및 속성의 대/소문자 환경 설정에 상관없이 XHTML 코드에서 HTML 요소 및 속성의 이름을 소문자로 강제로 설정해야한다. 이러한 차이는 XML은 대소문자를 구별 하므로 필수적이다.
ex) <A HREF="AAA.html" onClick="..." onMouseOut="...">해피정닷컴</A>
→ <a href="AAA.html" onclick="..." onmouseout="...">해피정닷컴</a>
2. 모든 요소는 닫아야 한다.
<br> → <br />
3. 모든 요소는 완벽하게 중첩되어야 한다.
모든 요소들이 완벽하게 내포 되어야 하는 것은 필수적이다. 중첩이 부적합한 것임에도 불구하고 기존 웹 브라우저들에서는 널리 관대하게 사용되었다.
ex) <p>사랑<i>나눔</p></i> → <p>사랑<i>나눔</i></p>
4. 모든 속성값은 속성이 함께 선언되어야한다.
모든 속성은 최소화되어 표기 되면 안된다. XML은 속성의 최소화를 지원하지 않는다. 속성 값의 짝들은 모두 작성 되어야 한다.
a, applet, form, frame, iframe, img, map 등의 요소에는 name 속성뿐만 아니라 id속성도 있어야 한다. id만 쓰거나 id와 name를 함께 써야 옳은 표현이다.
또한 <td nowrap>은 잘못된 것이며 <td nowrap=”nowrap”> 이 올바른 형식이다.
최소화 될 수 없는 속성으로는 checked, cpmpact, declare, defer, disabled, ismap, multiple, noresize, noshead, nowrap, readonly, selected가 있다.
5. 모든 문서 내 URI에서 &를 쓰면 안된다
URI에 & 가 포함되어 있는 경우 에러를 낼수 있다. 이것은 &가 XML 엔티티의 시작으로 인식하기 때문에 생기는 문제이다. 기존 웹브라우저는 이러한 에러를 복구해 주고 있지만 유효성 검사기에서는 에러를 내게 된다.
& → &
5-2. HTML 에서 표현되는 < > 는 소스에서 표현방법이 다르다. title 등에 사용시 주의
< → <
> → >
6. xhtml , xml 에서는 단위을 꼭 입력 예) % (percent) , px (pixels) , pt (points) , em (ems)
<td style="padding-left:10"> → <td style="padding-left:10px">
6-2. height 값은 stylesheet 를 사용하거나 빼거나..
<table height="100%"> → <table style="height:100%;">
<td height="100%"> → <td style="height:100%;">
7. 모든 속성 값은 인용 부호(“” ‘) 로 묶어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 속성 값을 인용 부호로 묶는다.
ex) <div id=floater> → <div id="floater">
8. 이미지는 꼭 alt 또는 longdesc 속성을 사용한다.
<img src="/img1.jpg" /> → <img src="/images/quick_top.jpg" alt="이름" />
<img src="/img1.jpg" /> → <img src="/images/spacer.gif" alt="" />
8-2. 이미지에 대한 대체콘텐츠가 alt로 나타내기에 너무 긴 경우에는 longdesc속성을 이용하여 외부 페이지에서 대체 텍스트를 제공하는 방법을 이용한다.
<img src="organization.png" longdesc="organication.html" alt="정보통신 접근성 향상 표준화 포럼 조직도" />
organization.html 내용
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>정보통신 접근성 향상 표준화 포럼 조직도</title>
</head>
<body>
<ol>
<li>정보통신 접근성 향상 표준화 포럼</li>
<li>사무국 (한국정보문화진흥원)</li>
<li>
<ul>
<li>정보통신분과</li>
<li>웹접근성분과</li>
</ul>
</li>
</ol>
</body>
</html>
9. cursor:hand (비표준) vs cursor:pointer (표준)
cursor:hand 는 Microsoft 에서 규정한 표준이므로 W3C의 표준인 cusor:pointer 를 사용해야함
10. 이미지툴바을 제어
<head></head>에 이미지툴바 방지 코드를 삽입, IE 6에서 도입된 기능이지만 이미지 불법으로 악용됨
<meta http-equiv="ImageToolbar" content="no" />
11. 프레임 사용 제한
프레임을 사용할 때에는 각 프레임이 어떠한 역할을 하는지를 프레임 태그의 title속성으로 제공하여 프레임에 접근했을 때 손쉽게 프레임의 용도를 파악 할 수 있게 해 주어야 한다.
<noframe>태그의 경우 의미 없는 '프레임이 지원되는 브라우져를 사용하시기 바랍니다.'와 같은 안내문 보다는 각 프레임에 접근 할 수 있게 프레임이 지원되지 않을 때 페이지를 이용할 수 있는 의미 있는 내용으로 구성되어야 한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<base href="http://pcsi.go.kr/publish/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>frames</title>
</head>
<frameset rows="100,*" title="메인페이지">
<frame src="top.html" title="상단 대메뉴" />
<frameset cols="180,*">
<frame src="nav.html" title="좌측 서브메뉴" />
<frame src="content.html" title="메인 콘텐츠" />
</frameset>
<noframes title="메인">
<body>
<ul>
<li><a href="top.html">상단 대메뉴</a></li>
<li><a href="nav.html">좌측 서브메뉴</a></li>
<li><a href="content.html">메인 콘텐츠</a></li>
</ul>
</body>
</noframes>
</frameset>
</html>
12. 데이터 테이블 구성
데이터 테이블을 이용해서 콘텐츠를 제공할 때에는 의미에 맞는 태그를 사용하여서 테이블의 정보를 전달해야한다. 데이터 테이블을 구성하는데 사용되는 태그와 속성들은 다음과 같다.
<caption>과 summary : <caption>은 표의 제목을 나타내고 summary는 표의 내용에 대한 요약 제공
<thead>, <tbody>, <tfoot> : 표의 행단위 그룹핑을 위해서 사용
<colgroup>, <col> : 표의 열단위 그룹핑을 위해서 사용
<th>, <td> : 표의 제목을 나타내는 칸을 표시위해 <th>를 사용, <th>에 따른 데이터는 <td>를 이용
13. 모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
Language 속성이 사용되지 않는 HTML 4 이후로는 script 요소의 type 속성을 반드시 지정해야한다.
코드를 생성하거나 XHTML을 정리할 때 script 요소에서 type속성을 설정하고 style 요소에서 type 속성을 설정한다.
<script language=”javascript”></script> → <script type=”text/javascript”></script>
<style></style> → <style type=”text/css”></style>
참고사이트
http://psytan.tistory.com/51
http://www.iabf.or.kr/Guide/Example.asp
댓글목록
등록된 댓글이 없습니다.