이 문서는 W3C의 "WCAG 2.0을 위한 HTML 기법(WCAG 2.0 기법의 일부, W3C 워킹 그룹 노트)"을 한글로 번역한 문서입이다. 이 문서는 번역 과정에서 발생하는 오류를 포함할 수 있습니다. 번역한 문서는 규범력을 갖지 않으며 오직 영어 버전만이 규범력을 갖습니다.
This documented is a translated copy of the W3C's "HTML Techniques for WCAG 2.0 (Part of Techniques for WCAG 2.0, W3C Working Group Note)". This document may contain translation errors. The English version of this specification is the only normative version.
이 문서는 Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0 가운데 HTML/XHTML 테크닉 목록 부분이다. 테크닉에 대한 정보를 원한다면 WCAG 2.0을 위한 테크닉 소개를 보라. 다른 테크닉을 위한 목록은 목차를 참조하라.
링크를 포함하는 HTML과 XHTML 문서.
이 기술과 관련된 것들:
이 기술의 목적은 인접한 텍스트와 아이콘 링크의 불필요한 중복을 피하는 것이다.
많은 링크들이 텍스트와 아이콘 링크를 인접한 형태로 가지고 있다. 미미한 시각적인 구분을 위해 텍스트와 아이콘은 각각의 링크 갖는 상태로 렌더링되고, 그것들은 시각적으로는 같은 링크처럼 보이게 된다. 하지만 그것들은 동일한 링크로 많은 사람들에 의해서 이미 경험되었다. 이것을 피하기 위해서, 몇몇 제작자들은 이미지의 대체 텍스트를 생략하기도 한다. 하지만 대체 텍스트가 그래픽 링크와 동일한 목적을 제공하고 있지 않기 때문에 달성 기준 1.1.1을 실패할 것이다. 선호하는 방법은 하나의 링크 안에 텍스트와 이미지를 함께 놓는 것이다. 그리고 텍스트의 중복을 제거하기 위해 이미지에 대체 텍스트는 빈 값으로 제공한다.
때때로 텍스트와 아이콘 링크는 생각 없이 만든 페이지 레이아웃의 인접한 테이블 셀로 구분되어 렌더링되기도 한다. WCAG 2가 배치용 테이블의 사용을 금지하지 않더라도, HTML TABLE 요소의 의미를 유지하기 위해서나 콘텐츠로부터 표현을 분리하는 코딩 방법을 따르기 위해서 CSS 기반의 레이아웃이 추천된다.
아이콘과 텍스트는 같은 a 요소에 포함되어 있다.
예제 코드:
<a href="products.html">
<img src="icon.gif" alt="" />
Products page
</a> 아이콘과 텍스트를 포함하는 A 링크가 있고, 사이트는 아이콘으로 보여준다. img 요소의 아이콘은 클릭할 수 있도록 묘사되었고, 사이트 정보를 이름으로 대체 텍스트를 가진다.
예제 코드:
<a href="foo.htm">
<img src="house.gif" alt="home page icon"/>
Go to the home page
</a> 이 예제는 잘못 적용된 경우로, 아이콘과 텍스트 링크가 나란히 나타난다. 이미지의 대체 텍스트가 나란히 나타난 텍스트 링크와 똑같다. 그래서 마치 더듬거리는 것처럼 두 번 연속해서 읽혀진다.
예제 코드:
<a href="products.html">
<img src="icon.gif" alt="Products page" />
</a>
<a href="products.html">
Products page
</a> 이 예제도 잘못 적용된 경우다. 아이콘과 텍스트 링크가 나란히 나타나지만 이미지의 대체 텍스트를 빈 값으로 처리해 "더듬기" 문제를 제거했다. 그러나 목적지가 불명확해지는 되는 문제를 갖게 된다.
예제 코드:
<a href="products.html">
<img src="icon.gif" alt="" />
</a>
<a href="products.html">
Products page
</a> 이 예제는 이 테크닉의 잘못된 구현을 보여준다. 아이콘과 텍스트는 동일한 a 요소에 포함되어 있다. 그러나, 아이콘을 위한 대체 텍스트는 텍스트와 중복되어 있어, "더듬기"처럼 반복되어 설명되는 효과가 나타난다.
예제 코드:
<a href="products.html">
<img src="products.gif" alt="Products page"/>
Products page
</a>
참고 자료은 단지 정보를 목적으로 하며, 보증된 것은 아니다.
img 요소를 포함하는 각각의 a 요소:
똑같은 href 속성이나 설명을 가진 인접한 a 요소가 없는지 확인
테이블에 포함된 각각의 a 요소:
인접한 테이블 셀에 똑같은 href 속성이나 설명을 갖은 a 요소가 없는지 확인
위 모든 항목의 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기술의 목적은 기본적인 탭 순서가 충분하지 않을 때 논리적 탭 순서를 제공하는 것이다. 종종, G59:콘텐츠 내에서 관계와 순서를 따르기 위해서는 인터랙티브 요소(링크와 버튼과 같이 사용자의 지시에 반응하는 요소들)를 넣는 것으로도 충분하며 이같은 기술은 불필요할 수도 있다. 이 기술은 탭 순서를 명시적으로 설정할 때 잘못된 논리적 순서를 쉽게 찾아내는데 도움이 된다.
경우에 따라서, 제작자들은 코드에서 인터랙티브 요소의 순서를 따르지 않고, 콘텐츠에서의 관계를 따르는 탭 순서를 명시적으로 지정하고 싶을 수도 있다. 이런 경우에, 상호작용하는 요소의 tabindex 속성을 사용해서 대신 지정할 수 있다. tabindex는 0과 32767 사이의 값을 가진다.
인터랙티브 요소가 탭 키를 사용하여 탐색할 때, 각 요소의 tabindex 속성의 값이 커지는 방향으로 포커스를 이동한다. 0보다 큰 tabindex 값을 가진 요소는 tabindex가 없거나 값이 0인 요소보다 먼저 포커스를 갖는다. 0보다 큰 tabindex를 가진 모든 요소는 포커스를 가진다. 그리고 나머지 인터랙티브 요소들은 페이지에 나타난 순서대로 포커스를 갖는다.
결혼한 부부들의 기록을 찾기 위한 일반적인 검색 폼이다. 검색 폼은 신랑 신부를 위한 몇가지 입력 상자를 포함하고 있다. 폼은 첫번째 컬럼에 신랑을 두번째 컬럼에는 신부 필드를 포함한 데이터테이블로 마크업되어 있다. 콘텐츠의 순서는 행별이지만 제작자는 컬럼별로 탐색되는것이 보다 논리적이라고 생각했다. 이 방법은, 신부의 기준으로 이동하기 전에 신랑의 기준을 채울 수 있다. 입력 필드의 tabindex 속성은 컬럼별로 이동하는 탭 순서를 명시하는데 사용한다.
예제 코드:
<form action="#" method="post">
<table summary="the first column contains the search criteria
of the groom, the second column the search criteria of
of the bride">
<caption>Search for marriage records</caption>
<tr>
<th>Search criteria</th>
<th>Groom</th>
<th>Bride</th>
</tr>
<tr>
<th>First name</th>
<td><input type="text" size="30" value="" name="groomfirst"
title="First name of the groom" tabindex="1"></td>
<td><input type="text" size="30" value="" name="bridefirst"
title="First name of the bride" tabindex="4"></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text" size="30" value="" name="groomlast"
title="Last name of the groom" tabindex="2"></td>
<td><input type="text" size="30" value="" name="bridelast"
title="Last name of the bride" tabindex="5"></td>
</tr>
<tr>
<th>Place of birth</th>
<td><input type="text" size="30" value="" name="groombirth"
title="Place of birth of the groom" tabindex="3"></td>
<td><input type="text" size="30" value="" name="bridebirth"
title="Place of birth of the bride" tabindex="6"></td>
</tr>
</table>
</form> 우측 구석 위에 검색 필드를 포함한 웹페이지가 있다. 검색 필드는 비록 콘텐츠 순서에서 첫번째 요소가 아니지만 tabindex="1"을 갖고 있어 탭 순서에서 첫번째가 될 것이다.
Tabindex의 값은 순서대로 나올 필요는 없다. 다만 어떤 특별한 값으로 시작하면 된다. 값은 유일하지 않아도 된다. 동일한 tabindex 값을 가진 요소는 문자열이 나타나는 순서대로 탐색된다.
그래서 다음 예제를 보면, 탭 순서가 첫번째, 세번째, 두번째, 네번째의 순서일 것이다.
예제 코드:
<a href="" tabindex="1">one</a>
<a href="" tabindex="2">two</a>
<a href="" tabindex="1">three</a>
<a href="" tabindex="2">four</a> 콘텐츠 순서대로 탭 순위를 갖는 섹션에서, 각각의 요소에 다른 탭 순서 숫자를 명시한 것보다 동일한 tabindex 값을 갖는 요소들이 보다 적은 에러를 나타낼 것이다. 그다음 저 요소들을 재배열하거나 새 요소를 추가하거나 논리적인 탭 순서를 유지하는 일이 쉬워진다.
예제 코드:
<a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long
after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
...
<a href="xxx" tabindex = "1">Twentieth link in list</a> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
tabindex를 사용하고 있다면 확인.
tabindex를 사용중이라면, 콘텐츠에서 tabindex 속성이 관계에 따라 명시되었는지 확인.
#2의 확인 결과를 만족해야 한다.
area 요소를 위한 대체 텍스트 제공하기area 요소를 포함하는 HTML/XHTML 문서.
이 기술과 관련된 것들:
HTML 4.01 명세서는 요소가 렌더링 되지 않을 때 alt 속성의 텍스트가 표시된다고 설명하고 있다. 사용자 에이전트는 이미지가 표시되지 않을 경우에 alt 속성의 텍스트를 표시한다.
그러나, 현재 시각적인 사용자 에이전트는 키보드에 의해서 접근될 때나 이미지가 표시되지 않을 때 이미지맵의 area 요소의 alt 속성을 표시하지 않는다. 그리고 만약 이미지의 본래 크기를 사용하지 않았을 때 area 요소를 자를지도 모른다. 추가로, 마우스 오버에 응하는 alt 속성 텍스트의 표시는 사용자 에이전트에 설정된 폰트 크기나 색상의 조합대로 표시하지 않는다.
title 속성은 추가적인 정보를 제공하도록 정의되었다. 그러나, 사용자 에이전트에서 현재 구현된 것은 title이나 alt 속성에 접근하는 것이지 둘 모두에 접근되는 것은 아니다. 일반적으로 마우스가 title 속성을 포함하고 있는 요소 위에 위치했을 때는 title 속성의 텍스트를 표시한다.
예를 들어, 만약 title 텍스트가 없다면 인터넷 익스플로어는 마우스 오버시 alt 텍스트를 표시할 것이다. 반면, 파이어폭스와 오페라는 title 텍스만을 표시하고, 목적에 맞게 alt 속성의 텍스트는 표시하지 않는다.
따라서, 마우스 오버시 alt 속성의 텍스트가 보이도록 똑같은 텍스트를 title 속성으로 사용되어야 한다.
그러므로, 이미지 맵 사용시, 이 테크닉의 성공적인 구현은 다음중 하나를 요구할 것이다:
area 요소의 alt 속성 값은 (키보드 포커스를 포함해서)포커스를 가질 때 표시되어야 하고, 이미지가 로드되거나 로드되지 않은 경우 모두 적용되어야 한다. 또는,
area 요소로 동일한 목적을 가지고 있는 불필요한 메커니즘 제공이 웹페이지 상에서 존재한다.
이 기술의 목적은 이미지맵의 선택 가능한 영역에 동일한 정보를 대체 텍스트로 제공하는 것이다.
이미지 맵은 area 요소를 이용해서 이미지를 나누어 선택 가능한 영역을 정의한 것이고, 각 영역은 현재 웹페이지의 또 다른 영역이나 다른 웹페이지로의 링크를 가진다.
각 area 요소의 alt 속성은 이미지의 선택 가능한 영역과 동일한 정보를 제공한다.
이 예제는 이미지맵 영역의 목적을 서술하는 텍스트를 제공하기 위해 area 요소의 alt 속성이 사용된다.
예제 코드:
<img src="welcome.gif" usemap="#map1"
alt="Areas in the library. Select an area for
more information on that area." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference" />
<area shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab" />
</map> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
이미지 맵에서 각 area 요소:
alt 속성을 가진 area 요소 확인.
alt 속성에 의해 명시된 대체 텍스트가 area 요소에 의해 참조되는 이미지맵의 일부 이미지와 동일한 목적으로 제공되는지 확인.
모든 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
모든 HTML과 XHTML 문서들은, 프레임셋 안에 개별적인 프레임들은 문서의 목적을 간단한 구로 정의하는 head 섹션의 title 요소를 가진다. 이것은 페이지의 본문에 있는 정보를 검색하지 않고도 빠르게 문서의 목적을 이해하는데 도움을 준다.
(의무적으로) title 요소는 거의 모든 HTML과 XHTML 요소에 적용되어지는 title 속성과 다르게 문서 내에서 한번만 나타난다.
이 예제 문서의 제목을 정의했다.
예제 코드:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The World Wide Web Consortium</title>
</head>
<body>
...
</body>
</html> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML이나 XHTML 문서의 소스 코드를 조사하여, head 섹션안에 나타난 title 요소가 비어있는지 확인.
title 요소로 문서를 기술했는지 확인.
1과 2의 확인 결과를 만족해야 한다.
오브젝트를 위한 대체텍스트 또는 비대체텍스트 제공하기 미디어 포맷이 접근성있는 콘텐츠 기술이 아닐때 object 요소로 미디어를 로드하는 문서.
이 기술과 관련된 것들:
object가 사용되는 경우에,
요소의 콘텐츠안에 대체 텍스트가 제공된다:
이 예제는 object요소를 사용하여 자바애플릿을 위한 대체 텍스트를 보여준다.
예제 코드:
<object classid="java:Press.class" width="500" height="500">
As temperature increases, the molecules in the balloon...
</object> 이 예제는 object 요소가 정보의 대체 정보를 중첩하여 제공하는 이점을 활용했다.
예제 코드:
<object classid="java:Press.class" width="500" height="500">
<object data="Pressure.mpeg" type="video/mpeg">
<object data="Pressure.gif" type="image/gif">
As temperature increases, the molecules in the balloon...
</object>
</object>
</object> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
이 테크닉을 위한 가능한 테스트 없음.
HTML과 XHTML
이 기술과 관련된 것들:
보조 기술들의 title 속성에 대한 음성 제공을 다르게 처리한다. 일부 보조 기술은 사용자가 title 속성을 통해 정보에 접근하는 기능을 포함하지 않는다.
만약 title 속성에 접근 가능하다면 이 기술은 단지 title 속성을 사용하는 것만으로 구현된다. 이 속성이 접근성을 갖기 위해서 title 속성의 내용은 모든 키보드 사용자들(화면낭독기 소프트웨어를 사용하는 사람들뿐만 아니라)에게 도움이 될 필요가 있다.
JAWS 6.2 이상과 WindowEyes 5.0 이상은 abbr과 acronym 요소를 지원한다. 이 소프트웨어들은 이 요소들에 정의된 title 속성을 읽어준다. 하지만 이것은 기본값으로 설정되어 있지 않거나 사용자에 의해서 활성화되어 있지 않기도 하다.
많은 그래픽 사용자 에이전트들은 abbr이나 acronym요소안의 텍스트를 점선으로 이루어진 밑줄이나 감싸는 형태로 렌데링한다. 추가로, 마우스가 요소 위에 위치할 때 툴팁을 보여준다.
인터넷 익스플로어 7 이하는, abbr요소에 어떤 추가적인 양식으로도 표시하지 않으며, IE6 이하는, 마우스 오버시에 툴팁을 표시하지 않는다.
사용자 에이전트나 보조 기술에서 abbr와 acronym요소들은 똑같은 방식으로 사용자에게 제공되어진다.
이 기술의 목적은 abbr과 acronym 요소를 사용하여 약어를 확장된 정보나 정의를 제공하기 위함이다.
두문자어나 머리글자를 포함한 어떤 축약어를 위해서든 abbr요소를 사용하는 것은 적절하다. HTML과 XHTML을 사용할때, 두문자어나 머리글자는 acronym요소를 사용해서 마크업할 수도 있다. XHTML 2.0은 보다 일반적인 abbr 요소를 지지하여, acronym 요소를 제거하는 절차를 진행중이다. (역주:현재 XHTML 2.0은 폐기되었나 HTML5에서도 acronym 요소는 폐기되었다.)
예제 코드:
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.<abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p> 예제 코드:
<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr>
The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit
brought by members of the National Writers Union against ......</p> 예제 코드:
<p>The use of <acronym title="Keep It Simple Stupid">KISS</acronym> became popular in ...</p>
예제 코드:
<p><acronym title="World Wide Web">WWW</acronym></p>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
abbr이나 acronym를 통해 각각의 약어를 위해 확장이나 정의가 제공되었는지 확인한다.
#1의 확인 결과를 만족해야 한다.
링크(<a href> 요소)를 포함하는 HTML과 XHTML 문서
이 기술과 관련된 것들:
이 기술의 목적은 a 요소의 내용으로 제공되는 텍스트의 목적을 설명하는 것이다. 설명은 사용자가 웹페이지 안에서 다른 링크와 이 링크를 구별하고, 링크를 따를지를 결정하는데 도움을 준다. 그런데 목적지의 URI는 일반적으로 충분히 설명되어 있지 않다.
링크의 내용이 이미지만으로 되어 있을때, 이미지의 대체 텍스트는 링크의 명확한 목적을 설명한다.
텍스트와 하나 이상의 이미지들을 포함하는 a 링크일때, 만약 텍스트가 링크의 목적을 설명하는데 충분하다면, 이미지는 아마 빈 대체 텍스트를 가졌을 것이다. (H67: 무시될 필요가 있는 이미지를 위해 img 요소에 빈 대체 텍스트와 title 속성 사용하기(HTML)을 보자.) 이미지가 링크의 목적을 전달할때, 이미지는 반드시 적절한 대체 텍스트를 가져야 한다.
a 요소의 텍스트가 a 링크의 목적을 서술한다.
예제 코드:
<a href="routes.html">
Current routes at Boulders Climbing Gym
</a>그래픽 링크의 목적을 설명하기 위해서 img요소에 alt 속성을 사용한다.
예제 코드:
<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
</a>
앵커(a) 요소에 img 요소와 링크의 목적을 기술하는 텍스트가 함께 포함된 경우에는 img요소의 alt 속성을 비워둔다.
예제 코드:
<a href="routes.html">
<img src="topo.gif" alt="" />
Current routes at Boulders Climbing Gym
</a>
A 링크는 아이콘과 텍스트를 포함하고, 사이트의 정보를 이해하는데 아이콘이 쓰인다.
img는 홈페이지의 아이콘이라는 이름으로 대체 텍스트를 가진다.
예제 코드:
<a href="foo.htm">
<img src="house.gif" alt="icon"/>
Home page
</a>A 링크는 텍스트와 아이콘을 갖고, 아이콘은 대상에 대한 추가적인 정보를 제공한다.
예제 코드:
<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
이 기술을 사용하는 링크들:
a 요소에 포함된 비 텍스트 콘텐츠를 위한 대체 텍스트를 확인한다.
만약 a요소의 내용이 img 요소뿐이라면, 링크의 목적으로 대체 텍스트가 기술되었는지 확인한다.
a 요소가 대체 텍스트를 제공하지 않는 하나 이상의 img 요소를 포함한다면 링크의 목적을 기술한 텍스트를 확인한다.
a 요소가 텍스트만 포함하고 있다면, 링크의 목적에 맞는 텍스트가 기술되어 있는지 확인한다.
위의 모든 결과를 만족해야 한다.
사용자 서식 제어를 포함하는 콘텐츠.
이 기술과 관련된 것들:
이 기술의 목적은 사용자들이 문맥의 명확한 요청 변화들을 허용하는 방법을 제공하는 것이다. 전송 버튼의 본래 의도는 사용자 양식에 입력된 정보를 전송하여 HTTP 요청을 발생시키는 것이다. 그래서 전송 버튼은 문맥 변경의 원이이 되기 때문에 적절히 통제되어야 한다.
이것은 전송 버튼을 포함한 기본적인 양식 예제다.
예제 코드:
<form action="http://www.example.com/cgi/subscribe/" method="post"><br />
<p>Enter your e-mail address to subscribe to our mailing list.</p><br />
<label for="address">Enter email address:</label><input type="text"
id="address" name="address" />
<input type="submit" value="Subscribe" /><br />
</form>
다음 예제는 서버측 스크립트(action 속성에 명시된)를 사용하여 요청된 페이지로 사용자를 리다이렉트시킨다.
예제 코드:
<form action="http://www.example.com/cgi/redirect/" method="get"><br />
<p>Navigate the site.</p><br />
<select name="dest"><br />
<option value="/index.html">Home</option/><br />
<option value="/blog/index.html">My blog</option/><br />
<option value="/tutorials/index.html">Tutorials</option/><br />
<option value="/search.html">Search</option/><br />
</select><br />
<input type="submit" value="Go to Page" /><br />
</form> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
네비게이션을 위한 풀 다운 메뉴 by Jukka Korpela discusses a few techniques that work or do not work.
내용 안에서 모든 양식을 찾는다.
각 양식에서, 전송 버튼을 확인한다.(input type="submit", input type="image", or button type="submit")
#2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
현재 사용자 에이전트와 보조 기술은 링크가 title 속성을 가질 때 사용자에게 피드백을 제공하지 않는다.
일부 그래픽 사용자 에이전트는 title 속성을 포함한 앵커 요소에 마우스를 오버시키면 툴팁을 표시할 것이다.
그러나, 현재 사용자 에이전트는 키보드를 통한 title 속성에의 접근은 제공하지 않는다.
툴팁은 몇몇 사용자 에이전트에서 짧은 시간 후에 사라져 버린다.(대략 5초 후에)
이것은 마우스를 사용하지만 신체적 장애로 인해 정밀하게 움직일 수 없는 사용자들에게 title 속성에의 접근을 어렵게 하는 원인이 된다. 그리고 툴팁을 읽을 시간이 더 필요한 사용자들에게도 불편함을 가져다 준다.
현재 그래픽 사용자 에이전트들은 title 속성의 내용을 표시하는 방법을 제공하지 않는다.
사용자는 툴팁을 리사이즈하거나 전경색과 배경색을 지정할 수 없다.
툴팁의 위치는 사용자에 의해서 조정될 수 없고, 몇몇 화면을 확대해서 사용하는 사용자들은 툴팁이 화면 안에 완전히 표시되어지지 않기 때문에 title 속성의 내용의 부분을 확대해서 확인해 볼 수 없다.
일부 사용자 에이전트는 컨텍스트 메뉴를 통해 보충적인 정보에 접근할 방법을 제공할 것이다. 예를 들어, 모질라/파이어폭스의 경우 시프트 F10 후에 P를 누르면 title 속성의 내용과 다른 보충적인 정보들을 보여줄 것이다.(역주:파이어폭스 3.6에서는 이 기능이 사라졌다. 하지만 부가기능을 설치하면 사용 가능하다.)
HTML 4.01 명세서는 요소가 정상적으로 렌더링되지 않을 때 alt 속성의 텍스트를 표시해준다고 설명한다.
따라서, 비주얼 사용자 에이전트들은 이미지가 표시되지 않을 때 alt 속성의 텍스트를 표시할 것이다.
title 속성은 추가적인 정보를 제공함을 의미한다. 일반적으로 사용자 에이전트는 title 속성을 가진 요소 위에 마우스를 위치할 때 텍스트를 보여줄 것이다.
인터넷 익스플로어는 title 텍스트를 제공하지 않는 경우 마우스 오버를 하면 alt의 텍스트를 표시할 것이다. 파이어폭스와 오페라 브라우저는 마우스 오버시에 title 텍스트만을 표시하고, alt 속성의 텍스트를 사용하지 않는다. 따라서, 만약 당신이 마우스 오버시에 alt 속성의 텍스트가 보여지기를 원한다면, title속성을 사용해서 텍스트를 포함해야 한다.
보조 기술들은 title 속성의 음성 지원에 대해서 서로 다른 지원을 하고 있다. 몇몇 보조 기술은 사용자가 title 속성을 통해서 정보에 접근하는 것을 허용하지 않는다.
JAWS 7.0 이상은 JAWS 설정에 의존해서 title 속성의 값을 들려줄 것이다. 이 설정은 JAWS에서 임시적으로 또는 영구적으로 변경될 수 있다.
WindowEyes 5.5 이상은 ins-E 단축키를 가진다. 이 단축키는 포커스된 항목이 title 속성을 포함한다면 추가적인 정보를 들려줄 것이다.
만약 title속성이 접근 가능하다면 이 기술의 구현은 title 속성만으로 충분하다. title 속성의 내용은 (화면낭독기를 사용하는 사용자들뿐 아니라) 모든 키보드 사용자들이 이용할 수 있어야 한다.
이 기술의 목적은 링크를 설명하는 추가적인 텍스트를 제공하는 앵커 요소에서 title 속성을 사용하는 방법을 보여주는 것이다. title 속성은 링크의 목적을 명확하게 하거나 설명하기 위한 추가적인 정보를 제공하기 위해 사용된다. title 속성을 통해서 제공된 추가 정보가 경고같이 링크를 클릭하기 전에 알아야 할 내용이라면, title속성보다는 링크 텍스트에서 제공되는 것이 더 좋다.
많은 사용자 에이전트에서 title 속성에의 접근 지원이 제한적이기 때문에 제작자들은 이 기술을 적용하는데 유의해야 한다. 이런 이유로, 제작자들은 C7: Using CSS to hide a portion of the link text (CSS) 이나 H30: 앵커 요소를 위한 a 링크의 목적을 기술하는 링크 텍스트 제공하기 (HTML)를 더 선호한다.
예제 코드:
<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html"
title="Read more about failed elephant evacuation">
Evacuation Crumbles Under Jumbo load
</a>
HTML 4.01에서 href 속성에 명시된 URI를 새 창으로 나타내기위해 앵커 요소에서 target="_blank" 속성이 사용될 수 있다.
이 예제는 새 창을 열 수 있는 링크에 정보를 제공하기 위한 방법으로 앵커 요소에 title속성을 사용하는 것을 보여준다.
예제 코드:
<a href="http://example.com/subscribe.html"
target="_blank"
title="link opens in new window">
Subscribe to email notifications about breaking news
</a>이 기술을 위한 이용 가능한 참고 자료이 없다.
앵커 요소를 위한 소스 코드 검사.
각각의 앵커 요소는 title 속성을 가지는지 확인하고, 링크 텍스트와 함께 링크의 목적을 기술한 title 속성을 확인한다.
#1의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 테크닉은 HTML 양방향 알고리즘(bidirectional algorithm)이 원하지 않는 결과를 나타낼 경우, 유니코드의 역방향(right-to-left marks) 또는 순방향(left-to-right marks) 마크를 사용해서 그 결과를 덮어쓰려는 목적을 갖고 있다. 이는 예를 들어, 서로 다른 방향성을 가진 텍스트들 사이에 있는 공백이나 구두점과 같은 중립적인 문자가 위치할 때와 같은 경우에 필요할 수 있다. 이 테크닉에서 사용된 컨셉은 당신이 양방향 알고리즘(bidi algorithm)과 인라인 마크업에 대하여 알 필요가 있는 것에 기술되어 있다.
유니코드 오른방향 표시와 왼방향 표시는 여기 보이는 것과 같이 직접 입력할 수 있다. 또는 대체 문자열이나 숫자 문자를 참조할 수 있다.
순방향 표시: ‎ or ‎ (U+200E)
역방향 표시: ‏ or ‏ (U+200F)
양방향 알고리즘 때문에, 소스 코드 에디터는 대체 문자(entitie character)나 수치 문자 참조(numeric character references)를 예상대로 표시하지 않을지도 모른다.
이 예제는 영어 문장 중간에 아라비아 구절을 보여주고 있다. 느낌표는 아랍어 구절의 일부분이고, 좌측에 나타나야 하는데 느낌표가 아랍 문자와 라틴 문자 사이에 있고 전체 문장의 방향성이 순방향이기 때문에 양방향 알고리즘은 아랍어 구절의 오른쪽에 느낌표를 위치시킨다.
The title is "مفتاح معايير الويب!" in Arabic.
Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):
the title is "HCTIWS SDRADNATS BEW!" in arabic.
느낌표 위치 뒤에 바로 왼방향 문자열을 삽입하면 당신이 표시된 텍스트를 볼 때 정확한 위치에 놓인 것을 확인할 수 있다. (아래를 보자.) 당신은 역방향 표시를 위해 이스케이프 문자 또는 (보이지않는) 콘트롤 문자를 사용할 수 있다.
The title is "مفتاح معايير الويب!" in Arabic.
Visually-ordered ASCII version:
the title is "!HCTIWS SDRADNATS BEW" in arabic.
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
방향이 바뀐 텍스트가 있는지 조사하자.
텍스트 방향이 바뀌었을 때, 원래의 방향성과 다르게 표시된 문자 근처에 공백이나 구두점과 같은 중립 문자가 있는지 확인하자.
#2가 참이면, HTML 양방향 알고리즘은 중립 문자(neutral characters)의 배치를 틀리게 할 것이다. 중립 문자가 오른방향 표시와 왼방향 표시에 선행되었는지 확인해보자.
#3의 확인 결과를 만족해야 한다.
applet 요소에 대체 텍스트 제공하기자바 애플릿이 사용중인 HTML과 XHTML.
이 기술과 관련된 것들:
이 기술은 보조 기술에 의해서 잘 지원되지 않는다. HTML 명세서에서는 애플릿 요소가 렌더링되지 않았을 경우에 표시될 대체 텍스트를 설명한다. 따라서, 애플릿 요소 몸체에 포함되는 대체 텍스트는 사용자 에이전트가 지원하지 않거나 렌더링되지 않았을때 사용자에게 대체 텍스트를 제공하지 않을 수도 있다.
윈도우의 IE 6과 파이어폭스 1.5, 윈도우용 오페라 9는 애플릿 요소의 대체 텍스트를 서로 다르게 처리한다. IE는 alt 속성은 표시하지 않지만 애플릿 요소의 몸체 텍스트는 표시한다. 반면 파이어폭스와 오페라는 몸체 텍스트를 표시하지 않지만 alt 속성은 표시한다.
애플릿의 레이블을 위해 alt속성을 사용하여 대체 텍스트를 제공한다. 그리고 애플릿 요소의 몸체 안에 대체 텍스트를 제공한다. 이 기술에서는, 사용자 에이전트가 애플릿 몸체 텍스트와 alt 속성 모두를 지원하도록 요구하기 때문에 두가지 모두 사용된다.
예제 코드:
<applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
tic-tac-toe game
</applet> 애플릿 요소의 소스 코드를 보자.
애플릿을 위해서 대체 텍스트를 갖는 alt 속성이 있는 애플릿 요소를 확인하자.
요소의 몸체 안에 대체 텍스트가 포함되어 있는 애플릿 요소를 확인하자.
#2와 #3의 확인 결과를 만족해야 한다.
이미지전송 버튼을 사용해서 콘텐츠에 적용.
이 기술과 관련된 것들:
타입이 이미지인 input 요소에서 alt 속성은 레이블을 제공하는데 사용된다. 이 레이블은 버튼의 기능을 나타내지만 이미지를 설명하지는 못한다. 하나의 페이지에 각각 다른 결과를 보여주는 여러개의 전송 버튼이 있다면 레이블은 특히 중요하다.
input 요소는 서식에서 여러가지 콘트롤들을 생성하는데 사용된다. HTML과 XHTML의 문서형이 이런 모든 콘트롤들에서 alt 속성을 허용하더라도, alt 속성은 이미지 전송 버튼에서만 사용될 수 있다. 사용자 에이전트가 이 속성을 다른 폼 컨트롤에서도 지원하는 방법은 정확히 정의되어 있지 않으며, 그러한(다른) 폼 컨트롤에 레이블을 달기 위해서는 다른 메커니즘을 사용하고 있다.
alt 속성을가진 input 요소.
예제 코드:
<form action="http://example.com/prog/text-read" method="post">
<input type="image" name="submit" src="button.gif" alt="Submit" />
</form> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
타입 속성의 값을 이미지를 갖는모든 입력 요소를 찾아, alt 속성이 있는지 확인하자.
alt 속성이 버튼의 기능을 나타내는지 확인하자.
#1과 #2의 확인 결과를 만족해야 한다.
img 요소에서 alt 속성 사용하기HTML 문서 내에서 사용된 이미지들
이 기술과 관련된 것들:
img 요소를 사용할 때, alt 속성은 짧은 대체 텍스트를 명시한다. 그리고, 이 속성의 값은 "대체 텍스트"로 참조된다.
이미지가 콘텐츠를 이해하는데 중요한 단어를 포함한다면, 대체 텍스트는 그 단어를 포함해야 한다. 이것은 대체 텍스트가 페이지에서 이미지와 똑같은 기능을 하는 것을 허용한다. 그것은 이미지 자체의 시각적 특징을 기술하는 것을 의미하는 것은 아니다. 이미지와 동일한 의미를 전달하는 것이다.
무료 뉴스레터로 이동하는 링크를 제공하는 웹사이트의 이미지다. "Free newsletter. Get free recipes, news, and more. Learn more."라는 텍스트를 포함하는 이미지다. 대체 텍스트는 이미지의 텍스트와 일치한다.
예제 코드:
<img src="newsletter.gif" alt="Free newsletter.
Get free recipes, news, and more. Learn more." />웹 사이트의 이미지는 건물의 평명도를 묘사한다. 이미지는 각각의 방을 사용자가 선택할 수 있도록 만든 이미지 맵이다. 대체 텍스트는 "The building's floor plan. Select a room for more information about the purpose or content of the room."이다. 이미지는 "select a room"이라는 명령을 나타낸다.
콘텐츠에서 img 요소를 찾아보자.
alt속성을 포함하여 의미를 전달하는 img요소를 확인하자.
이미지가 콘텐츠를 이해하는데 중요한 단어를 포함하고 있다면, 단어는 대체 텍스트 안에 포함된다.
#2와 #3의 확인 결과를 만족해야 한다.
HTML과 XHTML의 데이터 테이블
이 기술과 관련된 것들:
이 기술의 목적은 데이터 테이블에 캡션을 연결하는 것이다. 테이블의 캡션은 테이블 식별자로 테이블을 위한 제목이나 머리와 같다.
caption 요소는 텍스트를 위한 마크업으로 적절하며, 테이블 식별자가 시각을(기본값으로) 포함하는 테이블과 연관되어 있음을 보증한다. 덧붙여, 캡션 요소의 사용은 테이블이 존재할 경우 이를 위한 캡션을 화면낭독기가 직접적으로 제공하는 것을 가능하게 한다.
caption 요소는 summary 속성을 포함하는 테이블이든지 아니든지 사용할 수 있다.
caption 요소는 테이블을 식별하는반면 summary 속성은 목적의 개관을 주거나 테이블을 탐색하는 방법을 설명해 준다. 둘 다 사용되는 경우에, caption은 summary의 정보를 중복하면 안된다.
비록 WCAG 2.0이 테이블 레이아웃의 사용을 금지하지 않더라도,
HTML과 XHTML에서 table 요소의 의미를 유지하고, 콘텐츠와 표현을 분리하는 코딩 방법을 따르기 위해 CSS 기반의 레이아웃은 권장된다.
만약 레이아웃을 위해 테이블을 사용한다면, caption 요소는 사용하지 않는다.
테이블 레이아웃의 목적은 단순히 콘텐츠의 배치를 통제하기 위한 것이다; 이때 테이블 자체는 사용자에게 보이지 않는 '투명'이 된다. 캡션 기능은 테이블 상에서 사람의 주의를 요구하기 때문에 이와 같은 투명한 공간 상에서 '단절'을 불러온다.
예제 코드:
<table>
<caption>Schedule for the week of March 6</caption>
...</table> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML 4.01 Table Captions: The CAPTION element
테이블 레이아웃을 위한 점검: 콘텐츠가 테이블의 행과 열에 포함된 다른 콘텐츠와 관계를 가지는지 확인.
만약 "아니다"라면, 테이블은 레이아웃으로 사용된 것임.
만약 "그렇다"라면, 테이블은 데이터 테이블로 사용된 것임.
만약 테이블이 레이아웃용이라면, caption 요소를 포함하고 있는지 확인.
만약 테이블이 데이터 테이블이고 caption 요소를 포함하고 있다면, caption이 테이블을 정의하고 있는지 확인.
만약 이 데이터 테이블을 위해서 summary 속성과 caption 요소 둘 다 제공되었다면, summary가 caption과 중복되지 않았는지 확인.
테이블 레이아웃에서 #2의 확인 결과를 만족해야 한다.
데이터 테이블에서 #3과 #4의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기술의 목적은 단어 혹은 구절의 정의를 정의 목록 상에 타나내어 제공하기 위하여 제공된다.
이 목록은 dl요소를 사용하여 마크업한다. 목록 안에서 각 항목은 dt요소와 dt요소를 따르는 dd요소를 구분하여 놓인다.
title 속성은 정의 목록에 대한 추가적인 정보를 제공하는데 사용될 수 있다.
dl, dt, dd 를 사용하여 용어들간의 관계를 확실히 하며 만일 이를 나태내는 형태가 바뀌더라도 정의는 유지되며 이와 같은 정의 목록과 정의들은 유닛 단위로 관리된다.
정의 목록은 알파벳 순서대로 나타날때 사용하기가 가장 쉽다. 정의 목록은 용어집에서 주로 사용된다.
항해에 대한 웹사이트에서 항해 용어를 정의한 목록이다.
예제 코드:
<dl title="Nautical terms">
<dt>Knot</dt>
<dd>
<p>A <em>knot</em> is a unit of speed equaling 1
nautical mile per hour (1.15 miles per hour or 1.852
kilometers per hour).</p>
</dd>
<dt>Port</dt>
<dd>
<p><em>Port</em> is the nautical term (used on
boats and ships) that refers to the left side
of a ship, as perceived by a person facing towards
the bow (the front of the vessel).</p>
</dd>
<dt>Starboard</dt>
<dd>
<p><em>Starboard</em> is the nautical term (used
on boats and ships) that refers to the right
side of a vessel, as perceived by a person
facing towards the bow (the front of the vessel).</p>
</dd>
</dl> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
목록의 모양을 가지고 있는 각 단어의 집합과 정의에 대한:
목록이 dl 요소에 둘러쌓여 있는지 확인.
정의된 용어가 dt 요소로 둘러쌓여 있는지 확인.
각 용어를 위한 정의가 dt 요소 다음에 나오는 dd요소에 들어 있는지 확인.
모든 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기술의 목적은 표제(heading) 마크업을 사용해서 콘텐츠의 구조를 전달하기 위한 것이다.
텍스트의 겉모습을 변형해서 표제를 사용하는 것은 콘텐츠의 개요를 전달하지는 못한다. 또, 표제를 이용해서 구조를 인식하거나 탐색을 하는 사용자들에게 혼란을 야기시킬 것이다. 단지 굵게 표시하고 있거나, 클래스를 "heading"이라고 정의하면, 시각적으로는 표제처럼 보일 수 있지만, 보조 기술은 텍스트를 표제로 인식하지 못할 것이다.
예제에서, 페이지의 메인 콘텐츠는 3단중 가운데 단이다.
메인 콘텐츠의 제목은 페이지의 제목과 일치한다. 이 제목이 비록 페이지의 첫번째 제목이 아니라고 하더라도 h1으로 마크업되어 있다. 첫번째와 세번째 단의 콘텐츠는 덜 중요하고 h2로 마크업되어 있다.
예제 코드:
<head>
<title>Stock Market Up Today</title>
</head>
<body>
<!-- left nav -->
<div class="left-nav">
<h2>Site Navigation</h2>
<!-- content here -->
</div>
<!-- main contents -->
<div class="main">
<h1>Stock Market up today</h1>
<!-- article text here -->
</div>
<!-- right panel -->
<div class="left-nav">
<h2>Related links</h2>
<!-- content here -->
</div>
</body>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
콘텐츠가 표제일 때 표제를 마크업했는지 확인.
콘텐츠가 표제가 아닐때 표제 요소로 마크업하지 않았는지 확인.
#1과 #2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기술의 목적은 테이블 제목들을 데이터 테이블 안에 들어 있는 각 내용 셀과 연결짓는 것이다. 이 기술은 각 내용 셀(td 요소)에 headers 속성을 추가하고, 제목이 되는 셀에 id 속성을 추가한다. headers 속성은 관련된 제목 셀들의 id 속성 값을 목록으로 포함한다. 만약 id가 한 개 이상이면 공백을 구분자로 사용한다.
이 기술은 내용 셀이 한 개 이상의 열이나 행의 제목과 연결될 때 사용된다. 이것은 th 요소를 사용하거나 scope속성 추가로 사용해서 식별이 복잡해지는 관계를 가질 때 화면낭독기가 내용 셀에 관계된 제목들을 음성으로 제공하는 것을 허용한다. 이 기술을 사용하면 표현 방식이 바뀔때에도 이렇게 복잡한 관계들을 인지할 수 있다.
이 기술은 테이블이 레이아웃을 위해서 사용되었을 때 셀들 사이의 관계는 의미를 갖지 않기 때문에 테이블 레이아웃을 위해서는 추천되지 않는다.
예제 코드:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML 4.01 header information with data cells
테이블 레이아웃 점검: 열과 행의 콘텐츠가 서로 관계를 갖고 있는지 밝히자. 만약 "관계 없음"이라면, 그 테이블은 테이블 레이아웃이다. 만약 "관계 있음"이라면, 그 테이블은 데이터 테이블이다.
데이터 테이블에 셀이 있는데 그 셀이 복수의 열, 혹은 복수의 행과 연결되어 있다면 그 셀의 headers 속성에 연결되어 있는 모든 헤더들의 id들을 나열하고 있는지 확인.
데이터 테이블을 위해 셀이 id나 headers 속성을 포함하면,
내용 셀의 headers 속성 안에 나열된 id가 th 요소를 사용한 셀의 id 속성과 일치하는지 확인.
내용 셀의 headers 속성이 내용 셀에 관계된 모든 헤더의 id 속성을 포함하는지 확인.
모든 id 값들이 유일한지 확인.(페이지에서 두 요소가 같은 id를 가질 수 없다.)
만약 테이블이 레이아웃용이라면, 셀들은 headers나 id 속성들을 포함하지 않는다.
만약 테이블이 데이터 테이블이고 id 속성을 포함한 셀이 있다면, #3.1, #3.2 그리고 #3.3의 확인 결과를 만족해야 한다.
만약 테이블이 데이터 테이블이고, 어떤 셀이 한개 행이나 한개 열 제목 이상과 관계되어 있다면 #2의 확인 결과를 만족해야 한다.
외부 레이블을 사용한 HTML과 XHTML 콘트롤들
이 기술과 관련된 것들:
HTML과 XHTML 명세서는 암시적 레이블과 명시적 레이블 모두를 허용한다. 그러나, 일부 보조 기술은 암시적레이블을 정확하게 제어하지 못한다. (예를 들어, <label>First name <input type="text"
name="firstname"></label>).
JAWS 7.10은 윈도우XP용 인터넷 익스플로어 6.0과 파이어폭스 1.5에서 테스트되었다. JAWS 7.10는 커서 모드와 서식 읽기 모드를 설정한 두 대의 가상 PC에서 명시적 레이블과 암시적 레이블을 읽는다. 서식 모드 안에서 이것은 체크박스와 라디오 버튼의 암시적 레이블을 읽지 않는다.
Window-Eyes 5.5는 윈도우XP용 인터넷 익스플로어 6.0과 파이어폭스 1.5에서 테스트되었다. Window-Eyes 5.5는 서식 필드에 명시적으로 작성된 레이블을 항상 읽어준다. Window-Eyes 5.5는 브라우즈 모드를 작동시키면 콘트롤에 암시적으로 작성된 레이블을 읽어주지 않지만 브라우즈 모드를 해제해서 콘트롤과 콘트롤 사이를 탐색할 때는 암시적 레이블을 읽어준다.
사용자 에이전트는
title 속성을 포함하는 input 요소 위에 마우스를 오버시킬 때 툴팁을 보여줄 것이다.
title 속성은 보조 기술에서 노출되고, 많은 그래픽 브라우저들에서 툴팁으로 표시된다.
툴팁은 키보드를 통해 보여지지는 않는다. 그래서 이 정보는 키보드 사용자들에게는 유용하지 않을 수도 있다.
만약 label이 가능하지 않다면, JAWS와 Window-Eyes는 콘트롤이 포커스를 받을 때 title 속성을 들려준다.
JAWS 6.0과 이후 버전은 2개의 항목이 다를때 label와 title 모두를 들려주게 설정할 수 있다.
그러나, 아주 적은 사용자들만이 이 설정 방법을 알고 있다.
WindowEyes 5.5는 ins-E 단축키를 가진다. 이 단축키는 포커스된 항목을 위해 title 속성의 추가적인 정보를 보여줄 것이다.
이 기술의 목적은 서식 요소에 레이블을 명시적으로 관계시키기 위해 label요소를 사용하는 것이다. label은 for 속성을 사용하여 서식 콘트롤에 연결된다. for 속성의 값은 서식 콘트롤의 id 속성의 값과 반드시 일치해야만 한다.
id 속성은 name 속성과 같은 가치를 가질지도 모른다. 그렇지만 두가지 다 제공되더라도, id는 웹 페이지 내에서 유일해야만 한다.
이 기술은 label 요소가 보인다면 달성 기준 1.1.1, 1.3.1 그리고 4.1.2에 충분하다.
다시 말해, 그것은 CSS를 사용하여 숨겨질지 모른다.
그러나, 달성 기준 3.3.2를 위해서 label요소는
서식 필드의 목적을 이해하는데 도움을 필요로 하는 모든 사용자들에 위해서 반드시 보여야 한다.
label은 type="checkbox"와 type="radio"인 input요소 뒤에 위치된다는 점을 주의하자.
주의 1: 명시적 레이블을 사용한 요소들:
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
주의 2:
label 요소는 아래 경우들을 위해서 사용되지 않는다.
왜냐하면 이러한 요소들을 위한 레이블은 value 속성(예를 들어 전송과 초기화 버튼), alt 속성(이미지 버튼), 또는 자기 자신이 콘텐츠인 요소(버튼)를 통해 제공되기 때문이다.
전송과 초기화 버튼 (input type="submit" 또는 input
type="reset")
이미지 버튼 (input type="image")
숨겨진 입력 필드 (input type="hidden")
스크립트 버튼 (button 요소나 <input
type="button">)
예제에서의 텍스트 필드는 "First name:"이라는 명시적 레이블을 가지고 있다.
label요소들은 input 요소의 id 속성과 for속성이 일치한다.
예제 코드:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />예제 코드:
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>각각의 개별적인 요소들에 설명과 레이블을 가진 라디오 버튼들이 관계지어져 있다.
주의: 라디오 버튼의 관계가 복잡한 경우를 위한 연관과 지정을 제공하기 위해서는 H71: Providing a description for groups of form controls using fieldset and legend elements 가 고려되어야 한다.
예제 코드:
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
웹 페이지 안에 text과 file 또는 password 타입의 모든 input 요소들, textarea를 위한 요소들, 그리고 모든 select 요소들:
input 요소 전에 콘트롤의 목적을 정의한 label 요소가 있는지 확인.
label 요소의 for 속성과 input요소의 id가 일치하는지 확인.
label 요소가 보이는지 확인.
웹페이지 안에 체크박스나 라디오 타입의 모든 input 요소:
input 요소 뒤에 콘트롤의 목적을 정의한 label 요소가 있는지 확인.
label 요소의 for 속성이 input 요소의 id와 일치하는지 확인.
label 요소가 보이는지 확인.
#1과 #2의 확인 결과를 만족해야 한다. 또한, 달성 기준 3.3.2를 위해서 #3의 확인 결과를 만족해야 한다.
짧은 대체 텍스트가 기술되어 있지 않은 이미지를 포함한 HTML, XHTML 문서들
이 기술과 관련된 것들:
몇몇 낡은 보조 기술은 longdesc 속성을 지원하지 않는다.
이 기술의 목적은 이미지에서 제공되는 기능이나 정보가 충분하지 않을 때 longdesc 속성에 의해서 지정된 파일을 통해 정보를 제공하는데 있다.
longdesc 속성의 값은 URI로, 비텍스트 콘텐츠의 긴 설명을 포함하는 파일을 지정한다.
예제 코드:
<p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
img 요소가 longdesc 속성을 가지고 있는지 확인.
longdesc 속성의 값이 외부 자원의 유효한 URI인지 확인.
Check that the content at the target of that URI contains a long description describing the original non-text content associated with it.
#1에서 #3까지의 확인 결과를 모두 만족해야 한다.
embed와 noembed 사용하기embed 요소로 플러그인을 불러오는 문서
이 기술과 관련된 것들:
주의: embed가 사용자 에이전트에서 넓게 지원되고 있지만, 이것은 HTML과 XHTML에서 유효하지는 않다.(역주:HTML5에서는 유효한 요소로 지원하기 시작했다)
이 기술의 목적은 noembed 요소를 사용해서 embed 요소를 위한 대체 콘텐츠를 제공하는 것이다. 만약 embed가 지원되지 않는다면 noembed가 렌더링된다.
페이지 어디서나 noembed가 위치할 수 있는데, noembed를 embed의 자식 요소로 포함시키는 것은 좋은 생각이며, 그렇게 noembed가 기술하는embed 요소의 대체 텍스트는 보조 기술이라고 볼 수 있다.
예제 코드:
<embed src="../movies/history_of_rome.mov"
height="60" width="144" autostart="false">
<noembed>
<a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
</noembed>
</embed>예제 코드:
<embed src="moviename.swf" width="100" height="80"
pluginspage="http://example.com/shockwave/download/" />
<noembed>
<img alt="Still from Movie" src="moviename.gif"
width="100" height="80" />
</noembed>;이 기술을 위한 이용 가능한 자원은 없다.
(none currently listed)
noembed 요소를 자식으로 가지는 embed 요소 확인.
embed 요소가 noembed 요소를 가지고 있다면, noembed가 embed 바로 다음에 있는지 확인.
#1이나 #2의 확인 결과를 만족해야 한다.
HTML, XHTML
이 기술과 관련된 것들:
보조 기술은 불릿 스타일과 넘버링을 나타내기 위하여 사용된 type 속성의 다양한 사용 방식에 부합하지 않는 지원을 포함한다.
이 기술의 목적은 목록 요소들을 사용하여 관련 항목의 목록을 만들기 위한 것이다.
ol 요소는 순서가 있는 목록을 사용할 때, 그리고 ul 요소는 순서가 없는 목록을 사용할 때 사용한다.
정의형 목록(dl)은 정의를 갖는 항목들을 그룹화하기 위해 사용된다.
비록 이 마크업의 사용이 목록을 좀 더 읽기 편하게 하지만, 모든 목록에 마크업이 필요하지는 않다. 예를 들어, 콤마를 구분자로 사용한 목록을 포함한 문장은 목록 마크업이 필요하지 않을 것이다.
목록에 항목이 시각적인 양식으로 마크업이 되었다고 해도 그것이 목록의 관계를 나타내지는 않는다. 사용자들은 정보를 탐색하는데 어려움을 가질 것이다.
한가지 예로,
목록의 각 항목들은 내용의 처음에 별표를 포함하는 시각적인 양식을 가지고, 항목들을 구분하기 위해 <br> 요소를 사용한다.
일부 보조 기술들은 사용자가 목록간 또는 항목간 탐색을 허용한다. 스타일시트는 목록을 온전하게 보전하는 동안 목록의 표현을 변경하는데 사용될 수 있다.
이 예제는 과정안에서 단계의 순서를 보여주기 위해 순서가 있는 목록을 사용한다.
예제 코드:
<ol>
<li>Mix eggs and milk in a bowl.</li>
<li>Add salt and pepper.</li>
</ol>이 예제는 상점에서 물건을 사기 위해 순서가 없는 목록을 보여준다.
예제 코드:
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
</ul>이 예제는 항목과 항목을 정의한 내용을 분류하기 위해 정의형 목록을 사용한다.
예제 코드:
<dl>
<dt>blink</dt>
<dd>turn on and off between .5 and 3 times per second
</dd>
</dl> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
목록의 시각적인 표현(블릿의 유무와 상관 없이)이 순서 없는 목록의 마크인지 확인하자.
순서형 목록의 시각적인 표현이 순서가 있는 목록으로 마크된 것인지 확인하자.
내용이 항목과 항목의 정의가 목록의 서식 안에 표현되었을 때 정의형 목록으로 마크업되었는지 확인하자. Check that content is marked as a definition list when terms and their definitions are presented in the form of a list.
위 절차의 모든 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
몇몇 시멘틱 요소들은 보조 기술에서 잘 지원되지 않는다. code, del, dfn, ins, kbd, s, sub, sup, tt, 와 q를 포함한 요소와 속성들은 제한적인 지원을 받는다는 것을 알고 있다.
사용자들이 텍스트 안에서 의미 있는 마크업에 접근할 수 있도록 제작자들이 이러한 요소와 속성들을 사용해 줄 것을 권장한다.
대부분의 화면낭독기들은 em, strong, b, 또는 i에 대한 자동적인 통보를 제공하지 않는다.
JAWS는 blockquote과 cite를 지원한다.
WindowEyes blockquote, q과 cite를 지원한다.
윈도우용 파이어폭스 1.0 이상, 오페라 7.54, 모질라 1.7.3 이상은 q 요소 주변에 자동으로 인용 부호를 만들어준다. 하지만 인터넷 익스플로어 6은 그렇지 않다.
이 기술의 목적은 계획적으로 결심된 강조 표시나 특별한 문자를 위해 시멘틱 마크업이 어떻게 사용될 수 있는지 설명하기 위한 것이다. 강조 표시나 특별한 텍스트를 위해 의미있는 마크업을 하여 문서에 구조를 제공한다. 사용자 에이전트는 사용자에게 구조를 지각할 수 있게 할수 있다. 예를 들어, 구조의 서로 다른 타입을 위해 시각적 표현을 사용하거나 서로 다른 음성을 사용하거나, 청각 표현을 거든다.
대부분의 사용자 에이전트들은 의미있는 마크업을 사용한 텍스트를 시각적으로 확인할 것이다. 몇몇 보조 기술은 의미있는 마크업을 사용하여 만들어진 콘텐츠의 특징을 결정하기 위한 방법을 제공한다.
See 의미있는 텍스트를 렌더링한 예제.
이 예제는 텍스트 강조를 위해 em과 strong 요소를 사용하는 방법을 보여준다.
em과 strong 요소는 다양한 방법(폰트 스타일 변경, 음성 변조(speech inflection changes) 등 )으로 표시될지 모를 구조적 강조를 나타내기 위해 설계되었다.
예제 코드:
...What she <em>really</em> meant to say was, "This is not ok,
it is <strong>excellent</strong>"!...
이 예제는 긴 인용절을 필요로 하는 경우에 blockquote 요소의 사용을 보여준다. 이것은 또한 출처 명시하기 위해 cite 요소의 사용을 보여준다.
예제 코드:
<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
<blockquote>
<p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
hedges, and, guided by the sense of smell, would find the first violets and lilies.
There, too, after a fit of temper, I went to find comfort and to hide my hot face
in the cool leaves and grass.</p>
</blockquote>
여기서는 짧은 인용을 마크업하기 위해 q 요소를 사용했다. 많은 사용자 에이전트들이 이 요소를 아직 지원하지 않고 있어, 이것을 적절하게 화면에 보여주지 못하기 때문에(UA 노트를 보아라) 인용부호를 q 요소 주변에 제공한다.
CSS 규칙은 제작자에 의해 추가된 인용 부호와 q 요소를 지원하는 사용자 에이전트가 생성하는 인용 부호가 반복되어 두 번 나타나는 문제를 해결하기 위해 사용되었다.
q 요소가 더욱 넓게 제공될 미래에는 제작자가 인용 부호를 작성하고, 브라우저가 생성하는 인용 부호를 제거하기 위한 수고가 사라질 것이다.
예제 코드:
q:before { content: ""; }
q:after { content: ""; } 예제 코드:
<p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it,
we can never do anything good in the world.</q>"</p>
윗첨자와 아랫첨자는 sup와 sub 요소를 사용해서 만든다.
예제 코드:
<p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
텍스트의 다양한 표현을 통해서 전달되는 정보를 위한 콘텐츠를 조사하자.
( em, strong, cite,
blockquote, quote, sub, 그리고sup 같은)텍스트의 다양한 모습을 통해서 전달되는 정보가 의미 있는 마크업을 적절하게 사용했는지 조사해보자.
#2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기술의 목적은 그룹 링크를 논리적 집합으로 보여주는 것이다. 링크가 논리적 집합으로 묶일 때(예를 들어, 네비게이션 바 또는 사이트의 모든 페이지에 나타나는 메인 메뉴) 링크들은 하나의 단위로 마크업 되어야 한다. 앞을 볼 수 있는 사람들은 종종 네비게이션 바를 무시하고 페이지의 정보를 읽기 시작한다. 스크린 리더를 사용하는 사람들은 관심 있는 정보를 읽기 전에 네비게이션 바 내 각 링크의 텍스트를 우선적으로 들어야 한다. 스크린 리더 사용자들이 네비게이션 바를 뛰어넘을 수 있고, 모든 링크를 읽는 것을 방지할 수 있도록 정보를 마크업하는 몇 가지 방법이 있다.
다음 방법 중 하나를 통해서 그룹 링크가 가능하다(선호도 순으로 내림차순):
ul또는 ol
map
본 예제에서는 ul 및 li 요소를 사용하여 링크가 묶인다.
예제 코드:
<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
<li><p><a href="kitchen.html">Kitchen</a></p></li>
<li><p><a href="bedbath.html">Bed & Bath</a></p></li>
<li><p><a href="dining.html">Fine Dining</a></p></li>
<li><p><a href="lighting.html">Lighting</a></p></li>
<li><p><a href="storage.html">Storage</a><li><p>
</ul> CSS는 목록 요소로 스타일을 만드는 데 사용될 수 있어, 이 테크닉은 다양한 시각적 형태로 쓰일 수 있다.
여기에 목록 블릿과, 들여쓰기를 생성하고 개별 목록 요소를 수평적으로 흐르게 하는 좌측 여백(padding)을 삭제하는 스타일이 있다:
예제 코드:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: inline;
}이 스타일은 블릿과 좌측 패딩을 제거하고 항목을 플로팅 블록 안에 보여준다.
예제 코드:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: block;
float: left;
}이 예제에서는, map 요소를 링크의 집합으로 묶고, 제목(title) 속성을 네비게이션 바로 식별한다.
예제 코드:
<map title="Navigation Bar">
<p>
[<a href="home.html">Home</a>]
[<a href="search.html">Search</a>]
[<a href="new.html">New and highlighted</a>]
[<a href="sitemap.html">Site map</a>]
</p>
</map> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
(none currently listed)
함께 묶이기 위한 anchor 요소의 정보를 검토한다.
anchor 요소가 목록 또는 map 요소를 사용하여 묶이는지 점검한다.
#1의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기법의 목적은 사용자가 테이블을 볼 수 없거나 프레젠테이션 형식이 변경되었을 경우 정보내의 관계를 유지 하는 방식으로 표 정보를 소개하는데 있다. 정보는 텍스트, 숫자, 이미지 또는 다른 이차원(수직과 수평)내에 존재하는 데이터들간의 논리적 관계를 표로 나타내는 것이다. 이 관계는 행과 열에 표시되고 그 행과 열은 반드시 논리적인 관계의 순서로 인식할 수 있어야 한다.
table 요소는 자식 요소인 tr, th 그리고 td로 이 관계를 지각할 수 있도록 만드는데 사용한다. 열을 생성하는 탭을 삽입하거나 pre요소를 사용하는 것과 같은 기법은 순수하게 시각적이며 시각적으로 함축된 논리적인 관계는 만약 사용자가 테이블을 볼 수 없거나 시각적이 프레젠 테이션이 변경되었을 경우 이해할 수 없을 것이다.
이 예제는 단순한 정보성 테이블 마크업을 사용하였다. 첫번째 행은 요일을 나타낸다. 시간 각격은 첫번째 열에 표시 된다. 이 셀들은 th요소로 마크업 되어 있다. 열의 머릿말에서는 요일을 행의 머릿말에서는 시간간격을 확인한다. 스크린리더는 테이블을 탐색하는 사용자에게 변경된 머릿말의 정보를 알려준다. 그러므로 스크린 리더 사용자는 행을 따라 왼쪽과 오른쪽으로 이동함으로써 요일(열의 머릿말)의 약속(있을 경우)을 듣게 될 것이다. 같은 열내에서 위와 아래의 이동으로 시간 간격을 듣게 될 것이다.
예제 코드:
<table>
<tr>
<td> </td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>8:00-9:00</th>
<td>Meet with Sam</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>9:00-10:00</th>
<td> </td>
<td> </td>
<td>Doctor Williams</td>
<td>Sam again</td>
<td>Leave for San Antonio</td>
</tr>
</table> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML 4.01 Table Element
HTML 4.01 Table rows: The TR element
HTML 4.01 Table cells: The TH and TD elements
표형식의 정보가 존재 하는지 확인 한다.
표형식정보가 존재 할 경우:
테이블 요소에 적어도 table, tr, th 그리고 td가 사용되었는지 확인 한다.
위의 모든 확인 사항이 사실.
object 요소의 본문 사용하기문서에서 object요소로 미디어를 로드 한다.
이 기술과 관련된 것들:
이 기술은 보조기술과 크로스브라우저 지원이 원활하게 이루어 지지않는다.
이 기술의 사용 목적은 Object 요소를 사용할 때 렌더링 되는 콘텐츠의 대체 택스트를 제공하는데 있다. Object 요소의 본문에는 Object의 전체 대체 택스트나 대체 택스트와 함께 택스트가 아닌 콘텐츠를 추가 하여 제공할 수 있다.
예제 코드:
<object classid="http://www.example.com/analogclock.py">
<p>Here is some text that describes the object and its operation.</p>
</object>예제 코드:
<object classid="http://www.example.com/animatedlogo.py">
<img src="staticlogo.gif" alt="Company Name" />
</object>
예제 코드:
<object data="companylogo.gif" type="image/gif">
<p>Company Name</p>
</object>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
각 object 요소의 본문내에 object의 대체 text가 포함 되었는지 확인한다.
#1을 만족해야 한다.
dfn 요소 사용하기HTML과 XHTML
이 기술과 관련된 것들:
이 기법의 목적은 단어나 문장을 정의 하고자 할 때 dfn을 사용한다. dfn요소는 동봉된 용어의 단어를 정의하는데 사용된다. 즉, 용어가 정의되어서 용어의 존재를 표시하는 것이다. 주의 할 점은 그것은 동봉된 용어의 정의가 아니라는 점이다. 이 기법은 정의를 제공하는 G112: 인라인 정의 사용하기와 함께 사용하여야 한다.
다음 코드는 dfn요소를 사용한 한 예이다.
예제 코드:
<p>The Web Content Accessibility Guidelines require that non-text content
has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
of characters that can be programmatically determined or where the sequence is
not expressing something in human language; this includes ASCII Art (which is a
pattern of characters), emoticons, leetspeak (which is character substitution), and
images representing text .</p> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML 4.01 DFN Element
인라인으로 정의된 텍스트의 모든 단어를 식별한다. 즉 단어가 발생한 문장의 근처에서 정의가 발생한다.
인라인으로 정의되어있는 각 단어에 dfn요소가 포함 되어 있는지 확인한다.
#2의 확인 결과를 만족해야 한다.
dir 속성 사용하기HTML과 XHTML
이 기술과 관련된 것들:
이 기술의 목적은 dir 속성을 제공한 인라인 요소에 방향을 포함시켜 텍스트 방향의 변화를 식별 하는데 있다. 예를 들어 영어의 단락은 영어 구절을 포함하는 인용 히브리어 문장을 포함하고 있다. span또는 다른 인라인 요소에서도 dir 속성이 필요할 것이다. 왜냐하면 유니코드의 양방향 알고리즘은 뱡향이 혼합된 텍스트에 공간이나 문장 부호가 포함되면 바람직 하지 않은 결과를 나타낼 수 있기 때문이다. 이 기술에서 사용된 개념은 bigi 알고리즘과 인라인 마크업에 대한 지식이 필요하다라고 설명하고 있다.
이 예제는 오른쪽에서 왼쪽으로 히브리어와 영어를 포함한 방향이 혼합된 여러 방향의 텍스트를 보여주고 있다. 왜냐하면 인용은 히브리어를 포함하고 오른쪽에서 왼쪽으로 실행 되기 때문이다. "W3C" 텍스트와 콤마는 히브리어 텍스트의 왼쪽(i.e., after)에 나타날 것이다. 이렇게:
The title is "פעילות הבינאום, W3C" in Hebrew.
시각적으로 정돈된 아스키 버전(RTL 대문자, LTR 소문자):
the title is "w3c ,YTIVITCA NOITAZILANOITANRETNI" in hebrew.
유니코드 bidirection 알고리즘은 혼자서 올바른 결과를 얻기에 불충분 하다. 그래서 'W3C' 텍스트는 인용구의 오른쪽으로 이동되어 있다.:
The title is "פעילות הבינאום, W3C" in Hebrew.
시각적으로 정돈된 아스키 버전:
the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.
다음은 예상되는 결과를 마크업한 것이다.:
예제 코드:
<p>The title says "<span lang="he"
dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
문서내의 텍스트의 방향을 조사한다.
만약 텍스트의 뱡향이 오른쪽에서 왼쪽으로 진행 된다면 그 조상 요소가 "rtl" 값을 가지는 dir속성을 가지고 있는지 확인 한다.
만약 텍스트의 방향이 왼쪽에서 오른쪽이라면 조상 요소에 dir속성이 없는지 또는 조상 요소가 "ltr"값을 가지고 있는 dir속성을 가지고 있는지 확인한다.
모든 텍스트가 2번과 3번이 사실인지 확인한다.
HTML과 XHTML
이 기술과 관련된 것들:
지역, 문자, 변형 또는 다른 측면에서의 서브태그 추가는 일부 오래된 버전의 스크린리더에서 언어 변환시 오류를 유발할 수 있다.
JAWS 8.0은 lang속성을 근거하여 자동으로 언어를 변경하도록 구성 되어 있다. 하지만, 오직 주요 코드에서 알아 낼수 있는 주요 언어로만 전환 된다. 만약 지방 방언이 언어의 서브코드로 표시 된다면 JAWS에서는 표준어로 구성하여 사용할 것이다.
이 기법을 사용하는 목적은 html요소에 lang 또는 xml:lang 속성을 제공하는 문서의 기본 언어를 확인하는 데 있다.
문서의 언어를 확인하는데는 몇가지 중요한 이유가 있다.:
점자 번역 소프트웨어에서 악센트가 있는 문자의 제어가 가능하고 2등급 축약형 점자의 잘못된 생성을 방지하기 위해 필요한 제어 코드를 삽입할 수 있다.
여러 언어를 지원하는 Speech synthesizers는 동양과 발음의 적응 그리고 페이지의 독특한 언어의 문법을 지원할 수 있고 올바른 발음과 악센트에 해당하는 텍스트를 말할 수 있다.
언어를 표시함으로써 미래 기술 개발에 혜택을 누릴 수 있다.예를 들어 언어를 번역할 수 없는 사용자는 익숙하지 않은 언어를 번역하는 기계를 사용할 수 있을 것이다.
언어를 표시하는 것은 또한 사전에서 제공하는 정의를 사용자 환경에 따라 제공할 수 있다.
HTML 4.01은 html요소의 lang 속성을 사용한다.
text/html의 역할을 하는 XHTML은 html태그의 lang 속성과 xml:lang속성을 사용하며, XHTML 을 준수하고 HTML하위 호환성을 제공한다. application/xhtml+xml 의 역할을 하는 XHTML은 html요소의 xml:lang 속성을 사용한다. lang xml:lang 속성 둘다 오직 하나의 값만을 가질 수 있다.
참고 1:
html은 오직 lang 속성만을 제공하고 XHTML1.0은(과도기적 조치로) 두속성을 허용하는데 반하여 XHTML1.1은 오직 xml:lang만 제공한다.
참고 2: lang과 xml:lang속성의 허용 값은 아래에 표시된 참고자료를 확인 한다. 언어 태그는 언어를 나타내는 기본 코드를 사용하고 옵션 서브코드(하이픈)로 언어의 변종을 나타낸다. 예를들어 영어는 기본 코드가 "en"으로 나타낸다. 영국 영어와 미국 영어는 "en-GB"와 "en-US"로 각각 구별하여 사용한다. 기본 코드를 사용하는 것은 이 기술에서 중요한 부분이다. 서브코드를 사용하는 것은 선택적이나 특별한 상황에 도움이 될 수 있다.
이 예제는 프랑스 언어로 된 HTML문서를 나타내고 있다.
예제 코드:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
이 예제는 프랑스 언어로된 콘텐츠 타입이 text/html인 XHTML1.0문서를 나타내고 있다. lang과 xml:lang속성 둘다 XHTML 을 준수하고 HTML하위 호환성을 제공한다.
예제 코드:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html> 이 예제는 프랑스 언어로된 콘텐츠 타입이 application/xhtml+xml 인 XHTML1.0문서를 나타내고 있다. 오직 xml:lang속성이 명시된다.
예제 코드:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
문서의 html요소를 검사한다.
html요소가 lang이나 xml:lang속성을 가지고 있는지 확인한다. 요소가 lang이나 xml:lang속성을 가지고 있는지 확인한다
lang속성의 값을 언어의 식별에 대한 태그에서 확인하거나 웹페이지에서 사용하는 주요 언어를 계승하거나 반영하는 지 확인한다.
위의 확인사항은 모두 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
지역, 문자, 변형 또는 다른 측면에서의 서브태그 추가는 일부 오래된 버전의 스크린리더에서 언어 변환시 오류를 유발할 수 있다.
JAWS 8.0은 lang속성을 근거하여 자동으로 언어를 변경하도록 구성 되어 있다. 하지만, 오직 주요 코드에서 알아 낼수 있는 주요 언어로만 전환 된다. 만약 지방 방언이 언어의 서브코드로 표시 된다면 JAWS에서는 표준어로 구성하여 사용할 것이다.
lang 또는 xml:lang속성의 언어 변경사항을 명확하게 식별 하도록 하는데에 있다. HTML 4.01은 요소에 lang속성을 사용할 수 있다.
text/html 역할을 하는 XHTML은 요소에 lang 속성과 xml:lang속성을 사용할 수 있고 XHTML 을 준수하고 HTML하위 호환성을 제공한다.
application/xhtml xml 역할을 하는 XHTML은 요소에 xml:lang속성을 사용할 수 있다.
이 기법의 목적은 HTML이나 XHTML 버전에 맞는 lang 또는 xml:lang속성의 언어 변경사항을 명확하게 식별 하도록 하는데에 있다.
HTML 4.01은 요소에 lang속성을 사용할 수 있다.
text/html의 역할을 하는 XHTML은 html태그의 lang 속성과 xml:lang속성을 사용하며, XHTML 을 준수하고 HTML하위 호환성을 제공한다. application/xhtml+xml 의 역할을 하는 XHTML은 html요소의 xml:lang 속성을 사용한다. lang xml:lang 속성 둘다 오직 하나의 값만을 가질 수 있다.
참고: html은 오직 lang 속성만을 제공하고 XHTML1.0은(과도기적 조치로) 두속성을 허용하는데 반하여 XHTML1.1은 오직 xml:lang만 제공한다.
lang과 xml:lang속성의 허용 값은 아래에 표시된 참고자료를 확인 한다. 언어 태그는 언어를 나타내는 기본 코드를 사용하고 옵션 서브코드(하이픈)로 언어의 변종을 나타낸다. 예를들어 영어는 기본 코드가 "en"으로 나타낸다. 영국 영어와 미국 영어는 "en-GB"와 "en-US"로 각각 구별하여 사용 한다. 기본 코드를 사용하는 것은 이 기술에서 중요한 부분이다. 서브코드를 사용하는 것은 선택적이나 특별한 상황에 도움이 될 수 있다.
이 예제는 독일어로 작성한 인용문을 xml:lang속성을 사용하여 나타낸 예이다. 이 정보를 XHTML1.1 문서에 포함 시킬수 있으나 lang은 지원되지 않는다.
예제 코드:
<blockquote xml:lang="de">
<p>
Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
aber der Esel merkte, daß kein guter Wind wehte, lief fort
und machte sich auf den Weg nach Bremen: dort, meinte er,
könnte er ja Stadtmusikant werden.
</p>
</blockquote>
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
문서의 각 요소에 대한:
요소의 콘텐츠의 인간 언어가 HTML 4.01, 언어 코드 상속에 지정된 요소의 상속된 언어와 동일한지 확인 한다.
문서의 lang 속성 마다:
lang속성의 값을 언어의 식별에 대한 태그에서 확인하거나 계승하는 지 확인한다.
문서의 xml:lang 속성 마다:
xml:lang속성의 값을 언어의 식별에 대한 태그에서 확인하거나 계승하는 지 확인한다.
위의 모든 항목을 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
링크요소는 사용자 환경과 보조기술 지원에 일관성이 없다.
일부 사용자 환경은 링크 요소로 지정된 정보를 보여주는 선택적 네비게이션바를 제공한다. 모질라와 오페라 브라우저의 현재 버전에서 이 기능을 제공한다. IE6.0과 Firefox 1.5에서는 이 기능을 제공하지 않지만 extensions 이나 add-on을 통해 구할 수 있을 것 이다.
(X)HTML의 link 요소에서는 더 많은 link요소의 브라우저 지원 정보를 확인 할 수 있다.
이 기법의 목적은 link 요소가 웹페이지의 집합 내에서 HTML페이지의 위치에 대한 매타데이터를 제공하거나 웹페이지의 집합과 함께 콘텐츠의 위치를 찾는데 도움을 주는데 있다. rel 속성값은 관계의 종류를 설명하고 href속성은 문서가 가지는 관계의 link를 제공한다. 다중 link 요소는 여러 관계를 제공 할 수 있다. 유용한 rel의 몇가지 값:
Start: 문서의 첫번째 컬렉션을 참조한다.
Next: 선형 순서 문서의 다음 문서를 참조한다.
Prev: 시리즈로 정돈된 문서의 전 문서를 참조한다.
Contents: 문서의 목차를 참조한다.
Index: 현재 문서에 대한 색인을 제공한다.
온라인 책 제 2장 웹페이지의 head 섹션에 다음과 같은 링크를 포함할 수 있다.
예제 코드:
<link rel="Contents" href="Contents.html" title="Table of Contents" />
<link rel="Index" href="Index.html" title="Index" />
<link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" />
<link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" />참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
Use <link>s in your document from W3C's Quality Web Tips
LINK - Document Relationship from Web Design Group
웹페이지 마다 순서 또는 웹페이지의 컬렉션이 포함:
문서의 head섹션 내에 네비게이션을 발생시키는 모든 link요소가 존재하는지 확인 한다.
문서의 head섹션 내의 link요소마다 네비게이션과 관련되어 최소한 포함되었는지 확인 한다.:
rel은 링크 유형을 식별한다.
유효한 href속성에 적절한 자원을 위치시킨다.
위의 모든 항목을 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
일부 사용자 환경은 링크 요소로 지정된 정보를 보여주는 선택적 네비게이션바를 제공한다. 모질라와 오페라 브라우저의 현재 버전에서 이 기능을 제공한다. IE6.0과 Firefox 1.5에서는 이 기능을 제공하지 않지만 extensions 이나 add-on을 통해 구할 수 있을 것 이다.
(X)HTML 의 링크 요소에서는 더 많은 link요소의 브라우저 지원 정보를 확인 할 수 있다.
이 기법의 목적은 용어를 찾기 위한 매커니즘을 제공함에 있다. 콘텐츠 내의 용어는 별도의 용어 사전 페이지에 정의하고 용어사전은 해당 문서의 head 요소에 link요소를 사용하여 참조한다. link 요소의 rel 속성은 "glossary"로 설정하고 href 속성은 용어사전 페이지의 URL을 포함한다. 사용자 환경은 쉽고 빠르게 사용자가 용어집에 접근 할 수 있도록 도울 것이다.
예제 코드:
<link rel="glossary" href="http://www.w3.org/TR/WCAG20/#glossary">참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
Use <link>s in your document from W3C's Quality Web Tips
LINK - Document Relationship from Web Design Group
(none currently listed)
어떤 단어와 정의가 집합된 용어 사전을 제공한다.:
웹 페이지 head 섹션에 단어, 구문 또는 약어가 제공되는 용어사전의 link요소가 포함되어 있는지 확인 한다.
link 요소에 rel="glossary" 속성이 있는지 확인한다.
link 요소의 href속성에 용어사전 페이지를 참조하고 있는지 확인한다.
위의 모든 항목을 만족해야 한다.
참고: WCAG에서 사용되는 약어는 "원래 확장된 의미를 가지는 단어, 구, 이름의 축약된 형태를 언어의 일부분으로 볼 수 없다고 말하는 조직에 의해 거부되지는 않아 왔다"라고 정의한다.
XHTML 1.1
이 기술과 관련된 것들:
Ruby 마크업에 포함된 rp 요소는 사용자 환경을 위한 폴백 메커니즘으로 XHTML 1.1을 지원하지 않는다. 비록 Ruby 마크업이 오직 XHTML 1.1에 정의 되어 있으나 IE 5.0이상에서 HTML 4.01 이나 XHTML 1.0 을 사용하여도 ruby, rt 그리고 rp 요소를 지원하고 있다.
The objective of this technique is to use ruby annotation to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.
많은 언어들은 텍스트의 발음 방법에 따라 다른 것을 의미 할 수 있다. 이건 동아시아 언어 뿐 아니라 히브리어 아랍어 그리고 다른 언어에도 해당되며 또 영어와 다른 서부 유럽언어에도 해당된다.
Ruby 주석은 저자가 발음에 대한 안내를 "기본 텍스트"에 주석을 달아서 제공할 수 있고 어떠한 경우에는 정의도 제공할 수 있다.루비는 일반적으로 일본과 다른 동아시아 언어의 text에 사용된다.루비 주석은 XHTML1.1모듈로 정의 되어있다.
루비 마크업은 두가지 종류를 가지고 있다.: 단순함과 복잡함.
단순한 루비 마크업은 완전한 단어 또는 문장처럼 적용된다. 이것은 "기본"텍스트로 알려져 있다.
루비 주석은 그 발음 방법을 작은 글꼴로 표시 한다.(rt 요소, 또는 Ruby 텍스트)(그 "Ruby"라는 용어는 인쇄된 텍스트에서 이러한 목적으로 사용되는 작은 폰트로 부터 파생되었다.)
루비 텍스트는 일반적으로 위쪽이나 기본 텍스트 바로 뒤에서 렌더링 된다. 다시말해서, 수평 텍스트는 바로 위에서 수직 텍스트는 바로 우측에서 표시 된다.
가끔 일본어는 음성 주석으로부터 기본 텍스트(외관상)의 반대쪽에 텍스트의 의미를 제공하기 위한 루비를 사용한다. 단순한 루비 마크업 역시 "폴백" 옵션을 제공하는 사용자 환경에서는 루비 마크업을 지원하지 않는다. (다시말해, XHTML1.1에서도 지원하지 않는다.)
복잡한 루비 마크업은 기본 텍스트를 가능한 작은 유닛으로 나눌수 있고 그 유닛들은 각각의 별도의 루비 주석을 동반할 수 있다. 복잡한 루비 마크업은 폴백 옵션을 지원 하지 않는다.
루비 주석은 히브리어와 같은 흔하지 않은 언어나 유니코드 폰트에서 발음을 전달하는 발음 구별 부호에 사용된다.영어나 유럽의 언어에서는 흔하지 않다.
참고: 루비나 다른 수단을 통해 발음을 나타내는 주된 이유는 발음에 대한 정보를 제공하여 장애가 있는 누구나 읽거나 콘텐츠의 언어를 이해 하도록 하여 내용에 접근 할 수 있도록 하는 것이다. 콘텐츠의 언어에 익숙하지 않은 사람들을 위하여 발음에 대한 정보는 제공할 필요는 없다.
이 예제 에서는 Web Content Accessibility Guidelines.의 첫 글자로 된 두문자어(약어)의 발음을 루비 주석으로 사용한다.
WCAG문자는 기본 텍스트이고(rb 요소), 발음 정보는 루비 텍스트로 표시 된다.(rt 요소). 루비 괄호 요소인 rp는 루비 주석이 지원되지 않는 사용자 환경에서 사용되며 그 rt 요소에 발음 정보를 제공한다. 발음정보는 기본 텍스트 바로 옆 괄호 안에서 렌더링 된다. (루비가 지원되는 사용자 환경에서는 괄호가 보이지 않는다.)
예제 코드:
<p>When we talk about these guidelines, we often just call them
<ruby>
<rb>WCAG</rb>
<rp>(</rp>
<rt>Wuh-KAG</rt>
<rp>)</rp>
</ruby>.
</p>
다음은 일본어에 대한 예제이다. 일본어에서는 루비를 한자를 읽는데 사용한다.
루비 괄호 요소인 rp는 루비 주석이 지원되지 않는 사용자 환경에서 사용되며 그 rt 요소에 발음 정보를 제공한다. 발음정보는 기본 텍스트 바로 옆 괄호 안에서 렌더링 된다. (루비가 지원되는 사용자 환경에서는 괄호가 보이지 않는다.)
예제 코드:
<p>
<ruby>
<rb>慶應大学</rb>
<rp>(</rp>
<rt>けいおうだいがく</rt>
<rp>)</rp>
</ruby>
</p> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
루비 주석은 발음 정보를 제공하는데 사용된다:
rt요소에 rb요소에서 정의된 각 텍스트의 발음 정보가 포함되어 있는지 확인 한다.
간단한 루비 마크업을 사용하는 경우, rp요소가 현재 루비 주석을 지원하지 않는 사용자 환경인지 확인하고 rt요소에 발음 정보를 제공한다.
#1과 #2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
scope 속성의 row과 col 값은 JWAS의 현재 나와있는 대부분의 버전에서 폭 넓게 지원된다. 하지만, 여전히 몇가지 문제를 갖고 있고, scope에 대한 WindowEyes의 지원은 일관성이 없다. 이들 스크린 리더기의 일본어 버전에서도 마찬가지다. 버전 5 이전의 JWAS 버전과 WindowsEyes의 예전 버전은 지원되는 scope가 일치하지 않는다.
지금은, 제목이 첫 행과 열에 있지 않은 테이블을 위한 모든 보조기술에서 일치되는 지원이 보장되길 원하는 사람들은 복잡한 테이블을 위한 기술을 사용하길 원할지도 모른다. H43: 데이터 테이블에서 데이터 셀과 제목 셀을 연결하기 위해 id와 title 속성 사용하기. 우리는 첫번째 열이나 행에 제목을 갖고 있는 간결한 테이블을 위해 th와 td 요소의 사용을 권한다.
이 기법의 목적은 scope 속성을 이용하여 제목 셀과 데이터 셀을 연결하려는 것이다. 제목으로 사용되는 어떠한 셀이든 그 범위든 명확히 하기위해 scope 속성을 사용할 수 있다. 스코프는 셀이 row(열), col(행)을 위한 제목인지 혹은 rowgroup(열의 그룹)인지 또는 colgroup(행의 그룹)인지를 식별한다. 값 행, 열, 행그룹, 열그룹은 각각 가능한 범위를 식별한다.
예제 1에 있는 한 가지 방식처럼, 첫번째 행이나 열에 제목이 없는 간단한 데이터 테이블을 위해 이 기법을 사용할 수 있다. 오늘날 스크린 리더 서포트에 기반하여, 간단한 테이블과 관련이 있는 두 가지 상황에서 그것의 사용이 제안된다.
데이터 셀은 행제목이나 열제목으로 기능하기도 하는 td로 표시돼 있다.
제목 셀은 th 대신 td로 표시되 있다. 작성자는 간혹, th와 연결된 디스플레이 문자를 피하기 위해 이것을 사용하면서도, th 표시를 조절하기위해 CSS를 사용하는 것은 택하지 않는다.
주의: 의첫번째 행 또는 열에 제목이 있는 간단한 테이블에 대해서는 scope 없이 TH 요소를 사용하는 것만으로 충분하다.
주의: 복잡한 테이블은 H43 : '데이터 테이블에서 데이터 셀을 제목 셀과 연결하기 위해 id와 제목 어트리뷰트 사용하기' 에서와 같이 id와 제목을 사용한다.
아래 예제에서, 열 #1은 테이블에 행에 대한 일련번호를 포함하고 있고, 두번째 열은 열에 대한 키 값을 포함하고 있다. 두번째 열에 있는 셀은 scope="row"를 사용한다. 첫번째 행에 있는 셀 역시 td로 표시되고 scope="col" 을 사용한다.
예제 코드:
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<td scope="col">Name</td>
<td scope="col">Phone#</td>
<td scope="col">Fax#</td>
<td scope="col">City</td>
</tr><tr>
<td>1.</td>
<td scope="row">Joel Garner</td>
<td>412-212-5421</td>
<td>412-212-5400</td>
<td>Pittsburgh</td>
</tr><tr>
<td>2.</td>
<td scope="row">Clive Lloyd</td>
<td>410-306-1420</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr><tr>
<td>3.</td>
<td scope="row">Gordon Greenidge</td>
<td>281-564-6720</td>
<td>281-511-6600</td>
<td>Houston</td>
</tr>
</table> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
각각의 데이터 테이블에 대해:
모든 th 요소가 scope 속성을 가지고 있는지 확인하라.
다른 요소들의 제목 역할을 하는 모든 td 요소가 scope 속성을 가지고 있는지 확인하라.
모든 scope 속성이 row, col, rowgroup, 또는 colgroup의 값을 가지고 있는지 확인하라.
모든 확인 결과를 만족해야 한다.
frame과 iframe을 사용한 HTML과 XHTML 문서들
이 기술과 관련된 것들:
프레임과 i프레임 요소의 longdesc 속성을 사용하면 보조 기술의 지원을 제대로 받을 수가 없다.
이 기법의 목적은 각 frame의 콘텐츠를 설명하기 위하여 frame이나 iframe엘러먼트의 title 속성 사용을 보여주기 위함이다. 이것은 frame의 레이블을 제공하기 때문에, 사용자는 입력하고 검색하는 frame을 세부적으로 선택할 수 있다. 그것은 프레임셋에서 각각의 페이지(프레임)나 인라인 프레임(i프레임)에 레이블(꼬리표)을 붙이지 않는다.
title 어트리뷰트가 프레임에 레이블을 붙이는 것은 문서에 레이블을 붙인 title 요소와는 다르다는 것에 주의하라. 전자는 프레임간의 탐색을 용이하게 하고, 후자는 사용자의 현재 위치를 명확히 해 주므로 둘 다 제공되어야 한다.
title 속성은 name 속성과 호환되지 않는다. title 은 사용자를 위해 프레임에 레이블을 붙이는 반면, name은 스크립팅과 윈도우 타켓팅을 위해 프레임에 레이블을 붙인다. name은 사용자에게 표시되지 않고, 오직 title만 표시된다.
이 예제는 네비게이션 바(탐색 모음)와 문서를 담고 있는 프레임을 설명하기 위해 frame title 어트리뷰트를 사용하는 방법을 보여주고 있다.
예제 코드:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A simple frameset document</title>
</head>
<frameset cols="10%, 90%">
<frame src="nav.html" title="Main menu" />
<frame src="doc.html" title="Documents" />
<noframes>
<body>
<a href="lib.html" title="Library link">Select to
go to the electronic library</a>
</body>
</noframes>
</frameset>
</html>
이 예제는 인라인 프레임의 콘텐츠를 설명하기 위해 iframe과 속성을 사용하는 방법을 보여주고 있다. 또한, 이 예제는 이전 버전의 브라우저를 위한 iframe에의해 포함된 페이지로 가는 대체 링크를 포함하고 있는데, 그것은 iframe 요소를 이해하지 못한다.
예제 코드:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A document using iframe</title>
</head>
...
<iframe src="banner-ad.html" id="testiframe"
name="testiframe" title="Advertisement">
<a href="banner-ad.html">Advertisement</a>
</iframe>
...
</html> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
title 속성이 있는지, HTML 또는 XHTML source code 속 각 frame과 iframe을 확인하라.
title 속성이 frame을 식별하는 텍스트를 포함하고 있는지 확인하라.
#1과 #2의 확인 결과를 만족해야 한다.
value, alt 또는 요소를 사용하여 식별되지 않는 HTML 및 XHTML form controls.
이 기술과 관련된 것들:
마우스가 title 속성을 포함하고 있는 input 요소 위를 맴돌면 사용자 에이전트는 툴팁을 표시할 것이다.
label을 사용할 수 없으면, JWAS와 Window-Eyes는 form control이 포커스를 받을 때 title 속성을 말한다.
JAWS 6.0 및 그 이후의 나온 것들은 두 항목(item)이 다를 경우. label 과 title 모두를 말하도록 설정할 수 있다. 하지만, 극소수의 사용자들만이 이런 설정을 알고 있을 뿐이다.(대부분이 사용자들은 이런 설정을 잘 모르고 있다.)
WindowEyes 5.5 는 ins-E 라는 단축키를 갑고 있는데, 그것은 포커스가 있는 item의 title 속성을 포함한 추가 정보를 표시한다.
이 기법의 목적은 시각적인 디자인이 lable을 수용할 수 없을 때나(예를 들어, leble로 식별되는 텍스트가 스크린에 없는 경우) 또는 lable을 표시하는 것이 혼란스러울 수 있는 곳에는 label form controls 에서 title 속성을 사용하려는 것이다. 보조기술을 포함한 사용자 에이전트는 title 속성을 말할 수 있다.
검색 폼은 검색 범위를 제한하기 위해 풀다운 메뉴를 사용한다. 풀다운 메뉴는 검색 용어를 입력할 수 있는 텍스트 필드에 인접해 있다. 검색 필드와 select 메뉴의 관계는 시각적인 디자인을 볼 수 있는 사용자에게는 분명하게 보인다. 그것은 눈에 보이는 레이블을 위한 공간을 갖고 있지 않다. title속성은 select 메뉴를 식별하는데 사용된다. title속성은 스크린 리더기에 의해 말해질수 있거나 스크린 돋보기를 사용하는 사람들을 위해 툴팁처럼(툴팁으로) 표시될 수 있다.
예제 코드:
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select> 미국에서 웹 페이지는 지역 코드를 위한 3의 필드와, 교환, 그리고 나머지 4자리의 전화 번호를 입력하기 위한 컨트롤을 포함하고 있다.
예제 코드:
<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code"
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number"
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number"
type="text" size="4" value="" >
</fieldset>
웹 페이지는 사용자가 검색 용어와 검색을 수행하기 위한 버튼 레이블 "Search" 를 입력할 수 있는 텍스트 필드를 포함하고 있다. title 속성은 폼 컨트롤을 식별하기 위해 사용되고 버튼은 텍스트 필드 바로 뒤에 놓여 있어서, 검색 용어를 입력해야할 텍스트 필드가 어디 인지 사용자가 명확히 알 수 있다.
예제 코드:
<input type="text" title="Type search term here" value="Type search term here"/> <input type="submit" value="Search"/>
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
label 요소와 연결되지 않은 각 폼 컨트롤을 확인하라.
컨트롤이 title 속성을 갖고 있는지 확인하라.
title 속성이 컨트롤의 목적을 식별하는지 확인하라.
위의 모든 확인 결과를 만족해야 한다.
이미지를 로드하는 HTML 과 XHTML 문서.
이 기술과 관련된 것들:
이 기법은 이미지가 보조기술에 의해 무시 될 수 있도록 하려면 어떻게 표시되어야 하는지 보여 주려는 것이다.
title 속성 없이 사용된다면, 그리고 alt text가 null로 설정된다면(i.e. alt=""), 보조기술에는 이미지를 안전하게 무시할 수 있다고 표시한다. If no title attribute is used, and the alt text
참고: alt=" " 역시 유효하긴 하지만, alt="" 를 권장한다.
참고:"null" ALT attribute와 no ALT attribute는 다르다.
아래 이미지는 웹 페이지에 장식 이미지를 삽입하기 위해 사용된다.
예제 코드:
<img src="squiggle.gif" width="20" height="20" alt="" />
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
'Null alt text' in WebAIM's 'Creating Accessible Images' 또한 이것을 Dreamweaver에서 어떻게 해야하는지 보여준다.
(none currently listed)
무시되야 하는 각 이미지에 대해
title 속성이 없는지 또는 비었는지 확인하라.
alt 속성이 있는지 그리고 비었거나 또는 그냥 빈 공간( 는 아니다)만 담고 있는지 확인하라.
#1과 #2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
JAWS 와 Windoweyes 는 모두 제목을 통해 네비게이션을 제공하고 제목의 Lavel 에 관한 정보를 제공한다. 오페라 브라우저는 제목으로 탐색할 수 있는 메커니즘을 제공한다. 추가 플러그인은 다른 사용자 에이전트에서 제목으로 네비게이션을 지원한다.
이 기법의 목적은 콘텐츠의 구조를 전달하기 위해 섹션 제목을 사용하려는 것이다. Heading 마크업을 사용할 수 있다.
주요 콘텐츠에서의 시작을 나타내기 위하여
주요 콘텐츠 영역 사이의 섹션 제목을 마크업 하기 위하여
맨 위 또는 주 네비게이션, 왼쪽 또는 보조 네비게이션 및 꼬리말 네비게이션과 같은 서로 다른 탐색 섹션들을 분리하기 위하여.(경계를 표시하기 위하여)
시각적으로 제목의 외형을 가지고 있는 이미지(텍스트를 포함하는)를 마크업 하기 위하여.
일부 기법에서, 논리적 계층을 전달하기 위해 제목이 설계되었다. 제목 순서에 대한 건너뛰기 Level은 문서의 구조가 적절히 고려되지 않았다거나 특정 제목이 그들의 의미 보다는 시각적 랜더링을 위해 선택되었다는 인상을 줄 수 있다. 작성자는 제목을 계층적으로 중첩하도록 권고 받는다.
제목이 콘텐츠 중 중요한 섹션의 시작을 나타내므로, 보조 기술을 쓰는 사용자가 바로 점프하여 적절한 제목으로 가서 콘텐츠를 읽는 것이 가능하다. 이것은 콘텐츠에 느리게 접근했을 사용자들의 상호 작용을 상당히 빠르게 한다.
CSS를 지원하는 기법에서는, 제목의 모습이나 사운드 방식을 변경하기위해 스타일링을 사용 할 수 있다. 보조 기술에서는 드러나지만 시각적으로 보기에는 숨겨지도록 하기위해, CSS를 사용하여 제목을 스타일링 하는 것도 가능하다. 하지만, 시각적으로 제목을 보여주는 것이 일부 인지 장애가 있는 사람들을 포함한 광범위한 사용자 집단에게 도움이 된다.
이 예제는 h2 요소를 사용하여 각 섹션의 제목을 표시함으로써 검색 페이지의 섹션을 구성한다.
예제 코드:
<h1>Search Technical Periodicals</h1>
<h2>Search</h2>
<form action="search.php">
<p><label for="searchInput">Enter search topic: </label>
<input type="text" size="30" id="searchInput">
<input type="submit" value="Go"></p>
</form>
<h2>Available Periodicals</h2>
<div class="jlinks">
<a href="pcoder.com">Professional Coder</a> |
<a href="algo.com">Algorithms</a> |
<a href="jse.com">Journal of Software Engineering</a>
</div>
<h2>Search Results</h2>
... search results are returned in this section ... 이 예제에서는, 네비게이션과 주요 콘텐츠 섹션을 인지할 수 있도록 하기 위해 제목 마크업이 사용된다.
예제 코드:
<!-- Logo, banner graphic, search form, etc. -->
<h2>Navigation</h2>
<ul>
<li><a href="about.htm">About us</a></li>
<li><a href="contact.htm">Contact us</a></li>
...
</ul>
<h2>All about headings</h2>
<!-- Text, images, other material making up the main content... -->
HTML 4.01 과 XHTML 1.x 에서는, 제목 요소들은 섹션의 시작만을 표시한다. 즉, 그것들은 콘텐츠로서의 그 요소를 포함하지 않는다는 것에 주의하라.
예제 코드:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cooking techniques</title>
</head>
<body>
<h1>Cooking techniques</h1>
<p>
... some text here ...
</p>
<h2>Cooking with oil</h2>
<p>
... text of the section ...
</p>
<h2>Cooking with butter</h2>
<p>
... text of the section ...
</p>
</body>
</html> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
별개의 섹션으로 나누어진 모든 콘텐츠에 대해,
각 섹션이 제목과 함께 시작 되는지 확인하라
#1의 확인 결과를 만족해야 한다.
프레임을 사용하는 HTML 과 XHTML 문서
이 기술과 관련된 것들:
이 기법의 목적은 반복되는 자료의 블럭들을 그룹화 하기 위해 프래임이 어떻게 사용될 수 있는 지를 보여주기 위함이다. 대부분의 사용자 에이전트와 보조 기술은 프레임에서 프레임으로 탐색하는 방법을 제공하기 때문에, 요소들을 체계적으로 구성하기 위해 프레임을 사용하면 반복되는 자료의 블록을 간편하게 건너뛰는 방법을 제공할 수 있다. 만약 그 사이트가 프레임셋을 사용한다면, 별도의 프래임으로 콘텐츠의 블록을 체계적으로(순서대로) 구성할 것이다. 콘텐츠의 반복되는 블록이 각 웹 페이지의 프레임셋 안에 있는 동일한 프레임에서 나타나는지 확인하라. 그리고, 각 프레임 요소는 그 프레임의 곤텐츠를 설명하는 title 속성을 갖고 있어야만 한다. 프래임들에 적절히 이름 붙여지면, 사용자는 프레임네비게이션을 이용하여 블록과 블록 사이를 쉽게 이동할 수 있다.
이 기법은 이미 프레임셋이 페이지의 콘텐츠를 구성하는데에 사용되고 있을 때 적절하다. 다른 기법들은 프레임셋이 처음부터 사용되지 않는 페이지를 선호한다. 왜냐하면 보조 기술을 사용하는 많은 사람들이 프레임에 대해 불편을 겪고 있기 때문이다. 프레임을 쓰지 않는 것에 관한 권장 기법은 '성공 기준 4.2.1' 에서 사용할 수 있다.
아래 예제는 콘텐츠를 구성하기 위해 프레임 두 개가 사용되는 것을 보여준다. 첫번째 프래임의 소스는 Navigation에 대한 HTML을 포함하고 있는(navigation.html) Web page 이다. 이 프레임은 그것이 navigation bar 임을 나타내는 title 속성을 갖고 있다. 주요부분의 소스 파라미터가 보여주는 것처럼 두번째 프레임은 그 사이트의 주요 콘텐츠를 포함하고 있다. 기능을 식별하는 '주요 뉴스 콘텐츠'.
예제 코드:
<frameset cols="20%, *">
<frame src="navigation.html" name="navbar" title="Navigation Bar" />
<frame src="main.html" name="maincontent" title="Main News Content" />
<noframes>
<p>View <a href="noframe.html">no frame version</a>.</p>
</noframes>
</frameset> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML 4.01 The FRAMESET element
HTML 4.01 The FRAME element
웹페이지가 콘텐츠를 구성하기 위한 프레임을 사용하고 있다면
콘텐츠의 반복되는 블록이 개별적인 프레임으로 구성되 었는지 확인하라.
되반복되는 콘텐츠가 있는 프레임이 각 프레임셋 내의 동일한 위치에 나타나는지 확인하라.
#1과 #2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기법의 목적은 연관된 form controls 에 대한 의미론적 그룹화를 제공하는 것이다. 사용자는 컨트론의 관계를 이해하고 이로써 좀더 빠르고 효율적으로 form과 상호작용할 수 있다.
Form controls는 fieldset 요소로 그것들을 묶어서 그룹화 할 수 있다. 지정된 fieldset 안에있는 모든 컨트롤은 다음과 같은 관련이 있다. fieldset 안에 있는 첫번째 요소는 legend 요소가 돼야 하고, 이는 그 그룹에 대한 꼬리표나 지침을 제공해준다. 과도할 경우 혼란을 야기할 수 있긴 하지만, 원한다면 fieldset을 중첩시킬 수 있다.
관련된 라디오 버튼과 체크박스를 위해 그룹화 컨트롤이 가장 중요하다. 그것들 모두가 단일 필드 이름에 대한 값을 전송할 때 일련의 라디오 버튼이나 체크박스는 연결 된다. 라디오 버튼과 체크박스가 다중 컨트롤인 반면 선택 목록은 단일 컨트롤 이란 것만 제외하면, 그것들은 선택 목록과 같은 방식으로 작동하기 때문에, 사용자는 일련의 옵션에서 선택을 할 수가 있다. 그것들은 다중 컨트롤이기 때문에, 단일 커트롤처럼 좀더 쉽게 다루어 질 수 있도록 의미론적으로 그룹화 돼는 게 특히 중요하다. 흔히, 유저들에게 그것들이 같은 그룹의 한 부분이라는 것을 상기시켜 주기 위해, 사용자 에이전트는 각 컨트롤의 꼬리표 앞에 legend의 값을 표시할 것이다.
라디오 버튼과 체크박스만큼이나 타이트하게 연결돼 있지 않은 다른 컨트롤 세트들을 집단화 하는 것 또한 유용하다. 예를 들어, 사용자들의 주소를 모으는 몇몇 필드들은 "Address"의 legend와 함께 그룹화 될 지 모른다.
브라우저의 기본값 표시 때문에, 가끔씩 작성자는 그룹화된 컨트롤 주위에 테두리를 그리는 fieldset 요소의 사용을 피한다. 작적 그룹화 또한 유용하니까 작성자는 그것을(시각적 그룹화) 유지(보유)하는 것을(또는 어떤 형태의 시각적 그룹화) 심각하게 고려해야한다. 시각적인 효과는 CSS에서 fieldset의 "border" 속성과 legend의 "position" 속성을 재정의하여 수정할 수 있다.
관련된 라디오 버튼의 작은 그룹이 명확한 지침과 고유한 선택을 포함할때는, fieldset과 legend를 사용할 필요가 없을 수도 있다. ; H44: form control에 text lable을 연결하기 위해 lable 엘러먼트 사용하기, 가 충불한 지 모른다.
이 예제는 하나의 질문에 5가지의 가능한 답변이 있는 테스트 아이템을 보여 준다. 각 대답은 라디오(무선) 버튼에 의해 표시 된다. (input type="radio") 그 라디오(무선) 버튼들은 fieldset 안에 포함돼 있다. 시험 문제는 legend 아이템으로 태그되어 있다.
예제 코드:
<fieldset>
<legend>The play <cite>Hamlet</cite> was written by:</legend>
<input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">William Shakespeare</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label for="kipling">Rudyard Kipling</label><br />
<input type="radio" id="gbshaw" name="hamlet" value="c">
<label for="gbshaw">George Bernard Shaw</label><br />
<input type="radio" id="hem" name="hamlet" value="d">
<label for="hem">Ernest Hemingway</label><br />
<input type="radio" id="dickens" name="hamlet" value="e">
<label for="dickens">Charles Dickens</label>
</fieldset>
사용자는 웹사이트의 사용자 프로필 페이지에서 여러가지 체크박스를 선택하여 그들의 관심사를 표시할 수 있다. 각 체크박스 (input type="checkbox") 는 label를 갖고 있다. 그 체크박스들은 fieldset에 포함돼 있고, legend 요소는 체크박스 전체 그룹에 대한 프롬프트를 포함하고 있다.
예제 코드:
<fieldset>
<legend>I am interested in the following (check all that apply):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label><br />
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label><br />
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>
이 예제는 사용자가 한 명의 철학자만 선택하도록 요구한다. 각 필드에 같은 "name" 속성이 있는데, 이는 라디오 버튼들이 관련돼 있다는 것을 나타내며 (그것들은 모두 같은 필드를 전송한다.) 보여지는 것처럼 그룹화 되어야 한다는 것에 주의하라. 참고로 동일한 "name" 속성 에서도 "id"속성은 고유해야한다.
예제 코드:
<form action="http://example.com/vote" method="post">
<fieldset>
<legend>Your preferred philosopher</legend>
<input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
<label for="philosopher_socrates">Socrates</label>
<input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
<label for="philosopher_plato">Plato</label>
<input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
<label for="philosopher_aristotle">Aristotle</label>
</fieldset>
</form> 참고: 사용자가 그 필드에 대해 하나이상의 표현을 선택하는 것만 제외하면 관련된 checkbox 그룹들도 같은 방식으로 작동한다.
이 예제에서, 주거 및 우편 주소에 대한 입력양식 필드는 각 fieldset 그룹화에서 legend의 값으로 구별 된다.
예제 코드:
<form action="http://example.com/adduser" method="post">
<fieldset>
<legend>Residential Address</legend>
<label for="raddress">Address: </label>
<input type="text" id="raddress" name="raddress" />
<label for="rzip">Postal/Zip Code: </label>
<input type="text" id="rzip" name="rzip" />
...more residential address information...
</fieldset>
<fieldset>
<legend>Postal Address</legend>
<label for="paddress">Address: </label>
<input type="text" id="paddress" name="paddress" />
<label for="pzip">Postal/Zip Code: </label>
<input type="text" id="pzip" name="pzip" />
...more postal address information...
</fieldset>
</form>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML 4.01 Checkboxes
논리적으로 연결된 입력 요소들의 그룹이 fieldset 요소 안에 포함돼 있는지 확인하라.
2.같은 name 속성인 type="radio" 또는 type="checkbox"의 input 요소중 어떤 그룹은 fieldset 요소 안에 포함되어 있다는 것을 확인하라.
3.각 fieldset에 그 그룹에 대한 설명을 포함하고있는 legend 요소가 있는지 확인하라.
위의 모든 확인 결과를 만족해야 한다.
HTML 4.01, XHTML 1.x
이 기술과 관련된 것들:
이 기법의 목적은 데이터가 어떻게 테이블로 구성돼 있는지에 관한 간략한 개요나 또는 테이블을 탐색(검색)하는 방법에 관한 간단한 설명을 제공하는 데 있다. table 요소의 summary 속성은 화면 낭독기를 사용하는 사람들이 사용할 수 있도록 되어 있으며, 정보를 시각적으로 표시하지는 않는다.
summary는 테이블이 복잡한 구조일 때 유용하다. (예를 들어, 여러 개의 행 또는 열 제목이 있을 때, 혹은 여러개의 열 또는 행의 그룹이 있을 때) summary는 많은 데이터 열 또는 행을 포함하고 있는 간단한(단순한) 데이터 테이블에 도움이 될 수 있다.
summary 속성은 테이블이 caption 엘러먼트를 포함하든지 안하든지 사용될 수 있다. 두 가지(summary 속성, caption 엘러먼트)가 다 사용된다면, 축약은 캡션을 중복하지 않아야 한다.
WCAG 2 가 레이아웃 테이블의 사용을 금하진 않지만, HTML 테이블 엘러먼트의 정의된 의미론적 의미를 유지하기 위해 그리고 콘텐츠에서 프리젠테이션을 분리하는 코딩 관행에 따르기 위해 CSS를 기반으로하는 레이아웃이 권장된다.
하지만, 레이아웃 테이블이 사용된다면, 그 땐 summary 속성은 사용되지 않거나 null 이여야 한다. 레이아웃 테이블의 용도는 단순히 콘텐츠의 배치를 컨트롤 하기 위한 것이다 즉, 테이블 그 자체는 사용자에게 '투명'하다. summary는 테이블에 대한 주의를 환기시켜서 이 투명성을 "break" 할 것이다. 레이아웃 테이블의 null summary (summary="")는 허용된다.
이 예제는 버스 시간표를 보여준다. 노선 번호와 목적지 방향이 버스 시간표를 보는 방법에 대한 정보와 함께 summary에 포함 되어 있다.
예제 코드:
<table summary="Schedule for Route 7 going downtown. Service begins
at 4:00 AM and ends at midnight. Intersections are listed in the top row.
Find the intersection closest to your starting point or destination, then read
down that column to find out what time the bus leaves that intersection.">
<tr>
<th scope="col">State & First</th>
<th scope="col">State & Sixth</th>
<th scope="col">State & Fifteenth</th>
<th scope="col">Fifteenth & Morrison</th>
</tr>
<td>4:00</td>
<td>4:05</td>
<td>4:11</td>
<td>4:19</td>
</tr>
…
</table> 이 예제에서는 summary속성과 caption 엘러먼트를 모두가 사용 된다. caption은 버스 노선을 식별(확인) 한다. summary는 앞을 보지 못하는 사용자들이 그 시간표를 이해할 수 있도록 도와준다. 스크린 리더기는 그 caption을 읽고, 그런 다음 summary을 읽는다.
예제 코드:
<table summary="Intersections are listed in row 1.
Find the intersection closest to your starting point
or destination, then read down that column to find
out what time the bus leaves that intersection.
Service begins at 4:00 AM and ends at midnight.">
<caption>Route 7 Downtown (Weekdays)</caption>
…
</table>참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML 4.01 summary attribute
레이아웃 테이블 검사: 열과 행 모두에서 콘텐츠가 다른 콘텐츠와 관계를 갖는지 안 갖는지를 결정하라.
“no," 라면 그 테이블은 레이아웃 테이블이다.
“yes," 라면 그 테이블은 데이터 테이블이다.
그 테이블이 레이아웃 테이블 이라면, summary 속성이 표시되지 않았거나 혹은 summary 속성이 null 인지를 확인하라.
그 테이블이 데이터 테이블이고 summary이 표시된다면, summary속성이 테이블의 구성이나 테이블 사용법에 대한 설명을 서술하고 있는지 확인하라.
summary 속성과 caption 엘러먼트 모두가 이 데이터 테이블에 표시된다면, summary이 그 caption을 중복하지 않는지 확인하라.
레이아웃 테이블에 대해, #2의 확인 결과를 만족해야 한다.
데이터 테이블에 대해, #3 과 #4의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기법의 목적은 스펙에 따라(맞게) 사용되지 않는 시작 및 종료 태그와 관련된 콘텐츠를 분석(parse)하려고 할 때, 보조 기술에 문제를 일으키는 것으로 알려진 키 에러를 방지 하기 위한 것이다. 기술 및 기술 버전을 명시(지정)하는 HTML과 XHTML 메커니즘을 이용하여 이러한 에러를 방지할 수 있고, 웹페이지에 이러한 유형의 에러가 없도록 할수 있다. 개발자가 사용할수 있는 몇 가지 유효성 검사기가 있는데, 보통 유효성 검사 보고서가 이러한 유형의 에러를 언급해준다. 이 기법은 오직 올바르지 못한 시작 및 종료 태그와 관련된 에러만 다룬다(처리한다). 이런 형식의 평가에 문서 형식 선언이 꼭 필요한 것은 아니지만, 문서 형식 선언을 명시(지정)하면 유효성 검사기를 좀더 쉽게 사용할 수 있다.
HTML 페이지는 문서 형식 선언(!DOCTYPE 명령문 이라고도 하는) 을 포함한다.
개발자는 모든 id 속성 값이 고유하다는 것과 종료 태그가 스펙에 따라(맞게) 사용 되었다는 것을 검사하기 위해 오프라인 또는 온라인 유효성 검사기를 사용할 수 있다. (아래의 리소스를 보라.)
다른 XML 기반 문서들 처럼, XHTML 문서는 문서 유형 정의(DTD)나 다른 유형의 XML 스키마를 참조한다. 개발자는 시작 및 종료 태그가 스펙에 따라(맞게) 사용 되었다는 것을 검사하기 위해 오프라인 또는 온라인 유효성 검사기(편집기를 집어 넣은 유효성 검사 도구를 포함하는)를 사용할 수 있다.
웹사이트가 정적인 페이지 만을 제공하지 않고, HTML 이나 XHTML 을 동적으로 생성할 때, 개발자는XHTMLUnit, XML Test Suite 또는 생성된 HTML 코드를 검사하는 유사 프레임워크를 사용할 수 있다.
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
Do not forget to add a doctype by the W3C Quality Assurance Initiative explains what doctypes are and why you should use them.
Recommended DTDs to use in your Web document by the W3C Quality Assurance Initiative is a list of commonly used declarations.
How do I validate my code or check for possible errors? describes the tools in the free editor HTML-Kit for checking HTML, CSS and XML.
For other 참고 자료, see G134: Validating Web pages.
(현재는 없음)
필수 종료 태그와 함께 모든 엘러먼트의 종료 태그가 있다는 것을 확인할 것.
종료 태그가 금지된 곳에는 모든 엘러먼트의 종료 태그가 없다는 것을 확인할 것.
모든 엘러먼트의 시작과 종료 태그가 바르게 중첩되었는지 확인할 것.
과정 1,2 그리고 3의 확인 결과를 만족해야 한다.
XML을 기반으로 하는 모든 마크업 언어들
이 기술과 관련된 것들:
이 기법의 목적은 콘텐츠를 구문 분석하려고 할 때, 보조 기술에 대한 문제를 일으키는 것으로 알려진 키 에러를 예방하기 위함이다. 만약 유효성 보고서가 적격성 에러를 언급한다면, 적격 XML parser 와 검사로 그 문서를 구문분석하여 규정에 맞게 잘 짜여졌는지를 확인 할 수 있다. 적격성 에러가 발견됐을 때는, 모든 적격 XML parser 가 적격성을 체크해야하고 정상(정규) 처리과정은 중지해야 한다. (적격 XML paser 는 유효성 검사를 지원할 필요가 없음.)
XML 파일들은 문서 형식의 선언, xsi:schemaLocation 요소 또는 스키마에 대한 다른 유형의 참조를 포함하고 있다. 개발자는 적격성 검사를 위해 오프라인 또는 온라인 유효성 검사기, XML 에디터 혹은 IDE를 XML의 지원으로 (아래의 리소스를 보라.) 사용할 수 있다.
XML 파일이 문서 형태의 선언, xsi:schemaLocation 어트리뷰트 또는 스키마를 참조하는 처리 명령을 포함하고 있지 않을 때, 비록 그들을 위한 스키마가 있다 하더라도, 관련 스키마는 명령 라인의 지시, 사용자 대화 상자, 설정 파일에 의해 명시된다. 그리고(그런 다음) XML 파일을 그 스키마와 비교하여 검사한다.
XML 파일이 문서 형태의 선언, xsi:schemaLocation 요소 또는 스키마를 참조하는 처리 명령을 포함하고 있지 않을 때, 비록 그들을 위한 스키마가 있다 하더라도, 네임스페이스는 스키마 문서나 리소스 디렉토리를 검색(처리)하기 위해 역참조 된다. (리소스 디엑토리 설명 언어: RDDL) 그리고(그런 다음) XML 파일을 그 스키마와 비교하여 검사한다.
웹사이트가 정적인 문서들만 제공하지 않고, XML을 동적으로 생성할 때, 개발자는 생성된 그 XML 코드를 검사하기 위해 XMLUnit, XML Test Suite 또는 유사 프래임 워크를 사용할 수 있다.
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
Well-Formed XML Documents in Extensible Markup Language (XML) 1.0 (Third Edition), W3C Recommendation 04 February 2004.
Well-Formed XML Documents in Extensible Markup Language (XML) 1.1, W3C Recommendation 04 February 2004.
4.3.2 Well-Formed Parsed Entities in Extensible Markup Language (XML) 1.1, W3C Recommendation 04 February 2004.
For other 참고 자료, see G134: Validating Web pages.
(현재는 없음)
유효성을 검사하는 XML parser 에 각 파일을 로드 하라.
적격성 에러가 없다는 것을 확인하라.
과정 2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기법의 목적은 사용자를 혼란스럽게 하지 않으면서 클라이언트 쪽에서 리디렉트를 가능하게 하기 위함이다. 리디렉트는 가급적 서버 쪽에서 사용된다 (see 'SVR1: 클라이언트 쪽 보다는(대신에) 서버 쪽에서 자동 리디렉트 사용하기(SERVER).' 를 보라), 그러나 작성자가 언제나 서버 쪽 기술들을 제어할 필요는 없다.
HTML 과 XHTML 에서는, meta 요소에서 "Refresh" 로 설정된 http-equiv 속성 값과 "0" (0초를 의미하는) 으로 설정된 content 속성의 값을 사용할 수 있으며 그 뒤를 이어서 브라우저가 요청해야하는 URI를 사용할 수 있다. 새 페이지가 로드되기 전에 콘텐츠가 표시되는 것을 피하기 위해 시간 제한을 0 으로 설정하는 것이 중요하다. 리디렉트 코드를 포함하고 있는 페이지는 리디렉트와 관련된 정보만을 담고 있어야 한다.
예제 코드:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
</head>
<body>
<p>This page has moved to a <a href="http://thetudors.example.com/">
theTudors.example.com</a>.</p>
</body>
</html> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
문서에서 모든 meta 엘러먼트를 찾을 것.
각 meta 엘러먼트 대해, "refresh"(대/소문자 구분 안함) 값의 http-equiv 속성과 그 뒤를 이어 0보다 큰 숫자의 content 속성이 포함돼 있는지 확인하라. 그러면 ;'URL=anyURL' 이다. (anyURL이 현재 페이지를 교체(대체)해야하는 URI를 나타내는 곳.)
과정 2의 확인 결과를 실패여야 한다.
링크를 포함하고 있는 모든 기법들.
이 기술과 관련된 것들:
이 기법의 목적은 그 링크와 해당 리스트 아이템 내용에서 링크의 목적을 확인(식별)하는 것이다. 링크를 둘러싸고 있는 list item은, link item이 가장 가까운 블럭 레벨의 부모 엘러먼트 일때, 컨텍스트가 제공되지 않으면 불문명할 링크를 위해 컨텍스트를 제공한다. 그러한 설명은 사용자가 웹 페이지에서 다른 목적지로 대려가주는 링크와 이 링크를 구별할 수 있도록 해주고, 사용자가 그 링크를 따라가야 하는지 여부를 결정하는 것을 돕는다. 단순히 목적지의 URI를 제공하는 것만으로는 일반적으로 충분한 설명이라 할 수 없다는 것을 기억하라.
주의: 추가 정보가 그 링크에 선행하여 그 링크를 이해해야 할 필요가 있다면, 이러한 설명은 사용자들에게 매우 유용할 것이다. 추가 정보가 링크를 뒤따르게 되면, 페이지를 순서대로(위에서 아래로) 읽는 스크린 리더기 사용자들에겐 매우 혼란스럽고 어렵게 느껴질 것이다.
예제 코드:
<ul>
<li>
Check out the video report for last year's
<a href="festival.htm">National Folk Festival</a>.
</li>
<li>
<a href="listen.htm">Listen to the instruments</a>
</li>
<li>
Guitar Man: George Golden talks about
<a href="mkguitars.htm">making guitars</a>.
</li>
</ul>예제 코드:
<ul>
<li>
<a href="tomb_raider.htm">Tomb Raider: Legend</a>
<a href="tomb_raider_images.htm">See Images</a>
<a href="tomb_raider.mpeg">(Download Demo)</a>
</li>
<li>
<a href="fear_extraction.htm">F.E.A.R. Extraction Point</a>
<a href="fear_extraction_images.htm">See Images</a>
<a href="fear_extraction.mpeg">(Download Demo)</a>
</li>
<li>
<a href="call_of_duty.htm">Call of Duty 2</a>
<a href="call_of_duty_images.htm">See Images</a>
<a href="call_of_duty.mpeg">(Download Demo)</a>
</li>
<li>
<a href="Warhammer 40K.htm">Warhammer 40K</a>
<a href="warhammer_40k_images.htm">See Images</a>
<a href="Warhammer_40k.mpeg">(Download Demo)</a>
</li>
</ul> 이 기술을 위한 이용 가능한 자원은 없다.
이 기법을 사용하는 콘텐츠 내의 각 링크에 대해:
링크가 목록 아이템(항목)의 일부인지 확인하라.
해당 enclosing list item의 텍스트와 결합된 링크의 텍스트가 그 링크의 목적(용도)을 설명하는 지 확인하라.
위 모든 항목의 확인 결과를 만족해야 한다.
링크를 포함한 모든 기술들.
이 기술과 관련된 것들:
JAWS 5.0 과 그 이후에 나온 것은 아래의 키 입력을 포함하고 있다:
alt+leftArrow: 이전 문장 읽기
alt+rightArrow: 다음 문장을 읽기
alt+NumPad 5: 현재 문장 읽기
Ctrl+NumPad5: 현재 단락 읽기
"현재 문장 읽기" 라는 키스트로크는 아래의 예제 1, 2 ,4 를 지원한다. 링크에 포커스가 있을 때 alt+numPad 5 를 누르면 그 문장을 포커스 변경 없이 읽을 수 있다.
"현재 단락 읽기" 라는 키스트로크는 아래의 예제 3 을 지원한다. 링크에 포커스가 있을 때 Ctrl+NumPad 5 를 누르면 포커스 변경 없이 전체 단락을 읽을 수 있다.
Window-Eyes 5.5 는 현재의 문장과 단락을 읽기 위한 단축기를 갖고 있어서 아래에 열거된 예들을 지원한다.
WindowEyes 로 인터넷 서핑을 하기 위해서는 브라우즈 모드 상태여야 한다. 현재 문장과 현재 단락 단축키는 버전 6.1의 브라우즈 모드에선 작동하지 않는다.
주변 링크 컨텍스트를 읽기 위한 팩토리 디폴트 세팅은 다음과 같다.:
Desktop settings:
Character = CTRL-NUMPAD-LEFT ARROW
Word = CTRL-NUMPAD-RIGHT ARROW
Line = CTRL-NUMPAD-CENTER
Sentence = 브라우즈 모드에선 사용 불가
('다음 문장' 명령은 데스크탑 모드 디폴트에 의해 정의되지 않고, 그 다음 줄은 '아래쪽 화살표' 이다.)
Next Paragraph = P
Prior Paragraph = Shift P
Current Paragraph = 브라우즈 모드에선 사용 불가
Laptop
Character = ALT-SHIFT-LESS THAN
Word Prior = ALT-SHIFT-J
Word = ALT-SHIFT-K
Word Next = ALT-SHIFT-L
Sentence Prior = ALT-SHIFT-7
Sentence = 브라우즈 모드에선 사용 불가
Sentence Next = 브라우즈 모드에선 사용 불가
Paragraph = 랩탑에서는 디폴트에의해 정의되지 않음
Line Prior = ALT-SHIFT-U
Line = ALT-SHIFT-I
Line Next = ALT-SHIFT-O
Fire Vox (Ctrl+Shift+u)에서 "speak parent elemen(부모 엘러먼트를 말하라)" 라는 명령은 예제 3을 지원한다. 이 키스트로크(키 입력)는 포커스를 변경하지 않고 작동한다. Fire Vox는 Firefox 1.0 과 그 이후에 나온 것을 위해 특별히 고안된 무료 스크린 리더기이며, 윈도우, 매킨토시, 리눅스를 지원한다.
이 기법의 목적은 해당 단락 컨텍스트에 있는 링크에서 링크의 목적을 식별하는 것이다. 단락으로 감싸진 링크를 컨텍스트로 제공할 때 불분명한 링크에 대한 단락은 가까운 인근 블록 레벨의 부모 요소를 말한다. 이 설명은 사용자가 웹 페이지에서 다른 목적지로 이동하는 링크와 이 링크를 구별할 수 있도록 해주고. 사용자가 그 링크를 따라가야 하는지 여부를 결정하는 것을 돕는다. 단순히 목적지의 URI를 제공하는 것만으로는 일반적으로 충분한 설명이라 할 수 없다는 것을 기억하라.
주의: 추가 정보가 그 링크에 선행하여 그 링크를 이해해야 할 필요가 있다면, 이러한 설명은 사용자들에게 매우 유용할 것이다. 추가 정보가 링크를 따라간다면, 페이지를 순서대로(위에서 아래로) 읽는 스크린 리더기 사용자들에겐 매우 혼란스럽고 어렵게 느껴질 것이다.
민속 축제 웹 페이지의 공지사항 칼럼.
예제 코드:
<h3>The final 15</h3>
<p>Coming soon to a town near you...the final 15 in the
National Folk Festival lineup.
<a href="final15.html">[Read more...]</a>
</p>
<h3>Folk artists get awards</h3>
<p>Performers from the upcoming National Folk Festival receive
National Heritage Fellowships.
<a href="nheritage.html">[Read more...]</a>
</p>
… 이 기법은 사용 가능한 리소스가 없다.
이 기법을 사용하는 content 내의 각 링크에 대해:
그 링크가 한 단락의 일부인지 확인하라.
그것의 바깥쪽 단락 텍스트와 결합된 링크의 텍스트가 그 링크의 목적을 설명하는지 확인하라.
위 항목 결과를 만족해야 한다.
링크를 포함한 모든 기술들.
이 기술과 관련된 것들:
이 기법의 목적은 해당 데이터 테이블 컨텍스트에 있는 링크에서 링크의 목적을 확인하려는 것이다. 이 컨텍스트는 링크를 둘러싸고 있는 테이블 셀이며, 그 셀은 (테이블의)제목과 연결돼 있다. 데이터 테이블 컨텍스트에서 용도가 규정되지 않은 불분명할 링크에 대한 목적을 제공할 때 테이블 셀은 가장 가까운 block 레벨의 부모요소에 목적을 제공한다. 그것은 사용자가 웹 페이지에서 다른 목적지로 대려가주는 링크와 이 링크를 구별할 수 있도록 해주고, 사용자가 그 링크를 따라가야 하는지 여부를 결정하는 것을 돕는다. 단순히 목적지의 URI를 제시하는 것으로는 장애가 있는 사람들, 특히 인지장애가 있는 사람들에게는 충분한 설명이 될 수 없다는 것을 기억하라.
예제 코드:
<table>
<tr>
<th></th>
<th id="a1">Alamo</th>
<th id="a2">Budget</th>
<th id="a3">National</th>
<th id="a4">Avis</th>
<th id="a5">Hertz</th>
</tr>
<tr>
<th id="b1">Economy cars</th>
<td headers="a1 b1"><a href="econ_ala.htm">$67/day</a></td>
<td headers="a2 b1"><a href="econ_bud.htm">$68/day</a></td>
<td headers="a3 b1"><a href="econ_nat.htm">$72/day</a></td>
<td headers="a4 b1"><a href="econ_av.htm">$74/day</a></td>
<td headers="a5 b1"><a href="econ_hz.htm">$74/day</a></td>
</tr>
<tr>
<th id="b2">Compact cars</th>
<td headers="a1 b2"><a href="comp_ala.htm">$68/day</a></td>
<td headers="a2 b2"><a href="comp_bud.htm">$69/day</a></td>
<td headers="a3 b2"><a href="comp_nat.htm">$74/day</a></td>
<td headers="a4 b2"><a href="comp_av.htm">$76/day</a></td>
<td headers="a5 b2"><a href="comp_hz.htm">$76/day</a></td>
</tr>
<tr>
<th id="b3">Mid-sized cars</th>
<td headers="a1 b3"><a href="mid_ala.htm">$79/day</a></td>
<td headers="a2 b3"><a href="mid_bud.htm">$80/day</a></td>
<td headers="a3 b3"><a href="mid_nat.htm">$83/day</a></td>
<td headers="a4 b3"><a href="mid_av.htm">$85/day</a></td>
<td headers="a5 b3"><a href="mid_hz.htm">$85/day</a></td>
</tr>
<tr>
<th id="b4">Full-sized cars</th>
<td headers="a1 b4"><a href="full_ala.htm">$82/day</a></td>
<td headers="a2 b4"><a href="full_bud.htm">$83/day</a></td>
<td headers="a3 b4"><a href="full_nat.htm">$89/day</a></td>
<td headers="a4 b4"><a href="full_av.htm">$91/day</a></td>
<td headers="a5 b4"><a href="full_hz.htm">$91/day</a></td>
</tr>
</table> 이 기술을 위한 이용 가능한 자원은 없다.
이 기법을 사용하는 콘텐츠 내의 각 링크에 대해:
링크가 테이블 셀 안에 있는지를 확인하라.
관련된 테이블 제목의 텍스트와 결합된 링크의 텍스트가 그 링크의 목적을 설명하는지 확인하라.
위 항목 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
JAWS에서 이 기법을 활용할 수 있는 명령은 "JAWS KEY + T" 이다.
이 기법의 목적은 해당 제목 컨텍스트에 의해 제공된 컨텍스트에서 링크의 목적(용도)을 설명 하려는 것이다. 앞에 오는 제목은 컨텍스트자 제공되지 않으면 불문명할 링크를 위해 컨텍스트를 제공한다. 그 설명은 사용자가 웹페이지에서 다른 목적지로 대려가주는 링크와 이 링크를 구별할 수 있도록 해주고. 사용자가 그 링크를 따라가야 하는지 여부를 결정하는 것을 돕는다.
Note: 가능하면 추가 컨텍스트 요구 없이 링크의 목적(용도)을 식별하는 링크 텍스트를 제공하라.
각 호텔에 대한 정보는 호텔의 이름, 설명 그리고 지도, 사진, 지시, 게스트 리뷰 및 예약 양식에 링크된 일련의 것들로 구성되어 있다.
예제 코드:
<h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
<ul class="horizontal">
<li><a href="royal_palm_hotel_map.html">Map</a></li>
<li><a href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a href="royal_palm_hotel_book.html">Book now</a></li>
</ul>
<h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
<ul class="horizontal">
<li><a href="hotel_three_rivers_map.html">Map</a></li>
<li><a href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a href="hotel_three_rivers_book.html">Book now</a></li>
</ul> 예제 코드:
<h2>Annual Report 2006-2007</h2>
<p>
<a href="annrep0607.html">(HTML)</a>
<a href="annrep0607.pdf">(PDF)</a>
<a href="annrep0607.rtf">(RTF)</a>
</p> 예제 코드:
<h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
<p>this week was a stellar week for the stock market as investing in gold rose 2%.
<a href="Stockmarket_05052007.htm>More here</a></p> 이 기술을 위한 이용 가능한 자원은 없다.
이 기법을 사용하는 컨텐트에서 각각의 링크를 위해:
그 링크 앞에 오는 제목 엘러먼트를 찾으라.
제목이 그 링크의 목적(용도)을 설명하는 텍스트와 결합된 링크의 텍스트를 확인하라.
#2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
컨텍스트 정보가 프로그래밍 방식으로 링크와 결합돼 있긴 하지만, 보조 기술은 멀리있는 링크에서 포커스 이동 없이 상위 부모 목록 아이템을 읽기 위한 명령이 없다.
이 기법의 목적은, 아래에 목록이 중첩된 리스트 항목이 제공한 컨텍스트로 만들어진 중첩된 목록에서 링크의 목적을 설명하려는 것이다. 이 목록 항목은 컨텍스트가 제공되지 않으면 불분명하게 될 링크를 위해 컨텍스트를 제공한다. 설명은 사용자가 웹페이지에서 다른 목적지로 대려가주는 링크와 이 링크를 구별할 수 있도록 해주고. 사용자가 그 링크를 따라가야 하는지 여부를 결정하는 것을 돕는다.
Because current assistive technologies do not include commands to query information contextual information provided by parent list items, use of this technique requires users to navigate the list one item at a time. 현재의 보조 기술은 부모 목록 항목이 제공하는 질의 정보 콘텐츠 정보에 대한 명령을 포함하고 있지 않기 때문에, 이 기법을 사용하는 사용자는 한 번에 한 아이템씩 탐색할 수 있어야 한다. 그래서, 이 기법은 매우 길거나 과중하게 중첩된 목록에 대해선 적절하지 않을 수 있다.
Note: 가능하면 추가 컨텍스트 요구 없이 링크의 목적(의도, 용도)을 식별하는 링크 텍스트를 제공하라.
예제 코드:
<ul>
<li>Annual Report 2005-2006
<ul>
<li><a href="annrep0506.html">(HTML)</a></li>
<li><a href="annrep0506.pdf">(PDF)</a></li>
<li><a href="annrep0506.rtf">(RTF)</a></li>
</ul>
</li>
<li>Annual Report 2006-2007
<ul>
<li><a href="annrep0607.html">(HTML)</a></li>
<li><a href="annrep0607.pdf">(PDF)</a></li>
<li><a href="annrep0607.rtf">(RTF)</a></li>
</ul>
</li>
</ul> 각 호텔에 대한 정보는 호텔의 이름, 설명 및 지도, 사진, 지시, 게스트 리뷰 그리고 예약 양식에 링크된 일련의 것들로 구성되어 있다.
예제 코드:
<ul>
<li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
<ul class="horizontal">
<li><a href="royal_palm_hotel_map.html">Map</a></li>
<li><a href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a href="royal_palm_hotel_book.html">Book now</a></li>
</ul>
</li>
<li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
<ul class="horizontal">
<li><a href="hotel_three_rivers_map.html">Map</a></li>
<li><a href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a href="hotel_three_rivers_book.html">Book now</a></li>
</ul>
</li>
</ul> 이 기법은 사용 가능한 리소스가 없다.
이 기법을 사용하는 콘텐츠 내의 각 링크에 대해:
ul 또는 링크 1을 담고있는 엘러먼트를 찾을 것.
이 목록 엘러먼트(ul, ol)가 li 요소의 자식이라는 것을 확인하라.
li 요소가 그 링크의 목적을 설명하는 텍스트와 결합된 링크의 텍스트를 확인하라.
위 항목의 확인 결과를 만족해야 한다.
HTML 4.01 Transitional과 XHTML 1.0 Transitional
이 기술과 관련된 것들:
이 기법의 목적은 사용자가 요청하지 않은 새 창의 출현이 야기할 수 있는 혼란을 막기 위한 것이다. 갑자기 새 창을 열면 일부 사용자는 혼란스러워 하거나 (무엇을)완전히 놓칠 수 있다. HTML 4.01 Transitional 과 XHTML 1.0 Transitional에서는 자동 팝업 대신, target 속성이 새 창을 열기 위해 사용된다. (target 속성은 HTML 4.01 Strict 과 XHTML 1.0 Strict 에서 삭제됐다.) target을 사용하지 않으면, 새 창이 열려야 하는지 여부를 사용자가 결정하도록 한다는 것에 주의하라. target 속성의 사용은 사용자가 새 창을 연다는 것을 컴퓨터가 읽을 수 있는 지시를 분명하게 제공한다. 사용자 에이전트는 새 창이라고 사용자에게 알릴 수 있고, 새 창을 열지 않는다고 설정될 수도 있다. 보조 기술을 사용하지 않을 때를 위해, 링크 텍스트로도 지시가 가능하다.
아래는, 링크의 target 속성을 사용해서 새 창에서 열린다는 것을 지시하는 예제를 보여주고 있다.
예제 코드:
<a href="help.html" target="_blank">Show Help (opens new window)</a>문서상의 각 링크를 활성화 해서 새창이 열리는지 여부를 체크하기
새 창을 여는 각 링크에 대해, target 속성을 사용하는지 체크하라.
링크가 새 창에서 열린다는 것을 지시하는 정보가 링크 텍스트에 담겨 있는지 체크하라.
#2와 #3의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기법의 목적은 select 요소의 선택 부작용으로 동작이 발생하도록 내버려 두기 보다는, 동작이 실행될때 사용자가 컨트롤 할 수 있도록 하기 위함이다. 사용자는 동작의 발생을 야기하지 않고도, 다양한 select 요소 값을 살펴 볼 수 있고. 또는 우연히 잘못된 값을 선택 할 수도 있다. 만족스러운 선택을 했으면, 사용자는 그 동작을 실행하기 위한 버튼을 선택한다.
select 요소의 옵션을 통한 탐색이 컨트롤 값을 변경하기 때문에, 이것은 키보드를 매개로 select 요소 값을 고르는 사용자에게 특히 중요하다.
웹 페이지는 사용자가 특정 연도와 달을 선택할 수 있도록 해주고, 그 달에 대한 달력을 보여준다. 사용자가 연월을 설정한 후에는 "Show" 버튼을 눌러서 달력을 나타나게 할 수 있다. 이 예제는 동작을 실행시키기 위해 스크립팅하는 클라이언트 쪽에 보여지는 모습이다.
예제 코드:
<label for="month">Month:</label>
<select name="month" id="month">
<option value="1">January</option>
<option value="2"> February</option>
...
<option value="12">December</option>
</select>
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">A select select 요소는 가능한 동작의 목록을 포함하고 있다. 사용자는 "Do it" 버튼을 눌러야 동작이 실행된다.
예제 코드:
<form action="http://somesite.com/action" method="post">
<label for="action">Options:</label>
<select name="action" id="action">
<option value="help">Help</option>
<option value="reset">Reset</option>
<option value="submit">Submit</option>
</select>
<button type="submit" name="submit" value="submit">Do It </button>
</form> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
각각의 select 요소/button 요소의 조합에 대한:
select 요소에서 option의 포커스(키보드 포커스를 포함하여)에서 어떤 동작도 발생하지 않는다는 것을 체크하라.
버튼을 선택하면 select의 현재 value와 관련된 동작이 실행되는지 체크하라.
모든 항목의 확인 결과를 만족해야 한다.
사용자 입력 요소들이 있는 HTML, XHTML 페이지들.
이 기술과 관련된 것들:
optgroup 요소는 스크린 리더에 의한 지원을 받지 못한다.
option 과 optgroup에 대한 label 속성은 사용자 에이전트간에 일관성없이 지원되며, 보조 기술에 의해 지원되지 않는다.
이 기술의 목적은 선택목록에서 항목들을 그룹화 하기 위함이다. 선택목록은 허용된 다중선택목록 또는 콤보상자 같은 폼 컨트롤에 대한 값들의 모음이다. 보통, 선택항목은 관련 옵션들을 갖고 있다. 그러한 그룹들은 단순히 "더미" 목록 항목과 구분하는 것 보다는, 의미론적으로 식별되어야 한다. 이것은 사용자 에이전트들이 옵션들에 대한 빠른 스키밍을 지원하는 그룹으로 옵션을 축소할 수 있게 하고, 관심 옵션이 어떤 그롭 속에 위치해야 하는지 지시한다. 그것은 또한 시각적으로 긴 목록을 열어서 사용자가 좀더 쉽게 관심있는 옵션을 위치시킬 수 있도록 한다.
HTML에서, select 요소는 다중 선택 목록 과 콤보 박스를 만들어 내는데 사용된다. 가지각색의 허용된 옵션들은 각각 option 요소로 지정된 것들이다. 옵션들을 하나로 모으려면, 관련된 option 요소들과 함께 optgroup 요소를 써라. label 속성으로 그 그룹을 레이블 하면 사용자는 그 그룹 내부에서 예상되는 것을 알 수 있다.
optgroup 요소는 select 요소 내에 곧바로 있어야 하고, option 요소는 optgroup 내에 곧바로 있어야 한다. 사실 설계 의도를 작성자가 고려해야 할 경우 비록 select 요소에 대해 단일 option 요소 및 optgroup 그룹을 포함할 수 있다 하더라도 optgroup 요소를 중첩할 수 없다. 그래서 select 내의 하나의 그룹만 수행할 수 있다.
아래 콤보 박스는 좋아하는 음식에 대한 데이터를 모아 놓았다. 타입으로 그룹화하면 사용자들은 그들이 선호하는 것을 좀더 빨리 선택할 수 있다.
예제 코드:
<form action="http://example.com/prog/someprog" method="post">
<label for="food">What is your favorite food?</label>
<select id="food" name="food">
<optgroup label="Fruits">
<option value="1">Apples</option>
<option value="3">Bananas</option>
<option value="4">Peaches</option>
<option value="5">...</option>
</optgroup>
<optgroup label="Vegetables">
<option value="2">Carrots</option>
<option value="6">Cucumbers</option>
<option value="7">...</option>
</optgroup>
<optgroup label="Baked Goods">
<option value="8">Apple Pie</option>
<option value="9">Chocolate Cake</option>
<option value="10">...</option>
</optgroup>
</select>
</form> 아래 예제는 optgroup 요소를 이용하여 멀티 select 박스를 만드는 방법을 보여준다.
예제 코드:
<form action="http://example.com/prog/someprog" method="post">
<label for="related_techniques"><strong>related techniques:</strong></label>
<select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
<optgroup label="General Techniques">
<option value="G1">G1: Adding a link at the top of each page ... </option>
<option value="G4">G4: Allowing the content to be paused and restarted ... </option>
<option value="G5">G5: Allowing users to complete an activity without any time... </option>
<option value="G8">G8: Creating an extended audio description for the ... </option>
<option value="G9">G9: Creating captions for live synchronized media... </option>
<option value="G10">G10: Creating components using a technology that ... </option>
</optgroup>
<optgroup label="HTML Techniques">
<option value="H2">H2: Combining adjacent image and text links for the same ... </option>
<option value="H4">H4: Creating a logical tab order through links, form ... </option>
<option value="H24">H24: Providing text alternatives for the area ...
</option>
</optgroup>
<optgroup label="CSS Techniques">
<option value="C6">C6: Positioning content based on structural markup... </option>
<option value="C7">C7: Using CSS to hide a portion of the link text... </option>
</optgroup>
<optgroup label="SMIL Techniques">
<option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
<option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
<option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
</optgroup>
<optgroup label="ARIA Techniques">
<option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
<option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
<option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
<option value="ARIA4">ARIA4: Using WAI-ARIA to programmatically identify form ... </option>
</optgroup>
<optgroup label="Common Failures">
<option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
<option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
<option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images ... </option>
<option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
</optgroup>
</select>
</form> 참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
확인 하려면 select 목록 안에 있는 option의 집합을 체크하라.
관련 옵션들의 그룹이 있다면, optgroup으로 모아져야 한다.
#2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
보조 기술들은 타이틀 속성을 말해주는 것에 대한 다양한 수준의 지원을 제공한다. 일부는 타이틀 속성을 경유하여 제공한 정보에 유저가 접근하는 기능을 보함하지 않는다.
이 기법은 (사용자 에이전트가)타이틀 속성의 접근성을 지원하는 경우에만 가능하다. 이 속성이 접근성이 지원되기 위해서는 텍스트 속성의 내용이 모든 키보드 사용자(텍스트 음성 변환 소프트웨어 뿐만 아니라)가 이용할 수 있어야 한다.
JAWS 6.2 과 더 높은 버전 그리고 WindowEyes 5.0 와 높 은 버전은 abbr(축약어) 와 acronym(두문자어) 요소를 지원한다. 이러한 요소들은 모두 타이틀 요소를 말 하도록 설정될 수 있다. 하지만 이것은 기본 설정이 아니며, 종종 사용자에 의해 켜지지 않기도 한다.
많은 그래픽 사용자 에이전트들은 abbr이나 acronym 요소의 텍스트를 그 주변이나 아래쪽을 점선으로 렌더링 한다. 게다가 마우스가 요소의 위에 떠있으면 확장된 툴팁으로 표시된다.
Internet Explorer 7 과 그보다 낮은 버전에서는 abbr 요소를 사용해 표시한 항목은 어떤 추가 서식으로도 표현되지 않는다. IE 6 과 그 보다 낮은 버전에서는 마우스를 올려놓아도 확장된 툴팁으로 표시하지 않는다.
지정된 사용자 에이전트나 보조기술 내에서 abbr 과 acronym 요소는 같은 방식으로 표시 된다.
그래픽이 인터넷에서 보편적으로 사용되기 전에는 그림(사진)이나 그래픽을 형성하기 위해 종종 아스키 문자가 배열되었다. 비록 아스키 아트(art)가 이제는 웹상에서 자주 사용되진 않는다 해도, 그게 사용되면 맹인들과 스크린리더기를 이용하여 인터넷을 접속하는 사람들에게는 매우 혼란스러워진다는 점을 꼭 명심해야 한다. 만약 아스키 문자가 사용된다면 그 그림이 무엇인지 텍스트 설명이 있어야 한다. 또한 아스키 아트를 건너뛸 수 있는 링크가 있다는 것을 제시해야 한다.(이것은 필수 사항은 아니다.)
이모티콘은 매우 인기가 높다. 이모티콘은 얼굴 표정을 그려놓은 아스키 케릭터들과 감정을 전달하기 위한 그 외의 방법을 갖고 있다. 그것들이 스크린리더 사용자들을 혼란스럽게 할 수 있다. 가능하다면 이모티콘 대신에 간단히 "스마일" 이라는 단어를 사용하는 것이 좋다. 하지만 이모티콘이 사용되는 경우, 대체텍스트가 있어야 한다. 어떤 컨텍스트, 블로그나 포럼의 소프트웨어 에서는 플러그인이 이모티콘처럼 사용되는 아스키 케릭터를 대체텍스트를 이용해서 자동으로 HTML 이미지로 변환하는 것이 가능하다.
Leetspeak 는 라틴어 문자를 대체하기 위해 아스키 케릭터의 다양한 조합을 이용한다. Leet(=Leetspeak?)가 인터넷 문화와 비속어의 한 부분이 되고 있다. Leet 은 텍스트와 스펨 필터를 깨기위해 자주 사용된다. 스크린 리더를 사용하는 맹인들은 보통 그것을 이해할 수가 없다. 그래서 그 결과 Success Criteria 1.1.1. 에 맞추기 위해 대체텍스트를 제공해야 한다.
Note: 이 기술에 대한 지원이 제한되어 있기 때문에 제작자는 텍스트의 대체 텍스트를 제공하는 것이 좋다.
아래에서 "fright" 를 대신하는 이모티콘에 대한 대안을 제시하기 위해 세가지 옵션을 보여주고 있는데, 그것은 숫자 8이나 하이픈 또는 숫자 0에 의해 등호 밖에서 만들어 진다.
예제 코드:
=8-0 (fright)
<abbr title="fright">=8-0</abbr>
<img src="fright.gif" alt="fright"/>
여기 이전 그림의 설명과 함께 아스키 아트가 있다. 아스키 아트를 뛰어넘기 위한 링크를 포함하고 있다. Skip ASCII example.
예제 코드:
Figure 1: ASCII art picture of a butterfly.
<a href="#skipbutterfly">Skip ASCII image</a>
LLLLLLLLLLL
__LLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
L _LLLLLLLLLLLLLLLLLLLLLLL
LL LLLLLL~~~LLLLLLLLLLLLLL
_L _LLLLL LLLLLLLLLLLLL
L~ LLL~ LLLLLLLLLLLLL
LL _LLL _LL LLLLLLLL
LL LL~ ~~ ~LLLLLL
L _LLL_LLLL___ _LLLLLL
LL LLLLLLLLLLLLLL LLLLLLLL
L LLLLLLLLLLLLLLL LLLLLL
LL LLLLLLLLLLLLLLLL LLLLL~
LLLLLLLL_______ L _LLLLLLLLLLLLLLLL LLLLLLLL
~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~ LLLLLL
______________LLL LLLLLLLLLLLLLL ______LLLLLLLLL_
LLLLLLLLLLLLLLLLLLLL LLLLLLLL~~LLLLLLL~~~~~~ ~LLLLLL
___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____ _LLLLLL_
LLLLLLLLLLL~~ LLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLL ~~~LLLLL
__LLLLLLLLLLL _LLLLLLLLLLLLLLLLL_ LLLLLLLLLLLLLLLLLL_ LLLLL
LLLLLLLLLLL~ LLLLLLLLLLLLLLLLLLL ~L ~~LLLLLLLLLLLLL LLLLLL
_LLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL_ LL LLLLLLLLL LLLLLLLLL
LLLLLLLLLLLLL LLLLLLLLLLLLL~LLLLLL~L LL ~~~~~ ~LLLLLL
LLLLLLLLLLLLLLL__L LLLLLLLLLLLL_LLLLLLL LL_ LL_ _ LLLLLL
LLLLLLLLLLLLLLLLL~ ~LLLLLLLL~~LLLLLLLL ~L ~LLLL ~L LLLLLL~
LLLLLLLLLLLLLLLL _LLLLLLLLLL LL LLLLLLL___ LLLLLLLLLL
LLLLLLLLLLLLLLLL LL~LLLLLLLL~ LL LLLLLLLLLLLL LLLLLLL~
LLLLLLLLLLLLLLLL_ __L _L LLLLLLLL LLL_ LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL L~ LLLLLLLL LLLLLLL~LLLLLLLLLLLLLLLL~
LLLLLLLLLLLLLLLLLLLL___L_ LL LLLLLLL LLLL LLLLLLLLLLLLLL
~~LLLLLLLLLLLLLLLLLLLLLLLL LLLLL~ LLLLL ~~~~~~~~~
LLLLLLLLLLLLLLLLLL_ _ LLL _LLLLL
~~~~~~LLLLLLLLLL~ LLLLLL
LLLLL _LLLLLL
LLLLL L L LLLLLLL
LLLLL__LL _L__LLLLLLLL
LLLLLLLLLL LLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
~LLLLLLLLLLLLLLLLL~~
LLLLLLLLLLLLL
~~~~~~~~~
<a name="skipbutterfly"></a> 다음은 "Austin Rocks"에 대한 Leetspeak 이다.
예제 코드:
<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr> 커먼 브라우저에서 페이지를 열어라
컨텐트가 아스키 아트, 이모티콘 그리고/또는 leetspeak를 포함하고 있는지 확인하라.
모든 아스키 아트 나 이모티콘 그리고/또는 leetspeak 앞이나 뒤에 대체텍스트가 있는지 확인하라.
#3의 테스트 절차를 만족해야 한다.
윈도우 창이 좁기 때문에 사용자 에이전트의 텍스트 리플로우가 충돌하지 않음
이 기술과 관련된 것들:
이 기법은 가로 스크롤링이 발생할 수 있는 곳의 상황을 회피하는데 도움을 준다.인지 장애와 보조 기술을 사용하지 않는 시력이 낮은 유저들과 많은 사람들은 가로 스크롤링을 필요로 하는 텍스트 블록이 야기하는 많은 문제를 겪는다. 창이 좁으면 텍스트 리플로우와 충돌하지 않는다는 것과 관계있다. 가장 좋은 방법은 백분율로 텍스트 블록 컨테이너의 너비를 정의 하는 것이다.
브라우저 창이 좁기 때문에 작성자가 픽셀이나 포인트와 같은 절대적인 측정을 사용한 너비를 지정하지 않는 한 HTML과 XHTML 사용자 에이전트는 자동으로 텍스트 리플로우 한다.
이 신문 사이트는 사용자 에이전트 창의 너비로 조절하는 칼럼과 기사를 포함하고 있다. (예제는?)
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
보편적인 브라우저에서 텍스트를 담고 있는 컨텐트(내용물, 페이지)를 열어라.
스크린 너비의 1/4만큼으로 창을 줄여라.
컨텐츠가 특정 텍스트 라인을 읽기 위해 가로 스크롤을 요하지 않는지 확인.
#2의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
이 기법의 목적은 HTML과 XHTML을 스팩에 의해서 사용하려는 것이다. 기술 스팩은 그 의미와 기술의 특징들을 적절히 다루는 것을 정의하고 있다. 스팩에서 설명하고 있는 방식은 앞의 기능들을 사용하면, 보조기술을 포함하여, 사용자 에이전트가 저자의 의도와 서로 공동 이용이 가능하다는 것에 대해 정확한 기능의 표현을 제시할 수 있도록 해준다.
이 기술이 널리 발표 되었을 때 이기술에 대한 적절한 버전은 HTML4.01과 XHTML1.0이었다. HTML 4.01 은 HTML의 가장 발전된 최신 버전이고, 뛰어난 접근성을 제공함으로써 사용자 에이전트들에게 많은 지원을 받는다. XHTML 1.0 은 HTML 4.01이 HTML 구조보다 좀 더 엄격한 체계를 갖고 있는 것과 XML 구조를 이용한다는 것을 제외하고는 같은 기능들을 제공한다, 이런 기술의 나중에 나온 버전들은 완벽하지 않고 아직 사용자 에이전트들에게 지원을 받지 못하고 있다.
그 스팩에 따라 HTML과 XHTML을 사용하는 몇 가지 일반적으로 사용되는 방식이 있다.
스펙에 정의된 기능만을 사용. HTML은 일련의 요소와 속성 그리고 웹 페이지에서 사용될 수 있는 속성 값들을 정의한다. 이러한 기능은 특정 의미론적 의미를 갖고 있으며, 특정한 방식으로 사용자 에이전트에 의해 처리되게끔 계획되어 있다. 하지만, 가끔씩 부가 기술들은 평범한 프로그램 습관(관행)으로 나타나기도 한다. 이런 것들은 대게 처음에는 오직 하나의 에이전트에 의해 지원된다. 스펙에 없는 기능이 사용될 때는 많은 사용자 에이전트가 그 기능을 잠깐 동안 혹은 계속해서 지원하지 않을 수도 있다. 더 나아가, 이러한 기능을 사용하는 데 대한 표준스팩이 결여되어 있다면, 다양한 사용자 에이전트들이 제각각의 지원을 제공하게 될 것이다. 이는 접근성에 영향을 미치게 된다. 왜냐하면 일반적인 사용자 에이전트 보다 적은 자원으로 개발된 보조 기술이 유용한 지원을 추가할 경우 많은 시간이 소요될 수 있기 때문이다. 따라서 저작자는 예기치 않은 접근성 문제를 막기 위해서 HTML과 XHTML에서 정의 되지 않은 기능은 피해야 한다.
스팩에서 규정한 방식으로 기능을 사용. HTML 스펙은 특정 요소와 속성 그리고 속성 값들이 의미론적으로 어떻게 처리되고 이해되는지에 대한 구체적인 지침을 제공한다. 하지만, 때때로 작성자들은 스펙에서 지원하지 않는 방식으로 기능을 사용한다. 예를 들어, 전달하려는 근본적인 의미론적인 메시지를 의도함이 없이 시각적인 효과를 보여주기 위해 의미적인 요소를 사용하는 것과 같다. 이것은 사용자 에이전트와 그 페이지의 일관된 표현을 표시할 올바른 의미 정보에 의존하는 보조기술에 대해 혼란을 야기시킨다. 오직 HTML 스펙에 의해 규정된 HTML기능만을 사용하는 것이 중요하다.
내용을 분석할 수 있는지 확인하기 HTML 과 XHTML 도 사용자 에이전트에 의해 올바르게 처리되게 하기 위해, 내용이 어떻게 인코드 되어야 하는지를 정의 한다. 시작과 끝 태그, 속성과 값, 요소의 블록화? 등의 구조에 관한 규칙은 사용자 에이전트가 만들어진 문서상의 표현을 제공하는 방식으로 내용을 확실히 분석할 수 있도록 해준다. 스펙이 따른 기법을 사용할 때 스펙에 있는 구조 규칙을 따르는 것이 중요하다.
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
Refer to the 참고 자료 section of G134: Validating Web pages.
각각의 HTML 또는 XHTML페이지에 대한:
스팩에 정의된 요소와 속성 그리고 속성 값을 사용하는지 체크하라
요소와 속성 그리고 값이 적절한 스팩에 규정된 방식으로 사용되는지 체크하라
페이지가 스팩에 있는 규칙에 따라 정확하게 해석 가능한지 체크하라
Note: 체크 #1과 #3이 페이지 유효성 검사 도구를 이용하는 가장 쉬운 체크 방법이다. 체크 #2는 보통 수동 판단이 요구되지만, heuristic(?) 평가 도구의 도움으로 확인할 수 있다.
#1, #2 그리고 #3의 확인 결과를 만족해야 한다.
HTML과 XHTML
이 기술과 관련된 것들:
일부 현재의 보조기술은 서식 필드에 title 속성이 있을때 사용자에게 feedback을 제공한다.
일부 그래픽 user agents는 title 속성이 있는 서식 필드를 포함하는 곳에 마우스를 올렸을 때 툴팁을 표시한다. 그러나, 현재의 user agents 는 키보드를 통한 컨텐츠 접근시 title 속성을 지원하지 않고 있다.
일부 user agents 는 몇 초(약 5초) 후에 툴팁이 사라진다. 이것은 마우스를 사용하는 사용자가 title 속성을 접근할 경우 문제를 일으킬 수 있다. but have fine motor skill impairment, 그리고 툴팁을 읽을 시간이 더 필요한 사용자에게는 어려움을 초래할 수 있다.
대부분 사용자가 컨텐츠 title속성 표시의 크기조정, 배경색상조정, 위치이동 또는 기타 다른방법을 제어하는 것은 현재의 user agents로는 어렵다.
이 기술은 명시적으로 연관된 레이블 요소일 때만 사용할 수 있다. lable 이없는 경우, title 이 사용자 에이전트의 접근성을 지원하는 API중 하나로 사용된다. 부족한 부분은 아래의 도움말로 설명되어 있다.
이 기법의 목적은 사용자들이 title 속성의 도움말 정보를 제공받아 문맥에 맞는 양식에 데이터를 입력하도록 도움말을 제공하는 것이다. 도움말 형식으로는 정보 또는 입력의 예제를 포함할 수 있다.
참고: 현재 사용자 에이전트 및 보조 기술은 항상 title 속성에 포함된 정보를 사용자에게 제공하지는 않는다. 이 기술은 제목 속성 까지 지원이 확산될 때까지 피해야 한다.
매핑 응용 프로그램을 구성하는 입력 박스와 submit 버튼 값의 폼 레이블은 "주소:"와 "찾을 수 있는 지도"를 제공한다. 입력 박스에 title 속성 값은 사용자가 입력해야 할 주소 형식 예제 이다.
예제 코드:
<label for="searchAddress">Address: </label>
<input id="searchAddress" type="text" size="30" value="" name="searchAddress"
title="Address exemple: 101 Collins St, Melbourne, Australia" />
사용자가 자신의 청구서를 온라인으로 지불하는 방식으로 자신의 계정 번호를 입력하는 양식이다. 입력 박스에 관련된 "계좌 번호" 레이블의 정보를 제공하는 title 속성을 가지고 계좌번호를 찾을 수 있다.
예제 코드:
<label for="accNum1">Account number: </label>
<input id="accNum1" type="text" size="10" value="" title="Your account number
can be found in the top right-hand corner of your bill." />
텍스트 입력을 필요로하는 식별 폼 컨트롤.
각 폼 컨트롤은 명시적으로 연관된 레이블을 가지고 있는지
각 폼 컨트롤은 상황에 맞는 도움말을 title 속성에 제공 했는지 확인
#2와 #3의 확인 결과를 만족해야 한다.
외부 label을 이용한 HTML 과 XHTML 컨트롤.
이 기술과 관련된 것들:
HTML 과 XHTML 명세서에서는 명시적, 암시적 label 을 허용한다. 그러나, 일부
보조기술은 암시적 labels을 지원하지 않는다. (예를들어,
<label>First name <input type="text"
name="firstname"></label>).
JAWS 7.10(스크린리더)은 Windows XP 의 Internet Explorer 6.0 와 Firefox 1.5 으로 테스트 되었다. 그것은 text 필드의 label 이 가상 커서 와 서식 읽기 모드에서 label 의 명시적, 암시적 둘 모두를 읽어준다. 서식 모드 안에서는 체크박스와 라디오버튼의 label 이 암시적이라면 읽어주지 않는다.
Window-Eyes 5.5(스크린리더) 는 Windows XP 의 Internet Explorer 6.0 와 Firefox 1.5 으로 테스트 되었다. 그것은 서식 필드의 label은 항상 명시적 이어야 할 것이라고 말한다. browse on 모드에서는 서식 컨트롤의 암시적 label 에 대해서 말해주지 않는다. 그러나 browse off 모드일 때는 서식 제어 요소의 암시적 label을 말해준다.
User agents는 title 속성을 담고 있는 input 요소위에 마우스가 올라가져 있을 때 툴팁을 표시하게 된다. Title 속성은 보조기술에 드러나며, 많은 그래픽 브라우저에서 툴팁으로 표시된다.
툴팁은 키보드로 열 수 없고, 이 정보는 많은 키보드 사용자에게는 유효하지 않을 수도 있다.
만약 label 을 사용할 수 없는 경우, JAWS 와 Window-Eyes 는 서식 컨트롤이 포커스를 받을 때 title 속성을 말해준다.
label 과 title 이 서로 다를 때 JAWS 6.0 과 이전 버전에서는 둘 다 말하기 위해 놓여 있다는 것을 알지만, 일부 사용자 만이 이 설정을 알고있다.
WindowEyes 5.5 는 hot key(단축키) 를 가지고 있다, ins-E 는 포커스 된 항목과 함께 타이틀 속성을 포함한 정보를 표시한다.
일부 user agents는 (특히 Window-Eyes 스크린 리더) 서식 label의 특수문자 별표(*)를 기본적으로 소리내지 않는다. Window-Eyes 사용자들은 환경설정에서 이 동작을 수정할 수 있다. 그러나, 다수의 사용자들이 수정하지 않을 것이라고 예상해야 한다.
이 기술의 목적은 웹 어플리케이션에 있는 특정한 서식 컨트롤의 명확한 표시를 제공하기 위함이거나 서식의 데이터 전송을 성공적으로 하기 위해서다. 기호 또는 텍스트 label 요소를 사용하거나 또는 fieldset를 통해 연결된 컨트롤의 그룹에 대한 legend를 이용해서 컨트롤이 프로그래밍 분야와 관련된 것임을 나타냅니다 . 기호를 사용하는 경우, 사용자가 가장 먼저 사용하기 전에 그 의미의 것이 좋다.
아래 텍스트 필드의 예제 label 은 명백히 "First name (required):" 라고 되어 있다. (필수 입력 컨트롤을 나타내기 위함) input 요소의 id 속성과 label 요소의 for 속성이 일치하는 label 텍스트는 필수 컨트롤이라는 것을 나타낸다.
예제 코드:
<label for="firstname">First name (required):</label>
<input type="text" name="firstname" id="firstname" />
참고: 일부 저작자는 "required" 를 "req." 로 줄여 쓴다. 그러나 이런 요약의 제안은 입증되지 않았기 때문에 혼란 스러울 수 있다.
아래 텍스트 필드의 예제는 필수 컨트롤을 나타내기 위해 label에 별표를 포함하고 있다. form의 시작부분에 정의되는 별표는 중요함을 의미한다. 예제에서, 별표는 span요소 내에서도 시각이 손상된 분들이 보기 어려울 수 있도록 기본 별표를 크게 하는 스타일이 포함되어 있다.
예제 코드:
CSS:
.req {font-size: 150%}
HTML:
<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
<input type="text" name="firstname" id="firstname" />
아래 텍스트 필드의 예제는 필수 커트롤을 나타내기 위해 이미지를 포함하고 있다. form의 시작부분에 정의된 이미지는 중요함을 의미한다.
예제 코드:
<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label>
<input type="text" name="firstname" id="firstname" />
...
라디오버튼과 체크박스는 다른 상호 작용 컨트롤과는 다르게 각각의 라디오버튼과 체크박스로 부터 필수 상태가 필요한 것이 아니라 그룹에 대한 필수 상태가 필요하다. 보기에서 사용된 방법은 라디오버튼 과 체크박스에 1-3이 적용되지만, 필수 상태를 나타내기 위해서는 label 요소 대신 legend 요소에서 해야 한다.
예제 코드:
<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
각 form 컨트롤의 필수 컨트롤에는 label 또는 legend요소에 필수 상태가 표시되었는지 확인하라.
각 지표에 대한 필수 상태 표시의 의미는 그것을 사용하는 폼 컨트롤 전에 설명이 있는지 확인하라.
위 모든 항목의 확인 결과를 만족해야 한다.
HTML 서식 컨트롤 과 링크
이 기술에 관련해서:
이 기술의 목적은 표준 HTML 서식 컨트롤과 링크 요소가 사용자 인터페이스의 키보드 조작 과 정보처리상호운용 보조기술에 상호작용하기 위한 것이다.
사용자 에이전트는 HTML 서식 컨트롤과 링크의 키보드 작동을 제공한다. 또한, 사용자 에이전트는 접근성 API에 서식 컨트롤 과 링크를 지도로 나타낸다. 보조기술은 접근성 API를 이용하여 역할, 이름, 상태와 같은 적절한 접근성 정보를 발췌하고 그 가치를 사용자들에게 제시해야 한다. 역할은 HTML 요소에 의해 제공되고, 이름은 텍스트와 관련있는 요소에 의해 제공된다. 요소는 어떤 다수의 메커니즘 상태를 통해 적절한 상태와 가치를 드러내고 있다.
일부 경우, 텍스트는 속성을 통해 필요한 제어를 연관시킨다. 예를 들어, submit 버튼으로 사용하는 button 요소의 텍스트 또는 이미지 'alt' 속성이 이름으로 사용된다. 폼 컨트롤의 경우, label 요소 또는 'title' 속성이 사용 된다. 아래 표에서는 HTML 링크와 서식 컨트롤의 역할, 이름, 값 그리고 상태가 어떻게 결정되는지에 대해 설명한다.
| HTML element | 역할 | Name(의미 또는 내용 이라고 쓰이는것 같음) | Value | State |
|---|---|---|---|---|
| <a> | 링크 | 'title' 속성, <a>요소 안에 속한 text 또는 만약 이미지 링크라면 'alt' 속성을. 만약 텍스트와 이미지의 'alt' 속성을 둘 다 제공한다면 연결해서. | 'href' 속성 | |
| <button> | 누름 단추 | <button> 요소 안쪽 텍스트 또는 'title' 속성 | ||
| <fieldset> | 그룹화 | <legend> 요소 | ||
| <input type = "button", "submit", or "reset"> | 누름 단추 | 'value' 속성 | ||
| <input type = "image"> | 누름 단추 | 'alt' 속성 또는 'title' 속성 | ||
| <input type = "text"> | 편집 가능한 텍스트 | 연관되는 <label> 요소 또는 'title' 속성 | 'value' 속성 | |
| <input type = "password"> | 편집 가능한 텍스트 | 연관되는 <label> 요소 또는 'title' 속성 | 'value' 속성 | |
| <input type="checkbox"> | 체크박스 | 연관되는 <label> 요소 또는 'title' 속성 | 'checked' 속성 | |
| <input type="radio"> | 라디오 버튼 | 연관되는 <label> 요소 또는 'title' 속성 | 'checked' 속성 | |
| <select> | 콥보상자 목록 또는 드롭 다운 목록 | 연관되는 <label> 요소 또는 'title' 속성 | <option> 요소에서 'selected' 속성에 "selected" 라고 설정된 | |
| <textarea> | 편집 가능한 텍스트 | 연관되는 <label> 요소 또는 'title' 속성 | <textarea> 요소 안의 텍스트 |
사용자 에이전트는 이동하고 선택하기 위한 매커니즘을 제공한다. 다음 각각의 에제에서, <a href>의 역할은 링크 이다. 참고로 <a name>은 "link"로 규정하지 않는다. value 는 'href' 속성 안의 URI 이다.
예제 1a 에서, name 은 링크 안의 텍스트 이고, 이 경우엔 "Example Site" 이다.
예제 코드:
<a href="www.example.com">Example Site</a>
예제 1b 는 링크 안의 이미지의 'alt' 속성이 name 으로 제공된다. 그러나 Microsoft Inspect Objects와 같은 일부 API를 보기위한 도구에서는 이것이 떠오르지 않을것이다.
예제 코드:
<a href="www.example.com"><img src="example_logo.gif" alt="예제"></a>
예제 1c에서, name 은 링크 내부의 서로 다른 요소를 연결해서 "Example Text" 로 읽는다.
예제 코드:
<a href="www.example.com"><img src="example_logo.gif" alt="예제">Text</a>
HTML에서 버튼을 만드는 여러가지 방법이 있고, 그것들은 모두 "push button(누름 단추)" 역할을 한다.
예제 2a 에서, button 에 텍스트가 포함되어 있다면, 이 경우에는 "save"는 value 가 아니라 name 이 된다.
예제 코드:
<button>Save</button>
예제 2b 의 경우 'value' 속성의 "Save", "Submit", "Reset" 가 name 으로 사용된다.
예제 코드:
<input type="button" value="Save" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
예제 2c 경우 'alt' 속성 "save" 가 name으로 사용된다.
예제 코드:
<input type="image" src="save.gif" alt="save" />
예제 2d 에서는, 'alt' 속성이 없기 때문에 이 경우에는 'title' 속성 "save" 가 name 으로 사용된다.
예제 코드:
<input type="image" src="save.gif" title="save" />
예제 2e 의 경우에는 input 요소에 사용된 'alt' 속성이, name 으로 사용되고, title 속성을 사용되지 않는다.
예제 코드:
<input type="image" src="save.gif" alt="save" title="save" />
예제 3a에서, 입력 필드는 "편집 가능한 텍스트"의 역할을 한다. label 요소는 'for' 속성이 input 요소의 'id' 속성을 참고하여 input 요소와 연결된다. 이 경우에는 label 요소의 "Type of fruit" 가 name이 된다. 이것의 value 는 value 속성의 "bananas"가 된다.
예제 코드:
<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">
예제 3b 에서, 입력 필드는 예제 3a 과 같은 역할과 value 지만 'title' 속성에서 name 을 가저온다.
예제 코드:
<input id="text_1" type="text" value="bananas" title="Type of fruit">
예제 4 input 요소의 'type' 속성으로 부터 "checkbox" 역할을 한다. label 요소는 'for' 속성이 input 요소의 'id' 속성을 참고하여 input 요소와 연결된다. 이 경우에는 label 요소의 "cheese" 가 name이 된다. 이것의 상태는 'checked' 속성으로 "checked" 또는 "unchecked" 를 설정할 수 있다. 상태는 컨트롤과 상호작용에 의해 사용자가 변경할 수 있다.
예제 코드:
<label for="cb_1">Cheese</label>
<input id="cb_1" type="checkbox" checked="checked">
예제 5 input 요소의 'type' 속성으로 부터 "radio button" 역할을 한다. 이것은 name 을 label 요소로 부터 가져온다. 상태는 'checked' 속성으로 "checked" 또는 "unchecked" 를 설정할 수 있다. 상태는 사용자가 변경할 수 있다.
예제 코드:
<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
예제 6a select 요소는 "Combobox" 역할을 한다. name 은 label 요소의 "Numbers" 이다. select에 name 주는것 것을 잊는 것은 일반적인 과실이다. value는 option요소의 'selected' 속성에 "selected"가 설정된 것이다. 이 경우, 기본 value 는 "Two" 이다.
예제 코드:
<label for="s1">Numbers</label>
<select id="s1" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
예제 6b는 위와 같은 name, 역할, 그리고 value를 가지지만 name 을 select 요소의 'title' 속성으로 설정했다. 이 기법은 눈에 보이는 label 이 바람직 하지 않을때 사용할 수 있다.
예제 코드:
<select id="s1" title="Numbers" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
예제 7a 는 textarea 요소로 부터 "입력가능한 텍스트" 역할을 한다. name 은 label 요소에 의해 "Type your speech here" 이다. value 는 textarea 요소 안쪽의 본문 이고, 이 경우 "Four score and seven years ago" 이다.
예제 코드:
<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea>
예제 7b 는 같은 역할, name, 그리고 value 이지만, name 으로는 'title' 속성이 사용되었다.
예제 코드:
<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
라디오 그룹화 예제 8 은 "grouping" 역할을 한다. name 은 legend 요소에서 가져온다.
예제 코드:
<fieldset>
<legend>Choose a Color:</legend>
<input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br />
<input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br />
<input id="green" type="radio" name="color" value="green" /><label for="green">Green</label>
</fieldset>
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML source code 검사.
각각의 링크와 폼 요소 경우, name, value, and state 를 위 표에서 나타내는 것 처럼되어 있는지 확인하라.
#2의 확인 결과를 만족해야 한다.