- From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
- Date: Fri, 8 May 2009 15:59:44 +0000 (GMT)
- To: public-wcag2-techs@w3.org
Submitter's Name: David Todd
Submitter's Email: dltodd@us.ibm.com
Technique ID: UNKNOWN
Short Name: Using WAI-ARIA to provide semantic role information for a JavaScript/CSS dialog.
Technique Category: ARIA Techniques
Success Criterion Reference: UNKNOWN
Applicability:
Use when a JavaScipt/CSS dialog is implemented.
UA Issues:
User agent and assistive technology must support WAI-ARIA.
Description:
The objective of this technique is to mark up Web content using the appropriate WAI-ARIA roles and properties in order to expose correct semantic information to assistive technologies.
The purpose of this technique is to demonstrate how to use the Accessible Rich Internet Application (WAI-ARIA) dialog, header, aria-labelledby, level and application attributes to provide semantic information about a JavaScript/CSS dialog that can be programmatically determined by user agents. WAI-ARIA techniques provide the ability to add programmatically determined information to an element which can provide additional information about the element. The user agent can provide this additional information to assistive technology for presentation to the user. For example, the dialog attribute can be used to provide information that enables an assistive technology to inform a user that a JavaScript/CSS widget is a dialog.
Example 1 Head: WAI-ARIA dialog widget technique
Example 1 Description:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.dialogContainer {
width: 16em;
display: none;
} .header {
border-bottom: 1px solid #DFDFDF;
background-color: #EFEFEF;
} .headertext {
padding-left: 0.5em;
} .dialogBody {
border: 1px solid #DFDFDF;
padding-bottom: 0.5em;
background-color: #F5F4F6;
}
form {
padding-top: 0.5em;
padding-right: 0.5em;
text-align: right;
}
.paddingTop {
padding-top: 0.5em;
}
</style>
<script type="text/javascript" language="JavaScript">
function showDialog(){
document.getElementById("dialogContainer").style.display = 'block';
// Important: Place focus on first focusable element in the dialog.
document.getElementById("firstName").focus();
}
function hideDialog(){
document.getElementById("dialogContainer").style.display = 'none';
// Important: Return focus to the element that previously had focus before the popup was rendered.
document.getElementById("dialogOpen").focus();
}
</script>
<title>WAI-ARIA dialog example</title>
</head>
<body>
<h1>WAI-ARIA dialog widget example</h1>
<p>
The following example demonstrates the use of the WAI-ARIA roles <code>application</code>, <code>dialog</code> and <code>header</code> to inform assistive technologies that the Javascript/CSS widget is a dialog.
The WAI-ARIA <code>aria-labelledby</code> and <code>level</code> properties are also used to label the dialog and indicate that the label is a level one heading.
</p>
<p>
Activate the button to render a dialog.<input id="dialogOpen" type="button" value="Show dialog" onclick="showDialog();"/>
</p>
<div role="application">
<div class="dialogContainer" id="dialogContainer" role="dialog" aria-labelledby="dialogLabel">
<div class="dialogBody" id="dialog1">
<div class="header">
<span class="headertext" id="dialogLabel" role="header" level="1">Personal information</span>
</div>
<form>
<div>
<label for="firstName">
First name:
</label>
<input type="text" id="firstName" name="firstName">
</div>
<div>
<label for="lastName">
Last name:
</label>
<input type="text" id="lastName" name="lastName">
</div>
<label for="phone">
Phone number:
</label>
<input type="text" id="phone" name="phone">
<div class="paddingTop"><input id="dialogClose" type="button" value="Submit" onclick="hideDialog();"/></div>
</form>
</div>
</div>
</div>
<h2>Test</h2>
<h3>Procedure</h3>
<ol>
<li>Load the page using a user agent and/or assistive technology that supports Accessible Rich Internet Applications.</li>
<li>Using a user agent and assistive technology that supports WAI-ARIA, navigate to the button and activate it.</li>
<li>Verify that the assistive technology identifies the exposed JavaScript/CSS widget as a dialog.</li>
</ol>
<h3>Expected Result</h2>
<p>Check that step number 3 under <strong>Procedure</strong> is true.</p>
</body>
</html>
Resource 1 Title: WAI-ARIA specification
Resource 1 URI: http://www.w3.org/wai/pf/aria
Resource 2 Title: WAI-ARIA best practices
Resource 2 URI: http://www.w3.org/wai/pf/aria-practices
Related Techniques:
G108
G115
G130
G131
Test Procedure:
1. Load the page using a user agent and/or assistive technology that supports Accessible Rich Internet Applications.
2. Using a user agent and assistive technology that supports WAI-ARIA, navigate to the button and activate it.
3. Verify that the assistive technology identifies the exposed JavaScript/CSS widget as a dialog.
Expected Result:
Check that step number 3 under Procedure is true.
Test File 1 Pass/Fail: pass
Additional Notes:
This technique is sufficient to meet the success criterion.
No guidelines reference was submitted!
No example 2 header was submitted!
No example 2 description was submitted!
No test file 1 was submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!
------------------------------------------------
<technique id="UNKNOWN">
<short-name>Using WAI-ARIA to provide semantic role information for a JavaScript/CSS dialog.</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>
<applicability>
Use when a JavaScipt/CSS dialog is implemented.
</applicability>
<ua_issues>
User agent and assistive technology must support WAI-ARIA.
</ua_issues>
<description>
The objective of this technique is to mark up Web content using the appropriate WAI-ARIA roles and properties in order to expose correct semantic information to assistive technologies.
The purpose of this technique is to demonstrate how to use the Accessible Rich Internet Application (WAI-ARIA) dialog, header, aria-labelledby, level and application attributes to provide semantic information about a JavaScript/CSS dialog that can be programmatically determined by user agents. WAI-ARIA techniques provide the ability to add programmatically determined information to an element which can provide additional information about the element. The user agent can provide this additional information to assistive technology for presentation to the user. For example, the dialog attribute can be used to provide information that enables an assistive technology to inform a user that a JavaScript/CSS widget is a dialog.
</description>
<examples>
<ex_head_1>
WAI-ARIA dialog widget technique
</ex_head_1>
<ex_desc_1>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.dialogContainer {
width: 16em;
display: none;
} .header {
border-bottom: 1px solid #DFDFDF;
background-color: #EFEFEF;
} .headertext {
padding-left: 0.5em;
} .dialogBody {
border: 1px solid #DFDFDF;
padding-bottom: 0.5em;
background-color: #F5F4F6;
}
form {
padding-top: 0.5em;
padding-right: 0.5em;
text-align: right;
}
.paddingTop {
padding-top: 0.5em;
}
</style>
<script type="text/javascript" language="JavaScript">
function showDialog(){
document.getElementById("dialogContainer").style.display = 'block';
// Important: Place focus on first focusable element in the dialog.
document.getElementById("firstName").focus();
}
function hideDialog(){
document.getElementById("dialogContainer").style.display = 'none';
// Important: Return focus to the element that previously had focus before the popup was rendered.
document.getElementById("dialogOpen").focus();
}
</script>
<title>WAI-ARIA dialog example</title>
</head>
<body>
<h1>WAI-ARIA dialog widget example</h1>
<p>
The following example demonstrates the use of the WAI-ARIA roles <code>application</code>, <code>dialog</code> and <code>header</code> to inform assistive technologies that the Javascript/CSS widget is a dialog.
The WAI-ARIA <code>aria-labelledby</code> and <code>level</code> properties are also used to label the dialog and indicate that the label is a level one heading.
</p>
<p>
Activate the button to render a dialog.<input id="dialogOpen" type="button" value="Show dialog" onclick="showDialog();"/>
</p>
<div role="application">
<div class="dialogContainer" id="dialogContainer" role="dialog" aria-labelledby="dialogLabel">
<div class="dialogBody" id="dialog1">
<div class="header">
<span class="headertext" id="dialogLabel" role="header" level="1">Personal information</span>
</div>
<form>
<div>
<label for="firstName">
First name:
</label>
<input type="text" id="firstName" name="firstName">
</div>
<div>
<label for="lastName">
Last name:
</label>
<input type="text" id="lastName" name="lastName">
</div>
<label for="phone">
Phone number:
</label>
<input type="text" id="phone" name="phone">
<div class="paddingTop"><input id="dialogClose" type="button" value="Submit" onclick="hideDialog();"/></div>
</form>
</div>
</div>
</div>
<h2>Test</h2>
<h3>Procedure</h3>
<ol>
<li>Load the page using a user agent and/or assistive technology that supports Accessible Rich Internet Applications.</li>
<li>Using a user agent and assistive technology that supports WAI-ARIA, navigate to the button and activate it.</li>
<li>Verify that the assistive technology identifies the exposed JavaScript/CSS widget as a dialog.</li>
</ol>
<h3>Expected Result</h2>
<p>Check that step number 3 under <strong>Procedure</strong> is true.</p>
</body>
</html>
</ex_desc_1>
<ex_head_2>
</ex_head_2>
<ex_desc_2>
</ex_desc_2>
</examples>
<resources>
<resources_title1>
WAI-ARIA specification
</resources_title1>
<resource_uri1>
http://www.w3.org/wai/pf/aria
</resource_uri1>
<resources_title2>
WAI-ARIA best practices
</resources_title2>
<resource_uri2>
http://www.w3.org/wai/pf/aria-practices
</resource_uri2>
</resources>
<related_techniques>
<related_technique>
G108
</related_technique>
<related_technique>
G115
</related_technique>
<related_technique>
G130
</related_technique>
<related_technique>
G131
</related_technique>
</related_techniques>
<tests>
<procedure>
1. Load the page using a user agent and/or assistive technology that supports Accessible Rich Internet Applications.
2. Using a user agent and assistive technology that supports WAI-ARIA, navigate to the button and activate it.
3. Verify that the assistive technology identifies the exposed JavaScript/CSS widget as a dialog.
</procedure>
<expected_result>
Check that step number 3 under Procedure is true.
</expected_result>
<test_file_1>
</test_file_1>
<pass_fail_1>
pass
</pass_fail_1>
<test_file_2>
</test_file_2>
<pass_fail_2>
</pass_fail_2>
</tests>
</technique>
Additional Notes:
This technique is sufficient to meet the success criterion.
Received on Friday, 8 May 2009 15:59:56 UTC