Auf dieser Webseite werden ARIA-Techniken der Techniken für WCAG 2.0: Techniken und Fehler für WCAG 2.0 aufgelistet. Für Informationen zu den Techniken siehe Einführung in die Techniken für WCAG 2.0. Für eine Liste anderer Techniken lesen Sie das Inhaltsverzeichnis.
Zur Verbesserung der Barrierefreiheit stellt WAI-ARIA Webentwicklern die Option zur Verfügung, die folgenden semantischen Informationen zu Webseiten und Rich Internet Widgets hinzuzufügen, die dann dem Browser gezeigt werden:
Rollen, um die Art des präsentierten Widget zu beschreiben, wie zum Beispiel „Menü“, „Baumelement“ (tree item), „Schieberegler“ (slider) und „Fortschrittsbalken“ (progress bar).
Rollen, um die Struktur der Webseite zu beschreiben, wie zum Beispiel Überschriften, Regionen, Suchbereiche und Navigationsbereiche.
Eigenschaften, um den Status, in dem sich das Widget befindet, zu beschreiben, wie zum Beispiel „angekreuzt“ für ein Kontrollkästchen, „haspopup“ für ein Menü, das ein Untermenü oder ein anderes Popup rendert und „ausgeklappt/zugeklappt“ für eine Baumnode (tree node).
Eigenschaften, um live regions einer Seite zu definieren, die wahrscheinlich aktualisiert werden (wie beispielsweise Aktienkurse) sowie eine Unterbrechungs-Regel für diese Aktualisierungen. Assistierende Techniken können Aktualisierungen von entscheidender Bedeutung zeigen, sobald diese gerendert werden. Identische Aktualisierungen werden aber nur nach Fertigstellung der aktuellen Aufgabe präsentiert. Zum Beispiel informiert ein Screenreader einen Benutzer über ein nebensächliche Aktualisierung erst, nachdem er das Lesen des aktuellen Absatzes beendet hat.
Eigenschaften für ziehen und loslassen (drag-and-drop), welche die Quellen zum Ziehen und die Ziele zum Loslassen beschreiben
Eine Methode, um die Navigation per Tastatur für „rich internet widgets“ bereitzustellen.
Die Kombination dieser Funktionen und die strukturellen Informationen, die von der DOM-Struktur vermittelt werden, erlauben es Autoren, eine für assistierende Techniken interoperable Lösung zu generieren. (Quelle: WAI-ARIA Overview)
Die Unterstützung für WAI-ARIA durch Benutzeragenten ist unterschiedlich, aber die Unterstützung insgesamt für WAI-ARIA verbessert sich. Browser, die WAI-ARIA unterstützen, übersetzen WAI-ARIA-Rollen und -Eigenschaften auf die jeweiligen Accessibility-Schnittstellen (accessibility APIs) des Betriebssystems.
Firefox 1.5 und Firefox 2.0 unterstützen WAI-ARIA zum Teil, allerdings ist die Benutzung von namespaces notwendig und die Benutzung von Liveregions wird nicht unterstützt.
Firefox 3+ enthält eine bessere Unterstützung für WAI-ARIA einschließlich Liveregions.
IE8 unterstützt WAI-ARIA zum Teil.
JAWS 8 und Window-Eyes 5.5+ unterstützen WAI-ARIA zum Teil.
Jaws 10+ unterstützt WAI-ARIA.
Auch FireVox, eine selbst-sprechende Erweiterung für Firefox, unterstützt WAI-ARIA über den direkten DOM-Zugriff.
NVDA unterstützt WAI-ARIA zum Teil.
Die Benutzung von Techniken auf eine die Barrierefreiheit unterstützende Art und Weise ist für Konformitätserklärungen erforderlich. Lesen Sie mehr zu Barrierefreiheit unterstützend. Die WCAG-Arbeitsgruppe plant zu prüfen, welche WAI-ARIA-Techniken ausreichend sind, sobald die Accessible Rich Internet Application-Spezifikationen den Status einer W3C-Empfehlung erreichen. Sehen Sie im WAI-ARIA Overview nach, um neueste Informationen zum Status von WAI-ARIA zu erhalten.
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.
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.
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, Informationen über den erlaubten Wertebereich eines Eingabefeldes auf eine durch Software bestimmbare Art bereitzustellen. Die WAI-ARIA Zustände aria-valuemin und aria-valuemax stellen die Minimum- und die (respektiven) Maximum-Werte bereit, die vom Benutzer eingegeben werden können. Manche Benutzeragenten werden es Benutzern nicht erlauben, Werte außerhalb dieses Bereichs einzugeben oder sie generieren einen Validierungs-Fehler, wenn Benutzer dies tun. Der Entwickler ist nach wie vor dafür verantwortlich, eine Validierung dafür bereitzustellen, dass der Wert innerhalb des Wertebereichs ist.
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: 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.
Die folgende Spin-Schaltfläche erlaubt es Benutzern, eine Zahl zwischen 1 und 100 (einschließlich) einzugeben.
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>Spin Button</title>
</head>
<body>
<h1>Spin Button</h1>
<p>Spin button allows users to enter a number between 1 and 100. It is
implemented as a text input, to which user agents that do not support
ARIA roles fall back.</p>
<form action="http://example.com/submit">
<p><label for="test">Enter a number between 1 and 100</label>
<input name="test" id="test" role="spinbutton"
aria-valuemin="1" aria-valuemax="100" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>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 Formularfeldern zu, die Daten innerhalb eines bestimmten Wertebereichs erfordern.
Geben sie Informationen ein, die außerhalb des erlaubten Bereichs liegen und versuchen Sie, das Formular abzusenden.
Prüfen Sie, ob der Benutzeragent den Benutzer über die ungültigen Daten informiert.
Geben Sie Informationen ein, die innerhalb des erlaubten Bereichs liegen und versuchen Sie, das Formular abzusenden.
Prüfen Sie, ob der Benutzeragent die Daten akzeptiert und 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.