이 문서는 W3C의 "WCAG 2.0를 위한 ARIA 기법(WCAG 2.0 기법의 일부, W3C 워킹 그룹 노트)"을 한글로 번역한 문서입니다. 이 문서는 번역 과정에서 발생하는 오류를 포함할 수 있습니다. 번역한 문서는 규범력을 갖지 않으며 오직 영어 버전만이 규범력을 갖습니다.
This documented is a translated copy of the W3C's "ARIA 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.
이 웹 페이지는 WCAG 2.0 기술 : 웹 콘텐트 접근성 가이드라인 2.0을 위한 기법과 장애에서 다룬 ARIA 기법을 다루고 있다. 이 기법에 대한 정보는 WCAG 2.0 기법 소개를 참고하고, 다른 기술에 대한 기법 목록은 목차를 참고하면 된다.
스크립트와 ARIA를 사용한 HTML과 XHTML
편집자 주: 이 기법은 ARIA 명세가 W3C 권고 상태가 되었을 때 적용할 수 있다.
이 기법은 다음과 관련있다:
2006년 10월부터 Windows용 Firefox 1.5 이후 버전과 Window-Eyes 5.5 이후 버전에서 ARIA 기술을 지원한다. 다른 사용자 도구나 보조기술에서의 지원은 진행중에 있다. 이 기법은 HTML 요소에 역할(role)을 정의하지 않아도 descibedby 속성을 사용할 수 있는 Firefox 2.0의 업데이트를 필요로 한다.
ARIA의 describedby 속성을 사용하면 사용자 도구가 프로그램을 통해 만든 사용자 인터페이스 콘트롤에 대한 설명(decriptive information)을 제공할 수 있는데, 설명 제공 방법을 보여주는 것이 바로 이 기법의 목적이다. ARIA 기법을 사용하면 어떤 HTML 요소에 대한 추가 정보를 제공하는 HTML 요소에 프로그램적으로 만들어진 정보를 추가할 수 있다. 사용자 도구는 이 추가 정보를 사용자에게 표현하기 위해 보조 기술에 정보를 제공할 수 있다. 예를 들어, 어떤 사용자 인터페이스 콘트롤을 둘러싼 콘텐트가 있고, 이 콘텐트에 사용자 인터페이스 콘트롤에 대한 추가 정보가 있다고 하자. 그런데, 사용자가 보조 기술을 사용해 콘트롤들을 탐색할 때는 이 추가 정보에 접근할 수 없는 경우가 있다. 이 때, describedby 속성을 사용할 수 있다.
이 예제는 스크립트를 사용해서 사용자 인터페이스 콘트롤에 describedby 속성을 추가한다. 여기서 스크립트의 사용은 반드시 필요한데, "describedby" 속성은 HTML 명세에는 포함되지 않아서 마크업에 직접 이 속성을 추가하면 유효하지 않은 마크업이 되기 때문이다. 네임스페이스를 지원하는 사용자 도구에서는 setAttributeNS() 응용프로그램 프로그래밍 인터페이스(Application Programming Interface, API)를 사용해 필수 속성을 할당한다. 그 밖의 다른 사용자 도구에서는 setAttribute() API를 사용해서 필수 속성을 할당하고, 네임스페이스는 describedby 속성 앞에 고정된 문자열을 덧붙여서 흉내낸다.
아래의 예제에는 buttonIds와 linkIds라는 두 개의 배열 변수를 만들었다. 각 배열은 HTML 요소의 아이디를 저장하고 있는데, 각 HTML 요소는 설명 문자열을 포함하고 있다. 각 배열은 describedby 속성을 필요로 하는 HTML 요소의 아이디로 색인되어 있다. setDescribedBy() 함수는 window 객체의 onload 이벤트에서 호출된다.
setDescribedBy() 함수는 페이지에 있는 모든 버튼 요소를 찾는다. 찾아낸 모든 버튼에 루프를 실행하고, 색인으로 버튼의 아이디를 사용해 buttonIds 배열에서 연관된 값을 찾는다. 이 아이디는 HTML 요소의 id 속성으로, 이 HTML 요소들은 버튼과 관련한 설명 문자열을 포함하고 있다. 만약 연관 id를 찾는다면, 스크립트는 setAttrNS() 함수를 사용해 버튼에 describedby 속성을 할당한다.
setDescribedBy() 함수는 또한 페이지의 모든 앵커 요소를 찾고 역시 비슷한 과정을 수행한다. linksId 배열에서 연관된 아이디를 찾고, setAttrNS() 함수를 사용해 각 링크에 describedby 속성을 각 링크에 할당한다.
setAttrNS() 함수는 setAttributeNS() API를 사용할 수 있는 경우에는 이 함수를 사용해서 required 속성을 설정한다. setAttributeNS() 함수는 ARIA의 상태와 속성 모듈에 적합한 네임스페이스 URI인 "http://www.w3.org/2005/07/aaa"를 사용한다.setAttrNS() 함수는 setAttributeNS() API를 호출한다. 만일 사용자 도구에서 setAttributeNS() API를 사용할 수 없는 경우에는 setAttribute() API를 사용하는데, 이 때 "aaa:"라는 정적인 문자열을 reuqired 속성 이름 앞에 덧붙여 네임스페이스를 흉내낸다.
ARIA를 지원하는 사용자 도구나 보조기술을 사용하면, 사용자 인터페이스 콘트롤이 포커스를 받을 때 추가 설명이 제공된다.
예제 코드:
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
<title>describedby 속성 데모</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
float:left;
width:400px;
}
.right {
width:100px;
text-align:right;
}
</style>
<script type="text/javascript">
//<![CDATA[
// 페이지에 있는 버튼의 아이디를 키로 사용하고, 버튼에 대해 설명하는
// 텍스트가 있는 요소의 아이디를 값으로 저장한 배열
var buttonIds = new Array();
buttonIds["fontB"]= "fontDesc";
buttonIds["colorB"] = "colorDesc";
buttonIds["customB"] = "customDesc";
// 페이지에 있는 링크의 아이디를 키로 사용하고, 링크에 대해 설명하는
// 텍스트가 있는 요소의 아이디를 값으로 저장한 배열
var linkIds = new Array();
linkIds["iceberg"] = "icebergInfo";
// 페이지를 읽어들이자마자 실행되는 함수
// 배열에 있는 아이디값에 해당하는 요소에 describedBy 속성을 설정한다.
function setDescribedBy(){
if (buttonIds){
var buttons = document.getElementsByTagName("button");
if (buttons){
var buttonId;
for(var i=0; i<buttons.length; i++){
buttonId = buttons[i].id;
if (buttonId && buttonIds[buttonId]){
setAttrNS(buttons[i], "describedby", buttonIds[buttonId]);
}
}
}
}
if (linkIds){
var links = document.getElementsByTagName("a");
if (links){
var linkId;
for(var k=0; k<links.length; k++){
linkId = links[k].id;
if (linkId && linkIds[linkId]){
setAttrNS(links[k], "describedby", linkIds[linkId]);
}
}
}
}
}
// 브라우저의 기능에 따른 속성 값 설정법
// setAttributeNS를 사용할 수 있으면 그 함수를 사용하고,
// 그렇지 않으면 속성 문자열 앞에 네임스페이스 역할을 하는 문자열을 추가해서 값을 설정한다.
function setAttrNS(elemObj, theAttr, theValue){
elemObj.setAttribute("aria-" + theAttr, theValue);
}
// 액션을 모의 실행하는 함수 - 현재는 경고창으로만 표시
function doAction(theAction){
alert("Perform the " + theAction + " action");
}
window.onload=setDescribedBy;
//]]>
</script>
</head>
<body>
<p>이 페이지의 버튼은 ARIA의 decribedby 속성을 사용해
버튼의 액션에 대한 상세 정보를 제공한다.</p>
<div class="form">
<p><span class="left" id="fontDesc" >이 페이지에서 사용할 글꼴과 글자 크기를 선택</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');"> 글꼴 </button></span>
</p>
<p><span class="left" id="colorDesc" >이 페이지에서 사용할 색상을 선택</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');"> 색상 </button></span>
</p>
<p><span class="left" id="customDesc" >이 페이지에서 사용할 레이아웃과 스타일을 설정</span>
<span class="right"><button id="customB" onclick="doAction('Customize');"> 설정 </button></span>
</p>
</div>
<p>다음 문단의 링크는 링크에 대한 추가 정보를 제공할 목적으로 ARIA의 describedby 속성을 사용해 업데이트 되었다.</p>
<p> <span id="icebergInfo">알래스카의 폭풍, 남극의 빙산을 깨뜨려</span>
이번 주 월요일에 미국 연구원들이 보고한 바에 따르면, 지난 10월 바다에서 발생한 알래스카의 폭풍이
6일 후 남극 주변의 거대한 빙산을 깨뜨렸다고 합니다.
<a href="http://www.sciencemag.com/iceberg.html" id="iceberg">더 보기...</a>.
</p>
</body>
다음은 같은 코드를 application:xhtml+xml이라는 MIME 타입을 사용한 XHTML로 작성한 것인데, 모든 사용자 도구가 이 MIME 타입을 지원하는 것은 아니다. 이 문서는 describedby 속성에 접근할 수 있는 XML 네임스페이스를 선언한다. describedby 정보가 XHTML 마크업에 직접 추가되므로, 별도의 스크립트는 필요하지 않다.
예제 코드:
<?xml version="1.0" encoding="UTF-8"?>
<!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="ko"
xmlns:waistate="http://www.w3.org/2005/07/aaa" >
<head>
<meta http-equiv="content-type" content="application:xhtml+xml; charset=utf-8" />
<title>describedby 속성 데모</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
float:left;
width:400px;
}
.right {
width:100px;
text-align:right;
}
</style>
</head>
<body>
<p>이 페이지의 버튼은 ARIA의 decribedby 속성을 사용해
버튼의 액션에 대한 상세 정보를 제공한다.</p>
<div class="form">
<p><span class="left" id="fontDesc" >이 페이지에서 사용할 글꼴과 글자 크기를 선택</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');" waistate:describedby="fontDesc">
글꼴 </button></span></p>
<p><span class="left" id="colorDesc" >이 페이지에서 사용할 색상을 선택</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');" waistate:describedby="colorDesc">
색상 </button></span></p>
<p><span class="left" id="customDesc" >이 페이지에서 사용할 레이아웃과 스타일을 설정</span>
<span class="right"><button id="customB" onclick="doAction('Customize');"
waistate:describedby="customDesc"> 설정 </button></span></p>
</div>
<p>다음 문단의 링크는 링크에 대한 추가 정보를 제공할 목적으로 ARIA의 describedby 속성을 사용해 업데이트 되었다.</p>
<p> <span id="icebergInfo">알래스카의 폭풍, 남극의 빙산을 깨뜨려</span>
이번 주 월요일에 미국 연구원들이 보고한 바에 따르면, 지난 10월 바다에서 발생한 알래스카의 폭풍이
6일 후 남극 주변의 거대한 빙산을 깨뜨렸다고 합니다.
<a href="http://www.sciencemag.com/iceberg.html" id="iceberg">더 보기...</a>.
</p>
</body>
</html>
참고 자료는 정보를 위해 제공되었을 뿐이므로, 내용을 지지하거나 동의한다는 뜻은 아니다.
ARIA를 지원하는 사용자 도구나 보조 기기를 사용해 페이지를 읽어들인다.
ARIA를 지원하는 사용자 도구를 사용해서 describedby 속성이 추가된 사용자 인터페이스 콘트롤들을 탐색하고, 사용자에게 설명이 제공되는지 확인한다.
2번 항목을 통과해야 한다.
Technologies that support ARIA의 상태와 속성.
이 기법은 다음과 관련있다:
Firefox 2.0은 WAI-ARIA를 일부 지원하는데, 역할(role)과 속성(property)을 플랫폼 접근성 API로 매핑한다. JAWS와 Window-Eyes는 이러한 속성들을 사용자에게 표현할 수 있다는 사실이 검증된 바 있다. Firefox의 음성 확장기능인 FireVox 역시 직접적인 DOM 접근을 통해 WAI-ARIA를 지원한다.
현재 이를 지원하는 다른 사용자 도구는 없다.
이 기법의 목적은 프로그램적인 방법으로 사용자 입력 필드가 필수 항목임을 가리키는 것에 있다. WAI-ARIA의 required 상태는 전송 전에 사용자의 입력이 필요한지 가리킨다. "required" 생타는 "true" 혹은 "false"의 값을 가질 수 있다. 예를 들어 사용자가 반드시 주소 필드를 입력해야 한다면, 해당 필드의 "required" 상태를 "true"로 설정하면 된다.
주: 어떤 요소가 필수라는 사실은 (콘트롤 뒤에 붙는 기호 등을 통해) 종종 시각적으로 표현하곤 한다. "required" 속성을 사용하면 사용자 도구에 어떤 요소가 필수라는 중요한 정보를 쉽게 전달할 수 있으며, 사용자 도구는 특유의 방법으로 사용자에게 이러한 정보를 알려준다.
WAI-ARIA의 상태와 속성은 XHTML 1.1 이상에서 지원되는 모듈이며, 명세 문서에서는 XHTML 등의 XML 기반 언어에서 속성을 제공하는 방법을 제공한다.HTML 문서에 접근성 역할(role)과 상태 메타데이타 포함하기를 참고하면 HTML과 XHTML 1.0에 WAI-ARIA의 상태와 속성을 제공하는 법에 대해 알 수 있다. 앞의 언어들은 ARIA의 상태와 속성과도 호환된다. 자세한 내용은 해당 언어의 문서를 참고하길 바란다.
주: 현재 WAI-ARIA는 진행중인 초안이다. 이 기법은 WAI-ARIA를 사용해 WCAG를 준수하려는 조직을 위해 참고용으로서 제공되었다. WAI-ARIA가 공식 명세가 되고 사용자 도구에서 이를 지원하게 되면, 이 기법은 정식 기법이 될 것으로 예상된다.
다음 소스 코드는 반드시 입력해야 하는 필드를 가리키는 "required" 속성을 사용한 XHTML 문서이다. 또한, 라벨에 필수 필드임을 표시하여 ARIA를 지원하지 않는 사용자 도구에 대한 대비책을 제공하고 있다.
예제 코드:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN"
"http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:aaa="http://www.w3.org/2005/07/aaa"
xml:lang="en">
<head>
<title>필수 입력 항목</title>
</head>
<body>
<h1>필수 입력 항목</h1>
<p>다음 폼 입력 필드는 폼을 전송하기 전에
반드시 사용자가 입력해야 한다.</p>
<form action="http://example.com/submit">
<p>
<label for="test">테스트 (필수)</label>
<input name="test" id="test" aaa:required="true" />
</p>
<p>
<input type="submit" value="전송" />
</p>
</form>
</body>
</html>
참고 자료는 정보를 위해 제공되었을 뿐이므로, 내용을 지지하거나 동의한다는 뜻은 아닙니다.
ARIA를 지원하는 사용자 도구에서 필수 폼 필드를 포함한 페이지에 접근한다.
필수 필드를 비워둔 채로 폼 전송을 시도한다.
사용자 도구에서 사용자가 빠뜨린 정보를 알려주는지 확인한다.
필수 필드에 값을 입력한다.
사용자 도구에서 정상적으로 전송이 진행되는지 확인한다.
3번과 5번 항목을 통과해야 한다.
ARIA의 상태와 속성을 지원하는 기술.
이 기법은 다음과 관련있다:
Firefox 2.0은 WAI-ARIA를 일부 지원하는데, 역할(role)과 속성(property)을 플랫폼 접근성 API로 매핑한다. JAWS와 Window-Eyes는 이러한 속성들을 사용자에게 표현할 수 있다는 사실이 검증된 바 있다. Firefox의 음성 확장기능인 FireVox 역시 직접적인 DOM 접근을 통해 WAI-ARIA를 지원한다.
현재 이를 지원하는 다른 사용자 도구는 없다.
이 기법의 목적은 프로그램적인 방법으로 만들어진 필드의 입력 범위를 정하는 것에 있다. WAI-ARIA의 valuemin과 valuemax 상태는 각각 사용자가 입력할 수 있는 최소값과 최대값을 제공한다. 사용자 도구는 제공된 범위를 넘어선 값을 입력할 수 없게 하거나 사용자가 범위를 넘어선 값을 입력했을 때 유효하지 않다는 에러를 발생시킨다.
WAI-ARIA의 상태와 속성은 XHTML 1.1 이상에서 지원되는 모듈이며, 명세 문서에서는 XHTML 등의 XML 기반 언어에서 속성을 제공하는 방법을 제공한다.HTML 문서에 접근성 역할(role)과 상태 메타데이타 포함하기를 참고하면 HTML과 XHTML 1.0에 WAI-ARIA의 상태와 속성을 제공하는 법에 대해 알 수 있다. 앞의 언어들은 ARIA의 상태와 속성과도 호환된다. 자세한 내용은 해당 언어의 문서를 참고하길 바란다.
주: 현재 WAI-ARIA는 진행중인 초안이다. 이 기법은 WAI-ARIA를 사용해 WCAG를 준수하려는 조직을 위해 참고용으로서 제공되었다. WAI-ARIA가 공식 명세가 되고 사용자 도구에서 이를 지원하게 되면, 이 기법은 정식 기법이 될 것으로 예상된다.
다음 텍스트 필드는 2007년도의 날짜만 입력할 수 있다:
예제 코드:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN"
"http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:aaa="http://www.w3.org/2005/07/aaa"
xmlns:xsd="http://www.w3.org/2001/XMLSchema-datatypes"
xml:lang="en">
<head>
<title>날짜 입력</title>
</head>
<body>
<h1>날짜 입력</h1>
<p>2007년도의 날짜만 입력할 수 있는 텍스트 입력.</p>
<form action="http://example.com/submit">
<p><label for="test">2007년도의 날짜 입력:</label>
<input name="test" id="test"
aaa:valuemin="2007-01-01" aaa:valuemax="2007-12-31"
aaa:datatype="xsd:date" /></p>
<p><input type="submit" value="전송" /></p>
</form>
</body>
</html>
아래 스핀 버튼은 사용자가 1부터 100까지의 숫자를 입력할 수 있도록 한다.
예제 코드:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN" "http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:aaa="http://www.w3.org/2005/07/aaa"
xmlns:xsd="http://www.w3.org/2001/XMLSchema-datatypes"
xml:lang="en">
<head>
<title>스핀 버튼</title>
</head>
<body>
<h1>스핀 버튼</h1>
<p>1부터 100까지의 숫자를 입력할 수 있는 스핀 버튼이다.
스핀 버튼은 텍스트 입력으로 구현되었는데, ARIA를 지원하지 않는 사용자 도구를 위한
대비책(fallback)이 필요했기 때문이다.</p>
<form action="http://example.com/submit">
<p><label for="test">1부터 100까지의 숫자 입력</label>
<input name="test" id="test" role="wairole:spinbutton"
aaa:valuemin="1" aaa:valuemax="100" aaa:datatype="xsd:integer" /></p>
<p><input type="submit" value="전송" /></p>
</form>
</body>
</html>
참고 자료는 정보를 위해 제공되었을 뿐이므로, 내용을 지지하거나 동의한다는 뜻은 아닙니다.
ARIA를 지원하는 사용자 도구를 사용해서 특정한 범위의 데이터를 필요로 하는 폼 필드가 있는 페이지에 접근한다.
입력 가능한 범위 외의 값을 입력하고, 폼 전송을 시도한다.
사용자 도구가 유효하지 않은 데이터에 대해 알려주는지 확인한다.
입력 가능한 범위 내의 정보를 제공하고, 폼 전송을 시도한다.
사용자 도구가 데이터를 받아들이고 전송이 진행되는지 확인한다.
3번과 5번 항목을 통과해야 한다.
스크립트를 사용하는 HTML, XHTML과 ARIA 지원.
편집자 주: 이 기술은 ARIA 명세가 W3C에서 권고 상태로 되면 적용된다.
이 기법은 다음과 관련있다:
2007년 1월부터 현재 버전의 ARIA 명세는 Window-Eyes 5.5 이상을 사용하는 윈도우즈의 Firefox 1.5 이상을 지원하며, JAWS 8.0 이상에 대해서도 일부 지원한다. 다른 사용자 도구와 보조 기술에 대한 지원은 진행중에 있다. 아직 모든 기술이 ARIA를 지원하는 것은 아니므로, 필드를 필수로 표기하기 위해 다른 기술도 충분히 사용하는 것이 중요하다. 이 기법은 HTML 요소의 역할(role)을 정의하지 않아도 필수(required) 속성을 사용할 수 있는 Firefox 2.0의 업데이트를 필요로 한다.
이 기법의 목적은 ARIA를 사용해 사용자의 입력이나 선택이 필요한 폼 콤포넌트를 프로그램적으로 확인하는 법을 보여주는 것에 있다. ARIA 기법은 프로그램적으로 만들어진 요소에 추가 정보를 제공할 수 있다. 사용자 도구는 이 추가 정보를 사용자에게 알리기 위해 보조 기술에 정보를 제공할 수 있다.
이 예제는 스크립트를 사용해서 폼 요소에 required 상태를 추가한다. 네임스페이스를 지원하는 사용자 도구에서는 setAttributeNS() API를 사용해 required 상태를 할당한다. 그 밖의 사용자 도구에서는 setAttribute() API를 사용해 required 상태를 할당하되 required 속성 앞에 고정 문자열을 추가해서 네임스페이스를 흉내낸다.
다음의 예제에서 배열 변수인 requiredIds는 필수(required)로 표기해야하는 요소의 아이디를 값으로 가지고 생성되었다. setRequired() 함수는 window 객체의 onload 이벤트에서 호출된다.
setRequired() 함수는 전달받은 모든 아이디에 루프를 실행해서 HTML 요소를 구한 후, setAttrNS() 함수를 사용해서 앞서 구한 요소에 required 상태를 할당한다.
setAttrNS() 함수는 setAttributeNS() API를 사용할 수 있는 경우에는 이 함수를 사용해서 required 속성을 설정한다. setAttributeNS() 함수는 ARIA의 상태와 속성 모듈에 적합한 네임스페이스 URI인 "http://www.w3.org/2005/07/aaa"를 사용한다. 만일 사용자 도구에서 setAttributeNS() API를 사용할 수 없는 경우에는 setAttribute() API를 사용하는데, 이 때 "aaa:"라는 정적인 문자열을 reuqired 속성 이름 앞에 덧붙여 네임스페이스를 흉내낸다.
Firefox 2.0 이상이나 Window-Eyes 5.5 이상을 사용하여 이 페이지에 접속할 때, 입력 필드의 레이블을 읽으면 Window-Eyes는 "required"라고 음성으로 안내한다.
예제 코드:
<head>
<script type="text/javascript">
//<![CDATA[
// 이 페이지에 있는 필수(required) 필드의 아이디 목록
var requiredIds = new Array( "firstName", "lastName");
// 페이지가 모두 읽히자 마자 실행되어 reuqiredIds 배열에 있는 아이디를 가진
// 모든 HTML 요소의 역할(role)을 필수(required)로 설정한다.
function setRequired(){
if (requiredIds){
var field;
for (var i = 0; i< requiredIds.length; i++){
field = document.getElementById(requiredIds[i]);
setAttrNS(field, "required", "true");
}
}
}
// 브라우저의 기능에 따른 속성 값 설정법
// setAttributeNS를 사용할 수 있으면 그 함수를 사용하고,
// 그렇지 않으면 속성 문자열 앞에 네임스페이스 역할을 하는 문자열을 추가해서 값을 설정한다.
function setAttrNS(elemObj, theAttr, theValue){
if (typeof document.documentElement.setAttributeNS != 'undefined') {
elemObj.setAttributeNS("http://www.w3.org/2005/07/aaa", theAttr, theValue);
}else{
elemObj.setAttribute("aaa:" + theAttr, theValue);
}
}
window.onload=setRequired;
//]]>
</script>
</head>
<body>
<p>다음 데이터를 입력하라. 필수 필드는 프로그램적인 방법으로 필수라고 표기했으며,
해당하는 필드 레이블에 별표(*)를 붙여두었다.</p>
<form action="submit.php">
<p>
<label for="firstName">이름(First Name) *: </label><input type="text" name="firstName"
id="firstName" value="" />
<label for="lastName">성(Last Name) *: </label><input type="text" name="lastName"
id="lastName" value="" />
</p>
</form>
</body>
참고 자료는 정보를 위해 제공되었을 뿐이므로, 내용을 지지하거나 동의한다는 뜻은 아닙니다.
(현재 수록된 것은 없음)
ARIA를 지원하는 사용자 도구나 보조 기술을 사용해 페이지를 읽어들인다.
각각의 필수 폼 요소를 탐색하며 "required"가 읽히는지 확인한다.
2번 항목을 통과해야 한다.