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.
Das Ziel dieser Technik ist es, auf durch Software bestimmbare Art und Weise darauf hinzuweisen, dass das Ausfüllen eines Benutzer-Eingabefeldes obligatorisch ist. Das WAI-ARIA aria-required-Property weist darauf hin, dass Eingaben durch den Benutzer vor dem Absenden erforderlich sind. Das aria-required-Property kann die Werte „true“ (wahr) oder „falsch“ haben. Wenn ein Benutzer beispielsweise ein Adressfeld ausfüllen muss, dann wird aria-required auf „true“ gesetzt.
Anmerkung: Die Tatsache, dass das Element erforderlich ist, wird oft visuell dargestellt (wie zum Beispiel durch ein Zeichen oder Symbol nach dem Steuerelement). Die Benutzung des aria-required-Property zusätzlich zur visuellen Präsentation macht es Benutzeragenten viel leichter, dem Benutzer diese wichtige Information auf eine für den Benutzeragenten spezifische Art und Weise weiterzugeben. 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 2: 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.
Das folgende Beispiel zeigt ein XHTML-Dokument, welches das aria-required-Property benutzt, um darauf hinzuweisen, dass ein Formularfeld abgesendet werden muss. Als Sicherheit für Benutzeragenten, die WAI-ARIA nicht unterstützen, wird auf die obligatorische Eigenschaft des Feldes auch in der Beschriftung hingewiesen.
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>
<title>Required Input</title>
</head>
<body>
<h1>Required Input</h1>
<p>The following form input field must be completed by the user
before the form can be submitted.</p>
<form action="http://example.com/submit">
<p>
<label for="test">Test (required)</label>
<input name="ariaexample" id="example" aria-required="true" aria-label="Test"/>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>Dieses Beispiel benutzt Scripting, um das aria-required-Property zu einem Formular-Element hinzuzufügen. Das required-Property wird durch die Benutzung des setAttribute()-API zugewiesen.
Die array-Variable, requiredIds wird mit den ids der Elemente erstellt, die als Pflichtfelder markiert werden müssen. Die setRequired()-Funktion wird aus dem onload-Event des window object aufgerufen.
Die setRequired()-Funktion schleift sich durch bereitgestellten ids, ruft die Elemente ab und weist das aria-required-Property „true“ zu, indem die setAttribute()-Funktion benutzt wird.
Wenn man auf diese Seite zugreift, indem man Firefox 3.0 oder später und einen Screenreader, der WAI-ARIA unterstützt, benutzt, dann spricht der Screenreader „required“ (Pflichtfeld), wenn er das Label für die Eingabefelder liest.
Code-Beispiel:
<head>
<script type="text/javascript">
//<![CDATA[
// array or ids on the required fields on this page
var requiredIds = new Array( "firstName", "lastName");
// function that is run after the page has loaded to set the aria-required property on each of the
//elements in requiredIds array of id values
function setRequired(){
if (requiredIds){
var field;
for (var i = 0; i< requiredIds.length; i++){
field = document.getElementById(requiredIds[i]);
field.setAttribute("aria-required", "true");
}
}
}
window.onload=setRequired;
//]]>
</script>
</head>
<body>
<p>Please enter the following data. Required fields have been programmatically identified
as required and marked with an asterisk (*) following the field label.</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>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Greifen Sie in einem Benutzeragenten, der die Spezifikation Accessible Rich Internet Applications unterstützt, auf eine Seite mit Formular-Pflichtfeldern zu.
Versuchen Sie das Formular abzusenden, indem Sie Formular-Pflichtfelder leer lassen.
Prüfen sie, ob der Benutzeragent über die fehlenden Informationen benachrichtigt.
Geben Sie Werte für die Pflichtfelder ein.
Prüfen Sie, ob der Benutzeragent es erlaubt, dass das Absenden des Formulars vonstatten geht.
#3 und #5 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.