Techniken, die Accessible Rich Internet Applications (WAI-ARIA) unterstützen.
Die Technik bezieht sich auf:
Siehe User Agent Support for WAI-ARIA für allgemeine Informationen zur Unterstützung durch Benutzeragenten.
IE 8 unterstützt lediglich aria-labelledby mit einem einzigen id-Wert und unterstützt aria-describedby überhaupt nicht.
Der Zweck dieser Technik ist es zu zeigen, wie man das WAI-ARIA aria-describedby-Property benutzt, um durch Software bestimmte, deskriptive Informationen über ein Element der Benutzerschnittstelle bereitzustellen. Das aria-describedby-Property kann benutzt werden, um deskriptive Informationen an ein oder mehrere Elemente durch die Benutzung einer id reference list (id-Referenzliste) anzuhängen. Die „id reference list“ enthält ein oder mehrere einmalige Element-ids.
Lesen Sie Supporting ARIA in XHTML and HTML 4.01 für Informationen darüber, wie man WAI-ARIA States und Properties mit XHTML und HTML zur Verfügung stellt. WAI-ARIA States and Properties ist auch mit anderen Sprachen kompatibel; beachten Sie dazu die Dokumentation in diesen Sprachen.
Anmerkung: Derzeit ist WAI-ARIA ein Arbeitspapier. Diese Technik wird als empfohlene Technik zur Verfügung gestellt für Organisationen, die den Versuch anstellen möchten, eine Konformität zu den WCAG durch die Benutzung von WAI-ARIA zu erreichen. Es wird erwartet, dass, wenn WAI-ARIA zu einer formalen Spezifikation wird und in Benutzeragenten unterstützt wird, diese Technik zu einer ausreichenden Technik wird.
Dieses Beispiel ist in XHTML kodiert mit einem MIME type application:xhtml+xml. Dieser MIME-Type wird nicht in allen Benutzeragenten unterstützt. Das aria-describedby property wird direkt zum XHTML-Markup hinzugefügt und es wird kein zusätzliches Scripting benötigt.
Code-Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
<head>
<meta http-equiv="content-type" content="application:xhtml+xml; charset=utf-8" />
<title>Demonstration of aria-describedby property</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>The buttons on this page use the Accessible Rich Internet Applications aria-describedby property
to provide more detailed information about the button action</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">
Fonts </button></span></p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">
Colors </button></span></p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">
Customize </button></span></p>
</div>
</body>
</html>Dieses Beispiel benutzt Scripting, um ein aria-describedby property zu Schaltflächen auf einer Seite hinzuzufügen. Dieses Beispiel erstellt eine buttonIds array variable, um die ids der Elemente, die Beschreibungstext enthalten, aufzunehmen. Die „setDescribedBy()-Funktion“ wird aus dem „onload-Event“ des „window object“ aufgerufen.
Die „setDescribedBy()-Funktion„ schleift durch alle Schaltflächen-Elemente und ruft bei jedem Schaltflächen-Element „setAttribute()“ auf, um das „aria-describedby property“ zu setzen. Das „aria-describedby property“ jeder Schaltfläche wird auf die id des Elementes gesetzt, das dessen beschreibenden Text enthält.
Bei der Benutzung eines Benutzeragenten und/oder einer assistierenden Technik, die WAI-ARIA unterstützt, wird die Beschreibung bereitgestellt, sobald die Steuerelemente der Benutzerschnittstelle den Fokus erhalten.
Code-Beispiel:
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
<title>Demonstration of aria-describedby property</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[
// array entries for each button on the page that associates the button id
// with the id of the element containing the text which describes the button
var buttonIds = new Array();
buttonIds["fontB"]= "fontDesc";
buttonIds["colorB"] = "colorDesc";
buttonIds["customB"] = "customDesc";
// function that is run after the page has loaded to set the aria-describedBy
// property on each of the elements referenced by the array of id values
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]){
buttons[i].setAttribute("aria-describedby", buttonIds[buttonId]);
}
}
}
}
}
// simulated action function - currently just displays an alert
function doAction(theAction){
alert("Perform the " + theAction + " action");
}
window.onload=setDescribedBy;
//]]>
</script>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications
aria-describedby property to provide more detailed information
about the button action.
</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
</p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
</p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
</p>
</div>
</body>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob es Eingabe-Steuerelement gibt, das ein aria-describedby-Attribut hat, das ein oder mehrere Elemente über eine einmalige id referenziert.
Prüfen Sie, ob das oder die referenzierte(n) Element(e) zusätzliche Informationen über das Eingabe-Steuerelement bereitstellen.
#1 und #2 sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.