Auf dieser Webseite werden HTML- und XHTML-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.
HTML- und XHTML-Dokumente, die Links enthalten.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, eine unnötige Duplizierung zu vermeiden, die auftritt, wenn nebeneinander liegender Text und Symbolversionen von Links in einem Dokument enthalten sind.
Bei viele Arten von Links liegen sowohl einen Text als auch einen Symbol-Link nebeneinander. Oft werden Text und Symbol in unterschiedlichen Links gerendert, zum Teil, um eine geringfügige visuelle Trennung voneinander herzustellen. Visuell scheinen sie der gleiche Link zu sein, aber sie werden von vielen Menschen als zwei identische Links wahrgenommen, was verwirrend sein kann. Um dies zu vermeiden, lassen manche Autoren den Alternativtext des Bildes weg, aber dies wäre ein Fehler bei Erfolgskriterium 1.1.1, da die Textalternative nicht den gleichen Zweck erfüllen würde wie der grafische Link. Die bevorzugte Methode, um dies zu adressieren ist es, Text und Bild in einem Link aneinander zu fügen und keinerlei Textalternative für das Bild zur Verfügung zu stellen, um die Verdopplung auszuschließen.
Manchmal werden der Text- und der Symbol-Link in unterschiedlichen, nebeneinander liegenden Tabellenzellen gerendert, um das Seiten-Layout zu begünstigen. Obwohl die WCAG 2 die Benutzung von Layout-Tabellen nicht verbieten, werden CSS-basierte Layouts empfohlen, um die definierte, semantische Bedeutung der HTML-Tabellen-Elemente zu bewahren und konform zur Programmier-Praxis der Trennung von Präsentation und Inhalt zu sein. Wenn CSS benutzt wird, kann diese Technik angewendet werden, um die Links zu verknüpfen.
Das Symbol und der Text sind im gleichen a-Element enthalten.
Code-Beispiel:
<a href="products.html">
<img src="icon.gif" alt="" />
Products page
</a> Ein Link enthält ein Symbol und Text und die Hilfe der Site bezieht sich auf das Symbol. Das img hat eine Textalternative, bei der es sich um den Namen handelt, der für das Symbol in der Hilfe der Site benutzt wird und der das Anklicken des Homepage-Symbols beschreibt.
Code-Beispiel:
<a href="foo.htm">
<img src="house.gif" alt="home page icon"/>
Go to the home page
</a> Dieses Beispiel demonstriert ein Versagen bei der Anwendung dieser Technik. Ein Symbol- und ein Text-Link sind nebeneinander. Die Textalternative für das Bild und der Textlink daneben lauten gleich, was zu einem „Stotter“-Effekt, da der Link zweimal gelesen wird.
Code-Beispiel:
<a href="products.html">
<img src="icon.gif" alt="Products page" />
</a>
<a href="products.html">
Products page
</a> Dieses Beispiel demonstriert ein Versagen bei der Anwendung dieser Technik. Ein Symbol- und ein Text-Link sind nebeneinander. In dem Bemühen, das Stottern zu entfernen, ist die Textalternative für das Bild leer. Allerdings hat nun einer der Links ein unbekanntes Ziel, was sein eigenes Linktext-Problem ist.
Code-Beispiel:
<a href="products.html">
<img src="icon.gif" alt="" />
</a>
<a href="products.html">
Products page
</a> Dieses Beispiel demonstriert eine fehlerhafte Implementierung dieser Technik. Das Symbol und der Text sind im gleichen a-Element enthalten. Allerdings ist die Textalternative für das Symbol ein Duplikat des Linktextes, was zu einem "Stotter"-Effekt führt, der die Beschreibung zweimal gelesen wird.
Code-Beispiel:
<a href="products.html">
<img src="products.gif" alt="Products page"/>
Products page
</a>
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jedes a im Inhalt, der ein img-Element enthält:
Prüfen Sie, ob es kein daneben liegendes a-Element gibt, welches das gleiche href-Attribut und die gleiche Beschreibung hat
Für jedes a im Inhalt, das in einer Tabelle enthalten ist:
Prüfen Sie, dass es kein a-Element in einer daneben liegenden Tabellenzelle gibt, welches das gleiche href-Attribut und die gleiche Beschreibung hat.
Alle oben genannten Tests 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, eine logische Tab-Reihenfolge zur Verfügung zu stellen, wenn die Standard-Tab-Reihenfolge nicht ausreicht. Ost reicht G59: Platzierung der interaktiven Elemente in einer Reihenfolge, die sich nach Abfolgen und Beziehungen innerhalb des Inhalts richtet aus und diese Technik ist nicht notwendig. Es ist sehr leicht, Usability-Programmfehler einzubauen, wenn man die Tab-Reihenfolge explizit festlegt.
In manchen Fällen kann es sein, dass der Autor eine Tab-Reihenfolge festlegen möchte, die den Beziehungen im Inhalt folgt, ohne der Reihenfolge der interaktiven Elemente im Code zu folgen. In diesen Fällen kann eine alternative Reihenfolge festgelegt werden, indem man das tabindex-Attribut des interaktiven Elements benutzt. Der tabindex erhält einen Wert zwischen 0 und 32767.
Wenn man per Tab-Taste durch die interaktiven Elemente navigiert, dann erhalten die Elemente den Fokus in aufsteigender Reihenfolge des Wertes ihres tabindex-Attributs. Elemente, deren tabindex-Wert größer Null ist, erhalten den Fokus vor Elementen ohne tabindex oder einem tabindex von 0. Nachdem alle Elemente mit einem tabindex größer 0 den Fokus erhalten haben, erhält der Rest der interaktiven Elemente den Fokus in der Reihenfolge, in der sie auf der Webseite erscheinen.
Ein Formular zur Abstammungssuche sucht nach Heiratsurkunden. Das Suchformular enthält verschiedene Eingabefelder für Braut und Bräutigam. Das Formular wurde ausgezeichnet, indem eine Datentabelle benutzt wurde, welche die Felder für den Bräutigam in der ersten Spalte und die Felder für die Braut in der zweiten Spalte enthält. Die Reihenfolge des Inhalts ist Zeile für Zeile, aber der Autor hat das Gefühl, dass es logischer wäre, Spalte für Spalte durch das Formular zu navigieren. Auf diese Art und Weise können die Kriterien des Bräutigams ausgefüllt werden bevor man zu den Kriterien der Braut geht. Die tabindex-Attribute der Eingabefelder werden dazu benutzt, eine Tab-Reihenfolge festzulegen, die Spalte für Spalte navigiert.
Code-Beispiel:
<form action="#" method="post">
<table summary="the first column contains the search criteria
of the groom, the second column the search criteria of
of the bride">
<caption>Search for marriage records</caption>
<tr>
<th>Search criteria</th>
<th>Groom</th>
<th>Bride</th>
</tr>
<tr>
<th>First name</th>
<td><input type="text" size="30" value="" name="groomfirst"
title="First name of the groom" tabindex="1"></td>
<td><input type="text" size="30" value="" name="bridefirst"
title="First name of the bride" tabindex="4"></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text" size="30" value="" name="groomlast"
title="Last name of the groom" tabindex="2"></td>
<td><input type="text" size="30" value="" name="bridelast"
title="Last name of the bride" tabindex="5"></td>
</tr>
<tr>
<th>Place of birth</th>
<td><input type="text" size="30" value="" name="groombirth"
title="Place of birth of the groom" tabindex="3"></td>
<td><input type="text" size="30" value="" name="bridebirth"
title="Place of birth of the bride" tabindex="6"></td>
</tr>
</table>
</form> Eine Webseite enthält ein Suchformular in der oberen rechten Ecke. Das Feld erhält den tabindex="1", so dass es in der Tab-Reihenfolge zuerst erscheint, auch wenn es nicht erstes in der Reihenfolge des Inhalts ist.
Tabindex-Werte müssen nicht sequentiell sein, noch müssen sie mit einem bestimmten Wert beginnen. Die Werte müssen nicht einzigartig sein. Elemente, die identische tabindex-Werte haben, werden in der Reihenfolge, in der sie im Zeichenfluss, dem so genannten "character stream", erscheinen, navigiert. Somit wäre die Tab-Reihenfolge im folgenden Beispiel eins, zwei, drei, vier.
Code-Beispiel:
<a href="" tabindex="1">one</a>
<a href="" tabindex="2">two</a>
<a href="" tabindex="1">three</a>
<a href="" tabindex="2">four</a> In Bereichen des Inhalts, in denen die Tab-Reihenfolge der Reihenfolge des Inhalts folgt, kann es weniger fehleranfällig sein, allen Elementen den gleichen tabindex-Wert zu geben, statt unterschiedliche Zahlen für jedes Element festzulegen. Dann ist es einfach, diese Elemente neu anzuordnen oder neue Elemente hinzuzufügen und eine logische Tab-Reihenfolge beizubehalten.
Code-Beispiel:
<a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long
after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
...
<a href="xxx" tabindex = "1">Twentieth link in list</a> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob tabindex benutzt wird
Wenn tabindex benutzt wird, prüfen Sie, ob die Tab-Reihenfolge, die durch die tabindex-Attribute festgelegt wird, den Beziehungen im Inhalt folgt.
Test #2 ist 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.
HTML- und XHTML-Dokumente, die area-Elemente enthalten.
Die Technik bezieht sich auf:
Die HTML 4.01-Spezifikation erklärt, dass der Text des alt-Attributs angezeigt werden soll, wenn das Element nicht normal gerendert werden kann. Benutzeragenten zeigen den Text des alt-Attributs an, wenn Bilder nicht angezeigt werden. Allerdings zeigen visuelle Benutzeragenten derzeit den Text des alt-Attributs nicht an bei area-Elementen von Imagemaps, wenn auf diese per Tastatur zugegriffen wird oder wenn Bilder nicht angezeigt werden, und es kann sein, dass sie die area-Elemente beschneiden, wenn die eigentliche Größe des Bildes nicht benutzt wird. Darüber hinaus wird die Darstellung des Textes des alt-Attributes als Reaktion auf das darüber gehen mit der Maus nicht in der im Benutzeragenten festgelegten Schriftgröße oder Farbkombination angezeigt.
Das title-Attribut ist dazu gedacht, zusätzliche Informationen bereitzustellen. Allerdings ist die aktuelle Implementierung in den Benutzeragenten dergestalt, dass es entweder einen Zugriff auf das title- oder das alt-Attribut gibt, nicht aber auf beides. Benutzeragenten werden üblicherweise den Text des title-Attributs anzeigen, wenn die Maus über dem Element, welches das title-Attribut enthält, platziert wird.
Bei der Benutzung von Imagemaps würde daher die erfolgreiche Implementierung dieser Technik eines von beidem erfordern:
Sicherstellen, dass das alt-Attribut des area-Elements als Reaktion auf den Erhalt des Fokus (einschließlich Tastatur-Fokus) angezeigt wird und dass dies sowohl in Situationen gilt, in denen Bilder geladen werden als auch dann, wenn sie nicht geladen werden. ODER
Es gibt auf der Webseite einen redundanten Mechanismus, der den gleichen Zweck erfüllt wie die area-Elemente.
Das Ziel dieser Technik ist es Textalternativen zur Verfügung zu stellen, die den gleichen Zweck erfüllen wie die auswählbaren Bereiche einer Imagemap. Eine Imagemap ist ein Bild, das in auswählbare Bereich, die durch area-Elemente definiert sind, aufgeteilt wurde. Jeder Bereich ist ein Link zu einer anderen Webseite oder einen anderen Teil der aktuellen Webseite. Das alt-Attribut jedes area-Elements dient dem gleichen Zweck wir der auswählbare Bereich des Bildes.
Dieses Beispiel benutzt das alt-Attribut des area-Elements, um Text zur Verfügung zu stellen, der den Zweck der Imagemap-Bereiche beschreibt.
Code-Beispiel:
<img src="welcome.gif" usemap="#map1"
alt="Areas in the library. Select an area for
more information on that area." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference" />
<area shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab" />
</map> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jedes area-Element in einer Imagemap:
Prüfen Sie, ob das area-Element ein alt-Attribut hat.
Prüfen Sie, ob die Textalternative, die vom alt-Attribut vorgegeben ist, dem gleichen Zweck dient wie der Teil der Imagemap, die vom area-Element der Imagemap referenziert wird.
Die oben genannten Tests 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.
HTML und XHTML
Die Technik bezieht sich auf:
Alle HTML- und XHTML-Dokumente, einschließlich der Dokumente in individuellen Frames in einem Framest, haben ein title-Element im head-Bereich, das in einem einfachen Satz den Zweck des Dokumentes definiert. Dies hilft Benutzern dabei, sich innerhalb der Site schnell selbst zu orientieren, ohne im body der Seite nach Informationen zur Orientierung suchen zu müssen.
Beachten Sie, dass sich das (obligatorische) title-Element, das nur einmal im Dokument erscheint, vom title-Attribut, das auf fast jedes HTML- und XHTML-Element angewendet werden kann, unterscheidet.
Dieses Beispiel definiert den Titel eines Dokumentes.
Code-Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The World Wide Web Consortium</title>
</head>
<body>
...
</body>
</html> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie den Quellcode des HTML- oder XHTML-Dokumentes und prüfen Sie, ob im head-Bereich ein nicht-leeres title-Element vorkommt.
Prüfen Sie, ob das title-Element das Dokument beschreibt.
Tests #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.
Dokumente, die Medien mit dem object-Element laden, wenn es sich bei dem Medienformat nicht um eine die Barrierefreiheit unterstützende Inhaltstechnik handelt.
Die Technik bezieht sich auf:
Diese Technik wird von assistierenden Techniken nicht gut unterstützt und die Cross-Browser-Unterstützung ist nicht einheitlich.
Stellen Sie, wenn object benutzt wird, eine Textalternative im Inhalt des Elements zur Verfügung:
Dieses Beispiel zeigt eine Textalternative für ein Java Applet, welches das object-Element benutzt.
Code-Beispiel:
<object classid="java:Press.class" width="500" height="500">
As temperature increases, the molecules in the balloon...
</object> Dieses Beispiel zieht den Nutzen aus der Tatsache, dass object-Elemente verschachtelt sein können, um für alternative Darstellungen von Informationen zu sorgen.
Code-Beispiel:
<object classid="java:Press.class" width="500" height="500">
<object data="Pressure.mpeg" type="video/mpeg">
<object data="Pressure.gif" type="image/gif">
As temperature increases, the molecules in the balloon...
</object>
</object>
</object> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für diese Technik gibt es keine Tests.
HTML und XHTML
Die Technik bezieht sich auf:
Assistierende Techniken stellen unterschiedliche Stufen an Unterstützung für das Sprechen von title-Attributen bereit. Einige enthalten keine Funktionen, die es Benutzern erlauben, auf Informationen, die per title-Attribut bereitgestellt werden, zuzugreifen.
Die Implementierung dieser Technik mit dem title-Attribut ist nur ausreichend, wenn das title-Attribut die Barrierefreiheit unterstützend ist. Der Inhalt des title-Attributs muss für alle Tastaturbenutzer verfügbar sein (nicht nur für diejenigen mit einer Text-zu-Sprache-Software), damit dieses Attribut die Barrierefreiheit unterstützend ist.
JAWS 6.2 und höher und WindowEyes 5.0 und höher unterstützen die abbr- und acronym-Elemente. Sie können alle so eingestellt werden, dass sie das title-Attribut sprechen, wenn diese Elemente angetroffen werden, aber dies ist nicht die Standardeinstellung und wird oft nicht von den Benutzern angeschaltet.
Viele grafische Benutzeragenten rendern Text, der innerhalb eines abbr- oder acronym-Elements liegt, mit einer gestrichelten Linie darunter oder ringsum. Zusätzlich wird die ausgeschriebene Form, wenn die Maus über dem Element schwebt, als Tooltip angezeigt.
In Internet Explorer 7 und darunter werden Elemente, die per abbr-Element markiert sind, nicht mit irgendeiner zusätzlichen Formatierung angezeigt. In IE 6 und darunter wird die ausgeschriebene Form nicht als Tooltip angezeigt, wenn die Maus über dem Element schwebt.
Innerhalb eines bestimmten Benutzeragenten oder einer bestimmten assistierenden Technik werden dem Benutzer abbr- und acronym-Elemente auf die gleiche Art und Weise angezeigt.
Das Ziel dieser Technik ist es, ausgeschriebene Formen oder Definitionen für Abkürzungen zur Verfügung zu stellen, indem die abbr- und acronym-Elemente benutzt werden.
Es ist immer angemessen, das abbr-Element für jegliche Abkürzungen einschließlich Akronyme und Initialworte zu benutzen. Bei der Benutzung von HTML- und XHTML können Initialworte und Akronyme ausgezeichnet werden, indem das acronym-Element verwendet wird. HTML-Versionen nach HTML 4 schaffen das Acronym-Element zugunsten des allgemeineren abbr-Element ab.
Code-Beispiel:
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.<abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p> Code-Beispiel:
<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr>
The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit
brought by members of the National Writers Union against ......</p> Code-Beispiel:
<p>The use of <acronym title="Keep It Simple Stupid">KISS</acronym> became popular in ...</p>
Code-Beispiel:
<p><acronym title="World Wide Web">WWW</acronym></p>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob eine ausgeschrieben Form oder Definition für jede per abbr oder acronym definierte Abkürzung zur Verfügung gestellt wird.
Test #1 ist 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.
HTML- und XHTML-Dokumente, die Links enthalten, (<a href>-Elemente)
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist, den Zweck eines Links zu beschreiben, indem man einen beschreibenden Text als Inhalt des a-Elements zur Verfügung stellt. Die Beschreibung lässt einen Benutzer diesen Link von anderen Links auf der Webseite unterscheiden und hilft dem Benutzer zu bestimmen, ob er dem Link folgt. Der URI des Ziels ist im Allgemeinen nicht ausreichend deskriptiv.
Wenn ein Bild der einzige Inhalt eines Links ist, dann beschreibt die Textalternative für das Bild die spezifische Funktion des Links.
Wenn der Inhalt eines Links sowohl Text als auch eines oder mehrere Bilder enthält und falls der Text ausreichend ist, um den Zweck des Links zu beschrieben, dann können die Bilder eine leere Textalternative haben. (Siehe H67: Weglassen des alt-Textes und des title-Attributs für img-Elemente bei Bildern, die von assistierenden Techniken ignoriert werden sollen (HTML) .) Wenn die Bilder Informationen vermitteln, die über den Zweck des Links hinausgehen, dann müssen sie auch einen angemessenen alt-Text haben.
Beschreibung des Zwecks eines Links in HTML im Textinhalt des a-Elements.
Code-Beispiel:
<a href="routes.html">
Current routes at Boulders Climbing Gym
</a>Benutzung des alt-Attributs für das img-Element, um den Zweck eines grafischen Links zu beschreiben.
Code-Beispiel:
<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
</a> Benutzung eines leeren alt-Attributs, wenn das Anchor-(a)-Element Text enthält, der neben dem img-Element den Linkzweck beschreibt. Beachten Sie, dass der Linktext auf der Seite neben dem Bild erscheinen wird.
Code-Beispiel:
<a href="routes.html">
<img src="topo.gif" alt="" />
Current routes at Boulders Climbing Gym
</a>Eine Site erlaubt es Benutzern, Feedback zu Produkten zu geben, wenn der Benutzer eingeloggt ist, indem man auf den „Feedback“-Link einer Produkt-Detailseite klickt. Andere Benutzer oder der Hersteller des Produktes können eine Antwort auf jegliches Feedback geben. Der Feedback-Link zeigt ein Symbol vor dem „Feedback“-Text an, wenn es eine Antwort zum Feedback des Benutzers gibt. In der Hilfe wird dieses Symbol als Sprechblase beschrieben, die Anführungszeichen enthält und das Symbol selber ist als Beispiel enthalten. Die Textalternative des Symbols im Hilfetext lautet: „Antwort erhalten-Symbol“. Die gleiche Textalternative wird auf der Produkt-Detailseite benutzt (wenn es eine Antowrt gibt), um die Erkennbarkeit dieses Symbols durch mehrere Modalitäten zu ermöglichen.
Code-Beispiel:
<a href="prod_123_feedback.htm">Feedback <img src="response.gif" width="15" height="15" alt="Response received icon" /></a>Ein Link enthält Text und Symbol und das Symbol gibt zusätzliche Informationen zum Ziel.
Code-Beispiel:
<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>Der Jahresbericht der Firma „MyCorp“ wird auf der Firmen-Website als PDF-Datei zur Verfügung gestellt und das jährliche Firmenbudget wird als Excel-Datei auf der Website bereitgestellt.
Anmerkung: Viele Benutzer ziehen es vor, den Dateityp zu kennen, wenn sie eine Datei öffnen und das dazu führt, dass eine neue Anwendung geöffnet wird, um die Datei anzusehen; daher wird es oft als nützlich angesehen, diese zusätzlichen Informationen aufzunehmen. Dies ist allerdings für die Konformität mit diesem Erfolgskriterium nicht notwendig.
Code-Beispiel:
<p>
<a href=”2009mycorp_report.pdf”>MyCorp 2009 Annual Report (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp 2009 Annual Budget (Excel)</a>
</p>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jeden Link im Inhalt, der sich dieser Technik bedient:
Prüfen Sie, ob in dem a-Element Text oder eine Textalternative für Nicht-Text-Inhalt enthalten ist.
Wenn ein img-Element der einzige Inhalt des a-Elements ist, prüfen Sie, ob die Textalternative den Linkzweck beschreibt
Wenn das a-Element ein oder mehrere img-Element(e) enthält und die Textalternative der/des img-Elements/Elemente leer ist, prüfen Sie, ob der Text des Links den Linkzweck beschreibt
Wenn das a-Element nur Text enthält, prüfen Sie, ob der Text den Linkzweck beschreibt
Die oben genannten Tests 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.
Inhalt, der Formular-Steuerelemente enthält.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, einen Mechanismus bereitzustellen, der es Benutzern ermöglicht, ausdrücklich Änderungen des Kontextes anzufordern. Der Anwendungszweck einer Absenden-Schaltfläche ist die Generierung eines HTTP-Request, der die in ein Formular eingegebenen Daten absendet, also ist dies ein geeignetes Steuerelement, um eine Änderung des Kontextes zu bewirken.
Dies ist ein einfaches Beispiel eines Formulars mit einer Absenden-Schaltfläche.
Code-Beispiel:
<form action="http://www.example.com/cgi/subscribe/" method="post"><br />
<p>Enter your e-mail address to subscribe to our mailing list.</p><br />
<label for="address">Enter email address:</label><input type="text"
id="address" name="address" />
<input type="submit" value="Subscribe" /><br />
</form>Das folgende Beispiel benutzt ein serverseitiges Skript (präzisiert im action-Attribut), das den Benutzer zu der angeforderten Seite umleitet.
Code-Beispiel:
<form action="http://www.example.com/cgi/redirect/" method="get"><br />
<p>Navigate the site.</p><br />
<select name="dest"><br />
<option value="/index.html">Home</option/><br />
<option value="/blog/index.html">My blog</option/><br />
<option value="/tutorials/index.html">Tutorials</option/><br />
<option value="/search.html">Search</option/><br />
</select><br />
<input type="submit" value="Go to Page" /><br />
</form> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Navigational pulldown menus in HTML von Jukka Korpela erörtert einige Techniken die funktionieren oder nicht funktionieren.
Finden Sie alle Formulare im Inhalt
Prüfen Sie für jedes Formular, ob es eine Absenden-Schaltfläche hat (input type="submit", input type="image" oder button type="submit")
#2 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Aktuelle Benutzeragenten und assistierende Techniken geben dem Benutzer keine Rückmeldung, wenn es für Links Inhalte im title-Attribut gibt.
Einige grafische Benutzeragenten zeigen einen Tooltip an, wenn die Maus über einem anchor-Element schwebt, das ein title-Attribut enthält. Allerdings bieten aktuelle Benutzeragenten keinen Zugriff auf den Inhalt des title-Attributs per Tastatur.
Der Tooltip in manchen gängigen Benutzeragenten verschwindet nach einem kurzen Zeitraum (etwa 5 Sekunden). Dies kann denjenigen Benutzern, die eine Maus benutzen können aber Beeinträchtigungen in der Feinmotorik haben, Schwierigkeiten beim Zugriff auf den Inhalt des title-Attributs bereiten und es kann Schwierigkeiten für die Benutzer geben, die mehr Zeit brauchen, um den Tooltip zu lesen.
Aktuelle grafische Benutzeragenten bieten keinen Mechanismus zur Beeinflussung der Darstellung des Inhalts im title-Attribut. Der Benutzer kann den Tooltip nicht in der Größe verändern oder die Vorder- und Hintergrundfarben steuern. Die Platzierung und die Position des Tooltips kann nicht von den Benutzern gesteuert werden, was dazu führt, dass einige Benutzer von Vergrößerungssoftware nicht in der Lage sind, auf sinntragende Teile des Inhalts im title-Attribut zuzugreifen, weil der Tooltip nicht komplett innerhalb des Ansichtsfensters angezeigt werden kann.
Einige Benutzeragenten erlauben den Zugriff auf ergänzende Informationen über das Kontext-Menü. Zum Beispiel zeigt die Tastenkombination Shift+F10 gefolgt von P den Inhalt des title-Attributs zusammen mit anderen ergänzenden Informationen in Mozilla/Firefox an.
Die HTML 4.01-Spezifikation erklärt, dass der Text des alt-Attributs angezeigt werden soll, wenn das Element nicht normal gerendert werden kann. Daher zeigen visuelle Benutzeragenten den Text des alt-Attributs an, wenn Bilder nicht angezeigt werden. Das title-Attribut ist dazu gedacht, zusätzliche Informationen bereitzustellen. Benutzeragenten werden üblicherweise den Text des title-Attributs anzeigen, wenn die Maus über dem Element, welches das title-Attribut enthält, platziert wird. Internet Explorer zeigt den alt-Text beim Überfahren mit der Maus an, wenn es keinen title-Text gibt. Die Firefox- und Opera-Browser zeigen beim Überfahren mit der Maus nur den title-Text an und benutzen nicht den Text des alt-Attributs für diesen Zweck.
Assistierende Techniken stellen unterschiedliche Stufen an Unterstützung für das Sprechen von title-Attributen bereit. Einige enthalten keine Funktionen, die es Benutzern erlauben, auf Informationen, die per title-Attribut bereitgestellt werden, zuzugreifen.
JAWS 7.0 und höher spricht den Wert der title-Attribute je nach JAWS-Einstellung. Diese Einstellung kann vorübergehend oder dauerhaft in JAWS geändert werden.
WindowEyes 5.5 und höher hat einen Kurzbefehl, ins-E, der bei Elementen, die den Fokus haben, zusätzliche Informationen spricht, einschließlich des title-Attributs.
Die Implementierung dieser Technik mit dem title-Attribut ist nur ausreichend, wenn das title-Attribut die Barrierefreiheit unterstützend ist. Wenn der Wert des title für alle Benutzer unentbehrlich für das Verständnis des Linkszwecks ist, dann muss der Inhalt dieses Attributs allen Tastaturbenutzern zur Verfügung stehen (nicht nur denjenigen mit Text-zu-Sprache-Software), damit diese Technik barrierefreiheit-unterstützend ist.
Das Ziel dieser Technik ist es zu zeigen, wie man ein title-Attribut bei einem anchor-Element benutzt, um zusätzlichen Text, der einen Link beschreibt, anzubieten. Das title-Attribut wird benutzt, um zusätzliche Informationen zur Verfügung zu stellen, die dabei helfen, den Linkzweck zu verdeutlichen oder weiter zu beschreiben. Wenn es sich bei den durch das title-Attribut zur Verfügung gestellten, ergänzenden Informationen um solche handelt, die der Benutzer kennen sollte, bevor er dem Link folgt, wie beispielsweise eine Warnung, dann sollte dies im Linktext statt im title-Attribut zur Verfügung gestellt werden.
Da es in vielen Benutzeragenten umfangreiche Einschränkungen in der Unterstützung des Zugriffs auf das title-Attribut gibt, sollten Autoren bei der Anwendung dieser Technik Vorsicht walten lassen. Aus diesem Grund wird es vorgezogen, dass Autoren Technik C7: Benutzung von CSS, um einen Teil des Linktextes auszublenden (CSS) oder H30: Bereitstellung eines Linktextes, der den Zweck eines Links bei anchor-Elementen beschreibt (HTML) benutzen.
Code-Beispiel:
<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html"
title="Read more about failed elephant evacuation">
Evacuation Crumbles Under Jumbo load
</a>In HTML 4.01 kann das target="_blank"-Attribut bei einem anchor-Element benutzt werden, um daraus hinzuweisen, dass der durch das href-Attribut festgelegte URI in einem neuen Fenster geöffnet wird. Dieses Beispiel zeigt die Benutzung des title-Attributs des anchor-Elements, um Informationen dazu, dass der Link in einem neuen Fenster geöffnet wird, anzubieten.
Code-Beispiel:
<a href="http://example.com/subscribe.html"
target="_blank"
title="link opens in new window">
Subscribe to email notifications about breaking news
</a>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Suchen Sie im Quellcode nach anchor-Elementen.
Prüfen Sie für jedes anchor-Element, das ein title-Attribut hat, ob das title-Attribut zusammen mit dem Linktext den Linkzweck beschreibt.
Test #1 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Unicode right-to-left marks und left-to-right marks zu benutzen, um den bidirektionalen HTML-Algorithmus außer Kraft zu setzen, wenn er zu unerwünschten Ergebnissen führt. Dies kann zum Beispiel notwendig sein, wenn die Platzierung neutraler Zeichen wie beispielsweise Leerschritte oder Satzzeichen zwischen unterschiedlichen Laufrichtungen des Textes. Die Konzepte, die in dieser Technik benutzt werden, werden in What you need to know about the bidi algorithm and inline markup beschrieben.
Unicode right-to-left marks und left-to-right marks können direkt eingegeben werden oder mit Hilfe von Zeichen-Entitäten oder numerischen Zeichenreferenzen, wie hier gezeigt.
left-to-right mark: ‎ or ‎ (U+200E)
right-to-left mark: ‏ or ‏ (U+200F)
Aufgrund des bidi-Algorithmus kann es sein, dass ein Quellcode-Editor Zeichen-Entitäten oder numerische Zeichenreferenzen nicht wie erwartet darstellt.
Dieses Beispiel zeigt eine arabische Phrase in der Mitte eines englischen Satzes. Das Ausrufezeichen ist Teil der arabischen Phrase und sollte auf dessen linker Seite stehen. Das es zwischen arabischen und lateinischen Zeichen steht und die allgemeine Laufrichtung des Absatzes LTR ist, positioniert der bidirektionale Algorithmus das Ausrufezeichen rechts von der arabischen Phrase.
Der Titel lautet "مفتاح معايير الويب!" auf arabisch.
Visuell sortierte ASCII-Version (RTL-Text in Großbuchstaben, LTR in Kleinbuchstaben):
der titel lautet "HCTIWS SDRADNATS BEW!" auf arabisch.
Das Einfügen eines Unicode right-to-left mark in den Code direkt nach dem Ausrufezeichen positioniert dies korrekt, wenn Sie den angezeigten Text ansehen (siehe unten). Sie können ein Escape-Zeichen (character escape) oder das (unsichtbare) Steuerzeichen benutzen, um das right-to-left mark einzufügen.
Der Titel lautet "مفتاح معايير الويب!" auf arabisch.
Visuell sortierte ASCII-Version:
der titel lautet "HCTIWS SDRADNATS BEW!" auf arabisch.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie die Quelle auf Stellen, an denen der Text die Richtung ändert.
Wenn der Text die Richtung ändert, prüfen Sie, ob neutrale Zeichen wie Leerschritte oder Satzzeichen neben dem Text, der in der Nicht-Standard-Richtung gerendert wird, auftauchen.
Wenn #2 wahr ist und der bidirektionale HTML-Algorithmus die falsche Platzierung der neutralen Zeichen hervorbringen würde, dann prüfen Sie, ob auf die neutralen Zeichen Unicode right-to-left oder left-to-right marks folgen, die dazu führen, dass neutrale Zeichen als Teil der vorhergehenden Zeichen platziert werden.
Test #3 ist 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.
HTML- und XHTML-Dokumente, die Java Applets laden, wenn applet nicht abgelehnt wird.
Die Technik bezieht sich auf:
Diese Technik wird von assistierenden Techniken nicht gut unterstützt. Die HTML-Spezifikation erklärt, dass Textalternativen für Applets angezeigt werden müssen, wenn das Element nicht gerendert werden kann. Daher kann es sein, dass Textalternativen, die im Body des applet-Elements enthalten sind, Benutzern nicht zur Verfügung stehen, außer der Benutzeragent unterstützt Applets entweder nicht oder er wurde so konfiguriert, dass er sie nicht rendert.
IE 6 für Windows und Firefox 1.5 und Opera 9 unter Windows behandeln alternativen Text für das Applet unterschiedlich. IE zeigt den body-Text des applet-Elements und nicht das alt-Attribut an. Firefox und Opera zeigen das alt-Attribut aber nicht den body-Text an.
Stellen Sie eine Textalternative für ein Applet zur Verfügung, indem Sie das alt-Attribut benutzen, um ein applet zu beschriften und indem Sie eine Textalternative im Body des applet-Elements zur Verfügung stellen. Bei dieser Technik sind beide Mechanismen erforderlich, aufgrund der unterschiedlichen Unterstützung des alt-Atribut und des body-Texts des Applets durch Benutzeragenten.
Code-Beispiel:
<applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
tic-tac-toe game
</applet> Sehen Sie sich den Quellcode des applet-Elements an
Prüfen Sie, ob das applet-Element ein alt-Attribut mit einer Textalternative für das Applet hat
Prüfen Sie, ob das applet-Element eine Textalternative für das Applet im Body des applet-Elements enthält
Tests #2 und #3 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.
Gilt für Inhalte, die auf Bildern basierende Absenden-Schaltflächen benutzen.
Die Technik bezieht sich auf:
Für Eingabe-Elemente der Art 'image', wird das alt-Attribut des input-Eelements benutzt, um eine funktionelle Beschriftung bereitzustellen. Diese Beschriftung bezeichnet die Funktion der Schaltfläche, versucht aber nicht, das Bild zu beschreiben. Die Beschriftung ist besonders wichtig, wenn es mehrere Absenden-Schaltflächen auf der Seite gibt, die alle zu unterschiedlichen Ergebnissen führen.
Das input-Element wird benutzt, um viele Arten von Formular-Steuerelementen zu erstellen. Obwohl die HTML und XHTML DTDs das alt-Attribute auf all diesen erlauben, sollte es nur bei Absenden-Schaltflächen benutzt werden, die aus Bildern bestehen. Die Unterstützung dieses Attributs auf anderen Arten von Formular-Steuerelementen durch Benutzeragenten ist nicht gut definiert und es werden andere Mechanismen benutzt, um diese Steuerelemente zu beschriften.
Ein input-Element mit einem alt-Attribut
Code-Beispiel:
<form action="http://example.com/prog/text-read" method="post">
<input type="image" name="submit" src="button.gif" alt="Submit" />
</form> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie für alle input-Elemente, die einen type-attribute-Wert „image“ haben, ob es ein alt-Attribut gibt.
Prüfen Sie, ob das alt-Attribut die Funktion der Schaltfläche bezeichnet.
#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.
Bilder, die innerhalb von HTML-Dokumenten benutzt werden.
Die Technik bezieht sich auf:
Wenn Sie das img-Element benutzen, dann geben Sie mit dem alt-Attribut eine kurze Textalternative an. Anmerkung. Der Wert dieses Attributs wird „alt text“ genannt.
Wenn ein Bild Worte enthält, die wichtig für das Verständnis des Inhalts sein, dann sollte der alt-Text diese Worte beinhalten. Das erlaubt es dem Text, die gleiche Funktion auf der Seite zu haben wie das Bild. Beachten Sie, dass es nicht notwendigerweise die visuellen Charakteristika des Bildes selbst beschreibt, aber die gleiche Bedeutung wie das Bild vermitteln muss.
Ein Bild auf einer Website bietet einen Link zu einem kostenlosen Newsletter. Das Bild enthält den Text „Kostenloser Newsletter. Get free recipes, news, and more. Erfahren Sie mehr.“ Der alt-Text entspricht dem Text im Bild.
Code-Beispiel:
<img src="newsletter.gif" alt="Free newsletter.
Get free recipes, news, and more. Learn more." />Ein Bild auf einer Website zeigt den Grundriss eines Gebäudes. Das Bild ist eine Imagemap, bei der jeder Raum ein interaktiver Bereich auf der Karte ist. Das alt-Text lautet: „Grundriss des Gebäudes. Wählen Sie einen Raum für weitere Informationen zum Zweck oder zum Inhalt des Raumes.“ Die Anweisung zum „auswählen eines Raumes“ weist darauf hin, dass das Bild interaktiv ist.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie jedes img-Element im Inhalt
Prüfen Sie, ob jedes img-Element, das eine Bedeutung vermittelt, ein alt-Attribut hat.
Wenn das Bild Worte enthält, die wichtig für das Verständnis des Inhalts sind, dann sind die Worte in der Textalternative enthalten.
Tests #2 und #3 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.
HTML- und XHTML-Datentabellen
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Untertitel (captions) für Datentabellen durch Software zu verbinden, wenn Untertitel in der Darstellung zur Verfügung gestellt werden. Die Caption für eine Tabelle ist ein Tabellen-Identifier und verhält sich wie ein Titel oder eine Überschrift für die Tabelle.
Das caption-Element ist das geeignete Markup für solchen Text und es stellt sicher, dass der Tabellen-Identifier mit der Tabelle verbunden bleibt, einschließlich der visuellen Verbindung (standardmäßig)). Darüber hinaus ermöglicht die Benutzung des caption-Elements es Screen-Reading-Software, direkt zum Untertitel für eine Tabelle zu navigieren, wenn es einen gibt. .
Das caption-Element kann benutzt werden, egal ob die Tabelle ein summary-Attribut hat oder nicht. Das caption-Element kennzeichnet die Tabelle wobei das summary-Attribut einen Überblick über den Zweck gibt oder erklärt, wie man in der Tabelle navigiert. Wenn beides benutzt wird sollte caption keine Informationen aus der summary duplizieren.
Obwohl die WCAG 2 die Benutzung von Layout-Tabellen nicht verbieten, werden CSS-basierte Layouts empfohlen, um die definierte, semantische Bedeutung der HTML und XHTML table-Elemente zu bewahren und konform zur Programmier-Praxis der Trennung von Präsentation und Inhalt zu sein. Wenn eine Tabelle für das Layout benutzt wird, dann wird das caption-Element nicht benutzt. Der Zweck einer Layout-Tabelle ist es schlicht und ergreifend, die Platzierung des Inhalts zu steuern; die Tabelle selbst ist für den Benutzer “transparent". Eine caption würde diese Transparenz „ruinieren“, indem die Aufmerksamkeit auf die Tabelle gelenkt wird.
Code-Beispiel:
<table>
<caption>Schedule for the week of March 6</caption>
...</table> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 Table Captions: The CAPTION element
Prüfen Sie bei Layout-Tabellen: Bestimmen Sie, ob der Inhalt eine Beziehung zu anderen Inhalten sowohl in seiner Spalte als auch in seiner Reihe hat.
Wenn „nein“, dann ist die Tabelle eine Layout-Tabelle.
Wenn „ja“, dann ist die Tabelle eine Datentabelle.
Wenn die Tabelle eine Layout-Tabelle ist, dann prüfen Sie ob die Tabelle kein caption-Element enthält.
Wenn die Tabelle eine Datentabelle ist und ein caption-Element enthält, prüfen Sie, ob die caption die Tabelle kennzeichnet.
Wenn sowohl ein summary-Attribut als auch ein caption-Element für die Datentabelle vorhanden sind, prüfen Sie, ob die summary nicht die caption dupliziert.
Bei Layout-Tabellen ist #2 wahr.
Bei Datentabellen sind #3 und #4 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, die Definitionen von Worten oder Phrasen zur Verfügung zu stellen, indem man sie in einer Definitionsliste anbietet. Die Liste ist durch die Benutzung des dl-Elements ausgezeichnet. Innerhalb der Liste wird jeder Begriff in ein separates dt-Element gesetzt und seine Definition ist in dem dd-Element, das unmittelbar darauf folgt. Das title-Attribut kann benutzt werden, um zusätzliche Informationen über die Definitionsliste zur Verfügung zu stellen.
Die Benutzung von dl, dt und dd stellt sicher, dass Beziehungen zwischen Begriffen und ihren Definitionen erhalten bleiben, wenn sich das Format der Darstellung ändert und dass die Liste mit Begriffen und Definitionen als Einheit behandelt wird.
Definitionslisten sind am einfachsten zu benutzen, wenn die Definitionen in alphabetischer Reihenfolge sind. Definitionslisten werden typischerweise in einem Glossar benutzt.
Eine Liste mit Definitionen nautischer Begriffe, die auf einer Website über das Segeln benutzt wird.
Code-Beispiel:
<dl title="Nautical terms">
<dt>Knot</dt>
<dd>
<p>A <em>knot</em> is a unit of speed equaling 1
nautical mile per hour (1.15 miles per hour or 1.852
kilometers per hour).</p>
</dd>
<dt>Port</dt>
<dd>
<p><em>Port</em> is the nautical term (used on
boats and ships) that refers to the left side
of a ship, as perceived by a person facing towards
the bow (the front of the vessel).</p>
</dd>
<dt>Starboard</dt>
<dd>
<p><em>Starboard</em> is the nautical term (used
on boats and ships) that refers to the right
side of a vessel, as perceived by a person
facing towards the bow (the front of the vessel).</p>
</dd>
</dl> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jeden Satz an Worten und ihre Definitionen, der das Erscheinungsbild einer Liste hat:
Prüfen Sie, ob sich die Liste innerhalb eines dlElements befindet.
Prüfen Sie, ob sich jedes Wort, das in der Liste definiert wird, in einem dtElement befindet.
Prüfen sie, ob die Definition für jedes Wort im ddElement erscheint, das unmittelbar auf das dtElement des Wortes folgt.
Alle oben genannten Tests 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, HTML und XHTML Überschriften-Markup zu benutzen, um semantischen Code für Überschriften im Inhalt bereitzustellen. Überschriften-Markup ermöglicht es assistierenden Techniken, einem Benutzer den Überschriften-Status von Text zu präsentieren. Ein Screenreader kann den Code erkennen und den Text als Überschrift mit dessen Ebene ankündigen, piepen oder einen anderen auditiven Indikator bereitstellen. Screenreader können das Überschriften-Markup auch navigieren, was für Screenreader-Benutzer eine effektive Möglichkeit sein kann, um den den Inhalt, der für sie von Interesse ist, schneller zu finden.. Assistierende Techniken, welche die vom Autor erstellte visuelle Anzeige ändern, sind ebenfalls dazu in der Lage, eine angemessene alternative visuelle Darstellung für Überschriften, die durch das Überschriften-Markup identifiziert werden können, bereitzustellen.
Im folgenden Beispiel werden Überschriften in einem hierarchischen Layout benutzt mit h3 als Unterbereich von h2, was ein Unterbereich von h1 ist.
Code-Beispiel:
<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat...</p>
<h2>Fruit</h2>
<p> A fruit is a structure of a plant that contains its
seeds...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple tree...</p>
<h3>Orange</h3>
<p>The orange is a hybrid of ancient cultivated origin...</p>
<h3>Banana</h3>
<p>Banana is the common name for herbaceous plants ...</p>
<h2>Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a
sweet fruit ...</p>
<h3>Broccoli</h3>
<p>Broccoli is a plant of the mustard/cabbage family ... </p>
<h3>Brussels sprouts</h3>
<p>The Brussels sprout of the Brassicaceae family, is a Cultivar
group of wild cabbage ...</p>
<h3>Green beans</h3>
<p>Green beans have been bred for the fleshiness, flavor, or
sweetness of their pods...</p>In diesem Beispiel ist der primäre Inhalt der Seite in der mittleren Spalte einer 3-spaltigen Seite. Der Titel des primären Inhalts entspricht dem Titel der Seite und ist als h1 ausgezeichnet, auch wenn es nicht die erste Sache auf der Seite ist. Der Inhalt in der ersten und dritten Spalte ist weniger wichtig und mit h2 ausgezeichnet.
Anmerkung: Es ist wichtig zu beachten, dass der unten stehende Beispiel-Code dazu gedacht ist zu zeigen, wir man Überschriften benutzen kann, um Blöcke an Informationen zu umgehen. Er ist nicht dazu gedacht vorzuschreiben, welche Überschriftenebene für einen bestimmten Bereich der Webseite benutzt werden sollte. In dem Beispiel könnte das Layout mit der ersten Überschrift in jeder Spalte auf der gleichen logischen Ebene (wie zum Beispiel einer h1) dargestellt werden oder so, wie man in dem Beispiel sieht, wo die logische Ebene seine Wichtigkeit in Relation zum primären Inhalt widerspiegelt.
Code-Beispiel:
<head>
<title>Stock Market Up Today</title>
</head>
<body>
<!-- left nav -->
<div class="left-nav">
<h2>Site Navigation</h2>
<!-- content here -->
</div>
<!-- main contents -->
<div class="main">
<h1>Stock Market up today</h1>
<!-- article text here -->
</div>
<!-- right panel -->
<div class="left-nav">
<h2>Related links</h2>
<!-- content here -->
</div>
</body>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob ein Überschriften-Markup benutzt wird, wenn es sich bei dem Inhalt um eine Überschrift handelt.
Prüfen Sie, ob ein Überschriften-Markup nicht benutzt wird, wenn es sich bei dem Inhalt nicht um eine Überschrift handelt.
Tests #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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, jede Datenzelle (in einer Datentabelle) mit den passenden Überschriften zu verbinden. Diese Technik fügt ein headers-Attribut zu jedem Datenzellen-(td-Element hinzu). Sie fügt außerdem ein id-Attribut zu jeder Zelle, die als Überschrift für andere Zellen benutzt wird, hinzu. Das headers-Attribut einer Zelle enthält eine Liste der id-Attribute der zugeordneten Überschriften-Zellen. Wenn es mehr als eine idgibt, dann werden diese durch Leerschritte getrennt.
Diese Technik wird benutzt, wenn Datenzellen mehr als einer Zeilen- und/oder Spaltenüberschrift zugeordnet sind. Dies ermöglicht es Screenreadern, die jeder Datenzelle zugeordneten Überschriften zu sprechen, wenn die Beziehungen zu komplex sind, um sie durch die Benutzung des th-Elements alleine oder des th-Element mit dem scope-Attribut zusammen zu identifizieren. Die Benutzung dieser Technik macht diese komplexen Beziehungen außerdem wahrnehmbar, wenn sich das Format der Darstellung ändert.
Diese Technik wird nicht für Layout-Tabellen empfohlen, da die Benutzung dieser Technik eine Beziehung zwischen Zellen impliziert, die nicht sinnvoll ist, wenn Tabellen für Layoutzwecke benutzt werden.
Code-Beispiel:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 header information with data cells
Prüfen Sie bei Layout-Tabellen: Bestimmen Sie, ob der Inhalt eine Beziehung zu anderen Inhalten sowohl in seiner Spalte als auch in seiner Reihe hat. Wenn „nein“, dann ist die Tabelle eine Layout-Tabelle. Wenn „ja“, dann ist die Tabelle eine Datentabelle.
Prüfen Sie bei Datentabellen, ob jede Zelle, die mehr als einer Zeilen- und/oder Spaltenüberschrift zugeordnet ist, ein headers-Attribut enthält, das die id für alle dieser Zelle zugeordneten Überschriften auflistet.
Bei Datentabellen, in denen jede Zelle ein id- oder headers-Attribut enthält:
Prüfen Sie, ob jede id im headers-Attribut der Datenzelle dem id-Attribut einer Zelle, die als Header-Element benutzt wird, entspricht
Prüfen Sie, ob das headers-Attribut einer Datenzelle die id-Attribute aller der Datenzelle zugeordneten Überschriften enthält
Prüfen Sie, ob alle ids einmalig sind (d.h. dass keine zwei Elemente auf der Seite die gleiche id haben)
Wenn es sich bei der Tabelle um eine Layout-Tabelle handelt, dann enthalten keine Zelle headers- oder id-Attribute
Wenn es sich bei der Tabelle um eine Datentabelle handelt und irgendwelche Zellen ein id-Attribut enthalten, dann sind die Tests #3.a, #3.b und #3.c wahr.
Wenn es sich bei der Tabelle um eine Datentabelle handelt und jede Zelle mehr als einer Zeilen- und/oder Spaltenüberschrift zugeordnet ist, dann ist Test #2 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.
HTML- und XHTML-Steuerelemente, die externe Beschriftungen benutzen
Die Technik bezieht sich auf:
Die HTML und XHTML-Spezifikationen erlauben sowohl implizite als auch explizite Beschriftungen. Allerdings verarbeiten einige assistierende Techniken implizite Beschriftungen nicht korrekt (zum Beispiel <label>First name <input type="text" name="firstname"></label>).
JAWS 7.10 wurde unter Windows XP mit Internet Explorer 6.0 und Firefox 1.5 getestet. Es liest die Beschriftung für explizite und implizite Beschriftungen von Textfeldern sowohl im Virtuellen-Cursor-Modus als auch im Formularmodus. Im Formularmodus liest es keine Beschriftungen für implizite Beschriftungen bei Kontrollkästchen und Radio-Feldern.
Window-Eyes 5.5 wurde unter Windows XP mit Internet Explorer 6.0 und Firefox 1.5 getestet. Es spricht immer die Beschriftung von einem explizit beschrifteten Formularfeld. Es spricht keine Beschriftung für implizit beschriftete Formular-Steuerelemente im browse-on-Modus aber es spricht die implizite Beschriftung, wenn man im browse-off-Modus von Steuerelement zu Steuerelement navigiert.
Benutzeragenten zeigen einen Tooltip an, wenn die Maus über einem input-Element, das ein titleAttribut hat, schwebt. Title-Attribute werden assistierenden Techniken gezeigt und als Tooltips in vielen grafischen Browsern angezeigt. Tooltips können nicht per Tastatur geöffnet werden, also kann es sein, dass diese Information sehenden Tastatur-Benutzern nicht zur Verfügung steht.
Wenn keine Beschriftung (label) zur Verfügung steht, sprechen JAWS und Window-Eyes das title-Attribut, wenn das Formular-Steuerlement des Fokus erhält
JAWS 6.0 und höher kann so eingestellt werden, dass sowohl label als auch title gesprochen werden, wenn die zwei Elemente unterschiedlich sind; allerdings haben nur sehr wenige Benutzer von dieses Einstellung Kenntnis.
WindowEyes 5.5 hat einen Kurzbefehl, ins-E, der that will display additional information, including the title attribute, for the item with focus.
Das Ziel dieser Technik ist es, das label-Element zu benutzen, um ein Formular-Steuerelement explizit mit einer Beschriftung zu verbinden. Ein label wird durch die Benutzung des for-Attributs an ein bestimmtes Formular-Steuerelement angehängt. Der Wert des for-Attributs muss gleich dem Wert des idAttributs des Formular-Steuerelements sein.
Das id-Attribut kann den gleichen Wert wir das name-Attribut haben, aber beide müssen bereitgestellt werden und die id muss auf der Webseite einmalig sein.
Diese Technik ist ausreichend für die Erfolgskriterien 1.1.1, 1.3.1 und 4.1.2, egal ob das label-Element sichtbar ist. Sprich, es kann durch die Benutzung von CSS versteckt sein. Allerdings muss das label-Element für Erfolgskriterium 3.3.2 sichtbar sein, da es allen Benutzern, die Hilfe brauchen, um den Zweck des Feldes zu verstehen, Unterstützung bietet.
Ein zusätzlicher Nutzen dieser Technik ist ein größerer anklickbarer Bereich für das Steuerelement, da das Klicken auf das Label oder das Steuerelement das Steuerelement aktiviert. Dies kann für Benutzer mit beeinträchtigter Motorik hilfreich sein.
Beachten Sie, dass das label nach den input-Elementen des Typs type="checkbox" und type="radio" positioniert wird.
Anmerkung 1:Elemente, die explizit verbundene Label benutzen, sind:
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
Anmerkung 2:Das labelElement wird nicht für folgendes benutzt, da Label für diese Elemente über das value-Attribut (bei Absenden- und Zurücksetzen-Schaltflächen), das alt-Attribut (für Bild-Schaltflächen) oder über Inhalte des Elements selber (Schaltfläche) zur Verfügung gestellt werden.
Absenden- und Zurücksetzen-Schaltflächen (input type="submit" oder input type="reset")
Bild-Schaltflächen (input type="image")
Versteckte Eingabefelder (input type="hidden")
Skript-Schaltflächen (button-Elemente oder <input type="button">)
Das Textfeld in dem Beispiel unten hat die explizite Beschriftung „Vorname:“. Das for-Attribut des label-Elements entspricht dem id-Attribut des input-Elements.
Code-Beispiel:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />Code-Beispiel:
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>Eine kleine, zusammenhängende Gruppe von Radiobuttons mit einer eindeutigen Beschreibung und Beschriftungen für jedes individuelle Element.
Anmerkung: Um klare Verbindungen und Anweisungen für eine große Reihe an zusammenhängenden Radiobuttons zur Verfügung zu stellen, sollte H71: Bereitstellung einer Beschreibung für Gruppen von Formular-Steuerelementen, indem fieldset- und legend-Elemente benutzt werden in Betracht gezogen werden.
Code-Beispiel:
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für alle input-Elemente des Typs text, file oder Passwort, für alle textareas und für alle select-Elemente auf der Webseite:
Prüfen Sie, ob es ein label-Element gibt, das den Zweck des Steuerelements vor dem input-, textarea- oder select-Element identifiziert.
Prüfen Sie, ob das for-Attribut des label-Elements der id des input-, textarea- oder select-Elements entspricht.
Prüfen Sie, ob das label-Element sichtbar ist.
Für alle input-Elemente des Typs Kontrollkästchen oder Radiobutton auf der Webseite:
Prüfen Sie, ob es ein label-Element gibt, das den Zweck des Steuerelements nach dem input-Element identifiziert
Prüfen Sie, ob das for-Attribut des label-Elements der id des input-Elements entspricht
Prüfen Sie, ob das label-Element sichtbar ist.
Tests #1 und #2 sind wahr. Für Erfolgskriterium 3.3.2 ist Test #3 ebenfalls 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.
HTML- und XHTML-Dokumente, die Bilder enthalten, die nicht in einer kurzen Textalternative beschrieben werden können.
Die Technik bezieht sich auf:
Einige ältere assistierende Techniken unterstützen das longdesc-Attribut nicht.
Das Ziel dieser Technik ist es, Informationen in einer vom longdesc-Attribut designierten Datei bereitzustellen, wenn eine kurze Textalternative die im Bild bereitgestellte Funktion und Information nicht adäquat vermittelt. Das longdesc-Attribut ist ein URI dessen Ziel eine lange Beschreibung des Nicht-Text-Inhalts enthält.
Code-Beispiel:
<p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>Prüfen Sie, ob das img-Element ein longdesc-Attribut hat.
Prüfen Sie, ob der Wert des longdesc-Attributs ein gültiger URI einer existierenden Ressource ist.
Prüfen Sie, ob der Inhalt am Ziel dieses URI eine lange Beschreibung enthält, die den damit verbundenen Original-Nicht-Text-Inhalt beschreibt.
#1 bis #3 sind alle 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.
Dokumente, die Plugins mit dem embed-Element laden.
Die Technik bezieht sich auf:
Anmerkung: Obwohl embed weithin in Benutzeragenten unterstützt wird ist es kein valider Teil von HTML oder XHTML.
Das Ziel dieser Technik ist es, alternativen Inhalt für das embed-Element in einem noembed-Element zur Verfügung zu stellen. Das noembed wird nur gerendert, wenn das embed nicht unterstützt wird. Obwohl es irgendwo auf der Seite positioniert werden kann, ist es eine gute Idee, es als child-Element von embed einzuschließen, so dass es für assistierende Techniken klar ist, dass eine Textalternative mit dem embed-Element, die sie beschreibt, verbunden ist.
Code-Beispiel:
<embed src="../movies/history_of_rome.mov"
height="60" width="144" autostart="false">
<noembed>
<a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
</noembed>
</embed>Code-Beispiel:
<embed src="moviename.swf" width="100" height="80"
pluginspage="http://example.com/shockwave/download/" />
<noembed>
<img alt="Still from Movie" src="moviename.gif"
width="100" height="80" />
</noembed>;Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Prüfen Sie, ob das embed-Element ein child-noembed-Element hat
Prüfen Sie, ob das embed-Element ein unmittelbar folgendes noembed-Element hat.
#1 ist wahr oder #2 ist 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.
HTML, XHTML
Die Technik bezieht sich auf:
Assistierende Techniken enthalten eine nicht konsistente Unterstützung für die unterschiedlichen Anwendungen des type-Attributs, das dazu benutzt wird, um die Gestaltung von Nummerierungen und Aufzählungspunkten anzugeben.
Das Ziel dieser Technik ist es, Listen mit zusammenhängenden Punkten zu erstellen, indem die für ihren Zweck angebrachten Listenelemente benutzt werden. Das ol-Element wird benutzt, wenn die Liste geordnet ist und das ul-Element wird benutzt, wenn die Liste ungeordnet ist. Definitionslisten (dl) werden benutzt, um Begriffe mit ihren Definitionen zu gruppieren. Obwohl die Benutzung dieses Markups Listen lesbarer machen kann, benötigen nicht alle Listen Markup. Zum Beispiel brauchen Sätze, die durch Kommata getrennte Listen enthalten, möglicherweise kein Listen-Markup.
Wenn Markup benutzt wird, das die Punkte visuell als Liste formatiert, nicht aber die Beziehung innerhalb der Liste kennzeichnet, dann kann es sein, dass Benutzer Schwierigkeiten haben, durch die Informationen zu navigieren. Ein Beispiel einer solchen visuellen Formatierung ist das Hinzufügen von Asterisken im Inhalt zu Beginn jedes Listenpunktes und die Benutzung des <br>-Elements, um die Listenpunkte zu trennen.
Einige assistierende Techniken erlauben es Benutzern, von Liste zu Liste oder von Punkt zu Punkt zu navigieren. Stylesheets können benutzt werden, um die Darstellung der Listen zu ändern, während gleichzeitig deren Integrität gewahrt wird.
Die Listenstruktur (ul/ol) ist auch hilfreich, um Hyperlinks zu gruppieren. Wenn dies gemacht wird, dann hilft das Screenreader-Benutzern dabei, vom ersten Element in einer Liste zum Ende der Liste zu navigieren oder zur nächsten Liste zu springen. Dies hilft ihnen dabei, Gruppen von Links zu umgehen, wenn sie dies möchten.
Dieses Beispiel benutzt eine geordnete Liste, um die Abfolge von Schritten in einen Prozess zu zeigen.
Code-Beispiel:
<ol>
<li>Mix eggs and milk in a bowl.</li>
<li>Add salt and pepper.</li>
</ol>Dieses Beispiel zeigt eine ungeordnete Liste mit im Geschäft zu kaufenden Dingen.
Code-Beispiel:
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
</ul>Dieses Beispiel benutzt eine Definitionsliste, um eine Definition mit dem definierten Begriff zu gruppieren.
Code-Beispiel:
<dl>
<dt>blink</dt>
<dd>turn on and off between .5 and 3 times per second
</dd>
</dl> In diesem Beispiel werden die Links gruppiert, indem man die ul- und li-Elemente benutzt.
Code-Beispiel:
<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
<li><a href="kitchen.html">Kitchen</a></li>
<li><a href="bedbath.html">Bed & Bath</a></li>
<li><a href="dining.html">Fine Dining</a></li>
<li><a href="lighting.html">Lighting</a></li>
<li><a href="storage.html">Storage</a><li>
</ul> Man kann CSS benutzen, um die Listenelemente zu formatieren, so dass diese Technik mit einer Vielzahl an visuellen Erscheinungsbildern benutzt werden kann.
Hier ist eine Formatierung, welche die Aufzählungspunkte der Liste und den linken Innenabstand, der zur Einrückung führt, entfernt und die einzelnen Listenelemente horizontal laufen lässt.
Code-Beispiel:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: inline;
}Diese Formatierung entfernt die Aufzählungspunkte der Liste und den linken Innenabstand und zeigt die Elemente in einem fließenden Block an.
Code-Beispiel:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: block;
float: left;
}Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob Inhalt, der die visuelle Erscheinung einer Liste hat (mit oder ohne Aufzählungspunkte) als ungeordnete Liste ausgezeichnet ist.
Prüfen Sie, ob Inhalt, der die visuelle Erscheinung einer nummerierten Liste hat, als geordnete Liste ausgezeichnet ist.
Prüfen Sie, ob Inhalt als Definitionsliste ausgezeichnet ist, wenn Begriffe und ihre Definitionen in Form einer Liste präsentiert werden.
Alle oben genannten Tests 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.
HTML und XHTML
Die Technik bezieht sich auf:
Einige semantische Elemente werden nicht gut von assistierenden Techniken unterstützt. Elemente und Attribute, die dafür bekannt sind, dass sie eine begrenzte Unterstützung haben, sind unter anderem code, del, dfn, ins, kbd, s, sub, sup, tt und q. Bei diesen Elementen werden Autoren dazu ermutigt, zu überprüfen, ob sie diese auf eine Art und Weise benutzen, die vom Benutzer verlangt, auf die semantische Bedeutung des Markup zuzugreifen zu können, um den Inhalt zu verstehen und, wenn das Verständnis der Semantik erforderlich ist, zu erwägen, diese Informationen in Textform zur Verfügung zu stellen.
Die meisten Screenreader stellen keine automatische Benachrichtigung über em, strong, b oder i bereit.
JAWS enthält Unterstützung für blockquote und cite. WindowEyes enthält Unterstützung für blockquote, q und cite.
Firefox 1.0 (Windows) und höher, Opera 7.54 (Windows) und höher, Mozilla 1.7.3 (Windows) und höher generieren automatisch Anführungszeichen um q-Elemente, aber Internet Explorer 6 für Windows tut dies nicht.
Das Ziel dieser Technik ist es zu demonstrieren, wie semantisches Markup benutzt werden kann, um hervorgehobenen oder besonderen Text auszuzeichnen, so dass er durch Software bestimmt werden kann. Die Benutzung von semantischem Markup zur Auszeichnung von hervorgehobenem oder besonderem Text gibt dem Dokument außerdem Struktur. Benutzeragenten können dann die Struktur für den Benutzer wahrnehmbar machen, indem sie z.B. eine unterschiedliche visuelle Präsentation für unterschiedliche Arten von Strukturen oder eine unterschiedliche Stimme oder Stimmhöhe in einer Audiopräsentation benutzen.
Die meisten Benutzeragenten kennzeichnen Text, der durch die Benutzung von semantischem Markup identifiziert wurde, auf visuelle Art. Einige assistierende Techniken stellen einen Mechanismus bereit zur Bestimmung der Charakteristika von Inhalt, der durch die Benutzung von korrektem, semantischem Markup erstellt wurde.
Siehe gerenderte Beispiele von semantischem Text.
Dieses Beispiel zweigt, wie man die em- und strong-Elemente benutzt, um Text hervorzuheben. Die em- und strong-Elemente wurden dazu konzipiert, strukturelle Betonungen zu kennzeichnen, die auf unterschiedliche Art und Weise gerendert werden können (Änderungen des Zeichensatzes, Änderungen im Tonfall usw.).
Code-Beispiel:
...What she <em>really</em> meant to say was, "This is not ok,
it is <strong>excellent</strong>"!... Dieses Beispiel zeigt die Benutzung des blockquote-Elements, um lange Zitate auszuzeichnen, die unter Umständen Absatzwechsel erfordern. Es zeigt außerdem die Benutzung des cite-Elements, um eine Referenz zu spezifizieren.
Code-Beispiel:
<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
<blockquote>
<p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
hedges, and, guided by the sense of smell, would find the first violets and lilies.
There, too, after a fit of temper, I went to find comfort and to hide my hot face
in the cool leaves and grass.</p>
</blockquote>Hier ist die Benutzung des q-Elements, um ein kürzeres Zitat auszuzeichnen. Um das q-Element herum werden Anführungszeichen bereitgestellt, weil viele Benutzeragenten dieses Element noch nicht unterstützen und es daher nicht korrekt anzeigen (siehe UA-Anmerkungen). CSS-Regeln zur Unterdrückung der automatischen Generierung von Anführungszeichen werden für jene Benutzeragenten zur Verfügung gestellt, die das q-Element unterstützen, um damit zu verhindern, dass Anführungszeichen - zusätzlich zu den vom Autor bereitgestellten Anführungszeichen - automatisch generiert werden, was dann Inhalte mit doppelten Anführungszeichen zur Folge haben würde. In Zukunft, wenn das q-Element weitgehender unterstützt wird, wird es nicht mehr notwendig sein, Anführungszeichen zur Verfügung zu stellen und vom Browser generierte Anführungszeichen zu unterdrücken.
Code-Beispiel:
q:before { content: ""; }
q:after { content: ""; } Code-Beispiel:
<p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it,
we can never do anything good in the world.</q>"</p>Superscripts und Subscripts werden erstellt, indem die sup- und sub-Elemente benutzt werden.
Code-Beispiel:
<p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Überprüfen Sie den Inhalt auf Informationen, die durch Variationen in der Präsentation des Textes vermittelt werden.
Prüfen Sie, ob das passende semantische Markup (wie beispielsweise em, strong, cite, blockquote, quote, sub und sup) benutzt wurde, um den Text, der Informationen durch Variationen im Text vermittelt, auszuzeichnen.
Test #2 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist zu demonstrieren , wie man Links in logische Gruppen gliedert, indem man das map-Element benutzt. Wenn Links in logische Gruppen gegliedert werden (zum Beispiel in einer Navigationsleiste oder in einem Hauptmenü, die auf jeder Seite einer Site auftauchen), dann sollten Sie als Einheit ausgezeichnet werden. Navigationsleisten sind normalerweise das erste, auf das jemand auf einer Seite trifft. Sehende Menschen sind oftmals in der Lage, die Teile der Navigation zu ignorieren und damit anzufangen, den Inhalt der Seite zu lesen. Jemand der einen Screenreader benutzt, muss sich vor dem Lesen des interessanten Inhalts erst den Text jedes Links in der Navigationsleiste anhören. Diese Technik nutzt das map-Element um Inhalte so auszuzeichnen, dass ein Benutzer mit einem Screenreader über die Navigationsleiste springen und es verhindern kann, alle Links zu lesen.
In diesem Beispiel gruppiert das map-Element einen Satz an Links, das title-Attribut kennzeichnet ihn als Navigationsleiste.
Code-Beispiel:
<map title="Navigation Bar">
<p>
[<a href="home.html">Home</a>]
[<a href="search.html">Search</a>]
[<a href="new.html">New and highlighted</a>]
[<a href="sitemap.html">Site map</a>]
</p>
</map> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Überprüfen Sie den Inhalt auf anchor-Elemente, die zusammen gruppiert werden sollen.
Prüfen Sie, ob die anchor-Elemente gruppiert werden, indem map-Elemente benutzt werden.
Test #1 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, tabellarische Informationen auf eine Art und Weise zu präsentieren, welche die Beziehungen innerhalb der Informationen beibehält, auch wenn Benutzer die Tabelle nicht sehen können oder das Format der Darstellung geändert wird. Informationen gelten als tabellarisch, wenn logische Beziehungen zwischen Text, Ziffern, Bildern oder anderen Daten in zwei Dimensionen vorliegen (vertikal und horizontal). Diese Beziehungen werden in Spalten und Zeilen dargestellt und die Spalten und Zeilen müssen erkennbar sein, damit die logischen Beziehungen wahrgenommen werden können.
Benutzung des table-Elements mit den child-Elementen tr, th und td macht diese Beziehungen wahrnehmbar. Techniken wie das Einfügen von Tabs zur Erstellung von Spalten oder die Benutzung des pre-Elements sind rein visuell und visuell implizierte Beziehungen gehen verloren, wenn der Benutzer die Tabelle nicht sehen kann oder die visuelle Darstellung verändert wird.
Dieses Beispiel benutzt Markup für eine einfache Datentabelle. Die erste Zeile zeigt die Wochentage. Zeitintervalle werden in der ersten Spalte angezeigt. Diese Zellen sind mit dem th-Element ausgezeichnet. Dies kennzeichnet die Wochentage als Spaltenüberschriften und die Zeitintervalle als Zeilenüberschriften.
Screenreader sprechen Überschrifteninformationen, die sich ändern während der Benutzer in der Tabelle navigiert. Wenn sich der Screenreader-Benutzer also innerhalb einer Zeile nach links oder rechts bewegt, dann hört er den Wochentag (die Spaltenüberschrift) gefolgt vom Termin (wenn es einen gibt). Sie hören das Zeitintervall, wenn sie sich innerhalb der gleichen Spalte nach oben oder unten bewegen.
Code-Beispiel:
<table>
<tr>
<td> </td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>8:00-9:00</th>
<td>Meet with Sam</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>9:00-10:00</th>
<td> </td>
<td> </td>
<td>Doctor Williams</td>
<td>Sam again</td>
<td>Leave for San Antonio</td>
</tr>
</table> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 Table Element
HTML 4.01 Table rows: The TR element
HTML 4.01 Table cells: The TH and TD elements
Prüfen Sie, ob tabellarische Informationen vorhanden sind.
Für jedes Auftreten von tabellarischen Informationen:
Prüfen Sie, ob Tabellen-Markup mit mindestens den Elementen table, tr, th und td benutzt wird.
Alle oben genannten Tests 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.
Dokumente, die Medien mit dem object-Element laden.
Die Technik bezieht sich auf:
Diese Technik wird von assistierenden Techniken nicht gut unterstützt und die Cross-Browser-Unterstützung ist nicht einheitlich.
Das Ziel dieser Technik ist es, eine Textalternative für Inhalte, die durch die Benutzung des object-Elements gerendert werden, zur Verfügung zu stellen. Der body des object-Elements kann benutzt werden, um eine komplette Textalternative für das Objekt zur Verfügung zu stellen oder er kann zusätzliche nicht-Text-Inhalte mit Textalternativen enthalten.
Code-Beispiel:
<object classid="http://www.example.com/analogclock.py">
<p>Here is some text that describes the object and its operation.</p>
</object>Code-Beispiel:
<object classid="http://www.example.com/animatedlogo.py">
<img src="staticlogo.gif" alt="Company Name" />
</object>
Code-Beispiel:
<object data="companylogo.gif" type="image/gif">
<p>Company Name</p>
</object>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob der body jedes object-Elements eine Textalternative für das Objekt beinhaltet.
#1 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, dfn zu benutzen, um den Gebrauch eines Wortes oder einer Phrase da, wo es definiert wird, auszuzeichnen. Das dfn-Element wird benutzt, um die definierende Instanz des umschlossenen Begriffes zu kennzeichnen. Sprich, es markiert das Auftreten des Begriffs an der Stelle, an der er definiert wird. Beachten Sie, dass es den Begriff umschließt und nicht die Definition. Diese Technik würde in Kombination mit G112: Benutzung von Inline-Definitionen eingesetzt, um die Definition zur Verfügung zu stellen.
Der folgende Code-Schnipsel zeigt die Benutzung des dfn-Elements.
Code-Beispiel:
<p>The Web Content Accessibility Guidelines require that non-text content
has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
of characters that can be programmatically determined or where the sequence is
not expressing something in human language; this includes ASCII Art (which is a
pattern of characters), emoticons, leetspeak (which is character substitution), and
images representing text .</p> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 DFN Element
Identifizieren Sie alle Worte, die inline im Text definiert werden, d.h. wo die Definition in einem Satz in der Nähe eines Auftretens des Wortes vorkommt.
Prüfen Sie, ob jedes Wort, das inline definiert wird, von einem dfn-Element umschlossen ist.
Test #2 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Änderungen in der Textrichtung bei Text, der verschachtelte Laufrichtungen (nested directional runs) enthält, zu kennzeichnen, indem das dir-Attribut bei inline-Elementen bereitgestellt wird. Eine verschachtelte Laufrichtung (nested directional run) ist der Fluss eines Textes, bei dem die Laufrichtung gemischt ist, z.B. ein Absatz in Englisch, der einen zitierten hebräischen Satz enthält, der wiederum eine Englische Phrase enthält. Die Benutzung des dir-Attributs bei einem umschließenden span oder einem anderen Inline-Element kann notwendig sein, da der Unicode bidirectional algorithm unerwünschte Ergebnisse hervorbringen kann, wenn Text mit unterschiedlichen Laufrichtungen Leerschritte oder Zeichensetzung enthält. Die Konzepte, die in dieser Technik benutzt werden, werden in What you need to know about the bidi algorithm and inline markup beschrieben.
Dieses Beispiel definiert die Textrichtung einer verschachtelten Phrase - auf hebräisch und englisch - mit unterschiedlichen Laufrichtungen als von rechts nach links. Da das gesamte Zitat auf hebräisch ist und daher von rechts nach links läuft, sollte der Text „W3C“ und das Komma links neben (d.h. nach) dem hebräischen Text erscheinen, also so:
Der Titel lautet „פעילות הבינאום, W3C“ auf hebräisch.
Visuell sortierte ASCII-Version (RTL-Text in Großbuchstaben, LTR in Kleinbuchstaben):
Der Titel lautet „w3c ,YTIVITCA NOITAZILANOITANRETNI“ auf hebräisch.
Der Unicode-bidirection-Algorithmus alleine reicht nicht aus, um das korrekte Ergebnis zu erzielen und lässt den Text 'W3C' auf der rechten Seite des Zitats stehen:
Der Titel lautet „פעילות הבינאום, W3C“ auf hebräisch..
Visuell sortierte ASCII-Version:
Der Titel lautet „YTIVITCA NOITAZILANOITANRETNI, w3c“ auf hebräisch.
Das folgende Markup bringt das erwartete Ergebnis hervor:
Code-Beispiel:
<p>The title says "<span lang="he"
dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie die Laufrichtung von Text in dem Dokument
Wenn die Laufrichtung von rechts-nach-links ist, prüfen Sie, ob bei dem ancestor-Element, das ein dir-Attribut hat, der Wert des Attributs „rtl“ lautet
Wenn die Laufrichtung von links-nach-rechts ist, prüfen Sie, ob es kein ancestor-Element mit einem dir-Attribut gibt oder ob bei dem ancestor-Element , das ein dir-Attribut hat, der Wert des Attributs „ltr“ lautet
Tests #2 und #3 sind alle für sämtlichen Text 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.
HTML und XHTML
Die Technik bezieht sich auf:
Zusätzliche Subtags für Region, Script, Variante oder andere Aspekte können zu Fehlern beim Wechsel der Sprache in älteren Versionen einiger Screenreader führen.
JAWS 8.0 kann so konfiguriert werden, dass die Sprache automatisch auf Basis des lang-Attributs geändert wird. Es wechselt allerdings nur zwischen den großen Sprachen wie durch den primären Code angegeben. Wenn eine regionale Sprachvariante mit einem Sprach-Subcode angegeben wird, benutzt JAWS die Standard-Variante, für die es konfiguriert ist.
Das Ziel dieser Technik ist es, die Standard-Sprache eines Dokumentes zu kennzeichnen, indem die lang- und/oder xml:lang-Attribute im html-Element zur Verfügung gestellt werden.
Die Kennzeichnung der Sprache des Dokumentes ist aus einer Reihe von Gründen wichtig:
So ermöglicht dies Braille-Übersetzungs-Software, Steuer-Code für akzentuierte Zeichen zu ersetzen und Steuer-Codes einzufügen, die notwendig sind, um eine fehlerhafte Erstellung von Grad 2-Braille-Verkürzungen zu verhindern.
Sprach-Synthesizer, die mehrere Sprachen unterstützen, sind in der Lage sich zu orientieren und sich an die Aussprache und Syntax, die spezifisch für die Sprache der Seite sind, anzupassen und den Text mit dem passenden Akzent und der korrekten Aussprache zu sprechen.
Die Kennzeichnung der Sprache kann zukünftigen technischen Entwicklungen zugute kommen, z.B. werden Benutzer, die nicht in der Lage sind, selber in andere Sprachen zu übersetzen, Maschinen benutzen können, um unbekannte Sprachen zu übersetzen.
Die Auszeichnung der Sprache kann auch Benutzeragenten dabei unterstützen, Definitionen durch die Benutzung eines Wörterbuchs zur Verfügung zu stellen.
HTML 4.01 benutzt das lang-Attribut des html-Elements. Als text/html dienendes XHTML benutzt das lang-Attribut und das xml:lang-Attribut des html-Elements, um die Anforderungen von XHTML zu erfüllen und eine Abwärtskompatibilität mit HTML bereitzustellen. Als application/xhtml+xml dienendes XHTML benutzt das xml:lang-Attribut des html-Elements. Sowohl das lang- als auch das xml:lang-Attribute kann nur einen Wert haben.
Anmerkung 1: HTML bietet nur die Benutzung des lang-Attributes an, während XHTML 1.0 (als vorübergehende Maßnahme) beide Attribute erlaubt und XHTML 1.1 erlaubt nur xml:lang.
Anmerkung 2:Erlaubte Werte für die lang- und xml:lang-Attribute sind in den unten referenzierten Ressourcen angegeben. Sprach-Tags benutzen einen Hauptcode, um die Sprache anzugeben, und optionale Untercodes (durch Bindestrich getrennt), um Sprachvarianten anzugeben. Englisch wird beispielsweise mit dem Hauptcode „en“ angegeben; Britisches Englisch und amerikanisches Englisch können unterschieden werden, indem man entsprechend „en-GB“ oder „en-US“ benutzt. Die Benutzung des Hauptcodes ist für diese Technik wichtig. Die Benutzung von Untercodes ist optional, kann aber unter bestimmten Umständen hilfreich sein.
Dieses Beispiel definiert, dass der Inhalt eines HTML-Dokumentes in französischer Sprache ist.
Code-Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>Dieses Beispiel definiert, dass der Inhalt eines XHTML 1.0-Dokumentes mit content type text/html in französischer Sprache ist. Sowohl das lang- als auch das xml:lang-Attribut sind angegeben, um die Anforderungen von XHTML zu erfüllen und eine Abwärtskompatibilität zu HTML zur Verfügung zu stellen.
Code-Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html> Dieses Beispiel definiert, dass der Inhalt eines XHTML 1.1-Dokumentes mit content type application/xhtml+xml in französischer Sprache ist. Nur das xml:lang-Attribut wird angegeben.
Code-Beispiel:
<!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="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie das html-Element des Dokumentes.
Prüfen Sie, ob das html-Element ein lang- und/oder ein xml:lang-Attribut hat.
Prüfen Sie, ob der Wert des lang-Attributs konform zu BCP 47: Tags for the Identification of Languages oder dessen Nachfolger ist, und ob es die von der Webseite benutzte Hauptsprache widerspiegelt.
Die oben genannten Tests sind alle 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.
HTML und XHTML
Die Technik bezieht sich auf:
Zusätzliche Subtags für Region, Script, Variante oder andere Aspekte können zu Fehlern beim Wechsel der Sprache in älteren Versionen einiger Screenreader führen.
JAWS 8.0 kann so konfiguriert werden, dass die Sprache automatisch auf Basis des lang-Attributs geändert wird. Es wechselt allerdings nur zwischen den großen Sprachen wie durch den primären Code angegeben. Wenn eine regionale Sprachvariante mit einem Sprach-Subcode angegeben wird, benutzt JAWS die Standard-Variante, für die es konfiguriert ist.
Das Ziel dieser Technik ist es, alle Änderungen der Sprache auf einer Seite eindeutig zu kennzeichnen, indem das lang- oder das xml:lang-Attribut entsprechend der von Ihnen benutzen HTML- oder XHTML-Version benutzt wird.
HTML 4.01 benutzt das lang-Attribut bei Elementen. Als text/html dienendes XHTML benutzt das lang-Attribut und das xml:lang-Attribut bei Elementen, um die Anforderungen von XHTML zu erfüllen und eine Abwärtskompatibilität mit HTML bereitzustellen. Als application/xhtml+xml dienendes XHTML benutzt das xml:lang-Attribut bei Elementen.
Anmerkung: HTML bietet nur die Benutzung des lang-Attributes an, während XHTML 1.0 (als vorübergehende Maßnahme) beide Attribute erlaubt und XHTML 1.1 erlaubt nur xml:lang.
Erlaubte Werte für die lang- und xml:lang-Attribute sind in den unten referenzierten Ressourcen angegeben. Sprach-Tags benutzen einen Hauptcode, um die Sprache anzugeben, und optionale Untercodes (durch Bindestrich getrennt), um Sprachvarianten anzugeben. Englisch wird beispielsweise mit dem Hauptcode „en“ angegeben; Britisches Englisch und amerikanisches Englisch können unterschieden werden, indem man entsprechend „en-GB“ oder „en-US“ benutzt. Die Benutzung des Hauptcodes ist für diese Technik wichtig. Die Benutzung von Untercodes ist optional, kann aber unter bestimmten Umständen hilfreich sein.
Dieses Beispiel zeigt die Benutzung des xml:lang-Attributs, das ein in deutsch geschriebenes Zitat definiert. Dieses Bruchstück könnte in einem XHTML 1.1-Dokument enthalten sein, in dem lang nicht erlaubt ist.
Code-Beispiel:
<blockquote xml:lang="de">
<p>
Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
aber der Esel merkte, daß kein guter Wind wehte, lief fort
und machte sich auf den Weg nach Bremen: dort, meinte er,
könnte er ja Stadtmusikant werden.
</p>
</blockquote>
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jedes Element im Dokument:
Prüfen Sie, ob die menschliche Sprache des Inhalts des Elementes die gleiche ist, wie die vererbte Sprache für das Element wie in HTML 4.01, Inheritance of language codes spezifiziert
Für jedes lang-Attribut im Dokument:
Prüfen Sie, ob der Wert des lang-Attributs konform zu BCP 47: Tags for the Identification of Languages oder dessen Nachfolger ist
Für jedes xml:lang-Attribut im Dokument:
Prüfen Sie, ob der Wert des xml:lang-Attributs konform zu BCP 47: Tags for the Identification of Languages oder dessen Nachfolger ist
Alle oben genannten Tests 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das link-Element wird nicht durchgängig von Benutzeragenten und assistierenden Techniken unterstützt.
Einige Benutzeragenten stellen eine optionale Navigationsleiste zur Verfügung, in der die im link-Element spezifizierten Informationen angezeigt werden. Aktuelle Versionen der Mozilla- und Opera-Browser stellen diese Funktionalität zur Verfügung. IE 6.0 und Firefox 1.5 bieten diese Funktion nicht an, aber sie kann durch Erweiterungen oder add-ons zur Verfügung stehen.
Siehe The 'link'-Element in (X)HTML für weitere Informationen zur Unterstützung von link durch Browser.
Das Ziel dieser Technik ist es zu beschreiben, wie das link-Element Metadaten über die Position einer HTML-Seite innerhalb eines Satzes an Webseiten zur Verfügung stellen kann oder wie es dabei helfen kann, Inhalte innerhalb eines Satzes an Webseiten zu finden. Der Wert des rel-Attributs zeigt an, welche Art der Beziehung beschrieben wird und das href-Attribut stellt einen Link zu dem Dokument, das diese Beziehung hat, zur Verfügung. Mehrere link-Elemente können mehrere Beziehungen bereitstellen. Verschiedene Werte von rel sind nützlich:
Start: Bezieht sich auf das erste Dokument in einer Sammlung von Dokumenten.
Next: Bezieht sich auf das nächste Dokument in einer linearen Sequenz von Dokumenten.
Prev: Bezieht sich auf das vorhergehende Dokument in einer geordneten Reihe von Dokumenten.
Contents: Bezieht sich auf ein Dokument, das als Inhaltsverzeichnis dient.
Index: Bezieht sich auf ein Dokument, das einen Index für das aktuelle Dokument zur Verfügung stellt.
Eine Webseite für Kapitel 2 eines Online-Buches könnte die folgenden Links im head-Bereich enthalten.
Code-Beispiel:
<link rel="Contents" href="Contents.html" title="Inhaltsverzeichnis" />
<link rel="Index" href="Index.html" title="Index" />
<link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" />
<link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" />Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Use <link>s in your document from W3C's Quality Web Tips
LINK - Document Relationship from Web Design Group
Bei einer Webseite, die zu einer Reihe oder einer Sammlung an Webseiten gehört:
Prüfen Sie, ob alle link-Elemente, welche die Navigation betreffen, im head-Bereich des Dokumentes sind.
Prüfen Sie bei jedem link-Element im head-Bereich des Dokumentes, das die Navigation betrifft, das es mindestens folgendes enthält:
ein rel-Attribut, das die Art des Links (link type) kennzeichnet
ein gültiges href-Attribut, um die passende Ressource ausfindig zu machen
Alle oben genannten Tests 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.
HTML und XHTML
Die Technik bezieht sich auf:
Einige Benutzeragenten stellen eine optionale Navigationsleiste zur Verfügung, in der die im link-Element spezifizierten Informationen angezeigt werden. Aktuelle Versionen der Mozilla- und Opera-Browser stellen diese Funktionalität zur Verfügung. IE 6.0 und Firefox 1.5 bieten diese Funktion nicht an, aber sie kann durch Erweiterungen oder add-ons zur Verfügung stehen. Siehe The 'link'-Element in (X)HTML für weitere Informationen zur Unterstützung des link-Elements durch Browser.
Das Ziel dieser Technik ist es, einen Mechanismus zum Auffinden eines Glossars zur Verfügung zu stellen. Wenn Begriffe im Inhalt auf einer getrennten Glossar-Seite definiert werden, dass wird das Glossar referenziert, indem das link-Element im head-Element des Dokumentes, welches das Glossar benutzt, verwendet. Das rel-Attribut des link-Elements wird auf „glossary“ gesetzt und das href-Attribut enthält des URI der Glossar-Seite. Benutzeragenten können Benutzern dabei helfen, auf das Glossar schnell und einfach zuzugreifen.
Code-Beispiel:
<link rel="glossary" href="http://www.w3.org/TR/WCAG20/#glossary">Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Use <link>s in your document from W3C's Quality Web Tips
LINK - Document Relationship from Web Design Group
(derzeit keine aufgelistet)
Für jeden Satz an Worten und deren Definitionen, die dazu gedacht sind, als Glossar zu dienen:
Prüfen Sie, ob der head-Bereich der Webseite, die Worte, Phrasen oder Abkürzungen enthält, die in einem Glossar definiert werden, ein link-Element enthält
Prüfen Sie, ob das link-Element das Attribut rel="glossary" hat
Prüfen Sie, ob sich das href-Attribut des link-Elements auf die Glossar-Seite bezieht.
Alle oben genannten Tests sind wahr.
Anmerkung: Die Definition von Abkürzung, so wie dies in den WCAG benutzt wird lautet: „Kurzform eines Wortes, einer Phrase oder eines Namens, wobei die ursprünglich ausgeschriebene Form nicht von der Organisation, auf die es sich bezieht, abgelehnt worden ist und wobei die Abkürzung nicht Teil der Sprache geworden ist.“
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.
XHTML 1.1
Die Technik bezieht sich auf:
Ruby-Markup beinhaltet das rp-Element als Ersatzmechanismus für Benutzeragenten, die XHTML 1.1 nicht unterstützen. Obwohl ruby-Markup erst in XHTML 1.1 definiert ist, unterstützen IE 5.0 und höher die ruby-, rt- und rp-Elemente, auch wenn sie in HTML 4.01 oder XHTML 1.0 benutzt werden.
Das Ziel dieser Technik ist es, „Ruby Annotation“ zu benutzen, um Informationen zur Aussprache und Bedeutung eines Textstücks zur Verfügung zu stellen, wenn die Bedeutung durch die Aussprache bestimmt wird.
Es gibt viele Sprachen, in denen ein Textstück unterschiedliche Dinge bedeuten kann, je nachdem, wir der Text ausgesprochen wird. Dies ist sowohl in ostasiatischen Sprachen als auch in hebräisch, arabisch und anderen Sprachen verbreitet; dies tritt auch im englischen und anderen westeuropäischen Sprachen auf.
Ruby Annotation erlaubt des dem Autor, einen „base text“ (Basis-Text) zu kommentieren und so einen Leitfaden zur Aussprache und, in manchen Fällen, eine Definition zur Verfügung zu stellen. Ruby wird häufig bei Texten in japanisch und anderen ostasiatischen Sprachen benutzt. Ruby Annotation ist als Modul für XHTML 1.1 definiert.
Es gibt zwei Arten von Ruby-Markup: einfach (simple) und komplex (complex). Simple-Ruby-Markup wird auf ein Textstück wie zum Beispiel ein komplettes Wort oder eine komplette Phrase angewendet . Dies ist bekannt als „base“ text (rb-Element). Die Ruby Annotation, die angibt, wie der Begriff ausgesprochen wird (das rt-Element oder der Ruby text), wird in einer kleineren Schriftgröße angezeigt. (Der Begriff „Ruby“ wurde von einem kleinen Zeichensatz, der zu diesem Zweck in gedruckten Texten benutzt wurde, abgeleitet.) Der Ruby-Text wird normalerweise über oder direkt vor dem „base text“ gerendert, d.h. direkt über horizontalem Text oder direkt rechts von vertikalem Text. Manchmal wird im japanischen Ruby benutzt, um die Bedeutung des Textes auf der anderen Seite des Base-Textes (visuell) aus dem phonetischen Kommentar heraus zur Verfügung zu stellen. Einfaches Ruby-Markup stellt außerdem eine „Ersatz“-Option für die Benutzeragenten zur Verfügung, die Ruby-Markup nicht unterstützen (d.h. Benutzeragenten, die XHTML 1.1 nicht unterstützen).
Komplexes Ruby-Markup ermöglicht es, den Base-Text in kleinere Einheiten zu unterteilen, von denen jede dann mit einer separaten Ruby-Annotation verbunden werden kann. Komplexes Ruby-Markup unterstützt die Ersatzoption nicht.
Ruby Annotation ist in Sprachen wie hebräisch, bei denen Unicode-Zeichensätze diakritische Zeichen enthalten können, welche die Aussprache vermitteln, unüblich. Es ist auch im englischen und in europäischen Sprachen unüblich.
Anmerkung: Der Hauptgrund zur Angabe der Aussprache per Ruby oder durch andere Mittel ist es, den Inhalt für Menschen mit Behinderungen, welche die Sprache des Inhalts lesen und verstehen könnten, wenn Informationen zur Aussprache zur Verfügung gestellt würden, barrierefrei zu machen. Es ist nicht notwendig, Informationen über die Aussprache zur Verfügung zu stellen, damit Menschen, die mit der Sprache des Inhalts nicht vertraut sind, dies nutzen können.
Die Beispiel nutzt Ruby Annotation, um die Aussprache des Initialwortes (Akronyms) anzugeben, das aus den jeweils ersten Buchstaben der Worte Web Content Accessibility Guidelines gebildet wird. Die Buchstaben WCAG sind die Basis (das rb-Element) und die Informationen zur Aussprache werden durch den Ruby-Text angezeigt (das rt-Element). Das Ruby-Parenthesis-Element rp wird für Benutzeragenten benutzt, die Ruby Annotationen nicht unterstützen, um darauf hinzuweisen, dass der Text im rt-Element die Aussprache-Informationen bereitstellt. Die Informationen zur Aussprache werden unmittelbar auf den Base-Text folgend in Klammern gerendert. (Benutzeragenten, die Ruby unterstützen, zeigen die Klammern nicht an.)
Code-Beispiel:
<p>When we talk about these guidelines, we often just call them
<ruby>
<rb>WCAG</rb>
<rp>(</rp>
<rt>Wuh-KAG</rt>
<rp>)</rp>
</ruby>.
</p>Das Folgende ist ein Beispiel auf japanisch. Im japanischen wird Ruby benutzt, um die Lesart von Han-Zeichen (Kanji) anzugeben. Das Ruby-Parenthesis-Element rp wird für Benutzeragenten benutzt, die Ruby Annotationen nicht unterstützen, um darauf hinzuweisen, dass der Text im rt-Element die Aussprache-Informationen bereitstellt. Die Informationen zur Aussprache werden unmittelbar auf den Base-Text folgend in Klammern gerendert. (Benutzeragenten, die Ruby unterstützen, zeigen die Klammern nicht an.)
Code-Beispiel:
<p>
<ruby>
<rb>慶應大学</rb>
<rp>(</rp>
<rt>けいおうだいがく</rt>
<rp>)</rp>
</ruby>
</p> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jedes Textstück, bei dem eine Ruby Annotation benutzt wird, um Informationen zur Aussprache zur Verfügung zu stellen:
Prüfen sie, ob ein rt-Element Informationen zur Aussprache für jedes Textstück, das vom rb-Element definiert wird, enthält.
Wenn einfaches Ruby-Markup benutzt wird, prüfen Sie, ob das rp-Element vorhanden ist, um Benutzeragenten, die Ruby Annotations nicht unterstützen, darauf hinzuweisen, dass der Text im rt-Element die Informationen zur Aussprache zur Verfügung stellt. .
Tests #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.
HTML und XHTML
Die Technik bezieht sich auf:
Die row- und col-Werte des scope-Attributs werden derzeit weitgehend von den meisten aktuellen JAWS-Versionen unterstützt. Es gibt allerdings immer noch einige Probleme und die WindowEyes-Unterstützung für scope ist nicht konsistent. Das gleiche gilt für japanische Versionen dieser Screenreader. JAWS-Versionen vor Version 5 und ältere WindowsEyes-Versionen haben eine inkonsistente Unterstützung von scope.
Im Augenblick empfiehlt es sich für diejenigen, die sicherstellen wollen, dass es in allen assistierenden Techniken eine durchgängige Unterstützung bei Tabellen, in denen Überschriften nicht in der ersten Reihe/Spalte sind, die Technik für komplexe Tabellen zu benutzen H43: Benutzung von id- und Überschriften-Attributen, um Datenzellen und Überschriftenzellen in Datentabellen zu verbinden. Bei einfachen Tabellen, die Überschriften in der ersten Spalte oder Reihe haben, empfehlen wir die Benutzung der th- und td-Elemente.
Das Ziel dieser Technik ist es, Überschriftenzellen mit Datenzellen zu verbinden, indem das scope-Attribut benutzt wird. Das scope-Attribut kann benutzt werden, um den Anwendungsbereich jeder als Überschrift benutzten Zelle zu verdeutlichen. scope kennzeichnet, ob die Zelle eine Überschrift für eine Reihe, eine Spalte oder eine Gruppe von Reihen oder Spalten ist. Die Werte row, col, rowgroup und colgroup kennzeichnen diese möglichen Anwendungsbereiche entsprechend.
Bei einfachen Datentabellen, bei denen die Überschrift nicht in der ersten Reihe oder Spalte ist wie die in Beispiel 1, kann diese Technik benutzt werden. Basierend auf der heutigen Unterstützung durch Screenreader wird die Benutzung dieser Technik in zwei Situationen, die beide einfache Tabellen betreffen, empfohlen:
Mit td ausgezeichnete Datenzellen, die auch als Reihen- oder Spaltenüberschrift fungieren
Überschriftenzellen, die mit td anstelle von th ausgezeichnet sind. Manchmal benutzen Autoren dies, um die Anzeige-Charakteristika, die mit th in Verbindung gebracht werden, zu vermeiden und sie entscheiden sich darüber hinaus gegen die Verwendung von CSS zur Steuerung der Darstellung von th.
Anmerkung: Bei einfachen Tabellen, die Überschriften in der ersten Reihe oder Spalte haben, ist es ausreichend, einfach die TH-Elemente ohne scope zu benutzen.
Anmerkung: Benutzen Sie bei komplexen Tabellen ids und header wie in H43: Benutzung von id- und Überschriften-Attributen, um Datenzellen und Überschriftenzellen in Datentabellen zu verbinden.
Im folgenden Beispiel enthält Spalte #1 Seriennummern für Zeilen in der Tabelle und die zweite Spalte Spalte enthält den Schlüsselwert (key value) für die Zeile. Die Zellen in der zweiten Spalte können dann scope="row" benutzen. Die Zellen in der ersten Reihe werden auch mit td ausgezeichnet und benutzen scope="col".
Code-Beispiel:
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<th scope="col">Name</th>
<th scope="col">Phone#</th>
<th scope="col">Fax#</th>
<th scope="col">City</th>
</tr><tr>
<td>1.</td>
<th scope="row">Joel Garner</th>
<td>412-212-5421</td>
<td>412-212-5400</td>
<td>Pittsburgh</td>
</tr><tr>
<td>2.</td>
<th scope="row">Clive Lloyd</th>
<td>410-306-1420</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr><tr>
<td>3.</td>
<th scope="row">Gordon Greenidge</th>
<td>281-564-6720</td>
<td>281-511-6600</td>
<td>Houston</td>
</tr>
</table> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jede Datentabelle:
Prüfen Sie, ob alle th-Elemente ein scope-Attribut haben.
Prüfen sie, ob alle td-Elemente, die als Überschriften für andere Elemente fungieren, ein scope-Attribut haben.
Prüfen Sie, ob alle scope-Attribute den Wert row, col, rowgroup oder colgroup haben.
Alle oben genannten Tests 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.
HTML- und XHTML-Dokumente, die frames oder iframes benutzen
Die Technik bezieht sich auf:
Die Benutzung des longdesc-Attributs in HTML 4 bei frame- und iframe-Elementen, um einen Link auf eine lange Beschreibung eines Frames festzulegen, wird von assistierenden Techniken nicht gut unterstützt. Stattdessen wird die Benutzung von title, wie in dieser Technik beschrieben, empfohlen.
Das Ziel dieser Technik ist es, die Benutzung des title-Attributs des frame- oder iframe-Elements zu zeigen, um den Inhalt jedes Frames zu beschreiben. Damit liefert eine Beschriftung für dem Frame, so dass Benutzer bestimmen können, in welchen Frame sie hineingehen und im Detail erkunden. Es beschriftet nicht die individuelle Seite (frame) oder Inline Frame (iframe) im Frameset.
Beachten Sie, dass das title-Attribut Frames beschriftet und sich vom title-Element, das Dokumente beschriftet, unterscheidet. Beide sollten zur Verfügung gestellt werden, da das Erste die Navigation zwischen Frames erleichtert und das Zweite die aktuelle Position des Benutzers verdeutlicht.
Das title-Attribut ist nicht mit dem name-Attribut untereinander austauschbar. Der title beschriftet den Frame für die Benutzer; der name beschriftet ihn für das Scripting und Window Targeting. Der name wird dem Benutzer nicht angezeigt, nur der title.
Dieses Beispiel zeigt, wir man das title-Attribut mit frame benutzt, um die Frames, welche die Navigationsleiste und das Dokument enthalten, zu beschreiben.
Code-Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A simple frameset document</title>
</head>
<frameset cols="10%, 90%">
<frame src="nav.html" title="Main menu" />
<frame src="doc.html" title="Documents" />
<noframes>
<body>
<a href="lib.html" title="Library link">Select to
go to the electronic library</a>
</body>
</noframes>
</frameset>
</html> Dieses Beispiel zeigt, wir man das title-Attribut mit iframe benutzt, um die Inhalte eines Inline-Frame zu beschreiben. Das Beispiel beinhaltet auch einen alternativen Link zu einer vom iframe-Element eingefügten Seite für ältere Browser, die das iframe-Element möglicherweise nicht verstehen.
Code-Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A document using iframe</title>
</head>
...
<iframe src="banner-ad.html" id="testiframe"
name="testiframe" title="Advertisement">
<a href="banner-ad.html">Advertisement</a>
</iframe>
...
</html> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Überprüfen Sie jedes frame- und iframe-Element im HTML- oder XHTML-Quellcode auf die Anwesenheit eines title-Attributs.
Prüfen Sie, ob das title-Attribut Text enthält, der den Frame kennzeichnet.
Tests #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.
HTML- und XHTML-Formular-Steuerelemente, die nicht durch die Benutzung von value, alt, oder element content gekennzeichnet werden
Die Technik bezieht sich auf:
Benutzeragenten zeigen einen Tooltip an, wenn die Maus über einem input-Element, das ein titleAttribut hat, schwebt.
Wenn keine Beschriftung (label) zur Verfügung steht, sprechen JAWS und Window-Eyes das title-Attribut, wenn das Formular-Steuerlement des Fokus erhält
JAWS 6.0 und höher kann so eingestellt werden, dass sowohl label als auch title gesprochen werden, wenn die zwei Elemente unterschiedlich sind; allerdings haben nur sehr wenige Benutzer von dieses Einstellung Kenntnis.
WindowEyes 5.5 hat einen Kurzbefehl, ins-E, der that will display additional information, including the title attribute, for the item with focus.
Das Ziel dieser Technik ist es, das title-Attribut zu benutzen, um Formular-Steuerelemente zu beschriften, wenn das visuelle Design die Beschriftung nicht aufnehmen kann (wenn es zum Beispiel auf dem Bildschirm keinen Text gibt, der als Beschriftung erkannt werden kann) oder wenn es verwirrend sein könnte, eine Beschriftung anzuzeigen. Benutzeragenten einschließlich assistierender Techniken können das title-Attribut sprechen.
Ein Suchformular benutzt ein Pulldown-Menü, um den Umfang der Suche zu begrenzen. Das Pulldown-Menü ist direkt neben dem Textfeld, das zur Eingabe des Suchbegriffs benutzt wird. Die Beziehung zwischen dem Suchfeld und dem Pulldown-Menü ist für die Benutzer klar verständlich, die das visuelle Design, das keinen Platz für eine sichtbare Beschriftung lässt, sehen können. Das title-Attribut wird benutzt, um das select-Menü zu kennzeichnen. Das title-Attribut kann von Screenreadern gesprochen oder für Menschen, die eine Vergrößerungssoftware benutzen, als Tooltip angezeigt werden.
Code-Beispiel:
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select> Eine Webseite enthält Steuerelemente zur Eingabe einer Telefonnummer in den Vereinigten Staaten von Amerika, mit drei Feldern für Ortsvorwahl (area code), Telefonvermittlung (exchange) und die letzten vier Ziffern (last four digits).
Code-Beispiel:
<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code"
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number"
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number"
type="text" size="4" value="" >
</fieldset> Eine Webseite enthält ein Textfeld, in das der Benutzer Suchbegriffe eingeben kann, und eine Schaltfläche mit der Beschriftung „Suchen“, um die Suche durchzuführen. Das title-Attribut wird benutzt, um das Formular-Steuerelement zu kennzeichnen und die Schaltfläche wird direkt nach dem Textfeld positioniert, so dass es dem Benutzer klar ist, dass das Textfeld das Feld ist, in das der Suchbegriff eingegeben werden soll.
Code-Beispiel:
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>Eine Datentabelle aus Formular-Steuerelementen muss jedes Steuerelement mit der Spalte und Zeile für diese Zelle verknüpfen. Ohne einen title (oder ein off-screen LABEL) ist es für nicht-visuelle Benutzer schwierig, innezuhalten und korrespondierende Zeilen-/Spalten-Überschriften-Werten abzufragen, indem sie ihre assistierenden Techniken benutzen während sie durch das Formular tabben.
Ein Umfrage-Formular hat zum Beispiel vier Spalten-Überschriften in der ersten Zeile: Frage, Ich stimme zu, Unentschieden, Ich stimme nicht zu. Jede folgende Rolle enthält eine Frage und eine Optionsschaltfläche in jeder Zelle entsprechend der Alternative in den drei Spalten. Das title-Attribut für jede Optionsschaltfläche ist eine Verknüpfung der Antwort-Alternative (Spaltenüberschrift) und des Frage-Textes (Zeilenüberschrift) mit einem Bindestrich oder einem Doppelpunkt als Trennzeichen.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Bestimmen Sie jedes Formular-Steuerelement, das nicht mit einem label-Element verbunden ist
Prüfen Sie, ob das Steuerelement ein title-Attribut hat
Prüfen sie, ob das title-Attribut den Zweck des Steuerelementes bezeichnet
Alle oben genannten Tests 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.
HTML- und XHTML-Dokumente, die Bilder laden.
Die Technik bezieht sich auf:
Der Zweck dieser Technik ist es zu zeigen, wir Bilder ausgezeichnet werden können, so dass sie von assistierenden Techniken ignoriert werden können.
Wenn kein title-Attribut benutzt und der alt text auf Null gesetzt wird (d.h. alt="") weist dies assistierende Techniken darauf hin, dass das Bild gefahrlos ignoriert werden kann.
Anmerkung: Obwohl alt=" " ebenfalls gültig ist, wird alt="" empfohlen.
Anmerkung: Ein "null" ALT-Attribut zu haben ist nicht das gleiche wie kein ALT-Attribut zu haben.
Das folgende Bild wird benutzt, um ein dekoratives Bild auf einer Webseite einzufügen.
Code-Beispiel:
<img src="squiggle.gif" width="20" height="20" alt="" />Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
'Null alt text' in WebAIM's 'Creating Accessible Images' also shows how to do this in Dreamweaver.
(derzeit keine aufgelistet)
Für jedes Bild, das ignoriert werden sollte.
Prüfen Sie, ob das title-Attribut entweder fehlt oder leer ist.
Prüfen Sie, ob das alt-Attribut vorhanden und leer ist oder nur Leerzeichen enthält (aber nicht )
#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.
HTML und XHTML
Die Technik bezieht sich auf:
Die meisten Screenreader stellen eine Navigation per Überschriften zur Verfügung und stellen Informationen zur Ebene der Überschrift bereit. Der Opera-Browser stellt einen Mechanismus zur Verfügung, um per Überschriften zu navigieren. Zusätzliche Plugins unterstützen die Navigation per Überschriften in anderen Benutzeragenten.
Das Ziel dieser Technik ist es, Abschnittsüberschriften zu benutzen, um die Struktur des Inhalts zu vermitteln. Überschriften-Markup kann benutzt werden, um:
den Beginn des Haupt-Inhalts anzuzeigen
Abschnittsüberschriften innerhalb des Haupt-Inhaltsbereiches auszuzeichnen
unterschiedliche Navigationsbereiche wie Top- oder Hauptnavigation, linke oder untergeordnete Navigation und Fußzeilen-Navigation abzugrenzen
Bilder eines Textes auszuzeichnen, die als Überschriften benutzt werden
In manchen Techniken sind Überschriften dazu konzipiert, eine logische Hierarchie zu vermitteln. Das Überspringen von Ebenen in der Abfolge von Überschriften kann den Eindruck erwecken, dass die Struktur des Dokuments nicht ordentlich durchdacht wurde oder dass bestimmte Überschriften aufgrund ihres visuellen Renderings anstelle ihrer Bedeutung gewählt wurde. Autoren werden dazu ermutigt, Überschriften hierarchisch zu verschachteln. Wenn Überschriften hierarchisch verschachtelt werden, dann werden die wichtigsten Informationen auf der höchsten logischen Ebene gegeben und Unterbereiche erhalten darauf folgende logische Ebenen (d.h. h2 ist ein Unterbereich von h1).
Da Überschriften den Beginn von wichtigen Inhaltsabschnitten kennzeichnen, haben Benutzer mit assistierenden Techniken die Möglichkeit, direkt zu der passenden Überschriften zu springen und mit dem Lesen des Inhalts zu beginnen. Dies beschleunigt die Interaktion für die Benutzer, die sonst langsam auf den Inhalt zugreifen würden, erheblich. Überschriften bringen Stücke mit Informationen hervor, die von Menschen mit Behinderungen leicht gefunden werden können, wie beispielsweise einer blinden Person, die einen Screenreader benutzt oder einer Person mit einer kognitiven Behinderung , die eine assistierende Technik benutzt, die Gruppen an Informationen abgrenzt, oder jemand mit einer gestörten Kommunikation oder Analphabetismus, der einen Screenreader benutzt, der beim Lesen hilft.
Dieses Beispiel gliedert die Abschnitte einer Suchseite, indem jede Abschnittsüberschrift durch die Benutzung des h2-Elements ausgezeichnet wird.
Code-Beispiel:
<h1>Search Technical Periodicals</h1>
<h2>Search</h2>
<form action="search.php">
<p><label for="searchInput">Enter search topic: </label>
<input type="text" size="30" id="searchInput">
<input type="submit" value="Go"></p>
</form>
<h2>Available Periodicals</h2>
<div class="jlinks">
<a href="pcoder.com">Professional Coder</a> |
<a href="algo.com">Algorithms</a> |
<a href="jse.com">Journal of Software Engineering</a>
</div>
<h2>Search Results</h2>
... search results are returned in this section ... In diesem Beispiel wird Überschriften-Markup benutzt, um die Abschnitte mit Navigation und Hauptinhalt wahrnehmbar zu machen.
Code-Beispiel:
<!-- Logo, banner graphic, search form, etc. -->
<h2>Navigation</h2>
<ul>
<li><a href="about.htm">About us</a></li>
<li><a href="contact.htm">Contact us</a></li>
...
</ul>
<h2>All about headings</h2>
<!-- Text, images, other material making up the main content... -->
Beachten Sie, dass Überschriften-Elemente in HTML 4.01 und XHTML 1.x nur den Beginn von Abschnitten markieren. Da es kein Markup gibt, um ein Überschriften-Element explizit mit dem Inhalt des Abschnitts zu verknüpfen, werden Benutzer annehmen, dass die Überschrift für den gesamten folgenden Inhalt gilt bis sie auf das nächste Überschriften-Element treffen.
Code-Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cooking techniques</title>
</head>
<body>
<h1>Cooking techniques</h1>
<p>
... some text here ...
</p>
<h2>Cooking with oil</h2>
<p>
... text of the section ...
</p>
<h2>Cooking with butter</h2>
<p>
... text of the section ...
</p>
</body>
</html> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für sämtlichen Inhalt, der in getrennte Abschnitte unterteilt ist:
Prüfen Sie, ob jeder Abschnitt mit einer Überschrift beginnt.
Test #1 ist 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.
HTML- und XHTML-Dokumente, die Frames benutzen
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es zu demonstrieren, wie Framesets benutzt werden können, um Blöcke mit sich wiederholendem Material zu gruppieren. Da die meisten Benutzeragenten und assistierenden Techniken eine Möglichkeit zur Verfügung stellen, um von Frame zu Frame zu navigieren, kann die Benutzung von Frames zur Gliederung von Elementen einen Mechanismus zur Verfügung stellen, um Blöcke von sich wiederholendem Inhalt einfach zu umgehen. Wenn die Site Framesets benutzt, dann gliedern Sie die Inhaltsblöcke in separate Frames. Stellen Sie sicher, dass sich wiederholende Inhaltsblöcke im gleichen Frame innerhalb des Framesets jeder Webseite erscheinen. Zusätzlich muss jedes Frame-Element ein title-Attribut haben, um den Inhalt des Frames zu beschreiben. Wenn Frames korrekt benannt mit, dann können Benutzer die Frame-Navigation benutzen, um einfach zwischen Inhaltsblöcken zu navigieren.
Diese Technik ist angebracht, wenn Framesets schon dazu benutzt werden, um den Inhalt der Seite zu gliedern; bei Seiten, die noch keine Framesets benutzen, werden andere Techniken bevorzugt, weil viele Menschen, die assistierende Techniken benutzen, Probleme mit Frames haben. Eine empfohlene Technik zur Benutzung von noframes steht in Erfolgskriterium 1.1.1 zur Verfügung.
Das folgende Beispiel zeigt die Benutzung von zwei Frames, um Inhalt zu gliedern. Die Quelle des ersten Frames ist die Webseite navigation.html, die das HTML für die Navigation enthält. Dieser Frame hat ein title-Attribut, das ihn als Navigationsleiste identifiziert. Der zweite Frame enthält den Hauptinhalt der Site, worauf durch den Quellparameter von main.html und das title-Attribut, „Main News Content“, das dessen Funktion bezeichnet, hingewiesen wird.
Code-Beispiel:
<frameset cols="20%, *">
<frame src="navigation.html" name="navbar" title="Navigation Bar" />
<frame src="main.html" name="maincontent" title="Main News Content" />
<noframes>
<p>View <a href="noframe.html">no frame version</a>.</p>
</noframes>
</frameset> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 The FRAMESET element
HTML 4.01 The FRAME element
Wenn die Webseite Frames benutzt, um Inhalt zu gliedern:
Prüfen Sie, ob sich wiederholende Blöcke in separate Frames gegliedert sind.
Prüfen Sie, ob die Frames mit sich wiederholendem Inhalt an der gleiche Stelle innerhalb jedes Framesets auftauchen.
Tests #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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, eine semantische Gruppierung für zueinander in Beziehung stehende Formular-Steuerelemente zur Verfügung zu stellen. Dies erlaubt es Benutzern, die Beziehung der Steuerelemente untereinander zu verstehen und mit dem Formular schneller und effizienter zu interagieren.
Formular-Steuerelemente können gruppiert werden, indem man sie mit dem fieldset-Element umschließt. Alle Steuerelemente innerhalb eines vorgegebenen fieldset stehen dann zueinander in Beziehung. Das erste Element innerhalb des fieldset sollte ein legend-Element sein, das eine Beschriftung oder eine Anweisung für die Gruppe bereitstellt. Fieldsets können verschachtelt werden, wenn dies gewünscht ist, obwohl dies zur Verwirrungen führen kann, wenn es übertrieben wird.
Die Gruppierung von Steuerelementen ist bei zueinander in Beziehung stehende Radiobuttons und Kontrollkästchen am wichtigsten. Ein Satz Radiobuttons oder Kontrollkästchen steht zueinander in Beziehung, wenn sie alle Werte für ein einziges, benanntes Feld versenden. Sie funktionieren so wie Auswahllisten und erlauben es dem Benutzer, aus einer Reihe an Optionen auszuwählen, mit der Ausnahme, dass Auswahllisten einzelne Steuerelemente sind während Radiobuttons und Kontrollkästchen multiple Steuerelemente sind. Da es multiple Steuerelemente sind, ist es besonders wichtig, dass sie semantisch gruppiert werden, so dass sie leichter als einzelnes Steuerelement behandelt werden können. Benutzeragenten zeigen häufig den Wert von legend vor der Beschriftung jedes Steuerelements an, um Benutzer daran zu erinnern, dass sie Teil der selben Gruppe sind.
Es kann auch nützlich sein, andere Reihen von Steuerelementen, die keine so enge Beziehung zueinander haben, als Reihen von Radiobuttons und Kontrollkästchen zu gruppieren. Zum Beispiel können verschiedene Felder, welche die Adresse des Benutzers sammeln, zusammen gruppiert werden mit der Legende „Adresse“.
Autoren vermeiden es manchmal, das fieldset-Element zu benutzen wegen der standardmäßigen Anzeige im Browser, die einen Rahmen um die gruppierten Steuerelemente zieht. Die visuelle Gruppierung ist ebenfalls nützlich und Autoren sollten es ernsthaft in Betracht ziehen, es beizubehalten (oder irgendeine andere Form der visuellen Gruppierung). Der visuelle Effekt kann im CSS verändert werden, indem die „border“-Eigenschaft des fieldset und die „position“-Eigenschaft von legend außer Kraft gesetzt werden.
Wenn eine kleine Gruppe von zueinander in Beziehung stehenden Radiobuttons klare Anweisungen und deutliche Auswahlmöglichkeiten beinhaltet, ist es möglicherweise nicht notwendig, fieldsets und legends zu benutzen; H44: Benutzung von Label-Elementen, um Text-Label mit den Steuerelementen eines Formulars zu assoziieren kann auch ausreichend sein.
Dieses Beispiel zeigt einen Posten eines Tests mit einer Frage und fünf möglichen Antworten. Jede Antwort wird durch einen Radiobutton (input type="radio") dargestellt. Die Radiobuttons sind innerhalb eines fieldset enthalten. Die Testfrage ist mit dem legend-Element ausgezeichnet.
Code-Beispiel:
<fieldset>
<legend>The play <cite>Hamlet</cite> was written by:</legend>
<input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">William Shakespeare</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label for="kipling">Rudyard Kipling</label><br />
<input type="radio" id="gbshaw" name="hamlet" value="c">
<label for="gbshaw">George Bernard Shaw</label><br />
<input type="radio" id="hem" name="hamlet" value="d">
<label for="hem">Ernest Hemingway</label><br />
<input type="radio" id="dickens" name="hamlet" value="e">
<label for="dickens">Charles Dickens</label>
</fieldset> Die Seite mit dem Benutzerprofil für eine Website erlaubt es Benutzern, ihre Interessen anzugeben, indem sie mehrere Kontrollkästchen auswählen. Jedes Kontrollkästchen (input type="checkbox") hat ein label. Die Kontrollkästchen sind innerhalb eines fieldset enthalten und das legend-Element enthält die Eingabeaufforderung für die gesamte Gruppe an Kontrollkästchen.
Code-Beispiel:
<fieldset>
<legend>I am interested in the following (check all that apply):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label><br />
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label><br />
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset> Dieses Beispiel fordert den Benutzer auf, einen einzigen Philosophen auszuwählen. Beachten Sie, dass jedes Feld das gleiche „name“-Attribut hat, was darauf hinweist, dass diese Radiobuttons zueinander in Beziehung stehen (die alle schicken das gleiche Feld ab) und sie wie angezeigt gruppiert werden sollten. Beachten Sie außerdem, dass, obwohl die „name“-Attribute gleich sind, die "id"-Attribute einmalig sein müssen.
Code-Beispiel:
<form action="http://example.com/vote" method="post">
<fieldset>
<legend>Your preferred philosopher</legend>
<input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
<label for="philosopher_socrates">Socrates</label>
<input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
<label for="philosopher_plato">Plato</label>
<input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
<label for="philosopher_aristotle">Aristotle</label>
</fieldset>
</form> Anmerkung: Gruppen mit zueinander in Beziehung stehenden Kontrollkästchen funktionieren auf die gleiche Art und Weise mit der Ausnahme, dass Benutzer mehr als eine Präferenz für das Feld ausdrücken dürfen.
In diesem Beispiel werden die Formularfelder für Wohn- und Postanschrift durch den Wert von legend in jeder fieldset-Gruppierung unterschieden.
Code-Beispiel:
<form action="http://example.com/adduser" method="post">
<fieldset>
<legend>Residential Address</legend>
<label for="raddress">Address: </label>
<input type="text" id="raddress" name="raddress" />
<label for="rzip">Postal/Zip Code: </label>
<input type="text" id="rzip" name="rzip" />
...more residential address information...
</fieldset>
<fieldset>
<legend>Postal Address</legend>
<label for="paddress">Address: </label>
<input type="text" id="paddress" name="paddress" />
<label for="pzip">Postal/Zip Code: </label>
<input type="text" id="pzip" name="pzip" />
...more postal address information...
</fieldset>
</form>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 Checkboxes
Prüfen Sie, ob Gruppen von logisch zueinander in Beziehung stehende Eingabe-Elemente innerhalb eines fieldset-Elements enthalten sind.
Prüfen Sie, ob jede Gruppe von input-Elementen des Typs type="radio" oder type="checkbox" mit dem gleichen name-Attribut innerhalb eines fieldset-Elements enthalten ist
Prüfen Sie, ob jedes fieldset ein legend-Element hat, das eine Beschreibung dieser Gruppe enthält.
Alle oben genannten Tests 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.
HTML 4.01, XHTML 1.x
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, einen kurzen Überblick darüber zu geben, wie Daten in einer Tabelle strukturiert wurden oder eine kurze Erklärung zu geben, wie man in der Tabelle navigiert. Das summary-Attribut des table-Elements stellt diese Informationen Menschen, die Screenreader benutzen, zur Verfügung; die Informationen werden nicht visuell angezeigt.
Die Zusammenfassung (summary) ist nützlich, wenn die Tabelle eine komplexe Struktur hat (wenn es zum Beispiel verschiedene Sets an Zeilen- oder Spaltenüberschriften oder mehrfache Gruppen an Spalten oder Reihen gibt). Die Zusammenfassung (summary) kann ebenfalls bei einfachen Datentabellen, die viele Spalten oder Reihen an Daten enthalten, hilfreich sein.
Das summary-Attribut kann benutzt werden, egal ob die Tabelle ein caption-Element enthält oder nicht. Wenn beide benutzt werden, dann sollte summary nicht caption doppeln.
Obwohl die WCAG 2 die Benutzung von Layout-Tabellen nicht verbieten, werden CSS-basierte Layouts empfohlen, um die definierte, semantische Bedeutung der HTML-Tabellen-Elemente zu bewahren und konform zur Programmier-Praxis der Trennung von Präsentation und Inhalt zu sein. Wenn allerdings eine Layout-Tabelle benutzt wird, dass wird das summary-Attribut nicht benutzt oder ist leer. Der Zweck einer Layout-Tabelle ist es schlicht und ergreifend, die Platzierung des Inhalts zu steuern; die Tabelle selbst ist für den Benutzer „transparent“. Ein summary würde diese Transparenz „zerstören“, indem die Aufmerksamkeit auf die Tabelle gelenkt würde. Ein leeres summary (summary="") bei Layout-Tabellen ist akzeptabel.
Dieses Beispiel zeigt einen Busfahrplan. Die Nummer der Linie und die Richtung sind in dem summary enthalten zusammen mit Informationen dazu, wie man den Fahrplan benutzt.
Code-Beispiel:
<table summary="Schedule for Route 7 going downtown. Service begins
at 4:00 AM and ends at midnight. Intersections are listed in the top row.
Find the intersection closest to your starting point or destination, then read
down that column to find out what time the bus leaves that intersection.">
<tr>
<th scope="col">State & First</th>
<th scope="col">State & Sixth</th>
<th scope="col">State & Fifteenth</th>
<th scope="col">Fifteenth & Morrison</th>
</tr>
<tr>
<td>4:00</td>
<td>4:05</td>
<td>4:11</td>
<td>4:19</td>
</tr>
…
</table> In diesem Beispiel werden sowohl ein summary-Attribut als auch ein caption-Element benutzt. Das caption-Element bezeichnet sie Busroute. Das summary-Attribut hilft blinden Benutzern zu verstehen, wie man den Fahrplan benutzt. Screenreader lesen die caption gefolgt von der summary.
Code-Beispiel:
<table summary="Intersections are listed in row 1.
Find the intersection closest to your starting point
or destination, then read down that column to find
out what time the bus leaves that intersection.
Service begins at 4:00 AM and ends at midnight.">
<caption>Route 7 Downtown (Weekdays)</caption>
…
</table>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 summary attribute
Prüfen Sie bei Layout-Tabellen: Bestimmen Sie, ob der Inhalt eine Beziehung zu anderen Inhalten sowohl in seiner Spalte als auch in seiner Reihe hat.
Wenn „nein“, dann ist die Tabelle eine Layout-Tabelle.
Wenn „ja“, dann ist die Tabelle eine Datentabelle.
Wenn es sich bei der Tabelle um eine Layout-Tabelle handelt, prüfen Sie, ob das summary-Attribut nicht vorhanden ist oder das summary-Attribut leer ist.
Wenn es sich bei der Tabelle um eine Datentabelle handelt und es summary gibt, dann prüfen Sie, ob das summary-Attribut die Strukturierung der Tabelle beschreibt oder erklärt, wie man die Tabelle benutzt
Wenn sowohl ein summary-Attribut als auch ein caption-Element für die Datentabelle vorhanden sind, prüfen Sie, ob die summary nicht die caption dupliziert.
Bei Layout-Tabellen ist #2 wahr.
Bei Datentabellen sind #3 und #4 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist die Vermeidung zentraler Fehler, die dafür bekannt sind, Probleme bei assistierenden Techniken zu verursachen, wenn diese versuchen, Inhalte zu analysieren, die Start-Tags und End-Tags enthalten, die nicht gemäß Spezifikation benutzt werden. Diese Fehler können verhindert werden, indem man HTML- oder XHTML-Mechanismen benutzt, um die Technik und die Technikversion anzugeben und sicherzustellen, dass die Webseite nicht diese Art an Fehlern enthält. Es gibt verschiedene Validatoren, die der Entwickler benutzen kann: Validierungsberichte erwähnen normalerweise diese Art an Fehlern. Diese Technik behandelt nur Fehler, die sich auf inkorrekt gebildete Start- und End-Tags beziehen. Die Document Type Declaration ist für diese Art an Evaluation nicht strengstens notwendig, aber die Angabe der Document Type Declaration macht es leichter, einen Validator zu benutzen.
HTML-Seiten enthalten eine Document Type Declaration (manchmal !DOCTYPE Statement genannt). Der Entwickler kann Offline- oder Online-Validatoren benutzen (siehe Ressourcen unten) um zu prüfen, ob alle id-Attribut-Werte einmalig sind und dass Start- und End-Tags gemäß Spezifikation benutzt werden.
Wie andere XML-basierte Dokumente referenzieren XHTML-Dokumente eine Document Type Definition (DTD) oder eine andere Art eines XML-Schemas. Der Entwickler kann Online- oder Offline-Validatoren benutzen (einschließlich Validierungswerkzeuge, die in Editoren eingebaut sind), um zu prüfen, ob Start- und End-Tags gemäß Spezifikation benutzt werden.
Wenn eine Website HTML oder XHTML dynamisch generiert statt nur statische Seiten zu liefern, dann kann ein Entwickler XHTMLUnit, XML Test Suite oder ein ähnliches Framework benutzen, um den generierten XHTML-Code zu testen.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Do not forget to add a doctype von der W3C Quality Assurance Initiative erläutert, was doctypes sind und warum Sie sie benutzen sollten.
Recommended DTDs to use in your Web document von der W3C Quality Assurance Initiative ist eine Liste mit üblicherweise benutzten Deklarationen.
How do I validate my code or check for possible errors? beschreibt die Werkzeuge zur Überprüfung von HTML, CSS und XML im kostenlosen Editor HTML-Kit .
Für andere Ressourcen siehe G134: Validierung von Webseiten.
(derzeit keine aufgelistet)
Prüfen Sie, ob End-Tags für alle Elemente, die ein End-Tag erfordern, vorhanden sind.
Prüfen Sie, ob Elemente, bei denen End-Tags verboten sind, keine End-Tags haben.
Prüfen Sie, ob Start- und End-Tags für alle Elemente korrekt verschachtelt sind.
Schritte 1, 2 und 3 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.
Alle XML-basierten Auszeichnungssprachen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist die Vermeidung zentraler Fehler, die dafür bekannt sind, Probleme bei assistierenden Techniken zu verursachen, wenn diese versuchen, Inhalte zu analysieren, zu vermeiden. Die Wohlgeformtheit wird geprüft, indem das Dokument mit einem konformen XML-Parser analysiert wird und indem geprüft wird, ob der Validierungs-Bericht Fehler in der Wohlgeformtheit erwähnt. Jeder konforme XML-Parser muss die Wohlgeformtheit prüfen und die normale Verarbeitung stoppen, wenn ein Fehler in der Wohlgeformtheit gefunden wird (ein konformer XML-Parser unterstützt keine Validierung).
XML-Dateien enthalten eine Document Type Declaration, ein xsi:schemaLocation-Attribut oder eine andere Arte des Verweises auf ein Schema. Der Entwickler kann Offline- oder Online-Validatoren, einen XML-Editor oder eine IDE mit XML-Unterstützung benutzen (siehe Ressourcen unten), um die Wohlgeformtheit zu überprüfen.
Wenn XML-Dateien keine Document Type Declaration, kein xsi:schemaLocation-Attribut oder keine Verarbeitungsanweisung, die ein Schema referenziert, enthalten, auch wenn es für sie ein Schema gibt, dann wird das passende Schema durch eine Befehlszeilenanweisung (command line instruction), einen Benutzerdialog oder eine Konfigurationsdatei spezifiziert und die XML-Dateien werden gegen das Schema geprüft.
Wenn XML-Dateien keine Document Type Declaration, kein xsi:schemaLocation-Attribut oder keine Verarbeitungsanweisung, die ein Schema referenziert, enthalten, auch wenn es für sie ein Schema gibt, dann wird der namespace dereferenziert, um ein Schema-Dokument oder ein Resource Directory abzurufen (Resource Directory Description Language: RDDL) und die XML-Dateien werden gegen das Schema geprüft.
Wenn eine Website XML dynamisch generiert statt nur statische Seiten auszuliefern, dann kann ein Entwickler XMLUnit, XML Test Suite oder ein ähnliches Framework benutzen, um den generierten XML-Code zu testen.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Well-Formed XML Documents in Extensible Markup Language (XML) 1.0 (Third Edition), W3C Recommendation 04 February 2004.
Well-Formed XML Documents in Extensible Markup Language (XML) 1.1, W3C Recommendation 04 February 2004.
4.3.2 Well-Formed Parsed Entities in Extensible Markup Language (XML) 1.1, W3C Recommendation 04 February 2004.
Für andere Ressourcen siehe G134: Validierung von Webseiten.
(derzeit keine aufgelistet)
Laden Sie jede Datei in einen validierenden XML-Parser.
Prüfen Sie, ob es keine Fehler in der Wohlgeformtheit gibt.
Schritt 2 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, client-seitige Umleitungen zu ermöglichen, ohne den Benutzer zu verwirren. Umleitungen werden vorzugsweise auf Server-Seite implementiert (siehe SVR1: Server-seitige statt client-seitige Implementierung automatischer Umleitungen (SERVER) ), aber Autoren haben nicht immer die Kontrolle über sever-seitige Techniken.
In HTML und XHTML kann man das meta-Element benutzen, wobei der Wert des http-equiv-Attributs auf „Refresh“ gesetzt wird und der Wert des content-Attribut auf „0“ (was 0 Sekunden bedeutet), gefolgt von dem URI, den der Browser anfordern soll. Es ist wichtig, dass die Zeitsperre auf null gesetzt wird um zu vermeiden, dass Inhalte angezeigt werden, bevor die neue Seite geladen ist. Die Seite, die den Umleitungscode enthält, sollte nur Informationen in Bezug auf die Umleitung enthalten.
Code-Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
</head>
<body>
<p>This page has moved to a <a href="http://thetudors.example.com/">
theTudors.example.com</a>.</p>
</body>
</html> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Finden sie alle meta-Elemente im Dokument.
Prüfen Sie für jedes meta-Element, ob es das Attribut http-equiv mit dem Wert „refresh“ (Groß- und Kleinschreibung beachten) und das content-Attribut mit einer Zahl größer 0 gefolgt von ;'URL=anyURL' enthält (wobei anyURL für den URI steht, der die aktuelle Seite ersetzen sollte).
Schritt 2 ist falsch.
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.
Alle Techniken, die Links enthalten
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, den Zweck einen Links aus dem Link und seinem Listenelement-Kontext heraus zu identifizieren. Das Listenelement, das den Link umschließt, stellt den Kontext für einen ansonsten unklaren Link bereit, wenn das Linkelement das nächste, umschließende Block-Level-Ancestor-Element ist. Die Beschreibung gibt dem Benutzer die Möglichkeit diesen Link von Links auf der Webseite, die zu anderen Zielen führen, zu unterscheiden und hilft Benutzern dabei zu entscheiden, ob sie dem Link folgen. Beachten Sie, dass nur Bereitstellung des Ziel-URIs im Allgemeinen nicht ausreichend deskriptiv ist.
Anmerkung: Diese Beschreibungen sind für den Benutzer am sinnvollsten, wenn die zusätzlichen Informationen, die zum Verständnis des Links benötigt werden, dem Link vorangestellt sind. Wenn die zusätzlichen Informationen nach dem Link folgen, dann kann dies bei Benutzern von Screen Readern, welche die Seite in Abfolge (von oben nach unten) lesen, zu Verwirrungen und Schwierigkeiten führen.
Code-Beispiel:
<ul>
<li>
Check out the video report for last year's
<a href="festival.htm">National Folk Festival</a>.
</li>
<li>
<a href="listen.htm">Listen to the instruments</a>
</li>
<li>
Guitar Man: George Golden talks about
<a href="mkguitars.htm">making guitars</a>.
</li>
</ul>Code-Beispiel:
<ul>
<li>
<a href="tomb_raider.htm">Tomb Raider: Legend</a>
<a href="tomb_raider_images.htm">See Images</a>
<a href="tomb_raider.mpeg">(Download Demo)</a>
</li>
<li>
<a href="fear_extraction.htm">F.E.A.R. Extraction Point</a>
<a href="fear_extraction_images.htm">See Images</a>
<a href="fear_extraction.mpeg">(Download Demo)</a>
</li>
<li>
<a href="call_of_duty.htm">Call of Duty 2</a>
<a href="call_of_duty_images.htm">See Images</a>
<a href="call_of_duty.mpeg">(Download Demo)</a>
</li>
<li>
<a href="Warhammer 40K.htm">Warhammer 40K</a>
<a href="warhammer_40k_images.htm">See Images</a>
<a href="Warhammer_40k.mpeg">(Download Demo)</a>
</li>
</ul> Es gibt für diese Technik keine Ressourcen.
Für jeden Link im Inhalt, der sich dieser Technik bedient:
Prüfen Sie ob der Link Teil eines Listenelements ist.
Prüfen Sie, ob der Linktext in Kombination mit dem Text seines umschließenden Listenelements den Zweck des Links beschreibt.
Die oben genannten Tests 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.
Alle Techniken, die Links enthalten
Die Technik bezieht sich auf:
JAWS 5.0 und spätere Versionen beinhalten die folgenden Tastaturanschläge:
alt+Pfeiltaste links: vorhergehenden Satz lesen
alt+Pfeiltaste rechts: nächsten Satz lesen
alt+5 auf dem Nummernblock der Tastatur: aktuellen Satz lesen
Ctrl+5 auf dem Nummernblock der Tastatur: aktuellen Absatz lesen
Wenn alt+5 auf dem Nummernblock gedrückt wird, wenn ein Link den Fokus hat, dann wird der Satz gelesen, ohne dass der Fokus geändert wird.
Wenn Ctrl+5 auf dem Nummernblock gedrückt wird, wenn der Link den Fokus hat, dann wird der gesamte Absatz gelesen, ohne dass der Fokus geändert wird.
Window-Eyes 5.5 hat Hotkeys, um den aktuellen Satz und Absatz zu lesen.
Um mit WindowEyes im Internet zu surfen, muss man im Browse-Modus sein. Die Hotkeys aktueller Satz und aktueller Absatz funktionieren in Version 6.1 nicht im Browse-Modus.
Die Standardeinstellungen ab Werk zum Lesen von umliegendem Link-Kontext sind wie folgt:
Desktop-Einstellungen:
Buchstabe = CTRL-NUMMERNBLOCK-PFEILTASTE LINKS
Wort = CTRL-NUMMERNBLOCK-PFEILTASTE RECHTS
Zeile = CTRL-NUMMERNBLOCK-MITTE
Satz = Im Browse-Modus nicht verfügbar
(Der Befehl nächster Satz ist standardmäßig im Desktop-Modus undefiniert, aber nächste Zeile ist die Pfeiltaste UNTEN.)
Nächster Absatz = P
Vorhergehender Absatz = Umschalttaste P
Aktueller Absatz = im Browse-Modus nicht verfügbar
Laptop
Buchstabe = ALT-UMSCHALTTASTE-KLEINER ALS
Vorhergehendes Wort = ALT-UMSCHALTTASTE-J
Wort = ALT-UMSCHALTTASTE-K
Nächstes Wort = ALT-UMSCHALTTASTE-L
Vorhergehender Satz = ALT-UMSCHALTTASTE-7
Satz = nicht im Browse-Modus verfügbar
Nächster Satz = nicht im Browse-Modus verfügbar
Absatz = Standardmäßig auf dem Laptop nicht definiert
Vorhergehende Zeile = ALT-UMSCHALTTASTE-U
Zeile = ALT-UMSCHALTTASTE-I
Nächste Zeile = ALT-UMSCHALTTASTE-O
Der Befehl „speak parent element“ in Fire Vox (Ctrl+Shift+u) funktioniert ohne den Fokus zu ändern. Fire Vox ist ein kostenloser Screenreader, der speziell für Firefox 1.0 und später entworfen wurde. Er unterstützt Windows, Macintosh und Linux.
Das Ziel dieser Technik ist es, den Zweck eines Links aus dem Link in seinem Absatzkontext heraus zu bestimmen. Der Absatz, der den Link umschließt, stellt den Kontext für einen ansonsten unklaren Link bereit, wenn der Absatz das nächste, umschließende Block-Level-Ancestor-Element ist. Die Beschreibung gibt dem Benutzer die Möglichkeit diesen Link von Links auf der Webseite, die zu anderen Zielen führen, zu unterscheiden und hilft Benutzern dabei zu entscheiden, ob sie dem Link folgen. Beachten Sie, dass nur Bereitstellung des Ziel-URIs im Allgemeinen nicht ausreichend deskriptiv ist.
Anmerkung: Diese Beschreibungen sind für den Benutzer am sinnvollsten, wenn die zusätzlichen Informationen, die zum Verständnis des Links benötigt werden, dem Link vorangestellt sind. Wenn die zusätzlichen Informationen nach dem Link folgen, dann kann dies bei Benutzern von Screen Readern, welche die Seite in Abfolge (von oben nach unten) lesen, zu Verwirrungen und Schwierigkeiten führen.
Spalte mit Ankündigungen auf der Webseite eines Folk Festivals.
Code-Beispiel:
<h3>The final 15</h3>
<p>Coming soon to a town near you...the final 15 in the
National Folk Festival lineup.
<a href="final15.html">[Read more...]</a>
</p>
<h3>Folk artists get awards</h3>
<p>Performers from the upcoming National Folk Festival receive
National Heritage Fellowships.
<a href="nheritage.html">[Read more...]</a>
</p>
… Es gibt für diese Technik keine Ressourcen.
Für jeden Link im Inhalt, der sich dieser Technik bedient:
Prüfen Sie, ob der Link Teil eines Absatzes ist.
Prüfen Sie, ob der Linktext zusammen mit dem Text des den Link umgebenden Absatzes den Zweck des Links beschreibt.
Die oben genannten Tests 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.
Alle Techniken, die Links enthalten
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, den Zweck eines Links aus dem Link in seinem Datentabellenkontext heraus zu bestimmen. Dieser Kontext ist die Tabellenzelle, die den Link umschließt, und die mit der Zelle verbundenen Überschriften. Der Datentabellenkontext stellt den Zweck für einen ansonsten unklaren Link bereit, wenn die Tabellenzelle das nächste, umschließende Block-Level-Ancestor-Element ist. Er gibt dem Benutzer die Möglichkeit diesen Link von Links auf der Webseite, die zu anderen Zielen führen, zu unterscheiden und hilft Benutzern dabei zu entscheiden, ob sie dem Link folgen. Beachten sie, dass die reine Angabe des Ziel-URIs für Menschen mit Behinderungen, vor allem für diejenigen mit kognitiven Behinderungen, nicht ausreichend deskriptiv ist.
Code-Beispiel:
<table>
<tr>
<th></th>
<th scope="col">Alamo</th>
<th scope="col">Budget</th>
<th scope="col">National</th>
<th scope="col">Avis</th>
<th scope="col">Hertz</th>
</tr>
<tr>
<th scope="row">Economy cars</th>
<td><a href="econ_ala.htm">$67/day</a></td>
<td><a href="econ_bud.htm">$68/day</a></td>
<td><a href="econ_nat.htm">$72/day</a></td>
<td><a href="econ_av.htm">$74/day</a></td>
<td><a href="econ_hz.htm">$74/day</a></td>
</tr>
<tr>
<th scope="row">Compact cars</th>
<td><a href="comp_ala.htm">$68/day</a></td>
<td><a href="comp_bud.htm">$69/day</a></td>
<td><a href="comp_nat.htm">$74/day</a></td>
<td><a href="comp_av.htm">$76/day</a></td>
<td><a href="comp_hz.htm">$76/day</a></td>
</tr>
<tr>
<th scope="row">Mid-sized cars</th>
<td><a href="mid_ala.htm">$79/day</a></td>
<td><a href="mid_bud.htm">$80/day</a></td>
<td><a href="mid_nat.htm">$83/day</a></td>
<td><a href="mid_av.htm">$85/day</a></td>
<td><a href="mid_hz.htm">$85/day</a></td>
</tr>
<tr>
<th scope="row">Full-sized cars</th>
<td><a href="full_ala.htm">$82/day</a></td>
<td><a href="full_bud.htm">$83/day</a></td>
<td><a href="full_nat.htm">$89/day</a></td>
<td><a href="full_av.htm">$91/day</a></td>
<td><a href="full_hz.htm">$91/day</a></td>
</tr>
</table> Es gibt für diese Technik keine Ressourcen.
Für jeden Link im Inhalt, der sich dieser Technik bedient:
Prüfen Sie, ob der Link in einer Tabellenzelle ist.
Prüfen Sie, ob der Linktext in Kombination mit der verbundenen Tabellenüberschrift den Zweck des Links beschreibt.
Die oben genannten Tests 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.
HTML und XHTML
Die Technik bezieht sich auf:
Der Befehl, um sich diese Technik in JAWS zu Nutze zu machen, lautet „JAWS KEY + T“.
Das Ziel dieser Technik ist es, den Zweck eines Links aus dem Kontext, der durch den Kontext seiner Überschrift zur Verfügung gestellt wird, zu beschreiben. Die vorhergehende Überschrift stellt den Kontext für einen ansonsten unklaren Link zur Verfügung. Die Beschreibung gibt dem Benutzer die Möglichkeit diesen Link von Links auf der Webseite, die zu anderen Zielen führen, zu unterscheiden und hilft Benutzern dabei zu entscheiden, ob sie dem Link folgen.
Anmerkung: Stellen Sie wann immer möglich Linktext zur Verfügung, der den Zweck des Links bezeichnet, ohne dass zusätzlicher Kontext benötigt wird.
Die Informationen zu jedem Hotel bestehen aus Name des Hotels, einer Beschreibung und einer Reihe von Links zu einer Karte, Fotos, der Wegbeschreibung, Bewertungen durch Gäste und zum Buchungsformular.
Code-Beispiel:
<h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
<ul class="horizontal">
<li><a href="royal_palm_hotel_map.html">Map</a></li>
<li><a href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a href="royal_palm_hotel_book.html">Book now</a></li>
</ul>
<h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
<ul class="horizontal">
<li><a href="hotel_three_rivers_map.html">Map</a></li>
<li><a href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a href="hotel_three_rivers_book.html">Book now</a></li>
</ul> Code-Beispiel:
<h2>Annual Report 2006-2007</h2>
<p>
<a href="annrep0607.html">(HTML)</a>
<a href="annrep0607.pdf">(PDF)</a>
<a href="annrep0607.rtf">(RTF)</a>
</p> Code-Beispiel:
<h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
<p>this week was a stellar week for the stock market as investing in gold rose 2%.
<a href="Stockmarket_05052007.htm>More here</a></p> Es gibt für diese Technik keine Ressourcen.
Für jeden Link im Inhalt, der sich dieser Technik bedient:
Finden Sie das Überschriftenelement, das dem Link vorausgeht
Prüfen Sie, ob der Linktext zusammen mit dem Text dieser Überschrift den Zweck des Links beschreibt.
#2 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Obwohl die Kontextinformationen durch Software mit dem Link verbunden ist, fehlt assistierenden Techniken der Befehl zum Lesen des Parent-Listenelements, ohne den Fokus von dem Link weg zu bewegen.
Das Ziel dieser Technik ist es, den Zweck eines Links in einer verschachtelten Liste aus dem Kontext heraus, der von dem Listenelement zur Verfügung gestellt wird, unter dem die Liste verschachtelt ist, zu beschreiben. Dieses Listenelement stellt den Kontext für einen ansonsten unklaren Link zur Verfügung. Die Beschreibung gibt dem Benutzer die Möglichkeit diesen Link von Links auf der Webseite, die zu anderen Zielen führen, zu unterscheiden und hilft Benutzern dabei zu entscheiden, ob sie dem Link folgen.
Da aktuelle, assistierende Techniken keine Befehle zur Abfrage von Kontextinformationen, die von Parent-Listenelementen zur Verfügung gestellt werden, enthalten, verlangt die Benutzung dieser Technik vom Benutzer, dass dieser die Liste Element für Element navigiert. Daher kann es sein, dass diese Technik für sehr lange oder tief verschachtelte Listen nicht geeignet ist.
Anmerkung: Stellen Sie wann immer möglich Linktext zur Verfügung, der den Zweck des Links bezeichnet, ohne dass zusätzlicher Kontext benötigt wird.
Code-Beispiel:
<ul>
<li>Annual Report 2005-2006
<ul>
<li><a href="annrep0506.html">(HTML)</a></li>
<li><a href="annrep0506.pdf">(PDF)</a></li>
<li><a href="annrep0506.rtf">(RTF)</a></li>
</ul>
</li>
<li>Annual Report 2006-2007
<ul>
<li><a href="annrep0607.html">(HTML)</a></li>
<li><a href="annrep0607.pdf">(PDF)</a></li>
<li><a href="annrep0607.rtf">(RTF)</a></li>
</ul>
</li>
</ul> Die Informationen zu jedem Hotel bestehen aus Name des Hotels, einer Beschreibung und einer Reihe von Links zu einer Karte, Fotos, der Wegbeschreibung, Bewertungen durch Gäste und zum Buchungsformular.
Code-Beispiel:
<ul>
<li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
<ul class="horizontal">
<li><a href="royal_palm_hotel_map.html">Map</a></li>
<li><a href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a href="royal_palm_hotel_book.html">Book now</a></li>
</ul>
</li>
<li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
<ul class="horizontal">
<li><a href="hotel_three_rivers_map.html">Map</a></li>
<li><a href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a href="hotel_three_rivers_book.html">Book now</a></li>
</ul>
</li>
</ul> Es gibt für diese Technik keine Ressourcen.
Für jeden Link im Inhalt, der sich dieser Technik bedient:
Finden Sie das ul- oder ol-Element, das den Link enthält
Prüfen Sie, ob dieses Listenelement (ul, ol) ein Abkömmling eines li-Elements ist
Prüfen Sie, ob der Linktext zusammen mit dem Text dieses li-Elements den Zweck des Links beschreibt.
Die oben genannten Tests 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.
HTML- und XHTML-Seiten, die Eingaben durch den Benutzer erfassen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, eine semantische Gruppierung für zueinander in Beziehung stehende Formular-Steuerelemente zur Verfügung zu stellen. Dies erlaubt es Benutzern, die Beziehung der Steuerelemente untereinander zu verstehen und mit dem Formular schneller und effizienter zu interagieren.
Formular-Steuerelemente können gruppiert werden, indem man sie mit dem fieldset-Element umschließt. Alle Steuerelemente innerhalb eines vorgegebenen fieldset stehen dann zueinander in Beziehung. Das erste Element innerhalb des fieldset sollte ein legend-Element sein, das eine Beschriftung für die Gruppe bereitstellt. Fieldsets können verschachtelt werden, wenn dies gewünscht ist, obwohl dies zur Verwirrungen führen kann, wenn es übertrieben wird.
Die Gruppierung von Steuerelementen ist bei zueinander in Beziehung stehende Radiobuttons und Kontrollkästchen am wichtigsten. Ein Satz Radiobuttons oder Kontrollkästchen steht zueinander in Beziehung, wenn sie alle Werte für ein einziges, benanntes Feld versenden. Sie funktionieren so wie Auswahllisten und erlauben es dem Benutzer, aus einer Reihe an Optionen auszuwählen, mit der Ausnahme, dass Auswahllisten einzelne Steuerelemente sind während Radiobuttons und Kontrollkästchen multiple Steuerelemente sind. Da es multiple Steuerelemente sind, ist es besonders wichtig, dass sie semantisch gruppiert werden, so dass sie leichter als einzelnes Steuerelement behandelt werden können. Benutzeragenten zeigen häufig den Wert von legend vor der Beschriftung jedes Steuerelementes an, um Benutzer daran zu erinnern, dass sie Teil der selben Gruppe sind.
Es kann auch nützlich sein, andere Reihen von Steuerelementen, die keine so enge Beziehung zueinander haben, als Reihen von Radiobuttons und Kontrollkästchen zu gruppieren. Zum Beispiel können verschiedene Felder, welche die Adresse des Benutzers sammeln, zusammen gruppiert werden mit der Legende „Adresse“.
Autoren vermeiden es manchmal, das fieldset-Element zu benutzen wegen der standardmäßigen Anzeige im Browser, die einen Rahmen um die gruppierten Steuerelemente zieht. Die visuelle Gruppierung ist ebenfalls nützlich und Autoren sollten es ernsthaft in Betracht ziehen, es beizubehalten (oder irgendeine andere Form der visuellen Gruppierung). Der visuelle Effekt kann im CSS verändert werden, indem die „border“-Eigenschaft des fieldset und die „position“-Eigenschaft von legend außer Kraft gesetzt werden.
Dieses Beispiel fordert den Benutzer auf, einen einzigen Philosophen auszuwählen. Beachten Sie, dass jedes Feld das gleiche „name“-Attribut hat, was darauf hinweist, dass diese Radiobuttons zueinander in Beziehung stehen (die alle schicken das gleiche Feld ab) und sie wie angezeigt gruppiert werden sollten. Beachten Sie außerdem, dass, obwohl die "name"-Attribute gleich sind, die "id"-Attribute einmalig sein müssen.
<form action="http://example.com/vote" method="post"> <fieldset> <legend>Your preferred philosopher</legend> <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/> <label for="philosopher_socrates">Socrates</label> <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/> <label for="philosopher_plato">Plato</label> <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/> <label for="philosopher_aristotle">Aristotle</label> </fieldset> </form>
Anmerkung: Gruppen mit zueinander in Beziehung stehenden Kontrollkästchen funktionieren auf die gleiche Art und Weise mit der Ausnahme, dass Benutzer mehr als eine Präferenz für das Feld ausdrücken dürfen.
In diesem Beispiel werden die Formularfelder für Wohn- und Postanschrift durch den Wert von legend in jeder fieldset-Gruppierung unterschieden.
<form action="http://example.com/adduser" method="post"> <fieldset> <legend>Residential Address</legend> <label for="raddress">Address: </label> <input type="text" id="raddress" name="raddress" /> <label for="rzip">Postal/Zip Code: </label> <input type="text" id="rzip" name="rzip" /> ...more residential address information... </fieldset> <fieldset> <legend>Postal Address</legend> <label for="paddress">Address: </label> <input type="text" id="paddress" name="paddress" /> <label for="pzip">Postal/Zip Code: </label> <input type="text" id="pzip" name="pzip" /> ...more postal address information... </fieldset> </form>
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob es Gruppen mit zueinander in Beziehung stehenden Formular-Steuerelementen gibt.
Wenn es zueinander in Beziehung stehende Formular-Steuerelemente gibt, sollten die mit fieldset gruppiert werden, mit einem label, das die Gruppe beschriftet.
Test #2 ist wahr
HTML 4.01 Transitional und XHTML 1.0 Transitional
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Verwirrung zu vermeiden, die durch das Erscheinen neuer Fenster, die nicht vom Benutzer angefordert wurden, auftreten könnte. Das plötzliche Öffnen neuer Fenster kann Benutzer desorientieren oder von ihnen komplett übersehen werden. In HTML 4.01 Transitional und XHTML 1.0 Transitional kann das target-Attribut statt automatischer Pop-Ups benutzt werden, um ein neues Fenster zu öffnen. (Das target-Attribut wurde aus HTML 4.01 Strict und XHTML 1.0 Strict gelöscht.) Beachten Sie, dass die Nichtbenutzung von target es dem Benutzer erlaubt zu entscheiden, ob ein neues Fenster geöffnet werden sollte oder nicht. Die Benutzung des target-Attributs stellt einen eindeutigen, maschinen-lesbaren Hinweis darauf zur Verfügung, dass sich ein neues Fenster öffnen wird. Benutzeragenten können den Benutzer informieren und außerdem so konfiguriert werden, dass sie das neue Fenster nicht öffnen. Für diejenigen, die keine assistierenden Techniken benutzen, wäre der Hinweis auch durch den Linktext verfügbar.
Das folgende Beispiel zeigt die Benutzung des target-Attributs in einem Link, der darauf hinweist, dass er in einem neuen Fenster geöffnet wird.
Code-Beispiel:
<a href="help.html" target="_blank">Show Help (opens new window)</a>Aktivieren Sie jeden Link im Dokument um zu prüfen, ob dieser ein neues Fenster öffnet.
Prüfen Sie für jeden Link, der ein neues Fenster öffnet, ob er das target-Attribut benutzt.
Prüfen sie ob der Linktext Informationen enthält, die darauf hinweisen, dass sich der Link in einem neuen Fenster öffnen wird.
Tests #2 und #3 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, den Benutzer steuern zu lassen, wann eine Handlung ausgeführt wird statt dass die Handlung als Nebeneffekt auftritt, wenn man einen Wert des select-Elements auswählt. Der Benutzer könnte die verschiedenen Werte des select-Elements genau betrachten oder versehentlich den falschen Wert auswählen, ohne dass dies dazu führt, dass die Handlung ausgeführt wird. Wenn der Benutzer mit seiner Wahl zufrieden ist, dann wählt er die Schaltfläche, um die Handlung auszuführen.
Dies ist besonders wichtig für Benutzer, die den Wert des select-Elements per Tastatur auswählen, da das navigieren durch die Optionen des select-Eelements den Wert des Steuerelements ändert.
Eine Webseite lässt den Benutzer jeden beliebigen Monat eines Jahres auswählen und zeigt den Kalender für diesen Monat an. Nachdem der Benutzer Monat und Jahr festgelegt hat lässt er eich den Kalender anzeigen, indem er die Schaltfläche „zeigen“ („show“) drückt. Dieses Beispiel ist auf client-seitiges Scripting zur Implementierung der Handlung angewiesen.
Code-Beispiel:
<label for="month">Month:</label>
<select name="month" id="month">
<option value="1">January</option>
<option value="2"> February</option>
...
<option value="12">December</option>
</select>
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">Ein select-Element enthält eine Liste mit möglichen Handlungen. Die Handlung wird nicht ausgeführt, bevor der Benutzer die Schaltfläche „Do it“ drückt.
Code-Beispiel:
<form action="http://somesite.com/action" method="post">
<label for="action">Options:</label>
<select name="action" id="action">
<option value="help">Help</option>
<option value="reset">Reset</option>
<option value="submit">Submit</option>
</select>
<button type="submit" name="submit" value="submit">Do It </button>
</form> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jede select-Element/Button-Element-Kombination:
Prüfen Sie, ob der Fokus (einschließlich Tastatur-Fokus) auf einer Option im select-Element nicht zu irgendwelchen Handlungen führt
Prüfen Sie, ob das Auswählen der Schaltfläche die Handlung, die mit dem aktuellen select-Wert verbunden ist, ausführt
Alle Test 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.
HTML- und XHTML-Seiten, die Eingaben durch den Benutzer erfassen.
Die Technik bezieht sich auf:
Das optgroup-Element wird nicht weithin von vielen Screenreadern unterstützt einschließlich JAWS 11 und niedriger oder Window-Eyes 6 und niedriger.
Das label-Attribut für option und optgroup wird nicht konsistent Benutzeragenten-übergreifend unterstützt und wird nicht weithin von Screenreadern einschließlich JAWS 11 und niedriger und Window-Eyes 6 und niedriger unterstützt.
Das Ziel dieser Technik ist es, Elemente in einer Auswahlliste zu gruppieren. Eine Auswahlliste ist eine Reihe erlaubter Werte für ein Formular-Steuerelement wie zum Beispiel eine Multi-Auswahlliste oder eine Combo-Box. Auswahllisten haben oft Gruppen mit verwandten Optionen. Diese Gruppen sollten semantisch gekennzeichnet sein, statt die Gruppen einfach mit „Schein“-Listeneinträgen abzugrenzen. Dies erlaubt es Benutzeragenten, die Optionen gruppenweise einzuklappen, um ein schnelleres Überfliegen der Optionen zu unterstützen und um darauf hinzuweisen, in welcher Gruppe sich eine Option, die von Interesse ist, befindet. Es hilft außerdem dabei, lange Listen visuell zu unterteilen, so dass Benutzer die Option(en), an der/denen sie interessiert sind, leichter finden können.
In HTML wird das select-Element benutzt, um sowohl Multi-Auswahllisten als auch Combo-Boxen zu erstellen. Die verschiedenen erlaubten Optionen werden jeweils mit option-Elementen gekennzeichnet. Um Optionen zu gruppieren, benutzen Sie das optgroup-Element mit den verwandten option-Elementen innerhalb dieses Elements. Beschriften Sie die Gruppe mit dem „label“-Attribut. so dass Benutzer wissen, was sie innerhalb der Gruppe erwartet.
Das optgroup-Element sollte direkt innerhalb des select-Elements sein und die option-Elemente direkt innerhalb der optgroup. Es ist möglich, dass ein select-Element sowohl einzelne option-Elemente und optgroup-Gruppen enthält, obwohl Autoren überlegen sollten, ob das in der Tat die gewünschte Absicht ist, wenn sie dies benutzen. Es ist nicht möglich, die optgroup-Elemente zu verschachteln, also kann nur eine Ebene der Gruppierung innerhalb eines select gemacht werden.
Wenn das Gruppieren von Informationen notwendig für das Verständnis der Liste ist, dann können Autoren option-Labels definieren, die verstanden werden können auch wenn der Screenreader die Gruppierungsinformationen, die durch optgroup zur Verfügung gestellt werden, nicht anbietet.
Die folgende Combo-Box erfasst Daten zu Lieblingsspeisen. Die Gruppierung nach Typ erlaubt es Benutzern, ihre Vorlieben schneller auszuwählen.
Code-Beispiel:
<form action="http://example.com/prog/someprog" method="post">
<label for="food">What is your favorite food?</label>
<select id="food" name="food">
<optgroup label="Fruits">
<option value="1">Apples</option>
<option value="3">Bananas</option>
<option value="4">Peaches</option>
<option value="5">...</option>
</optgroup>
<optgroup label="Vegetables">
<option value="2">Carrots</option>
<option value="6">Cucumbers</option>
<option value="7">...</option>
</optgroup>
<optgroup label="Baked Goods">
<option value="8">Apple Pie</option>
<option value="9">Chocolate Cake</option>
<option value="10">...</option>
</optgroup>
</select>
</form> Das folgende Beispiel zeigt, wie eine Multi-Auswahlbox das optrgroup-Element nutzen kann.
Code-Beispiel:
<form action="http://example.com/prog/someprog" method="post">
<label for="related_techniques"><strong>Related Techniques:</strong></label>
<select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
<optgroup label="General Techniques">
<option value="G1">G1: Adding a link at the top of each page ... </option>
<option value="G4">G4: Allowing the content to be paused and restarted ... </option>
<option value="G5">G5: Allowing users to complete an activity without any time... </option>
<option value="G8">G8: Creating an extended audio description for the ... </option>
<option value="G9">G9: Creating captions for live synchronized media... </option>
<option value="G10">G10: Creating components using a technology that ... </option>
</optgroup>
<optgroup label="HTML Techniques">
<option value="H2">H2: Combining adjacent image and text links for the same ... </option>
<option value="H4">H4: Creating a logical tab order through links, form ... </option>
<option value="H24">H24: Providing text alternatives for the area ... </option>
</optgroup>
<optgroup label="CSS Techniques">
<option value="C6">C6: Positioning content based on structural markup... </option>
<option value="C7">C7: Using CSS to hide a portion of the link text... </option>
</optgroup>
<optgroup label="SMIL Techniques">
<option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
<option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
<option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
</optgroup>
<optgroup label="ARIA Techniques">
<option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
<option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
<option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
</optgroup>
<optgroup label="Common Failures">
<option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
<option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
<option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images ... </option>
<option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
</optgroup>
</select>
</form> Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie den Satz an Optionen innerhalb einer Auswahlliste um zu sehen, ob es Gruppen mit verwandten Elementen gibt.
Wenn es Gruppen mit verwandten Elementen gibt, sollten sie mit optgroup gruppiert sein.
Test #2 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Assistierende Techniken stellen unterschiedliche Stufen an Unterstützung für das Sprechen von title-Attributen bereit. Einige enthalten keine Funktionen, die es Benutzern erlauben, auf Informationen, die per title-Attribut bereitgestellt werden, zuzugreifen.
Die Implementierung dieser Technik mit dem title-Attribut ist nur ausreichend, wenn das title-Attribut die Barrierefreiheit unterstützend ist. Der Inhalt des title-Attributs muss für alle Tastaturbenutzer verfügbar sein (nicht nur für diejenigen mit einer Text-zu-Sprache-Software), damit dieses Attribut die Barrierefreiheit unterstützend ist.
JAWS 6.2 und höher und WindowEyes 5.0 und höher unterstützen die abbr- und acronym-Elemente. Sie können alle so eingestellt werden, dass sie das title-Attribut sprechen, wenn diese Elemente angetroffen werden, aber dies ist nicht die Standardeinstellung und wird oft nicht von den Benutzern angeschaltet.
Viele grafische Benutzeragenten rendern Text, der innerhalb eines abbr- oder acronym-Elements liegt, mit einer gestrichelten Linie darunter oder ringsum. Zusätzlich wird die ausgeschriebene Form, wenn die Maus über dem Element schwebt, als Tooltip angezeigt.
In Internet Explorer 7 und darunter werden Elemente, die per abbr-Element markiert sind, nicht mit irgendeiner zusätzlichen Formatierung angezeigt. In IE 6 und darunter wird die ausgeschriebene Form nicht als Tooltip angezeigt, wenn die Maus über dem Element schwebt.
Innerhalb eines bestimmten Benutzeragenten oder einer bestimmten assistierenden Technik werden dem Benutzer abbr- und acronym-Elemente auf die gleiche Art und Weise angezeigt.
Vor der weit verbreiteten Nutzung von Grafiken im Internet wurden häufig ASCII-Zeichen so angeordnet, dass sie Bilder oder Diagramme bildeten. Obwohl ASCII-Art nicht mehr häufig im Netz benutzt wird, muss man daran denken, dass dies, wenn es benutzt wird, für blinde Menschen, die auf das Internet per Screenreader zugreifen, sehr verwirrend ist. Wenn es benutzt wird, sollte in Textform erklärt werden, was das Bild darstellt. Es wird außerdem empfohlen, dass es einen Link gibt, um die ASCII-Art zu überspringen (obwohl dies nicht vorgeschrieben ist).
Emoticons sind sehr beliebt. Sie enthalten ASCII-Zeichen, die Gesichtsausdrücke formen und andere Möglichkeiten, um eine Emotion zu kommunizieren. Sie können für Benutzer von Screenreadern verwirrend sein. Wenn möglich ist es besser, einfach ein Wort wie „lächeln“ zu benutzen statt eines Emoticons. Wenn Emoticons aber benutzt werden sollten sie eine Textalternative haben. In einigen Kontexten, zum Beispiel bei Blog- und Forum-Software, stehen Plug-Ins zur Verfügung, die als Emoticons benutzte ASCII-Zeichen automatisch in HTML-Bilder mit Textalternative konvertieren.
Leetspeak nutzt verschiedene Kombinationen von ASCII-Zeichen, um aus dem lateinischen stammende Buchstaben zu ersetzen. Leet ist zu einem Teil der Internet-Kultur und des Internet-Slangs geworden. Leet wird häufig benutzt, um Text- und Spamfilter zu bezwingen. Es ist für blinde Menschen, die Screenreader benutzen, oft unverständlich und daher ist für die Konformität zu Erfolgskriterium 1.1.1 eine Textalternative erforderlich.
Anmerkung: Da die Unterstützung für diese Technik begrenzt ist, wird empfohlen, dass Autoren die Textalternative in Textform zur Verfügung stellen.
Im folgenden werden drei Optionen gezeigt, um Alternativen für ein Emoticon zur Verfügung zu stellen, das „Angst“ darstellt und das aus einem Gleichheitszeichen gefolgt von der Zahl 8, einem Gedankenstrich und der Zahl 0 besteht.
Code-Beispiel:
=8-0 (fright)
<abbr title="fright">=8-0</abbr>
<img src="fright.gif" alt="fright"/>
Hier ist ASCII-Art mit einer vorangestellten Erklärung des Bildes. Es beinhaltet einen Link, um die ASCII-Art zu überspringen. ASCII-Beispiel überspringen.
Code-Beispiel:
Figure 1: ASCII art picture of a butterfly.
<a href="#skipbutterfly">Skip ASCII image</a>
LLLLLLLLLLL
__LLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
L _LLLLLLLLLLLLLLLLLLLLLLL
LL LLLLLL~~~LLLLLLLLLLLLLL
_L _LLLLL LLLLLLLLLLLLL
L~ LLL~ LLLLLLLLLLLLL
LL _LLL _LL LLLLLLLL
LL LL~ ~~ ~LLLLLL
L _LLL_LLLL___ _LLLLLL
LL LLLLLLLLLLLLLL LLLLLLLL
L LLLLLLLLLLLLLLL LLLLLL
LL LLLLLLLLLLLLLLLL LLLLL~
LLLLLLLL_______ L _LLLLLLLLLLLLLLLL LLLLLLLL
~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~ LLLLLL
______________LLL LLLLLLLLLLLLLL ______LLLLLLLLL_
LLLLLLLLLLLLLLLLLLLL LLLLLLLL~~LLLLLLL~~~~~~ ~LLLLLL
___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____ _LLLLLL_
LLLLLLLLLLL~~ LLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLL ~~~LLLLL
__LLLLLLLLLLL _LLLLLLLLLLLLLLLLL_ LLLLLLLLLLLLLLLLLL_ LLLLL
LLLLLLLLLLL~ LLLLLLLLLLLLLLLLLLL ~L ~~LLLLLLLLLLLLL LLLLLL
_LLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL_ LL LLLLLLLLL LLLLLLLLL
LLLLLLLLLLLLL LLLLLLLLLLLLL~LLLLLL~L LL ~~~~~ ~LLLLLL
LLLLLLLLLLLLLLL__L LLLLLLLLLLLL_LLLLLLL LL_ LL_ _ LLLLLL
LLLLLLLLLLLLLLLLL~ ~LLLLLLLL~~LLLLLLLL ~L ~LLLL ~L LLLLLL~
LLLLLLLLLLLLLLLL _LLLLLLLLLL LL LLLLLLL___ LLLLLLLLLL
LLLLLLLLLLLLLLLL LL~LLLLLLLL~ LL LLLLLLLLLLLL LLLLLLL~
LLLLLLLLLLLLLLLL_ __L _L LLLLLLLL LLL_ LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL L~ LLLLLLLL LLLLLLL~LLLLLLLLLLLLLLLL~
LLLLLLLLLLLLLLLLLLLL___L_ LL LLLLLLL LLLL LLLLLLLLLLLLLL
~~LLLLLLLLLLLLLLLLLLLLLLLL LLLLL~ LLLLL ~~~~~~~~~
LLLLLLLLLLLLLLLLLL_ _ LLL _LLLLL
~~~~~~LLLLLLLLLL~ LLLLLL
LLLLL _LLLLLL
LLLLL L L LLLLLLL
LLLLL__LL _L__LLLLLLLL
LLLLLLLLLL LLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
~LLLLLLLLLLLLLLLLL~~
LLLLLLLLLLLLL
~~~~~~~~~
<a name="skipbutterfly"></a> Bei dem folgenden handelt es sich um Leetspeak für „Austin Rocks“.
Code-Beispiel:
<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr> Öffnen Sie die Seite in einem gängigen Browser.
Prüfen Sie, ob der Inhalt ASCII-Art, Emoticons und/oder Leetspeak enthält.
Prüfen Sie, ob es eine Textalternative unmittelbar vor oder nach der gesamten ASCII-Art, den Emoticons und/oder dem Leetspeak.
Testverfahren #3 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Diese Technik hilft dabei, Situationen zu vermeiden, in denen horizontales Scrollen auftreten kann. Viele Menschen mit kognitiven Behinderungen und Benutzer mit verringertem Sehvermögen, die keine assistierenden Techniken benutzen, haben viele Probleme mit Textblöcken, die horizontales Scrollen erfordern. Das schließt ein, dass der neue Textumbruch, wenn das Fenster schmaler gemacht wird, nicht beeinträchtigt wird. Eine der besten Arten, dies zu tun, ist es, die Breite von Textblock-Containern in Prozent zu definieren..
HTML- und XHTML-Benutzeragenten umbrechen den Text automatisch neu, wenn das Browserfenster schmaler gemacht wird, so lange der Autor Breiten nicht in absoluten Maßen wie Pixeln oder Punkt angibt.
Eine Zeitungs-Site beinhaltet Artikel mit Spalten, die sich der Breite des Fensters im Benutzeragenten anpassen. Benutzer mit kognitiven Behinderungen können die Spalte auf eine Breite verkleinern, die das Lesen erleichtert.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Öffnen Sie die Inhalte, die einen Textblock enthalten, in einem gängigen Browser.
Verkleinern Sie das Ansichtsfenster auf 1/4 der Bildschirmbreite.
Prüfen Sie, ob es der Inhalt nicht erforderlich macht, horizontal zu scrollen, um eine Textzeile zu lesen.
Test #3 ist 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.
HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, HTML und XHTML gemäß ihrer entsprechenden Spezifikationen zu benutzen. Technik-Spezifikationen definieren die Bedeutung und die korrekte Handhabung von Funktionen der Technik. Die Benutzung dieser Funktionen auf die beschriebene Art und Weise stellt sicher, dass Benutzeragenten einschließlich assistierender Techniken dazu in der Lage sind, Darstellungen dieser Funktion zu bieten, die genau der Absicht des Autors entsprechen und untereinander interoperabel sind.
Zu der Zeit, als diese Technik veröffentlicht wurde, waren die passenden Versionen dieser Techniken HTML 4.01 und XHTML 1.0. HTML 4.01 ist die letzte ausgereifte Version von HTML, die bestimmte Barrierefreiheitsfunktionen zur Verfügung stellt und von Benutzeragenten weithin unterstützt wird. XHTML 1.0 stellt die gleichen Funktionen wir HTML 4.01 bereit mit der Ausnahme, dass es einen XML-Struktur benutzt und eine strengere Syntax als die HTML-Struktur hat. Spätere Versionen dieser Techniken sind nicht ausgereift und / oder werden derzeit nicht weithin von Benutzeragenten unterstützt.
Es gibt einige umfassende Aspekte bei der Benutzung von HTML und XHTML gemäß ihrer Spezifikation.
Reine Benutzung von Funktionen, die in der Spezifikation definiert sind HTML definiert Sätze an Elementen, Attributen und Attribut-Werten, die auf Webseiten benutzt werden können. Diese Funktionen haben bestimmte semantische Bedeutungen und sind dazu gedacht, von Benutzeragenten auf bestimmte Arten verarbeitet zu werden. Manchmal werden zusätzliche Funktionen aber zu gängiger Autoren-Praxis. Dieser werden üblicherweise zu Beginn nur von einem Benutzeragenten unterstützt. Wenn Funktionen benutzt werden, die nicht in der Spezifikation sind, dann kann es sein, dass viele Benutzeragenten die Funktion nicht unterstützen, entweder für eine gewisse Zeit oder niemals. Darüber hinaus kann es sein, dass Benutzeragenten aus Mangel an Standard-Spezifikationen für die Benutzung dieser Funktionen eine unterschiedliche Unterstützung zur Verfügung stellen. Dies hat Auswirkungen auf die Barrierefreiheit, da assistierende Techniken, die mit weniger Ressourcen entwickelt werden als Mainstream-Benutzeragenten, eine lange Zeit - falls überhaupt - brauchen, um eine nützliche Unterstützung hinzuzufügen. Daher sollten Autoren Funktionen, die nicht in HTML und XHTML definiert sind, meiden, um unerwartete Probleme bei der Barrierefreiheit zu verhindern.
Benutzung von Funktionen auf die durch die Spezifikation vorgeschriebene Art und Weise Die HTML-Spezifikation stellt konkrete Anleitungen dazu bereit, wie bestimmte Elemente, Attribute und Attribut-Werte verarbeitet und semantisch verstanden werden sollen. Manchmal benutzen Autoren Funktionen aber auf eine Art und Weise, die nicht von der Spezifikation unterstützt wird, zum Beispiel die Benutzung von semantischen Elementen zur Erreichung visueller Effekte ohne dass die Absicht besteht, die darunter liegende semantische Nachricht zu vermitteln. Dies führt bei Benutzeragenten und assistierenden Techniken, die sich auf die korrekten semantischen Informationen verlassen, um eine kohärente Darstellung der Seite zu bieten, zur Verwirrung. Es ist wichtig, HTML-Funktionen nur wie in der HTML-Spezifikation vorgeschrieben zu benutzen.
Sicherstellen, dass der Inhalt analysiert werden kann HTML und XHTML definieren außerdem, wie Inhalte kodiert werden sollten, damit sie von Benutzeragenten korrekt verarbeitet werden. Regeln zur Struktur von Start- und End-Tags, Attributen und Werten, Verschachtelung von Elementen usw. stellen sicher, dass Benutzeragenten den Inhalt auf eine Art und Weise analysieren, um damit die beabsichtige Darstellung des Dokumentesw zu erreichen. Das Befolgen der strukturellen Regeln in diesen Spezifikationen ist ein wichtiger Teil bei der Benutzung dieser Techniken gemäß Spezifikation.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Beachten Sie den Ressourcen-Abschnitt von G134: Validierung von Webseiten.
Für jede HTML- oder XHTML-Seite:
Prüfen Sie, ob die Seite nur Elemente, Attribute und Attribut-Werte benutzt, die in der relevanten Spezifikation definiert sind.
Prüfen sie, ob die Elemente, Attribute und Werte auf die von der relevanten Spezifikation vorgeschriebene Art benutzt werden.
Prüfen Sie, ob die Seite korrekt analysiert werden kann, entsprechend der Regeln der relevanten Spezifikation.
Anmerkung: Tests #1 und #3 werden am einfachsten mit Werkzeugen zur Validierung von Seiten geprüft. Test #2 kann mit Hilfe von heuristischen Evaluationswerkzeugen geprüft werden, obwohl normalerweise eine Beurteilung von Hand notwendig ist.
Tests #1, #2 und #3 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.
HTML und XHTML
Die Technik bezieht sich auf:
Einige aktuelle assistierende Techniken geben dem Benutzer eine Rückmeldung, wenn Formularfelder über Title-Attribut-Inhalte verfügen.
Einige grafische Benutzeragenten zeigen einen Tooltip an, wenn die Maus über einem Formularfeld schwebt, das ein title-Attribut enthält. Aktuelle Benutzeragenten stellen allerdings keine Zugriff auf den Inhalt des title-Attributs per Tastatur zur Verfügung.
Der Tooltip in manchen gängigen Benutzeragenten verschwindet nach einem kurzen Zeitraum (etwa 5 Sekunden). Dies kann denjenigen Benutzern, die eine Maus benutzen können aber Beeinträchtigungen in der Feinmotorik haben, Schwierigkeiten beim Zugriff auf den Inhalt des title-Attributs bereiten und es kann Schwierigkeiten für die Benutzer geben, die mehr Zeit brauchen, um den Tooltip zu lesen.
Für die meisten Benutzer ist es in vielen aktuellen Benutzeragenten schwierig, den Inhalt des title-Attributes in der Größe zu verändern, die Hintergrundfarben anzupassen, den Inhalt zu repositionieren oder dessen Darstellung anderweitig zu steuern.
Diese Technik kann nur benutzt werden, wenn das Element eine explizit damit verbundene Beschriftung hat. Fehlt die Beschriftung, dann wird der title als Name im Barrierefreiheits-API von aktuellen Benutzeragenten, die ihn unterstützen, benutzt. Der unten beschriebene Hilfe-Text stellt einen schlechten Namen dar.
Das Ziel dieser Technik ist, den Benutzern während der Eingabe von Formulardaten eine kontext-sensitive Hilfe zur Verfügung zu stellen, indem die Hilfe-Informationen in einem title-Attribut bereitgestellt werden. Die Hilfe kann Format-Informationen oder Eingabebeispiele enthalten.
Anmerkung: Aktuelle Benutzeragenten und assistierende Techniken stellen dem Benutzer nicht immer die Informationen, die im title-Attribut enthalten sind, zur Verfügung. Vermeiden Sie es, diese Technik isoliert zu benutzen, solange bis das title-Attribut ein weit verbreitete Unterstützung hat.
Eine Landkarten-Anwendung stellt ein Formular zur Verfügung, das aus einer Beschriftung (label) „Address:“ einem Eingabefeld und einer Absenden-Schalftfläche mit dem Wert „Find map“ (Landkarte finden) besteht. Das Eingabefeld hat einen title-Attribut-Wert mit einem Beispiel des vom Benutzer einzugebenden Adressformats.
Code-Beispiel:
<label for="searchAddress">Address: </label>
<input id="searchAddress" type="text" size="30" value="" name="searchAddress"
title="Address example: 101 Collins St, Melbourne, Australia" />
Ein Formular, das es Benutzern erlaubt, ihre Rechnung online zu bezahlen, macht es erforderlich, dass der Benutzer seine Kontonummer eingibt. Das Eingabefeld mit dem „Account number“-Label hat ein title-Attribut, das Informationen dazu gibt, wo man die Kontonummer findet.
Code-Beispiel:
<label for="accNum1">Account number: </label>
<input id="accNum1" type="text" size="10" value="" title="Your account number
can be found in the top right-hand corner of your bill." />
identifizieren Sie Formular-Steuerelemente, die eine Texteingabe erfordern.
Prüfen Sie, ob jedes Formular-Steuerelement eine explizit verbundene Beschriftung hat
Prüfen Sie, ob jedes Formular-Steuerelement eine im title-Attribut zur Verfügung gestellte kontext-sensitive Hilfe hat.
Tests #2 und #3 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.
HTML- und XHTML-Steuerelemente, die externe Beschriftungen benutzen
Die Technik bezieht sich auf:
Die HTML und XHTML-Spezifikationen erlauben sowohl implizite als auch explizite Beschriftungen. Allerdings verarbeiten einige assistierende Techniken implizite Beschriftungen nicht korrekt (zum Beispiel <label>First name <input type="text" name="firstname"></label>).
JAWS 7.10 wurde unter Windows XP mit Internet Explorer 6.0 und Firefox 1.5 getestet. Es liest die Beschriftung für explizite und implizite Beschriftungen von Textfeldern sowohl im Virtuellen-Cursor-Modus als auch im Formularmodus. Im Formularmodus liest es keine Beschriftungen für implizite Beschriftungen bei Kontrollkästchen und Radio-Feldern.
Window-Eyes 5.5 wurde unter Windows XP mit Internet Explorer 6.0 und Firefox 1.5 getestet. Es spricht immer die Beschriftung von einem explizit beschrifteten Formularfeld. Es spricht keine Beschriftung für implizit beschriftete Formular-Steuerelemente im browse-on-Modus aber es spricht die implizite Beschriftung, wenn man im browse-off-Modus von Steuerelement zu Steuerelement navigiert.
Benutzeragenten zeigen einen Tooltip an, wenn die Maus über einem input-Element, das ein titleAttribut hat, schwebt. Title-Attribute werden assistierenden Techniken gezeigt und als Tooltips in vielen grafischen Browsern angezeigt. Tooltips können nicht per Tastatur geöffnet werden, also kann es sein, dass diese Information sehenden Tastatur-Benutzern nicht zur Verfügung steht.
Wenn keine Beschriftung (label) zur Verfügung steht, sprechen JAWS und Window-Eyes das title-Attribut, wenn das Formular-Steuerlement des Fokus erhält
JAWS 6.0 und höher kann so eingestellt werden, dass sowohl label als auch title gesprochen werden, wenn die zwei Elemente unterschiedlich sind; allerdings haben nur sehr wenige Benutzer von dieses Einstellung Kenntnis.
WindowEyes 5.5 hat einen Kurzbefehl, ins-E, der that will display additional information, including the title attribute, for the item with focus.
Einige Benutzeragenten (besonders der Window-Eyes Screenreader) sprechen standardmäßig nicht das Asterisk-Zeichen in Formular-Beschriftungen. Es gibt eine Einstellung, die Window-Eyes-Benutzer verändern können, um dieses Verhalten anzupassen, aber es sollte erwartet werden, dass viele Benutzer diese Änderungen nicht gemacht haben.
Das Ziel dieser Technik ist es, eine klare Angabe dazu zur Verfügung zu stellen, dass ein bestimmtes Formular-Steuerelement in einer Webanwendung oder in einem Formular zum erfolgreichen Absenden von Daten erforderlich ist. Ein Symbol oder Text, der darauf hinweist, dass das Steuerelement erforderlich ist, wird durch Software mit dem Feld verbunden, indem das label-Element oder bei Gruppen von Steuerelementen das legend-Element per fieldset verbunden wird. Wenn ein Symbol benutzt wird, dann wird der Benutzer vor der ersten Benutzung über dessen Bedeutung informiert.
Das Textfeld in dem unten stehenden Beispiel hat die explizite Beschriftung „First name (required)“ - „Vorname (Pflichtfeld)“: Das for-Attribut des label-Elements entspricht dem id-Attribut des input-Elements und der label-Text weist darauf hin, dass das Steuerelement ein Pflichtfeld ist.
Code-Beispiel:
<label for="firstname">First name (required):</label>
<input type="text" name="firstname" id="firstname" />Anmerkung: Einige Autoren kürzen „required“ mit „req.“ ab, aber es gibt anekdotische Evidenz, die darauf hindeutet, dass diese Abkürzung verwirrend ist.
Das Textfeld in dem unten stehenden Beispiel hat eine explizite Beschriftung, die einen Asterisken enthält, um darauf hinzuweisen, dass das Steuerelement ein Pflichtfeld ist. Es ist wichtig, dass die Bedeutung des Asterisken am Beginn des Formulars definiert wird. In diesem Beispiel ist der Asterisk innerhalb eines span-Elements enthalten, damit das Asterisk-Zeichen formatiert werden kann, damit es größer als das Standard-Asterisk-Zeichen ist, da es für diejenigen mit eingeschränktem Sehvermögen schwierig sein kann, das Asterisk-Zeichen zu sehen.
Code-Beispiel:
CSS:
.req {font-size: 150%}
HTML:
<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
<input type="text" name="firstname" id="firstname" />Das Textfeld im unten stehenden Beispiel hat eine explizite Beschriftung, die ein Bild enthält, um darauf hinzuweisen, dass das Steuerelement ein Pflichtfeld ist. Es ist wichtig, dass die Bedeutung des Bildes am Beginn des Formulars definiert wird.
Code-Beispiel:
<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label>
<input type="text" name="firstname" id="firstname" />
...Radiobuttons und Kontrollkästchen werden anders als andere interaktive Steuerelemente behandelt, da einzelne Radiobuttons und Kontrollkästchen keine Pflichtfelder sind, aber darauf hingewiesen wird, dass eine Anwort für die Gruppe Pflicht ist. Die in den Beispielen 1-3 benutzen Methoden gelten für Radiobuttons und Kontrollkästchen, aber der Hinweis auf den Pflichtfeld-Status sollte im legend-Element statt im label-Element platziert werden.
Code-Beispiel:
<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie für jedes Formular-Steuerelement, bei dem es sich um ein Pflichfeld handelt, ob auf den Pflichtfeld-Status im label oder legend des Formular-Steuerelements hingewiesen wird.
Prüfen Sie für jeden Hinweis zum Pflichtfeld-Status, der nicht im Text bereitgestellt wird, ob die Bedeutung des Indikators vor dem Formular-Steuerelement, das diesen benutzt, erklärt wird.
Alle oben genannten Tests 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.
HTML-Formular-Steuerelemente und Links
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Standard-HTML-Formular-Steuerelemente und Linkelemente zu benutzen, um die Tastaturbedienung von interaktiven Elementen der Benutzerschnittstelle und deren Interoperabilität mit assistierenden Techniken zur Verfügung zu stellen.
Benutzeragenten stellen die Tastaturbedienung von HTML-Formular-Steuerelementen und Links zur Verfügung. Zusätzlich ordnet der Benutzeragent die Formular-Steuerelemente und Links einem Barrierefreiheits-API zu. Assistierende Techniken benutzen das Barrierefreiheits-API , um die passenden Barrierefreiheitsinformationen wie beispielsweise role, name, state und value herauszuziehen und sie den Benutzern zu präsentieren. Das HTML-Element stellt „role“ zur Verfügung und der mit dem Element verbundene Text stellt „name“ zur Verfügung. Elemente, für die „values“ (Werte) und „states“ (Zustände) angebracht sind, zeigen außerdem die Werte und Zustände über verschiedene Mechanismen.
In manchen Fällen ist der Text schon durch ein Pflicht-Attribut mit dem Steuerelement verbunden. Absenden-Schaltflächen benutzen zum Beispiel den Text des button-Elements oder das 'alt'-Attribut des Bildes als Name. Im Falle von Formular-Steuerelementen werden label-Elemente oder 'title'-Attribute benutzt. Die folgende Tabelle zeigt, wie role, name, value und state bei HTML-Links und Formular-Steuerelementen bestimmt werden.
| HTML-Element | Rolle (role) | Name (name) | Wert (value) | Zustand (state) |
|---|---|---|---|---|
| <a> | link | 'title'-Attribut, Text innerhalb des <a>-Elements oder 'alt'-Attribut, wenn es ein Bild-Link ist. Verkettet, wenn sowohl Text- als auch Bild-'alt'-Attribute bereitgestellt werden | 'href' attribute | |
| <button> | push button | Text innerhalb des <button>-Elements oder des 'title'-Attributs | ||
| <fieldset> | grouping | <legend>-Element | ||
| <input type = "button", "submit", or "reset"> | push button | 'value'-Attribut | ||
| <input type = "image"> | push button | 'alt'-Attribut oder 'title'-Attribut | ||
| <input type = "text"> | Editierbarer Text (editable text) | Damit verbundenes <label>-Element oder 'title'-Attribut | 'value'-Attribut | |
| <input type = "password"> | Editierbarer Text (editable text) | Damit verbundenes <label>-Element oder 'title'-Attribut | ||
| <input type="checkbox"> | checkbox | Damit verbundenes <label>-Element oder 'title'-Attribut | 'checked'-Attribut | |
| <input type="radio"> | Radiobutton | Damit verbundenes <label>-Element oder 'title'-Attribut | 'checked'-Attribut | |
| <select> | Combobox, Liste oder Dropdown-Liste | Damit verbundenes <label>-Element oder 'title'-Attribut | <option>-Element mit 'selected'-Attribut, das auf „selected“ gesetzt wird | |
| <textarea> | Editierbarer Text (editable text) | Damit verbundenes <label>-Element oder 'title'-Attribut | Text innerhalb des <textarea>-Elements |
Benutzeragenten stellen Mechanismen zur Verfügung, um zu Links zu navigieren und sie auszuwählen. In jedem der folgenden Beispiele ist die Rolle „link“ aus dem <a href>. Beachten Sie, dass <a name> nicht die Rolle von „link“ bereitstellt. Der Wert ist der URI im 'href'-Attribut.
In Beispiel 1a ist der Name der Text innerhalb des Links, in diesem Fall „Example Site“.
Code-Beispiel:
<a href="www.example.com">Example Site</a>
In Beispiel 1b von einem Bild innerhalb eines Links stellt das 'alt'-Attribut für das Bild den Namen zur Verfügung. Einige Werkzeuge zum Ansehen der APIs, wie beispielsweise Microsoft Inspect Objects, bringen dies nicht zum Vorschein, aber assistierende Techniken tun dies.
Code-Beispiel:
<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
In Beispiel 1c wird der Name aus den verschiedenen Elementen innerhalb des Links verkettet, so dass es heißt „Example Text“
Code-Beispiel:
<a href="www.example.com"><img src="example_logo.gif" alt="Example">Text</a>Es gibt verschiedene Arten, um eine Schaltfläche in HTML zu erstellen und sie werden alle der „push button“-Rolle zugeordnet.
In Beispiel 2a ist der Text im button-Element enthalten, in diesem Fall „save“, genau wie der Name. Es gibt keinen Wert.
Code-Beispiel:
<button>Save</button>
Beispiel 2b benutzt das 'value'-Attribut, in diesem Fall „Save“, „Submit“ oder „Reset“ als Name.
Code-Beispiel:
<input type="button" value="Save" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
Beispiel 2c benutzt das 'alt'-Attribut, in diesem Fall „save“, als Name.
Code-Beispiel:
<input type="image" src="save.gif" alt="save" />
In Beispiel 2d gibt es kein 'alt'-Attribut, so dass das 'title'-Attribut, in diesem Fall „save“, als Name benutzt wird.
Code-Beispiel:
<input type="image" src="save.gif" title="save" />
Beispiel 2e verdeutlicht, wie der Benutzeragent den Namen bestimmt, wenn der Autor sowohl das 'alt'- als auch das 'title'-Attribute des input-Elements festlegt. In diesem Fall benutzt der Benutzeragent das 'alt'-Attribut („Save“) und ignoriert das 'title'-Attribut.
Code-Beispiel:
<input type="image" src="save.gif" alt="save" title="save the file" />In Beispiel 3a hat das Eingabefeld die Rolle „editable text“ (editierbarer Text). Das label-Element ist mit dem input-Element über das 'for'-Attribut verbunden, welches das 'id'-Attribut des input-Elements referenziert. Der Name kommt vom label-Element, in diesem Fall „Type of fruit“. Sein Wert kommt von seinem value-Attribut, in diesem Fall „bananas“.
Code-Beispiel:
<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">In Beispiel 3b hat das Eingabefeld die gleiche Rolle und den gleichen Wert wie Beispiel 3a, aber es erhält seinen Namen vom 'title'-Attribut.
Code-Beispiel:
<input id="text_1" type="text" value="bananas" title="Type of fruit">Beispiel 4 hat die Rolle „checkbox“ aus dem 'type'-Attribut des input-Elements. Das label-Element ist mit dem input-Element über das 'for'-Attribut verbunden, welches sich auf das 'id'-Attribut des input-Elements bezieht. Der Name kommt vom label-Element, in diesem Fall „cheese“. Sein Zustand kann „checked“ (angehakt) oder „unchecked“ (nicht angehakt) sein und kommt vom 'checked'-Attribut. Der Zustand kann durch die Interaktion des Benutzers mit dem Steuerelement geändert werden.
Code-Beispiel:
<label for="cb_1">Cheese</label>
<input id="cb_1" type="checkbox" checked="checked">
Beispiel 5 hat die Rolle "radio button" aus dem 'type'-Attribut auf dem input-Element. Sein Name kommt vom label-Element. Der Zustand kann „checked“ (angehakt) oder „unchecked“ (nicht angehakt) sein und kommt vom 'checked'-Attribut. Der Zustand kann vom Benutzer geändert werden.
Code-Beispiel:
<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
Beispiel 6a hat die Rolle „Combobox“ vom select-Element. Sein Name lautet „Numbers“ vom label-Element. Es ist ein verbreiteter Fehler zu vergessen, dem select einen Namen zu geben. Der Wert ist das option-Element, dessen 'selected'-Attribut auf "selected" (ausgewählt) gesetzt wird. In diesem Fall ist der Standardwert „Two“ (zwei).
Code-Beispiel:
<label for="s1">Numbers</label>
<select id="s1" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
Beispiel 6b hat den gleichen Namen, die gleiche Rolle und den gleichen Wert wie oben, setzt aber den Namen mit dem 'title'-Attribut auf dem select-Element. Diese Technik kann benutzt werden, wenn eine sichtbare Beschriftung nicht erwünscht ist.
Code-Beispiel:
<select id="s1" title="Numbers" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
Beispiel 7a hat die Rolle „editable text“ aus dem textarea-Element. Der Name lautet „Type your speech here“ aus dem label-Element. Der Wert ist der Inhalt innerhalb des textarea-Elements, in diesem Fall „Four score and seven years ago“.
Code-Beispiel:
<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea>
Beispiel 7b hat die gleiche Rolle, den gleichen Namen und den gleichen Wert, setzt aber den Namen durch Benutzung des 'title'-Attributs.
Code-Beispiel:
<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
Das Radio-Fieldset in Beispiel 8 hat die Rolle „grouping“. Der Name kommt vom legend-Element.
Code-Beispiel:
<fieldset>
<legend>Choose a Color:</legend>
<input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br />
<input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br />
<input id="green" type="radio" name="color" value="green" /><label for="green">Green</label>
</fieldset>
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie den HTML-Quellcode.
Prüfen Sie für jede Instanz von Links und Formularelementen, ob der Name, Wert und Zustand wie in der Tabelle oben angegeben festgelegt wurden.
Test #2 ist 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.
Alle Techniken, die Farbe und Text unterstützen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Farbe und Text oder Zeichen-Hinweise zu verbinden, um Informationen zu vermitteln. Die meisten Benutzer können den Inhalt schnell überfliegen, um Informationen, die durch die Benutzung von Farbunterschieden vermittelt werden, aufzufinden. Benutzer, die Farben nicht sehen können, können nach Hinweisen in Textform sehen oder hören; Menschen die eine Braille-Zeile oder andere taktile Benutzerschnittstellen benutzen, können Hinweise in Textform durch Tasten entdecken.
Die Anweisungen für ein Online-Formular lauten: „Pflichtfelder werden in rot angezeigt und sind mit (Pflichtfeld) markiert.“ Der Hinweise „(Pflichtfeld)“ ist innerhalb des label-Elementes eingefügt.
Code-Beispiel:
<label for="lastname" class="required">Last name (required): </label>
<input id="lastname" type="text" size="25" value=""/>
<style type="text/css">
.required {
color=red;
}
</style>Es gibt für diese Technik keine Ressourcen.
Für alle Inhalte, bei denen Farbunterschiede benutzt werden, um Informationen zu vermitteln:
Prüfen Sie, ob die gleichen Informationen durch Hinweise in Textform oder Zeichen-Hinweise zur Verfügung stehen.
Test #1 ist 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.
id-Attribute auf einer Webseite einmalig sindAlle HTML-Seiten
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist die Vermeidung zentraler Fehler, die dafür bekannt sind, Probleme bei assistierenden Techniken zu verursachen, wenn diese versuchen, Inhalte zu analysieren, die das gleiche id-Attribut auf verschiedenen Elementen haben. Diese Fehler können verhindert werden, indem man sicherstellt, dass Webseiten keine doppelten id-Werte haben. Dies kann manuell gemacht werden oder indem man den Mechanismus von HTML benutzt, um die Technik und die Version der Technik zu spezifizieren und dann das Dokument für diese Bedingung validiert. Es gibt verschiedene Validatoren, die der Entwickler benutzen kann; Validierungsberichte erwähnen normalerweise diese Art an Fehlern. Die Document Type Declaration ist für diese Art an Evaluation nicht strengstens notwendig, aber die Angabe der Document Type Declaration macht es leichter, einen Validator zu benutzen.
HTML-Seiten enthalten eine Document Type Declaration (manchmal !DOCTYPE-Statement genannt). Der Entwickler kann Offline- oder Online-Validatoren benutzen (siehe Ressourcen unten) um zu prüfen, ob alle id-Attribut-Werte nur einmal auf einer Seite benutzt werden. Der W3C-Validator zum Beispiel meldet, ID „X already defined“ („X bereits definiert“), wenn er auf die zweite Nutzung eines id-Wertes trifft.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für andere Ressourcen siehe G134: Validierung von Webseiten.
Prüfen Sie, ob alle ID-Attribut-Werte auf der Webseite einmalig sind.
Test #1 ist 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.
Alle HTML-Seiten
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist die Vermeidung zentraler Fehler, die dafür bekannt sind, Probleme bei assistierenden Techniken zu verursachen, wenn diese versuchen, Inhalte zu analysieren, die doppelte Attribute auf dem gleichen Elementen haben. Dies kann manuell geprüft werden oder indem man den Mechanismus von HTML benutzt, um die Technik und die Version der Technik zu spezifizieren und dann das Dokument für diese Bedingung validiert. Es gibt verschiedene Validatoren, die der Entwickler benutzen kann; Validierungsberichte erwähnen normalerweise diese Art an Fehlern. Die Document Type Declaration ist für diese Art an Evaluation nicht strengstens notwendig, aber die Angabe der Document Type Declaration macht es leichter, einen Validator zu benutzen.
HTML-Seiten enthalten eine Document Type Declaration (manchmal !DOCTYPE-Statement genannt). Der Entwickler kann Offline- oder Online-Validatoren benutzen (siehe Ressourcen unten) um zu prüfen, ob Attribute nur einmal auf einem Element benutzt werden. Der W3C-Validator zum Beispiel meldet „duplicate specification of attribute X“ („doppelte Spezifizierung von Attribut X“), wenn er auf die zweite Definition des gleichen Attributes auf einem Element trifft.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für andere Ressourcen siehe G134: Validierung von Webseiten.
Prüfen Sie, ob kein Attribut mehr als einmal auf jeglichem Element auftritt
Test #1 ist 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.