Auf dieser Webseite werden Verbreitete Fehler 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.
Alle Techniken, die CSS unterstützen.
Dieser Fehler bezieht sich auf:
Dies beschreibt die Fehlersituation, die sich ergibt, wenn CSS statt strukturellem Markup benutzt wird, um das visuelle Layout des Inhalts zu verändern und wenn das veränderte Layout die Bedeutung des Inhalts verändert. Durch die Benutzung der Positionierungs-Eigenschaften von CSS2 können Inhalte an jeder Position im Ansichtsfenster des Benutzers angezeigt werden. Die Reihenfolge, in der Elemente auf dem Bildschirm erscheinen, kann anders sein als die Reihenfolge, in der man sie im Quelldokument findet. Assistierende Techniken verlassen sich auf den Quellcode oder eine andere durch Software bestimmte Reihenfolge, um den Inhalt in der korrekten Abfolge zu rendern. Daher ist es wichtig, dass man sich nicht auf CSS verlässt, um Inhalte visuell in einer bestimmten Reihenfolge zu positionieren, wenn diese Reihenfolge in einer Bedeutung resultiert, die sich von der durch Software bestimmten Lesereihenfolge unterscheidet.
Das folgende Beispiel zeigt, wie CSS unsachgemäß benutzt wurde, um eine Reihe von Spalten zu erstellen. Darüber hinaus erscheint der Text im Browser visuell in einer anderen Reihenfolge als im Markup.
In diesem Beispiel wurde eine Klasse für jedes Objekt, das positioniert wird, definiert. Wenn Stylesheets angewendet werden, erscheint der Text in zwei Spalten. Elemente der Klasse „menu1“ (Products) und „menu2“ (Locations) erscheinen als Spaltenüberschriften. „Telephones“, „Computers“ und „Portable MP3 Players“ werden unter 'Products' und „Idaho“ und „Wisconsin“ werden unter 'Locations' aufgelistet (beachten Sie die unterschiedliche Reihenfolge von Idaho und Wisconsin in der Reihenfolge im Quellcode).
Da keine passenden strukturellen Elemente benutzt wurden erscheint der gesamte Text, wenn Stylesheets nicht angewendet werden, in einer Zeile in der Quellreihenfolge, „Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho.“
Hier ist der HTML-Inhalt:
Code-Beispiel:
<div class="box">
<span class="menu1">Products</span>
<span class="menu2">Locations</span>
<span class="item1">Telephones</span>
<span class="item2">Computers</span>
<span class="item3">Portable MP3 Players</span>
<span class="item5">Wisconsin</span>
<span class="item4">Idaho</span>
</div>Hier sind ein paar Styles für den oben genannten Inhalt:
Code-Beispiel:
.menu1 {
position: absolute;
top: 3em;
left: 0em;
margin: 0px;
font-family: sans-serif;
font-size: 120%;
color: red;
background-color: white
}
.menu2 {
position: absolute;
top: 3em;
left: 10em;
margin: 0px;
font-family: sans-serif;
font-size: 120%;
color: red;
background-color: white
}
.item1 {
position: absolute;
top: 7em;
left: 0em;
margin: 0px
}
.item2 {
position: absolute;
top: 8em;
left: 0em;
margin: 0px
}
.item3 {
position: absolute;
top: 9em;
left: 0em;
margin: 0px
}
.item4 {
position: absolute;
top: 7em;
left: 14em;
margin: 0px
}
.item5 {
position: absolute;
top: 8em; left: 14em;
margin: 0px
}
#box {
position: absolute;
top: 5em;
left: 5em
} Eine bessere Lösung für diesen Inhalt wäre es, bedeutungsvollere Elemente zu benutzen, wie zum Beispiel eine Tabelle oder eine Definitionsliste.
Es gibt für diese Technik keine Ressourcen.
Für Inhalt, der CSS zur Positionierung benutzt
Entfernen Sie die Formatierungs-Informationen aus dem Dokument oder schalten Sie im Benutzeragenten die Benutzung von Stylesheets aus.
Prüfen Sie, ob die Lesereihenfolge des Inhalts korrekt ist und ob die Bedeutung des Inhalts beibehalten wird.
Wenn Schritt #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Alle Techniken, die Bilder oder Darstellungsmarkup unterstützen.
Dieser Fehler bezieht sich auf:
Dieses Dokument beschreibt einen Fehler der auftritt, wenn eine Änderung in der Erscheinung des Textes eine Bedeutung vermittelt, ohne dass das entsprechende semantische Markup benutzt wird. Dieser Fehler gilt auch für Bilder eines Textes, die nicht in dem entsprechenden semantischen Markup eingeschlossen sind.
Der Autor beabsichtigte, eine Überschrift zu machen, wollte aber nicht das Aussehen der Standard-HTML-Überschrift. Also hat er CSS benutzt, um das p-Element so zu formatieren, dass es wie eine Überschrift aussieht und hat es Überschrift genannt. Aber er hat es versäumt, das richtige HTML-Heading-Element zu benutzen. Daher konnte die assistierende Technik es nicht als Überschrift erkennen.
Code-Beispiel:
<style type="text/css">
.heading1{
font-family: Times, serif;
font-size:200%;
font-weight:bold;
}
</style>
<p class="heading1">Introduction</p>
<p>This introduction provides detailed information about how to use this
........
</p>Anmerkung: In diesem Fall wäre es die korrekte Vorgehensweise, CSS zu benutzen, um das H1-Element in HTML zu formatieren.
Chapter1.gif ist ein Bild der Worte „Chapter One“ in Zeichensatz Garamond der Größe 20 Pixel. Dies ist ein Fehler, da das img-Element mindestens innerhalb eines header-Elements eingeschlossen sein sollte. Es wäre eine bessere Lösung, das Bild zu eliminieren und den Text innerhalb eines header-Elements einzuschließen, das mit CSS formatiert wird.
Code-Beispiel:
<img src="Chapter1.gif" alt="Chapter One">
<p>Once upon a time in the land of the Web.....
</p>Das folgende Beispiel fällt durch, da die Informationen, die durch die Benutzung des CSS font-weight-Property zur Änderung in eine Fettschrift vermittelt werden, nicht durch semantisches Markup vermittelt werden oder explizit im Text dargelegt werden.
Hier ist eine CSS-Klasse, um fett festzulegen:
Code-Beispiel:
.yell {
font-weight:bold;
text-transform: uppercase;
}Und hier ist das entsprechende HTML:
Code-Beispiel:
<p>
"I said, <span class="yell">no</span>, not before dinner!",
was the exasperated response when Timmy asked his mother for the
fourth time for an ice cream cone.
</p>Es gibt für diese Technik keine Ressourcen.
Für Bilder eines Textes:
Prüfen Sie, ob irgendwelche Bilder eines Textes benutzt werden, um strukturelle Informationen des Dokumentes zu vermitteln.
Prüfen Sie, ob die richtige semantische Struktur (z.B. HTML-Überschriften) mit dem Text benutzt wird, um die Information zu vermitteln.
Für formatierten Text, der Informationen vermittelt:
Prüfen sie, ob es irgendwelchen formatierten Text gibt, der strukturelle Informationen vermittelt.
Prüfen Sie, ob, zusätzlich zur Formatierung, die richtige semantische Struktur mit dem Text benutzt wird, um die Information zu vermitteln.
Wenn Test #1.1 wahr ist, dann ist #1.2 wahr.
Wenn Test #2.1 wahr ist, dann ist #2.2 wahr.
Alle Techniken, die CSS unterstützen.
Dieser Fehler bezieht sich auf:
Das CSS background-image-Property stellt eine Möglichkeit zur Verfügung, um Bilder mit CSS in das Dokument aufzunehmen ohne irgendeine Referenz im HTML-Code. Das CSS background-image-Property wurde für dekorative Zwecke entworfen und es ist nicht möglich, Textalternativen mit Bildern zu verknüpfen, die per CSS eingebunden wurden. Textalternativen sind für Menschen, die keine Bilder sehen können, die wichtige Informationen vermitteln, notwendig. Daher ist es ein Fehler, dieses Property zu benutzen, um Bilder hinzuzufügen, damit diese wichtige Informationen vermitteln.
Anmerkung: Das Einbetten von Informationen in ein Hintergrundbild kann auch bei Menschen, die alternative Hintergründe benutzen, um die Lesbarkeit zu erhöhen und bei Benutzern des Modus 'hoher Kontrast' in manchen Betriebssystemen zu Problemen führen. Diese Benutzer würden die Informationen im Hintergrundbild verlieren, aufgrund des Fehlens irgendeines alternativen Textes.
Im folgenden Beispiel ist ein Teil des Inhalts in einem Bild enthalten, das durch CSS alleine präsentiert wird. In diesem Beispiel ist das Bild TopRate.png ein 180 x 200 Pixel großes Bild, das den Text „19.3% APR Typical Variable“ enthält.
Code-Beispiel:
Das CSS enthält:
p#bestinterest {
padding-left: 200px;
background: transparent url(/images/TopRate.png) no-repeat top left;
}Es wird in diesem Auszug benutzt:
Code-Beispiel:
<p id="bestinterest">
Where else would you find a better interest rate?
</p>Ein Buch-Lieferant benutzt Hintergrundbilder, um Symbole einer Liste mit Buchtiteln gegenüber zu stellen um damit zu kennzeichnen, ob sie neu, limitiert, auf Lager oder vergriffen sind.
Das CSS enthält:
Code-Beispiel:
ul#booklist li {
padding-left: 20px;
}
ul#booklist li.new {
background: transparent url(new.png) no-repeat top left;
}
ul#booklist li.limited {
background: transparent url(limited.png) no-repeat top left;
}
ul#booklist li.instock {
background: transparent url(instock.png) no-repeat top left;
}
ul#booklist li.outstock {
background: transparent url(outstock.png) no-repeat top left;
}Es wird in diesem Auszug benutzt:
Code-Beispiel:
<ul id="booklist">
<li class="new">Some book</li>
<li class="instock">Some other book</li>
<li class="limited">A book we desperately want to get rid of</li>
...
<li class="outstock">A book you actually want </li>
</ul>Es gibt für diese Technik keine Ressourcen.
Untersuchen Sie alle Bilder, die per CSS dem Inhalt hinzugefügt werden.
Prüfen sie, ob die Bilder keine wichtigen Informationen vermitteln.
Wenn ein Bild wichtige Informationen vermittelt, dann werden die Informationen assistierenden Techniken zur Verfügung gestellt sie sind auch verfügbar, wenn wenn das CSS-Bild nicht angezeigt wird.
Wenn Schritt #2 und Schritt #3 beide falsch sind, dann findet diese Fehler-Situation Anwendung und der Inhalt scheitert an diesem Erfolgskriterium.
Cascading Style Sheets.
Dieser Fehler bezieht sich auf:
Der blink-Wert des text-decoration-Property wird nicht von Internet Explorer unterstützt. Er wird Browsern der Netscape/Mozilla-Familie unterstützt. Nicht in anderen (z.B. Safari, Opera) getestet.
CSS definiert den blink-Wert für das text-decorationProperty. Wenn dies benutzt wird, dann führt das dazu, dass jeglicher Text in Elementen mit diesem Property in einer vorher bestimmten Frequenz blinken. Dies kann weder vom Benutzer unterbrochen werden, noch kann es über eine Einstellung im Benutzeragenten deaktiviert werden. Das Blinken dauert so lange, wie die Seite angezeigt wird. Daher scheitert Inhalt, der text-decoration:blink benutzt, am Erfolgskriterium, da das Blinken für mehr als 3 Sekunden andauern kann.
Eine Seite mit einer Liste an Produkten benutzt den text-decoration:blink-Stil bei Elementen, um die Aufmerksamkeit auf die reduzierten Preise zu ziehen. Damit wird das Erfolgskriterium nicht erfüllt, da Benutzer das Blinken nicht steuern können.
Code-Beispiel:
<p>My Great Product <span style="text-decoration:blink">Sale! $44,995!</span></p>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie Inline-Styles, interne und externe Stylesheets auf das text-decoration-Property mit dem Wert „blink“.
Wenn das Property benutzt wird, bestimmen Sie, ob ID, Klasse oder Element, die durch Selektoren, auf denen dieses Property definiert ist, identifiziert werden, in dem Dokument benutzt werden.
Wenn Schritt #1 und Schritt #2 wahr sind, dann scheitert der Inhalt an dem Erfolgskriterium.
Techniken, die blinkende Inhalte innerhalb eines Objektes, Applet oder Plug-Ins unterstützen.
Dieser Fehler bezieht sich auf:
Wenn Inhalt, der von einem Plug-In gerendert wird oder in einem Applet enthalten ist, blinkt, kann es sein, dass es für den Benutzer keine Möglichkeit gibt, das Blinken anzuhalten. Wenn weder das Plug-In, das Applet noch der Inhalt selber einen Mechanismus bereitstellen, um den Inhalt anzuhalten, kann es sein, dass der Benutzer nicht ausreichend Zeit hat, um den Inhalt zwischen dem Blinken zu lesen oder es kann so ablenkend sein, dass der Benutzer nicht in der Lage ist, andere Inhalte auf der Seite zu lesen.
Ein Applet blendet eine Anzeige auf einer Nachrichtenseite ein. Das Applet lässt Schlüsselworte in der Anzeige blinken, um die Aufmerksamkeit des Benutzers darauf zu ziehen. Das Blinken kann nicht durch irgendwelche Einstellungen im Benutzeragenten angehalten werden und das Applet stellt keinen Mechanismus bereit, um es zu beenden.
Für jede Seite, die blinkenden Inhalt in einem Plug-In oder Applet hat:
Bestimmen Sie, ob der Inhalt für mehr als 5 Sekunden blinkt.
Bestimmen Sie, ob es ein Mittel gibt, um den blinkenden Inhalt anzuhalten.
Wenn Schritt #1 wahr und Schritt #2 falsch ist, dann scheitert der Inhalt an dem Erfolgskriterium.
Gilt für alle Techniken.
Dieser Fehler bezieht sich auf:
Dies beschriebt eine Fehlersituation für alle Techniken, die Untertitel beinhalten. Wenn der „Untertitel (caption)“ nicht sowohl den gesamten Dialog enthält (entweder wortgetreu oder im Wesentlichen) als auch alle wichtigen Geräusche, dann sind die 'Untertitel' nicht wirkliche Untertitel.
ANMERKUNG: Untertitel vereinfachen manchmal den gesprochenen Text, um ihn sowohl einfacher lesbar zu machen als auch zu vermeiden, den Leser dazu zu zwingen, in sehr hohem Tempo zu lesen. Dies ist eine standardmäßige Vorgehensweise und macht Untertitel nicht unwirksam.
Beispiele mit Textstreams, bei denen es sich nicht um Untertitel handelt, beinhalten:
Text, der den Dialog enthält (möglicherweise vereinfachten Dialog), aber keine wichtigen Geräusche beschreibt
Text, der Dialog während Teilen des Materials weglässt
Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Sehen Sie sich das Material mit angeschalteten Untertiteln an.
Prüfen Sie, ob der gesamte Dialog von Untertiteln begleitet wird.
Prüfen Sie, ob alle wichtigen Geräusche untertitelt sind.
Wenn Test #2 und Test #3 falsch sind, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Allgemein
Dieser Fehler bezieht sich auf:
Dieses Dokument beschreibt einen Fehler, der auftritt, wenn das Entfernen des Fokus von einem Formularelement, wie beispielsweise wenn man sich zum nächsten Element bewegt, zu einer Änderung des Kontextes führt.
Der Benutzer geht durch das Formular und füllt dabei die Felder in der Reihenfolge aus. Wenn er sich vom dritten zum vierten Feld bewegt, wird das Formular abgesendet.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Finden sie alle Formularelemente.
Gehen Sie der Reihenfolge nach durch sie hindurch.
Prüfen Sie, ob das Formular abgesendet wird, wenn Sie sich von einem Feld zum nächsten bewegen.
Prüfen Sie, ob das Bewegen von einem Feld zum nächsten dazu führt, dass irgendwelche neuen Fenster aufgehen.
Prüfen Sie, ob das Bewegen von einem Feld zum nächsten zu einem anderen Bildschirm navigiert.
Wenn Schritt #3, Schritt #4 oder Schritt #5 wahr ist, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium.
Gilt, wenn Inhalt eine Situation schafft, in der der Benutzer Inhalt per Tastatur eingeben kann, den Inhalt aber nicht per Tastatur verlassen kann.
Dieser Fehler bezieht sich auf:
Wenn Inhalt verschiedene Formate beinhaltet, dann werden oft einer oder mehrere Benutzeragenten oder Plug-Ins benötigt, um dem Benutzer den Inhalt erfolgreich zu präsentieren. Zum Beispiel kann eine Seite, die XHTML, SVG, SMIL und XForms enthält, es erforderlich machen, dass ein Browser nicht weniger als drei unterschiedliche Plug-Ins laden muss, damit ein Benutzer erfolgreich mit dem Inhalt interagieren kann. Eine Plug-Ins führen zu einer gängigen Situation, in der der Tastaturfokus in einem Plug-In „steckenbleiben“ kann, womit einem reinen Tastaturbenutzer dann keine Möglichkeit mehr bleibt, zu anderen Inhalten zurückzukehren.
Ein Plug-In hält den Benutzer gefangen Ein Benutzer geht per Tabulator in ein Plug-In und ist nicht in der Lage per Tastatur zu Inhalt, der außerhalb des Plug-Ins liegt, zurückzukehren. Der Benutzer muss seinen Browser neu starten, um die Kontrolle zurückzugewinnen und zu einer neuen Seite zu navigieren, und er ist nicht in der Lage, zu irgendwelchen Inhalten, die jenseits des Plug-In-Inhalts erscheinen, zuzugreifen.
Es gibt für diese Technik keine Ressourcen.
Navigieren Sie durch den Inhalt, indem Sie eine Tastatur benutzen.
Prüfen Sie, ob der Tastaturfokus nicht „gefangen genommen“ wird und ob es möglich ist, den Tastaturfokus aus dem Plug-In-Inhalt heraus zu bewegen, ohne den Benutzeragenten zu schließen oder das System neu zu starten.
Wenn der Tastaturfokus „gefangen genommen“ wird, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium und an Konformitätsbedingung 5.
Sites, die das Einloggen des Benutzers erfordern, um Eingaben abzusenden und die Sitzung nach einer Zeitraum der Inaktivität beenden.
Dieser Fehler bezieht sich auf:
Webserver, die eine Benutzer-Authentifizierung erfordern, haben normalerweise einen Sitzungs-Mechanismus, in dem eine Sitzung nach einer gewissen Zeit der Inaktivität seitens des Benutzers abläuft. Dies wird manchmal aus Sicherheitsgründen gemacht, um Benutzer zu schützen, bei denen man annimmt, dass sie ihren Computer ungeschützt in einem Zustand zurückgelassen haben, in dem jemand anderes etwas für sie schädliches tun könnte, wie beispielsweise Gelder zu transferieren oder nicht autorisierte Einkäufe zu tätigen. Ein Benutzer mit einer Behinderung kann aber nach wie vor daran arbeiten, ein Formular auszufüllen, da er sie oder sie länger brauchen könnte, als man normalerweise erwarten würde, um das Formular auszufüllen. Nach der erneuten Authentifizierung muss er oder sie ganz von vorne beginnen, wenn der Status der Sitzung des Benutzers einschließlich aller vorher in das Formular eingegebener Daten nicht wiederhergestellt wird. Und bei diesen Benutzers ist es wahrscheinlich, dass die Sitzung wieder abläuft, bevor sie das Formular fertiggestellt haben. Dies führt zu einer Situation, in der ein Benutzer, der mehr Zeit benötigt, um das Formular auszufüllen, niemals damit fertig werden kann.
Ein Benutzer sendet ein Formular auf einer authentifizierten Seite ab, nachdem der Login abgelaufen ist. Beim Absenden wird er dazu aufgefordert, sich erneut einzuloggen und gelangt dann zu einer allgemeinen Begrüßungsseite. Die Daten werden nicht verarbeitet und der Benutzer muss es erneut versuchen.
Ein Benutzer sendet ein Formular auf einer authentifizierten Seite ab, nachdem der Login abgelaufen ist. Beim Absenden des Formulars wird er dazu aufgefordert, sich erneut einzuloggen und gelangt wieder zu der Seite, auf der er direkt vor dem Login war und die in diesem Fall das Formular enthält, das er versucht hatte abzusenden. Allerdings enthält das Formular nicht die gerade eingegebenen Daten und er muss sie erneut eingeben.
Auf einer Seite, auf der eine Authentifizierung erforderlich ist, auf der Eingaben des Benutzers gesammelt werden und auf der die Sitzung des Benutzers nach einem bekannten Zeitraum der Inaktivität abläuft:
Machen Sie die erforderlichen Benutzereingaben aber lassen Sie die Sitzung ablaufen und senden Sie das Formular erst danach ab.
Authentifizieren Sie sich erneut mit dem Server, wenn Sie dazu aufgefordert werden.
Stellen Sie fest, ob die Funktion ausgeführt wird, indem die vorher abgesendeten Daten benutzt werden.
Wenn Schritt #3 falsch ist, scheitert die Site an dem Erfolgskriterium.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es den Fehler zu beschreiben der auftritt, wenn ein Bild Farbunterschiede benutzt, um Informationen zu vermitteln, die Textalternative für das Bild allerdings nicht diese Informationen vermittelt. Dies kann für Menschen, die blind oder farbenblind sind, zu Problemen führen, da sie nicht in der Lage sind, die durch die Farbunterschiede vermittelten Informationen wahrzunehmen.
Ein Balkendiagramm mit Verkaufsdaten wird als Bild zur Verfügung gestellt. Das Diagramm enthält die jährlichen Verkaufszahlen von vier Mitarbeitern der Vertriebsabteilung. Die Textalternative für das Bild lautet: „Das folgende Balkendiagramm zeigt die jährlichen Verkaufszahlen der Vertriebsabteilung. Mary verkaufte 3,1 Millionen, Fred 2,6 Millionen, Bob 2,2 Millionen und Andrew 3,4 Millionen. Der rote Balken kennzeichnet Verkäufe, die unterhalb der jährlichen Quote lagen.“ Der Textalternative gelingt es nicht, die Informationen, die durch die Farbe rot in dem Bild vermittelt werden, bereitzustellen. Die Alternative sollte darauf hinweisen, welche Personen die Verkaufsquote nicht erreicht haben, statt sich auf die Farbe zu verlassen.
Es gibt für diese Technik keine Ressourcen.
Für alle Bilder im Inhalt, die Informationen über Farbunterschiede vermitteln:
Prüfen Sie, ob die durch die Farbunterschiede vermittelten Informationen nicht in der Textalternative für das Bild enthalten sind.
Wenn Schritt #1 wahr ist, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es zu zeigen, wie die Identifikation des Inhalts nur durch seine visuelle Form oder seine Position es erschweren kann, Inhalt zu verstehen und zu bedienen. Wenn nur visuelle Identifizierung oder Positionierung benutzt wird, könnten Benutzer mit visuellen Behinderungen es schwierig finden, Inhalt zu finden, da sie den Bildschirm nicht sehen können oder nur einen kleinen Teil des Bildschirms zur gleichen Zeit wahrnehmen können. Außerdem kann die Position des Inhalts variieren, wenn das Layout der Seite aufgrund von Abweichungen bei Schriftart, Fenster- oder Bildschirmgröße variiert.
Die Navigationsanweisungen einer Site besagen: „Um zur nächsten Seite zu gehen, drücken Sie die Schaltfläche rechts. Um zur vorhergehenden Seite zurückzugehen, drücken Sie die Schaltfläche links.“
Ein Benutzer liest einen Nachrichtenartikel in einer Online-Zeitung. Der Artikel enthält eine Illustration und zusätzliche Links für weitere Informationen. Innerhalb des Textes des Artikels ist eine Aussage: „Bitte beachten Sie die Seitenleiste links von der Illustration für Links zu weiteren Informationen.“ Ein Benutzer assistierender Technik würde Schwierigkeiten damit haben, die Illustration und die Seitenleiste zu finden. Einige Alternativen wären es, die Liste mit Links innerhalb des Textes einzufügen; einen In-Page-Link innerhalb des Textes bereitzustellen, der zur Seitenleiste verlinkt; eine Überschrift für die Seitenleiste bereitzustellen, die zur Navigation benutzt werden kann uns sich in den Anweisungen auf die Überschrift zu verweisen.
Ein Benutzer füllt eine Online-Umfrage aus. Es gibt unten auf dem Umfrageformular drei Schaltflächen. Die Anweisungen besagen: „Drücken Sie die viereckige Schaltfläche, um die Umfrage ohne speichern zu verlassen, drücken Sie die dreieckige Schaltfläche, um die laufenden Umfrageergebnisse zu speichern. Sie können später zurückkehren, um die Umfrage fertigzustellen. Drücken Sie die runde Schaltfläche, um die Umfrageergebnisse abzusenden.“ Ein Screenreader-Benutzer oder ein Benutzer, der nicht dazu in der Lage ist, Formen zu unterscheiden, kann nicht feststellen, welche Schaltfläche viereckig, dreieckig oder rund ist. TDie Schaltflächen müssen zusätzliche Informationen haben, um auf ihre Funktionen oder ihre Formhinzuweisen.
Es gibt für diese Technik keine Ressourcen.
Untersuchen Sie die Webseite nach Verweisen in Textform zu Inhalt innerhalb der Webseite.
Prüfen Sie, ob sich die Verweise nicht nur auf die visuelle Form oder Position des Inhalts stützen.
Wenn Schritt #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Gilt für alle Techniken, die ein Barrierefreiheits-API unterstützen.
Dieser Fehler bezieht sich auf:
Wenn Standard-Steuerelemente aus barrierefreien Techniken benutzt werden, dann sind sie normalerweise auf eine Art programmiert, welche die Barrierefreiheits-APIs benutzt und unterstützt. Wenn allerdings individuell gefertigte Steuerelemente erstellt werden, dann obliegt es dem Programmierer sicherzustellen, dass das neu erstellte Steuerelement das Barrierefreiheits-API unterstützt. Wenn dies nicht gemacht wird, dann werden assistierende Techniken nicht dazu in der Lage sein zu verstehen, was das Steuerelement ist und wie es bedient wird oder sie wissen gar nichts von dessen Existenz.
Ein Musik-Player wurde mit individuell gefertigten Steuerelementen entwickelt, die wie Musiknoten aussehen, die für Lautstärke, Klang usw. gedehnt werden. Der Programmierer sorgt nicht dafür, dass das neue Steuerelement das Barrierefreiheits-API unterstützt. Das hat zur Folge, dass die Steuerelemente nicht von assistierenden Techniken identifiziert oder gesteuert werden können.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
(derzeit keine aufgelistet)
Prüfen Sie die Steuerelemente, indem Sie die Barrierefreiheits-Prüfung für die Technik benutzen (oder wenn diese nicht zur Verfügung steht, kontrollieren Sie den Code oder testen Sie mit einer assistierenden Technik), um zu sehen, ob sie das Barrierefreiheits-API unterstützen.
Wenn Schritt #1 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Alle Techniken, die visuelle Bewegung oder Scrollen unterstützen.
Dieser Fehler bezieht sich auf:
Bei dieser Fehler-Technik gibt es sich bewegende oder scrollende Inhalte, die vom Benutzer nicht angehalten und erneut gestartet werden können. In diesem Fall werden einige Benutzer mit geringem Sehvermögen oder kognitiven Behinderungen nicht in der Lage sein, den Inhalt wahrzunehmen.
Eine Seite hat einen scrollenden Nachrichten-Ticker ohne Mechanismus, um diesen anzuhalten. Einige Benutzer sind nicht in der Lage, den scrollenden Inhalt zu lesen.
Auf einer Seite mit sich bewegendem oder scrollendem Inhalt:
Prüfen Sie, ob es auf der Webseite oder im Benutzeragenten einen Mechanismus gibt, um sich bewegende oder scrollende Inhalte anzuhalten.
Benutzen Sie den Pausen-Mechanismus, um den sich bewegenden oder scrollenden Inhalt anzuhalten.
Prüfen Sie, ob die Bewegung oder das Scrollen aufgehört hat und nicht von alleine wieder anfängt.
Prüfen Sie, ob auf der Webseite oder im Benutzeragenten ein Mechanismus zur Verfügung gestellt wird, um den angehaltenen Inhalt neu zu starten.
Benutzen Sie den bereitgestellten Neustart-Mechanismus, um den sich bewegenden Inhalt neu zu starten.
Prüfen Sie, ob die Bewegung oder das Scrollen an der Stelle fortgesetzt wurde, an der es angehalten wurde.
Wenn Schritt #1, Schritt #3, Schritt #4 oder Schritt #6 falsch ist, dann scheitert der Inhalt am Erfolgskriterium.
Gilt für das Document Object Model (DOM) für HTML und XHTML
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es sicherzustellen, dass Webseiten beständig von Benutzeragenten einschließlich assistierender Technik interpretiert werden können. Wenn es mehrdeutig ist, dann könnten unterschiedliche Benutzeragenten einschließlich assistierender Techniken ihren Benutzern unterschiedliche Informationen präsentieren. Es kann zum Beispiel sein, dass Benutzern von assistierenden Techniken andere Informationen präsentiert werden als Benutzern anderer etablierter Benutzeragenten. Einige Elemente und Attribute in Auszeichnungssprachen müssen einzigartige Werte haben und wenn diese Anforderung nicht eingehalten wird, kann das Ergebnis unregelmäßig oder nicht eindeutig auflösbarer Inhalt sein. Wenn beispielsweise id-Attribut-Werte nicht einmalig sind, sind sie besonders problematisch, wenn sie von Labeln und Überschriften in Datentabellen referenziert werden oder wenn sie als 'fragment identifiers' benutzt werden, da Benutzeragenten nicht genügend Informationen haben, um grundlegende Beziehungen zu bestimmen (d.h. zu bestimmen, welches Label zu welchem Element gehört).
Ein Label-Element, dessen for-Attribut-Wert ein idref ist, der auf eine nicht-existente id zeigt
Ein id-Attribut-Wert, der nicht einmalig ist.
Ein accesskey-Attribut-Wert, der nicht einmalig ist
Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Prüfen Sie auf id- und accesskey-Werte, die innerhalb des Dokumentes nicht einmalig sind.
Prüfen Sie, ob Attribut-Werte, die einen idref-Wert haben, einen dazugehörigen id-Wert haben.
Prüfen Sie bei Tabellen, die das axis-Attribut benutzen, ob alle im axis-Attribut aufgelisteten Werte einen dazugehörigen id-Wert in einer Tabellen-Überschriften-Zelle in der gleichen Tabelle haben.
Prüfen Sie bei client-seitigen Imagemaps, ob der Wert des usemap-Attributs einen dazugehörigen id-Wert hat, wenn es sich bei dem usemap-Attribut nicht um einen URI handelt.
Wenn Schritt #1, Schritt #3 oder Schritt #4 wahr ist oder Schritt #2 falsch ist, dann findet diese Fehler-Situation Anwendung und der Inhalt scheitert am Erfolgskriterium.
Sites, die alternative WCAG-konforme Versionen von nicht-konformem primärem Inhalt bereitstellen.
Dieser Fehler bezieht sich auf:
Diese Fehlertechnik beschreibt die Situation, in der eine alternative, konforme Version des Inhalts bereitgestellt wird, es aber keine direkten Weg für den Benutzer gibt zu erkennen, dass diese verfügbar ist oder wo man diese findet. Ein solcher Inhalt scheitert am, Erfolgskriterium, da der Benutzer die konforme Version nicht finden kann.
Ein Link oder eine Suche führt den Benutzer direkt zu einer der nicht-konformen Seiten auf der Website. Es gibt weder einen Hinweis darauf, dass eine alternative Seite zur Verfügung steht, noch gibt es einen Pfad zu der alternativen Seite von der nicht-konformen Seite aus.
Nicht-konforme Seiten auf der Website informieren den Benutzer darüber, dass eine konforme Version zur Verfügung steht und stellen einen Link zur Homepage bereit. Der Benutzer muss allerdings auf der Site nach der konformen Version der Seite suchen, so dass die Funktionalität nicht die Anforderungen des Erfolgskriteriums erfüllt.
Ein Benutzer ist in der Lage, die nicht-konforme Website für die meisten Seiten zu benutzen. Aber wenn der Benutzer nicht in der Lage ist, auf eine bestimmte Seite zuzugreifen, gibt es keine Möglichkeit, die konforme Version der Seite zu finden.
Identifizieren Sie eine nicht-konforme Seite, zu der es eine alternative, konforme Version gibt.
Bestimmen Sie, ob die nicht-konforme Seite einen Link zu der konformen Version bereitstellt.
Wenn Schritt #2 falsch ist, dann scheitert der Inhalt am Erfolgskriterium.
Gilt für alle Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Fehlersituation ist es, Situationen zu adressieren, in denen Nicht-Text-Inhalt aktualisiert wird, die Textalternative aber nicht gleichzeitig aktualisiert wird. Wenn der Text in der Textalternative nicht mehr anstelle des Nicht-Text-Inhalts benutzt werden kann, ohne dass Informationen oder Funktionen verloren gehen, dann scheitert dies, weil es nicht länger eine Textalternative für den Nicht-Text-Inhalt gibt.
Fehler-Beispiel 1: Ein Verkaufsdiagramm wird auf die Ergebnisse des Oktobers aktualisiert, die Textalternative beschreibt aber nach wie vor die Ergebnisse vom September.
Fehler-Beispiel 2: Die Bilder auf einer Homepage ändern sich täglich, aber die Textalternativen werden nicht gleichzeitig aktualisiert.
Fehler-Beispiel 3: Das source-Attribut von Bildern auf der Seite wird regelmäßig durch die Benutzung von Script aktualisiert, aber die Textalternativen werden nicht zur gleichen Zeit aktualisiert.
Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Prüfen Sie jede Textalternative um zu sehen, ob diese Inhalt beschreibt, der sich von dem aktuell angezeigten Nicht-Text-Inhalt unterscheidet.
Wenn Schritt #1 wahr ist, dann ist die Textalternative nicht auf dem neuesten Stand mit dem aktuellen Element, die Fehler-Situation findet Anwendung und der Inhalt scheitert an diesen Erfolgskriterien.
Allgemein
Dieser Fehler bezieht sich auf:
Fehler, weil neue Fenster geöffnet werden, wenn der Benutzer dies nicht erwartet. Neue Fenster nehmen den Fokus weg von dem, was der Benutzer liest oder macht. Dies ist in Ordnung, wenn der Benutzer mit einem Teil der Benutzerschnittstelle interagiert hat und es erwartet, ein neues Fenster, wie beispielsweise einen Options-Dialog, zu bekommen. Der Fehler tritt dann auf, wenn Pop-Ups unerwartet auftauchen.
Wenn ein Benutzer zu einer Seite navigiert, erscheint ein neues Fenster über dem bestehenden Fenster des Benutzeragenten und der Fokus wird zu dem neuen Fenster bewegt.
Ein Benutzer klickt auf einen Link und ein neues Fenster erscheint. Der ursprüngliche Link hat keinen verknüpften Text der besagt, dass ein neues Fenster geöffnet wird.
Ein Benutzer klickt auf den Body einer Seite und es erscheint ein neues Fenster. Es gibt keinen Hinweis darauf, dass der Bereich, auf den geklickt wurde, eine Funktion hat.
Ein Benutzer klickt auf undekorierten Text innerhalb der Seite und es erscheint ein neues Fenster. Die Seite hat keinen sichtbaren Hinweis darauf, dass der Bereich funktional ist.
Es gibt für diese Technik keine Ressourcen.
Laden Sie die Webseite
Prüfen Sie, ob sich neue (zusätzliche) Fenster öffnen.
Finden Sie auf der Webseite alle ausführbaren Elemente wie Links und Schaltflächen.
Aktivieren Sie jedes Element.
Prüfen Sie, ob die Aktivierung des Elements ein neues Fenster öffnet.
Prüfen Sie, ob Elemente, die neue Fenster öffnen, einen verknüpften Text haben, der besagt, dass dies passieren wird. Der Text kann in dem Link angezeigt werden oder durch eine versteckte Assoziation wie beispielsweise ein HTML.titleAttribut zur Verfügung stehen.
Wenn Schritt #2 wahr ist, dann findet die Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium
Wenn Schritt #5 wahr und Schritt #6 falsch ist, dann findet die Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium
Gilt für alle Techniken mit Ausnahme der Techniken für Sprach-Interaktion.
Dieser Fehler bezieht sich auf:
Dies beschreibt eine Fehlersituation für Erfolgskriterien, die Ton umfassen. Wenn der Ton nicht automatisch innerhalb von 3 Sekunden abgeschaltet werden und es keine Möglichkeit gibt, den Ton abzuschalten, dann würde Erfolgskriterium 1.4.2 nicht erfüllt. Ton, der über 3 Sekunden lang abgespielt wird, wenn es im Inhalt keinen Mechanismus gibt, um den Ton abzustellen, würde innerhalb dieser Fehlersituation fallen.
Eine Site, die durchgängig Hintergrundmusik abspielt
Eine Site mit einem Erzähler, der für mehr als drei Sekunden bestehen bleibt, bevor er aufhört und es keinen Mechanismus gibt, dies zu stoppen.
Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Prüfen Sie, ob es auf der Webseite eine Möglichkeit gibt, jeglichen Ton, der automatisch für mehr als drei Sekunden abgespielt wird, abzuschalten.
Wenn Schritt #1 nicht wahr ist, dann scheitert der Inhalt am Erfolgskriterium 1.4.2
Alle Techniken, die es Benutzeragenten erlauben, Vorder- und Hintergrundfarbe durch persönliche Stylesheets oder mit anderen Mitteln zu steuern.
Dieser Fehler bezieht sich auf:
Benutzer mit Verlust des Sehvermögens oder mit kognitiven-, Sprach- und Lernbehinderungen ziehen oft bestimmte Vorder- und Hintergrundfarbkombinationen vor. In manchen Fällen finden es Individuen mit niedrigem Sehvermögen sehr viel leichter, eine Webseite zu sehen, die weißen Text auf einem schwarzen Hintergrund hat und es kann sein, dass sie ihren Benutzeragenten so eingestellt, dass dieser Kontrast gezeigt wird. Viele Benutzeragenten ermöglichen es Autoren, eine Präferenz zu der Vorder- und Hintergrundfarbe, die sie gerne sehen wollen, zu wählen, ohne alle vom Autor festgelegten Formatierungen außer Kraft zu setzen. Dies ermöglicht es Benutzern, Seiten anzusehen, auf denen Farben nicht in ihrer bevorzugten Farbkombination vom Autor festgelegt wurden.
Außer der Autor legt sowohl Vorder- als auch Hintergrundfarben fest, kann er (der Autor) nicht länger garantieren, dass der Benutzer einen Kontrast erhält, der die Kontrastanforderungen erfüllt. Wenn der Autor zum Beispiel festlegt, dass der Text grau sein sollte, dann kann dies die Einstellungen des Benutzeragenten außer Kraft setzen und eine Seite rendern, die einen grauen Text (vom Autor festgelegt) auf einem hellgrauen Hintergrund hat (der vom Benutzer in seinem Benutzeragenten festgelegt wurde). Dieses Prinzip funktioniert auch umgekehrt. Wenn der Autor es erzwingt, dass der Hintergrund weiß ist, dann könnte der vom Autor festgelegte weiße Hintergrund eine ähnliche Farbe haben, wie die vom Benutzer in den Einstellungen seines Benutzeragenten zum Ausdruck gebrachte Vorliebe bei der Textfarbe, so dass die Seite dann für den Benutzer unbrauchbar gerendert wird. Da ein Autor nicht vorhersagen kann, wie ein Benutzer seine Einstellungen konfiguriert haben könnte, sollte der Autor, wenn er eine Vordergrund-Textfarbe festlegt, auch eine Hintergrundfarbe festlegen, die einen ausreichenden Kontrast zum Vordergrund hat und andersum.
Es ist nicht notwendig, dass die Vorder- und Hintergrundfarben beide mit der gleichen CSS-Regel definiert werden. Da CSS-Farb-Properties von Ancestor-Elementen erben, ist es ausreichend, wenn sowohl Vorder- als auch Hintergrundfarben entweder direkt oder durch Vererbung definiert werden zu dem Zeitpunkt, zu dem die Farbe auf ein bestimmtes Element angewendet wird.
Anmerkung: Best Practice ist es, alle Zustände des Textes einzubeziehen. Zum Beispiel Text, Linktext, Text von besuchten Links, Linktext mit 'hover' und Tastaturfokus usw.
Im unten stehenden Beispiel wird die Hintergrundfarbe auf dem body-Element definiert, die Vordergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
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">
<html>
<head>
<title>A study of population dynamics</title>
</head>
<body bgcolor="white">
<p> ... document body...</p>
</body>
</html>Im unten stehenden Beispiel wird die Vordergrundfarbe auf dem body-Element definiert, die Hintergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
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">
<html>
<head>
<title>A study of population dynamics</title>
</head>
<body color="white">
<p>... document body...</p>
</body>
</html>Im unten stehenden Beispiel wird die Hintergrundfarbe im CSS-Stylesheet definiert, die Vordergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
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">
<html>
<head>
<title>Setting the canvas background</title>
<style type="text/css">
body {background-color:white}
</style>
</head>
<body>
<p>My background is white.</p>
</body>
</html>Im unten stehenden Beispiel wird die Vordergrundfarbe im CSS-Stylesheet definiert, die Hintergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
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">
<html>
<head>
<title>Setting the canvas background</title>
<style type="text/css">
body {color:white}
</style>
</head>
<body>
<p>My foreground is white.</p>
</body>
</html>Im unten stehenden Beispiel wird die Linktext- (Vordergrund-) Farbe auf dem body-Element definiert. Die Hintergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
Code-Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>A study of population dynamics</TITLE>
<style type="text/css">
a:link { color: red }
a:visited { color: maroon }
a:active { color: fuchsia }
</style>
</head>
<body>
<p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie den Code der Webseite.
Prüfen Sie, ob es eine vom Autor festgelegte Vordergrundfarbe gibt
Prüfen Sie, ob es eine vom Autor festgelegte Hintergrundfarbe gibt
Anmerkung 1: Farbe und Hintergrundfarbe können auf jeder Ebene in der Kaskade (Cascade) der vorhergehenden Selektoren festgelegt werden, durch externe Stylesheets oder durch Vererbungsregeln.
Anmerkung 2: Die Hintergrundfarbe kann auch festgelegt werden, indem man ein Hintergrundbild mit dem CSS-Property 'background-image' oder mit dem CSS-Property 'background' (mit dem URI des Bildes, z.B. 'background: url("images/bg.gif")') benutzt. Auch bei Hintergrundbildern ist es notwendig, eine Hintergrundfarbe festzulegen, da es sein kann, dass Benutzer Bilder in ihrem Browser abgeschaltet haben. Aber das Hintergrundbild und die Hintergrundfarbe müssen geprüft werden.
Wenn Schritt #2 wahr ist, Schritt #3 aber falsch ist ODER wenn Schritt #3 wahr ist aber Schritt #2 ist falsch, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert an diesen Erfolgskriterien.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Dies beschreibt eine Fehlersituation, wenn die Webseite einen Titel hat, aber der Titel nicht die Inhalte oder den Zweck der Webseite identifizieren.
Beispiele von Text, bei dem es sich nicht um Titel handelt, beinhalten:
Standardtitel des Autorenwerkzeugs, wie beispielsweise
„Geben Sie hier den Titel Ihres HTML-Dokumentes ein,“
„Dokument ohne Titel (Untitled Document)“
„Kein Titel (No Title)“
„Seite ohne Titel (Untitled Page)“
„Neue Seite 1 (New Page 1)“
Dateinamen, die nicht eigenständig deskriptiv sind, wie zum Beispiel „report.html“ oder „spk12.html“
Leerer Text
Füller oder Platzhalter-Text
Eine Site, die durch die Benutzung von Vorlagen (templates) generiert wurde, enthält den gleichen Titel für jede Seite auf der Site. Also kann der Titel nicht benutzt werden, um zwischen Seiten zu unterscheiden.
Es gibt für diese Technik keine Ressourcen.
Prüfen Sie, ob der Titel jeder Webseite die Inhalte oder den Zweck der Webseite identifiziert.
Wenn Schritt #1 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es zu zeigen, wie die Benutzung eines grafischen Symbols zur Vermittlung von Informationen es erschweren kann, Inhalt zu verstehen. Ein grafisches Symbol kann ein Bild, ein Bild eines Textes oder ein bildhaftes oder dekoratives Zeichensymbol (Glyphe) sein, das Informationen nicht-verbal vermittelt. Beispiele von grafischen Symbolen beinhalten ein Bild eines roten Kreises mit einem Strich durch, ein „Smiley“-Gesicht oder eine Glyphe, die ein Häkchen, Pfeil oder anderes Symbol repräsentiert, nicht aber das Zeichen mit dieser Bedeutung ist. Benutzer von assistierenden Techniken könnten Schwierigkeiten damit haben, die Bedeutung des grafischen Symbols zu bestimmen. Wenn ein grafisches Symbol benutzt wird, um Informationen zu vermitteln, stellen sie eine Alternative bereit, indem Sie Funktionen der Technik benutzen oder wenden Sie einen anderen Mechanismus an, der mit einer Alternative markiert werden kann, um das grafische Symbol zu repräsentieren. Zum Beispiel kann ein Bild mit einer Textalternative benutzt werden statt des Glyphen.
Ein Einkaufswagen benutzt zwei einfache Glyphen um anzuzeigen, ob ein Artikel für die sofortige Lieferung zur Verfügung steht. Ein Häkchen zeigt an, dass der Artikel auf Lager und versandbereit ist. Ein „x“ zeigt an, dass der Artikel derzeit im Lieferrückstand ist und nicht für den unmittelbaren Versand zur Verfügung steht. Ein Benutzer assistierender Techniken könnte den Status des aktuellen Artikels nicht feststellen.
Es gibt für diese Technik keine Ressourcen.
Untersuchen Sie die Seite nach Nicht-Text-Markierungen, die Informationen vermitteln.
Prüfen Sie, ob es andere Möglichkeiten gibt, um die durch die Nicht-Text-Zeichen vermittelten Informationen zu ermitteln.
Wenn Schritt #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Gilt für alle Techniken.
Dieser Fehler bezieht sich auf:
Dies beschreibt eine Fehlersituation für alle Techniken, die mit Textalternativen verbunden sind. Wenn der Text in der „Textalternative“ nicht anstelle des Nicht-Text-Inhalts benutzt werden kann, ohne dass dabei Informationen oder Funktionen verloren gehen, dann scheitert dies, weil es in Wirklichkeit keine Alternative zu dem Nicht-Text-Inhalt ist.
Beispiele von Text, bei dem es sich nicht um Textalternativen handelt, beinhalten:
Platzhalter-Text wie beispielsweise „ “ oder „spacer“ oder „image“ oder „picture“ usw., die an die Stelle der Position der 'Textalternative' bei Abbildungen oder Bildern gesetzt werden.
Programmier-Referenzen, die nicht die Information oder Funktion des Nicht-Text-Inhalts vermitteln, wie beispielsweise „picture 1“, „picture 2“ oder „0001“, „0002“ oder „Intro#1“, „Intro#2“.
Dateinamen, bei denen es sich nicht um selbständige, gültige Textalternativen handelt, wie beispielsweise „Oct.jpg“ oder „Chart.jpg“ oder „sales\\oct\\top3.jpg“
Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Prüfen Sie jede Textalternative um zu sehen, ob es in Wirklichkeit keine Textalternative für den Nicht-Text-Inhalt ist.
Wenn Schritt #1 wahr ist, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
Gilt für alle Techniken.
Dieser Fehler bezieht sich auf:
Komponenten, welche die gleiche Funktion auf verschiedenen Webseiten haben, werden leichter wiedererkannt, wenn die durchgängig beschriftet sind. Wenn die Benennung nicht durchgängig ist, können manche Benutzer verwirrt werden.
Anmerkung 1: Textalternativen, die „konsistent“ sind, sind nicht immer „identisch“. Sie können zum Beispiel einen grafischen Pfeil am unteren Ende einer Webseite haben, der zur nächsten Webseite verlinkt. Die Textalternative könnte heißen „Gehe zu Seite 4“. Es wäre natürlich nicht passend, genau diese Textalternative auf der nächsten Webseite zu wiederholen. Es wäre passender zu sagen „Gehe zu Seite 5“. Obwohl diese Textalternativen nicht identisch wären, wären sie durchgängig und wären daher keine Fehler bei diesem Erfolgskriterium.
Eines der gängigsten Beispiele für die Benutzung nicht durchgängiger Beschriftungen von Komponenten mit der gleichen Funktion ist es, auf der einen Seite eine Schaltfläche, auf der „Suchen“ steht, und auf einer anderen Seite eine Schaltfläche, auf der „Finden“ steht, zu benutzen, wenn sie beide die identische Funktion bieten.
Ein Online-Autorenwerkzeug, das auf einer Seite eine Schaltfläche mit „Seite speichern“ und auf einer anderen Seite eine mit „Speichern“ benutzt, in beiden Fällen für die gleiche Funktion.
Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Finden Sie in einem Satz an Webseiten Komponenten mit der gleichen Funktion, die auf mehreren Webseiten wiederholt werden.
Prüfen Sie für jede in Schritt #1 gefundene Komponente mit der gleichen Funktion, ob die Benennung durchgängig ist.
Wenn Schritt #2 falsch ist, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es zu beschreiben, wie die Benutzung von 'white space'-Zeichen wie Leerschritt, Tabulator, Zeilenumbruch oder Zeilenschaltung zur visuellen Formatierung einzelner Worte ein Fehler sein kann, um sinntragende Abfolgen korrekt darzustellen. Wenn Leerzeichen eingefügt werden, um die Laufweite innerhalb eines Wortes zu steuern, können diese die Interpretation des Wortes ändern oder dazu führen, dass es durch Software nicht als einzelnes Wort erkannt wird.
Das Einfügen von 'white space' Zeichen in ein Initialwort ist kein Beispiel für diesen Fehler, da der weiße Zwischenraum nicht die Interpretation des Initialwortes ändert und dafür sorgen könnte, dass es einfacher zu verstehen ist.
Die Benutzung von weißen Zwischenräumen zwischen Worten zur visuellen Formatierung ist kein Fehler, da es die Interpretation der Worte nicht verändert.
Dieses Beispiel hat weiße Zwischenräume innerhalb eines Wortes, um die Buchstaben in einer Überschrift zu sperren. Es kann sein, dass Screenreader jeden Buchstaben einzeln lesen anstelle des Wortes „Welcome“.
Code-Beispiel:
<h1>W e l c o m e</h1> kann auch dazu benutzt werden, weiße Zwischenräume hinzuzufügen, was ähnliche Fehler produziert:
Code-Beispiel:
<h1>H E L L O</h1>Im japanischen können Han-Zeichen (Kanji) unterschiedliche Leseweisen haben, die sehr unterschiedliche Dinge bedeuten. In diesem Beispiel wird das Wort falsch gelesen, da Screenreader diese Zeichen aufgrund der weißen Zwischenräume zwischen den Zeichen möglicherweise nicht als Wort erkennen. Die Zeichen bedeuten „Tokyo“, aber Screenreader sagen „Higashi Kyo“.
Code-Beispiel:
<h1>東 京</h1>In der Zelle mit der Zeilenüberschrift in einer Datentabelle, die japanischen Text enthält, erstellen Autoren oft vertikalen Text, indem sie Zeichen für den Zeilenumbruch benutzen. Screenreader sind allerdings nicht dazu in der Lage, die Worte in vertikalem Text korrekt zu lesen, weil die Zeilenumbrüche innerhalb des Wortes auftreten. Im folgenden Beispiel wird „東京都“(Tokyo-to) als „Higashi Kyo Miyako“ gelesen.
Code-Beispiel:
<table>
<caption>表1. 都道府県別一覧表</caption>
<tr>
<td></td>
<th scope="col">（見出しセル 1.）</th>
<th scope="col">（見出しセル 2.）</th>
</tr>
<tr>
<th scope="row">東<br />京<br />都</th>
<td>（データセル 1.）</td>
<td>（データセル 2.）</td>
</tr>
・・・・・・
</table>Es gibt für diese Technik keine Ressourcen.
Für jedes Wort, das den Eindruck erweckt, keine standardmäßige Laufweite zwischen Zeichen zu haben:
Prüfen Sie, ob irgendwelche Worte im Text des Inhalts 'white space'-Zeichen enthalten.
Wenn Schritt #1 wahr ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es zu beschreiben, wie die Benutzung von 'white space'-Zeichen wie Leerschritt, Tabulator, Zeilenumbruch oder Zeilenschaltung zur Formatierung von Spalten mit Daten im Textinhalt ein Fehler bei der korrekten Benutzung von Struktur ist. Assistierende Techniken interpretieren Inhalt in der Lesereihenfolge der aktuellen Sprache. Die Benutzung von 'white space'-Zeichen zur Erstellung mehrerer Spalten stellt die Informationen nicht in einer natürlichen Lesereihenfolge bereit. Daher werden die Informationen Benutzern von assistierenden Techniken nicht in einer verständlichen Art und Weise präsentiert.
Klartext ist zur Darstellung mehrerer Spalten mit Text nicht geeignet. Ändern Sie den Inhalt, um Daten in einem anderen Layout zu präsentieren. Benutzen Sie alternativ eine Technik, die strukturelle Elemente zur Verfügung stellt, um spaltenartige Daten darzustellen.
Das folgende Beispiel benutzt 'white space'-Zeichen inkorrekt, um einen Absatz in ein zweispaltiges Format zu formatieren.
Code-Beispiel:
Web Content Accessibility Guidelines including blindness and low vision,
2.0 (WCAG 2.0) covers a wide range of deafness and hearing loss, learning
issues and recommendations for making difficulties, cognitive limitations, limited
Web content more accessible. This movement, speech difficulties, and
document contains principles, others. Following these guidelines will
guidelines, Success Criteria, benefits, also make your Web content more
and examples that define and explain accessible to the vast majority of users,
the requirements for making Web-based including older users. It will also enable
information and applications accessible. people to access Web content using
"Accessible" means usable to a wide many different devices - including a
range of people with disabilities, wide variety of assistive technologies.Wenn diese Tabelle von einem Screenreader interpretiert und gesprochen werden sollte, dann würden die folgenden Zeilen gesprochen:
Web Content Accessibility Guidelines including blindness and low vision,
2.0 (WCAG 2.0) covers a wide range of deafness and hearing loss, learning
issues and recommendations for making difficulties, cognitive limitations, limited
Web content more accessible. This movement, speech difficulties, and
(additional lines eliminated for brevity)
Wenn der Text neu umgebrochen würde oder man von einer nichtproportionalen Schrift zu einer proportionalen Schrift wechseln oder die Schriftgröße so weit vergrößern würde, dass die Zeilen nicht länger auf die Seite passen, dann würden ähnliche Interpretationsprobleme bei der visuellen Darstellung entstehen.
Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Untersuchen Sie das Dokument auf Daten oder Informationen, die im Spaltenformat dargestellt werden.
Prüfen Sie, ob die Spalten durch die Benutzung von 'white space'-Zeichen erstellt werden, um die Informationen zu gestalten.
Wenn Schritt #2 wahr ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesen Erfolgskriterien.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es zu beschreiben, wie die Benutzung von 'white space'-Zeichen wie Leerschritt, Tabulator, Zeilenumbruch oder Zeilenschaltung zur Formatierung von Tabellen im Textinhalt ein Fehler bei der korrekten Benutzung von Struktur ist. Wenn Tabellen auf diese Art und Weise erstellt werden, gibt es keine Möglichkeit zu kennzeichnen, dass eine Zelle als Überschriftenzelle gedacht ist, es gibt keine Möglichkeit, die Überschriftenzellen mit den Datenzellen der Tabelle zu verknüpfen oder direkt zu einer bestimmten Zelle in einer Tabelle zu navigieren.
Darüber hinaus interpretieren assistierende Techniken den Inhalt in der Lesereihenfolge der aktuellen Sprache. Die Benutzung von weißen Zwischenräumen zur Strukturierung von Daten in einer visuellen Tabelle stellt Informationen nicht in einer natürlichen Lesereihenfolge in der Quelle des Dokumentes zur Verfügung. Daher werden Benutzern von assistierenden Techniken die Informationen nicht in einer logischen Lesereihenfolge präsentiert.
Klartext ist zur Darstellung komplexer Informationen wie Tabellen nicht geeignet, da die Struktur der Tabelle nicht wahrgenommen werden kann. Statt visuelle Formatierung zur Repräsentation tabellarischer Beziehungen zu benutzen, müsste man tabellarische Informationen präsentiert werden, indem man eine andere Technik benutzt oder sie linear darstellt. (Siehe 'Die Präsentation tabellarischer Informationen in Klartext)
Das folgende Beispiel benutzt weiße Zwischenräume inkorrekt, um ein Menü als visuelle Tabelle zu formatieren.
Code-Beispiel:
Menu
Breakfast Lunch Dinner
Monday 2 fried eggs tomato soup garden salad
bacon hamburger Fried Chicken
toast onion rings green beans
Oatmeal cookie mashed potatoes
Tuesday Pancakes vegetable soup Caesar salad
sausage hot dogs Spaghetti with meatballs
orange juice potato salad Italian bread
brownie ice creamWenn diese Tabelle von einem Screenreader interpretiert und gesprochen werden sollte, dann würden die folgenden Zeilen gesprochen:
Menu
Breakfast Lunch Dinner
Monday 2 fried eggs tomato soup garden salad
bacon hamburger Fried Chicken
toast onion rings green beans
Oatmeal cookie mashed potatoes
Diese Lesereihenfolge ergibt keinen Sinn, da es in der Tabelle keine Struktur gibt, damit die assistierende Technik es als Tabelle identifizieren kann. Wenn der Text neu umgebrochen würde oder man von einer nichtproportionalen Schrift zu einer proportionalen Schrift wechseln oder die Schriftgröße so weit vergrößern würde, dass die Zeilen nicht länger auf die Seite passen, dann würden ähnliche Probleme bei der visuellen Darstellung entstehen.
Es gibt für diese Technik keine Ressourcen.
Untersuchen Sie das Dokument auf visuell formatierte Tabellen hin.
Prüfen Sie, ob Tabellen erstellt wurden, indem 'white space'-Zeichen benutzt wurden, um die tabellarischen Daten zu gestalten.
Wenn Schritt #2 wahr ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesen Erfolgskriterien.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Formulare werden häufig so gestaltet, dass sie automatisch abgesendet werden, wenn der Benutzer alle Felder ausgefüllt hat oder wenn der Fokus das letzte Feld verlässt. Bei dieser Vorgehensweise gibt es zwei Probleme. Erstens kann es sein, dass ein behinderter Benutzer, der mehr Kontext benötigt, den Fokus möglicherweise von dem Feld weg zu den Anweisungen, wie man das Formular ausfüllt oder zu anderem Text bewegt und damit versehentlich das Formular absendet. Das zweite ist, dass sich bei manchen Formular-Elementen der Wert des Feldes ändert während per Tastatur zu jedem Punkt navigiert wird und auch hierbei versehentlich das Formular abgesendet wird. Es ist besser, sich auf das Standard-Formularverhalten der Absenden-Schaltfläche und der Eingabetaste zu stützen.
Dieses Fehlerbeispiel sendet ein Formular ab, wenn der Benutzer das letzte Feld eines drei Felder großen Telefonnummer-Formulars verlässt. Das Formular wird abgesendet, wenn der Benutzer das Feld nach dessen Bearbeitung verlässt, sogar dann, wenn er in der Tab-Reihenfolge rückwärts navigiert. Entwickler sollten nicht diese Methode zum Absenden eines Formulars benutzen, sondern sie sollten stattdessen eine Absenden-Schaltfläche benutzen oder sich auf das Standardverhalten des Formulars verlassen, und zwar dem Absenden, wenn der Benutzer in einem Textfeld die Eingabetaste drückt.
Code-Beispiel:
<form method="get" id="form1">
<input type="text" name="text1" size="3" maxlength="3"> -
<input type="text" name="text2" size="3" maxlength="3"> -
<input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();">
</form> Dies ist ein Beispiel, in dem ein Formular abgesendet wird, wenn der Benutzer eine Option aus dem Menü wählt und es vorab keine Warnung über dieses Verhalten gibt. Das Formular wird abgesendet, sobald ein Punkt aus dem Menü ausgewählt wird. Ein Benutzer, der eine Tastatur benutzt, wird nicht in der Lage sein, über den ersten Punkt im Menü hinaus zu navigieren. Blinde Benutzer und Benutzer mit Hand-Tremor können leicht einen Fehler dabei machen, welchen Punkt sie im Aufklappmenü auswählen sollen und sie werden zu einem falschen Ziel gebracht, bevor sie diesen korrigieren können.
Code-Beispiel:
<form method="get" id="form2">
<input type="text" name="text1">
<select name="select1" onchange="form2.submit();">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>
</form>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Geben Sie in allen Feldern einer Seite Daten ein, wobei Sie von oben beginnen.
Geben Sie Daten in das letzte Feld ein und verlassen Sie es (gehen Sie per Tabulator raus).
Prüfen Sie, ob das Verlassen des letzten Feldes zu einer Änderung des Kontextes führt.
Wenn Schritt #3 wahr ist, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Internet Explorer 6 löst den onclick-Event auch dann aus, wenn ein Radiobutton mit onclick den Fokus erhält; das Hinzufügen von anderen Event-Handlern (onxxx-Attributen), um dies zu vermeiden, funktioniert nicht.
Dieses Dokument beschreibt einen Fehler, der auftritt, wenn die Änderung des Status eines Radiobuttons, eines Kontrollkästchen oder eines Punktes in einer Auswahlliste dazu führt, dass ein neues Fenster geöffnet wird. Es ist möglich, Scripting zu benutzen, um ein input-Element zu erstellen, dass zu einer Änderung des Kontextes führt (Formular absenden, eine neue Seite öffnen, ein neues Fenster), wenn das Element ausgewählt wird. Entwickler können stattdessen eine Absenden-Schaltfläche benutzen (siehe G80: Bereitstellung einer submit-Schaltfläche, um eine Änderung zu Kontextes einzuleiten) oder deutlich auf den erwarteten Vorgang hinweisen.
Das Beispiel unten scheitert am Erfolgskriterium, weil es das Formular verarbeitet, wenn ein Radiobutton ausgewählt wird statt dass eine Absenden-Schaltfläche benutzt wird.
Code-Beispiel:
<script type="text/JavaScript">
function goToMirror(theInput) {
var mirrorSite = "http://download." + theInput.value + "/";
window.open(mirrorSite);
}
</script>
…
<form name="mirror_form" id="mirror_form" action="" method="get">
<p>Please select a mirror download site:</p>
<p>
<input type="radio" onclick="goToMirror(this);" name="mirror"
id="mirror_belnet" value="belnet.be" />
<label for="mirror_belnet">belnet (<abbr>BE</abbr>)</label><br />
<input type="radio" onclick="goToMirror(this);" name="mirror"
id="mirror_surfnet" value="surfnet.nl" />
<label for="mirror_surfnet">surfnet (<abbr>NL</abbr>)</label><br />
<input type="radio" onclick="goToMirror(this);" name="mirror"
id="mirror_puzzle" value="puzzle.ch" />
<label for="mirror_puzzle">puzzle (<abbr>CH</abbr>)</label><br />
<input type="radio" onclick="goToMirror(this);" name="mirror"
id="mirror_voxel" value="voxel.com" />
<label for="mirror_voxel">voxel (<abbr>US</abbr>)</label><br />
</p>
</form>Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Finden Sie jedes Formular auf einer Seite.
Prüfen Sie für jedes Formular-Steuerelement, bei dem es sich um einen Radiobutton, ein Kontrollkästchen oder einen Punkt in einer Auswahlliste handelt, ob die Änderung des Status des Steuerelementes ein neues Fenster öffnet.
Prüfen Sie bei jedem neuen Fenster, das aus Schritt 2 resultiert, ob der Benutzer vorab gewarnt wird.
Wenn Schritt #3 falsch ist, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Dies beschreibt eine Fehlersituation bei Textalternativen für Bilder, die von assistierenden Techniken ignoriert werden sollten. Wenn es überhaupt kein alt-Attribut gibt, sind assistierende Techniken nicht in der Lage, den Nicht-Text-Inhalt zu ignorieren. Das alt-Attribut muss nachgewiesen werden und einen leeren Wert haben (d.h. alt="" oder alt=" "), um einen Fehler bei diesem Erfolgskriterium zu vermeiden.
Anmerkung: Auch wenn alt=" " gültig ist, wird alt="" empfohlen.
Fehlerbeispiel 1: Dekorative Bilder, die kein alt-Attribut haben
Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Identifizieren Sie alle img- und applet-Elemente, die rein für dekorativen Inhalt verwendet werden;
Prüfen Sie, ob das alt-Attribut für diese Elemente existiert.
Prüfen sie, ob das alt-Attribut für diese Elemente leer ist.
Wenn Schritt #2 oder Schritt #3 falsch ist, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
Gilt für HTML und XHTML.
Dieser Fehler bezieht sich auf:
Diese Technik beschreibt eine Fehlersituation bei Bildern, die von assistierenden Techniken ignoriert werden sollten. Eine Textalternative für ein Bild sollte die Bedeutung des Bildes vermitteln. Wenn ein Bild zur Dekoration, für Zwischenräume oder andere Zwecke, die nicht Teil des bedeutungstragenden Inhalts auf der Seite sind, benutzt wird, dann hat das Bild keine Bedeutung und sollte von assistierenden Techniken ignoriert werden.
Die Bereitstellung einer leeren Textalternative (d.h. alt="" oder alt=" ") erlaubt es assistierenden Techniken, das Bild zu ignorieren und vermeidet ein Scheitern an diesem Erfolgskriterium.
Anmerkung: Auch wenn alt=" " gültig ist, wird alt="" empfohlen.
Ein Bild wird benutzt, um einen Leerraum zwischen Inhalten zu schaffen wobei der Leerraum selber keine Bedeutung für den Inhalt hat. Das Bild hat den alt-Text-Wert „spacer“. Dieses Bild scheitert an dem Erfolgskriterium, weil die Textalternative keinen äquivalenten Zweck erfüllt. Das Bild sollte ignoriert werden, aber sein Alternativtext „spacer“ wird von Screenreadern gelesen und in manchen alternativen Farbschemata angezeigt.
Code-Beispiel:
<div>Tree type: <img src="spacer.gif" width="100" height="1" alt="spacer"/>Cedrus deodara</div>Es gibt für diese Technik keine Ressourcen.
Identifizieren Sie alle img-Elemente, die zur Dekoration, für Zwischenräume oder andere Zwecke, die nicht Teil des bedeutungstragenden Inhalts der Seite sind, benutzt werden
Prüfen sie, ob das alt-Attribut für diese Elemente leer ist.
Wenn Schritt #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert am Erfolgskriterium.
Alle Seiten
Dieser Fehler bezieht sich auf:
metahttp-equiv of {time-out}; url=... wird häufig benutzt, um Benutzer automatisch weiterzuleiten. Wenn dies nach einer Verzögerungszeit eintritt, ist es eine unerwartete Änderung des Kontextes, die den Benutzer möglicherweise stört.
Es ist zulässig, das meta-Element zu benutzen, um eine Weiterleitung zu erstellen, wenn eine Pause auf null gesetzt ist, da die Weiterleitung unmittelbar erfolgt und nicht als Änderung des Kontextes wahrgenommen wird. Es ist allerdings vorzuziehen, server-seitige Methoden zu benutzen, um dies zu erreichen. Siehe SVR1: Server-seitige statt client-seitige Implementierung automatischer Umleitungen (SERVER) .
Die Seite unten ist ein Fehler, da nach einer Pause von 5 Sekunden zu dem URI http://www.example.com/newpage umgeleitet wird.
Code-Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Do not use this!</title>
<meta http-equiv="refresh"
content="5; url=http://www.example.com/newpage" />
</head>
<body>
<p>
If your browser supports Refresh, you'll be
transported to our
<a href="http://www.example.com/newpage">new site</a>
in 5 seconds, otherwise, select the link manually.
</p>
</body>
</html>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Sehen Sie sich eine Seite an.
Prüfen Sie, ob die Seite nicht nach einer Pause weiterleitet.
Wenn Test #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
metahttp-equiv von refresh wird oft benutzt, um Seiten in regelmäßigen Abständen zu aktualisieren oder Benutzer zu einer anderen Seite weiter zu leiten. Wenn das Zeitintervall zu kurz ist, haben blinde Menschen nicht genügend Zeit, ihren Screenreader die Seite lesen zu lassen, bevor die Seite unerwartet aktualisiert wird und das führt dazu, dass der Screenreader oben mit dem Lesen beginnt. Sehende Benutzer können möglicherweise ebenfalls durch die unerwartete Aktualisierung orientierungslos werden.
Dies ist ein unzulässiges Beispiel, das die Seite des Benutzers in regelmäßigen Abständen ändert. Entwickler von Inhalten sollten diese Technik nicht benutzen, um eine „Push“-Technik zu simulieren. Entwickler können nicht vorhersagen, wie viel Zeit ein Benutzer benötigt, um eine Seite zu lesen; eine verfrühte Aktualisierung kann Benutzer orientierungslos machen. Entwickler von Inhalten sollten regelmäßige Aktualisierungen vermeiden und es dem Benutzer erlauben auszuwählen, wann sie die aktuellsten Informationen haben wollen. (Die Zahl im content-Attribut ist das Aktualisierungsintervall in Sekunden.)
Code-Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Techniken für WCAG 2.0</title>
<meta http-equiv="refresh" content="60" />
</head>
<body>
...
</body>
</html>Dies ist ein unzulässiges Beispiel, das den Benutzer nach einer Anzahl an Sekunden zu einer anderen Seite umleitet. Entwicklern von Inhalten wird empfohlen, stattdessen server-seitige Umleitungen zu benutzen. (Die Zahl im content-Attribut ist das Aktualisierungsintervall in Sekunden.)
Code-Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="10;URL='http://example.com/'" />
</head>
<body>
<p>This page has moved to a <a href="http://example.com/">
example.com</a>. Please note that we now have our own
domain name and will redirect you in a few seconds. Please update
your links and bookmarks.</p>
</body>
</html>Finden Sie die meta-Elemente im Dokument.
Prüfen Sie für jedes meta-Element, ob es das Attribut http-equiv mit dem Wert „refresh“ (auf Groß- und Kleinschreibung achten) und das content-Attribut mit einer Zahl (die für Sekunden steht) größer als Null enthält.
Wenn Schritt 2 wahr ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesen Erfolgskriterien.
HTML und XHTML mit Scripting.
Dieser Fehler bezieht sich auf:
Dieser Fehler tritt auf, wenn JavaScript-Event-Handler an ein Element angehängt werden, um 'Links zu emulieren''. Man kann nicht per Tastatur mit der Tabulatortaste zu einem Steuerelement oder einem Link gehen, der auf diese Art erstellt wurde, und diese erhalten nicht den Tastaturfokus wie andere Steuerelemente und/oder Links. Wenn Scripting-Events benutzt werden, um Links zu emulieren, dann sind Benutzeragenten einschließlich assistierender Techniken möglicherweise nicht dazu in der Lage, die Links im Inhalt als Links zu identifizieren. Es kann sein, dass sie von assistierenden Techniken nicht als interaktive Steuerelemente erkannt werden oder sie werden möglicherweise zwar als interaktive Steuerelemente erkannt, werden aber nach wie vor nicht als Link erkannt. Solche Elemente erscheinen nicht in der Linkliste, die von Benutzeragenten oder assistierenden Techniken generiert wird.
Die <a href>- und <area>-Elemente sind dazu gedacht, Links auszuzeichnen.
Das Anhängen von Event-Handlern an Elemente, die normalerweise nicht interaktiv sind, wie beispielsweise span und div kann für Benutzer ziemlich verwirrend sein. Auch wenn man darauf achtet, einen Zugriff per Tastatur auf diese Elemente zur Verfügung zu stellen, kann es für Benutzer schwierig sein herauszufinden, dass es interaktive Steuerelemente im Inhalt gibt oder zu verstehen, welche Art von Verhalten sie von ihnen erwarten können. Zum Beispiel kann es sein, dass Benutzer nicht wissen, welche Tastenanschläge zur Aktivierung des Elementes vom Script unterstützt werden. Des Weiteren generieren diese Elemente nicht die gleichen Betriebssystem-Ereignisse wie interaktive Elemente, somit kann es sein, dass assistierende Techniken nicht darüber informiert werden, wenn Benutzer diese aktivieren.
Scripted-Event-Handling wird zu einem span-Element hinzugefügt, so dass es als Link fungiert, wenn es mit der Maus angeklickt wird. Assistierende Techniken erkennen dieses Element nicht als Link.
Code-Beispiel:
<span onclick="this.location.href='newpage.html'">
Fake link
</span>Scripted-Event-Handling wird zu einem img-Element hinzugefügt, so dass es als Link fungiert, wenn es mit der Maus angeklickt wird. Assistierende Techniken erkennen dieses Element nicht als Link.
Code-Beispiel:
src="go.gif"
alt="go to the new page"
onclick="this.location.href='newpage.html'"Scripted-Event-Handling wird zu einem img-Element hinzugefügt, so dass es als Link fungiert. In diesem Beispiel kann die Link-Funktionalität mit der Maus oder über die Eingabetaste aufgerufen werden, wenn der Benutzeragent dieses Element in die Tab-Kette eingefügt hat. Dennoch wird dieses Element nicht als Link erkannt.
Code-Beispiel:
function doNav(url)
{
window.location.href = url;
}
function doKeyPress(url)
{
//if the enter key was pressed
if (window.event.type == "keypress" &&
window.event.keyCode == 13)
{
doNav(url);
}
}Das Markup für das Bild lautet:
Code-Beispiel:
<p>
<img src="bargain.jpg"
tabindex="0"
alt="View Bargains"
onclick="doNav('viewbargains.html');"
onkeypress="doKeyPress('viewbargains.html');"
>
</p>Dieses Beispiel benutzt Script, um dafür zu sorgen, dass sich ein div-Element wie ein Link verhält. Obwohl der Autor einen vollständigen Zugriff per Tastatur zur Verfügung gestellt hat und die Event-Handler vom Markup getrennt hat, um die Nutzung des des Inhalts zu einem neuen Zweck zu ermöglichen, wird das div-Element von assistierenden Techniken nicht als Link erkannt.
Code-Beispiel:
window.onload = init;
function init()
{
var objAnchor = document.getElementById('linklike');
objAnchor.onclick = function(event){return changeLocation(event,
'surveyresults.html');};
objAnchor.onkeypress = function(event){return changeLocation(event,
'surveyresults.html');};
}
function changeLocation(objEvent, strLocation)
{
var iKeyCode;
if (objEvent && objEvent.type == 'keypress')
{
if (objEvent.keyCode)
iKeyCode = objEvent.keyCode;
else if (objEvent.which)
iKeyCode = objEvent.which;
if (iKeyCode != 13 && iKeyCode != 32)
return true;
}
window.location.href = strLocation;
}Das Markup für das div-Element lautet:
Code-Beispiel:
<div id="linklike">
View the results of the survey.
</div>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob es JavaScript Event-Handler auf einem Element gibt, das einen Link emuliert.
Prüfen Sie, ob die durch Software bestimmte Rolle des Elements link ist.
Wenn Tests #1 wahr und Test #2 falsch ist, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es, einen Fehler zu beschreiben der auftritt, wenn strukturelles Markup benutzt wird, um einen Darstellungseffekt zu erreichen, das aber Beziehungen kennzeichnet, die im Inhalt nicht existieren. Dies ist verwirrend für Benutzer, die auf diese Beziehungen angewiesen sind, um im Inhalt zu navigieren oder um die Beziehung zwischen einem Teil des Inhalts zu einem anderen zu verstehen. Beachten Sie, dass die Benutzung von HTML-Tabellen für das Layout kein Beispiel für diesen Fehler ist, so lange die Layout-Tabelle kein unangebrachtes strukturelles Markup wie beispielsweise <th> oder <caption>-Elemente enthält.
In diesem Beispiel wird ein heading-Element benutzt, um eine Adresse in einer großen Fettschrift anzuzeigen. Die Adresse kennzeichnet jedoch keinen neuen Abschnitt des Dokumentes, also sollte sie nicht als Überschrift ausgezeichnet werden.
Code-Beispiel:
<p>Interested in learning more? Write to us at</p>
<h4>3333 Third Avenue, Suite 300 · New York City</h4>
<p>And we'll send you the complete informational packet absolutely Free!</p>In diesem Beispiel wird heading-Markup auf zwei verschiedene Arten benutzt: um die Dokumentstruktur zu vermitteln und um visuelle Effekte zu schaffen. Die h1- und h2-Elemente werden in angemessener Weise benutzt, um den Anfang des Dokumentes als Ganzes und den Anfang des Abstracts auszuzeichnen. Allerdings werden die h3- und h4-Elemente zwischen dem „title“ und dem Abstract nur für den visuellen Effekt benutzt — um die Zeichensätze zu steuern, die benutzt werden, um die Namen der Autoren und das Datum anzuzeigen.
Code-Beispiel:
<h1>Study on the Use of Heading Elements in Web Pages</h1>
<h3>Joe Jones and Mary Smith<h3>
<h4>March 14, 2006</h4>
<h2>Abstract</h2>
<p>A study was conducted in early 2006 ...
</p>Das folgende Beispiel benutzt blockquote für Text, bei dem es sich nicht um ein Zitat handelt, zur Hervorhebung, indem dieser eingerückt wird, wenn er in einem grafischen Browsern angezeigt wird.
Code-Beispiel:
<p>After extensive study of the company Web site, the task force
identified the following common problem.</p>
<blockquote>
<p>The use of markup for presentational effects made Web
pages confusing to screen reader users.</p>
</blockquote>
<p>The committee lists particular examples of the problems
introduced by this practice below.</p>Code-Beispiel:
<fieldset>
<legend>Bargain Corner</legend>
<p>Buy today, and save 20%</p>
</fieldset>Es gibt für diese Technik keine Ressourcen.
Prüfen Sie, ob die semantische Bedeutung jedes Elements für den Inhalt des Elements angemessen ist.
Wenn Test #1 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Dieses Dokument beschreibt einen Fehler, der auftritt, wenn die Tab-Reihenfolge nicht den logischen Beziehungen und Abfolgen im Inhalt folgt.
Fokussierbare Elemente wie Links und Formularelemente haben ein tabindex-Attribut. Die Elemente erhalten den Fokus in aufsteigender Reihenfolge des Wertes des tabindex-Attributs. Wenn die Werte des tabindex-Attributs in einer anderen Reihenfolge zugewiesen werden wie die Beziehungen und Abfolgen im Inhalt, dann folgt die Tab-Reihenfolge nicht länger den Beziehungen und Abfolgen im Inhalt.
Einer der häufigsten Gründe dieses Fehlers tritt auf, wenn eine Seite bearbeitet wird, auf der tabindex benutzt wurde. Es passiert bei der Tab-Reihenfolge und der Reihenfolge des Inhalts leicht, dass sie einander nicht entsprechen, wenn der Inhalt bearbeitet wird, die tabindex-Attribute aber nicht aktualisiert werden, um die Änderungen des Inhalts widerzuspiegeln.
Das folgende Beispiel benutzt tabindex fälschlicherweise, um eine alternative Tab-Reihenfolge festzulegen:
Code-Beispiel:
<ul>
<li><a href="main.html" tabindex="1">Homepage</a></li>
<li><a href="chapter1.html" tabindex="4">Chapter 1</a></li>
<li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>
<li><a href="chapter3.html" tabindex="2">Chapter 3</a></li>
</ul>Wenn diese Liste per Tab-Taste navigiert wird, dann wird die Liste in der Reihenfolge Homepage, Kapitel 3, Kapitel 2, Kapitel 1 navigiert, was nicht der Abfolge im Inhalt entspricht.
Die Tab-Reihenfolge wurde auf einer Webseite explizit festgelegt, indem tabindex-Attribute für alle Felder festgelegt wurden. Später wird die Seite modifiziert, um ein neues Feld in der Mitte der Seite hinzuzufügen, aber der Autor vergisst es, zu dem neuen Feld ein tabindex-Attribut hinzuzufügen. Daraus ergibt es sich, dass das neue Feld am Ende der Tab-Reihenfolge steht.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 Tabbing navigation
Wenn tabindex benutzt wird, prüfen Sie, ob die Tab-Reihenfolge, die durch die tabindex-Attribute festgelegt wird, den Beziehungen im Inhalt folgt.
Wenn Test #1 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es, einen Fehler zu beschreiben, der auftritt, wenn eine nur für das Layout benutze Tabelle entweder th-Elemente, ein summary-Attribut oder ein caption-Element enthält. Dies ist ein Fehler, da strukturelles (oder semantisches) Markup nur für die Darstellung benutzt wird. Der Zweck der HTML- und XHTML-Table-Elemente ist es, Daten zu präsentieren.
Das folgende strukturelle Markup würde, auch wenn es für gewöhnlich nicht in einer Layout-Tabelle benutzt wird, ein Fehler bei Erfolgskriterium 1.3.1 sein, wenn es in einer Layout-Tabelle benutzt würde:
headers-Attribute
scope-Attribute
Assistierende Techniken benutzen die Struktur einer HTML- oder XHTML-Tabelle, um dem Benutzer Daten in einer logischen Art und Weise zu präsentieren. Das th-Element wird benutzt, um die Spalten- und Reihenüberschriften der Tabelle zu kennzeichnen. Ein Screenreader benutzt die Information in den th-Elementen, um die Überschrifteninformationen zu sprechen, die sich ändern, während der Benutzer in der Tabelle navigiert. Das summary-Attribut auf dem table-Element stellt eine Beschreibung der Tabelle in Textform zur Verfügung, in der Zweck und Funktion der Tabelle beschrieben werden. Assistierende Techniken stellen den Benutzern die Informationen des summary-Attributs zur Verfügung. Das caption-Element ist Teil der Tabelle und identifiziert die Tabelle.
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 eine Tabelle für Layout-Zwecke benutzt wird, dann sollte das th-Element nicht benutzt werden. Da die Tabelle keine Daten präsentiert gibt es keinen Grund, irgendwelche Zellen als Spalten- oder Zeilenüberschriften zu kennzeichnen. Ebenso ist eine zusätzliche Beschreibung einer Tabelle, die nur dazu benutzt wird, um Inhalte zu gestalten, nicht notwendig. Fügen Sie kein summary-Attribut hinzu und benutzen Sie das summary-Attribut nicht dazu, um die Tabelle z.B. als „Layout-Tabelle“ zu beschreiben. Diese Information bringt keinen Nutzen, wenn sie gesprochen wird und lenkt Benutzer, die den Inhalt per Screenreader navigieren, nur ab. Leere summary-Attribute sind bei Layout-Tabellen vertretbar, sind aber nicht empfohlen.
Hier ist ein einfaches Beispiel, in dem eine Tabelle benutzt wird, um Inhalte in einem dreispaltigen Format zu gestalten. Die Navigationsleiste ist in der linken Spalte, der primäre Inhalt in der mittleren Spalte und in der rechten gibt es eine zusätzliche Seitenleiste. Oben gibt es einen Seitentitel. Das Beispiel kennzeichnet den Seitentitel als <th> und stellt ein summary-Attribut zur Verfügung, das angibt, dass es sich bei der Tabelle um eine Layout-Tabelle handelt.
Code-Beispiel:
<table summary="layout table">
<tr>
<th colspan=3>Page Title</th>
</tr>
<tr>
<td><div>navigation content</div></td>
<td><div>main content</div></td>
<td><div>right sidebar content</div></td>
</tr>
<tr>
<td colspan=3>footer</td>
</tr>
</table>Es gibt für diese Technik keine Ressourcen.
Durchsuchen Sie den Quelltext des HTML- oder XHTML-Dokumentes nach dem table-Element
Wenn die Tabelle nur benutzt wird, um Elemente innerhalb des Inhalts visuell zu gestalten
Prüfen Sie, ob die Tabelle keine th-Elemente enthält.
Prüfen Sie, ob das table-Element kein nicht-leeres summary-Attribut enthält.
Prüfen Sie, ob das table-Element kein caption-Element enthält.
Wenn irgendeiner der oben genannten Tests falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Das blink-Element wird von Internet Explorer 6 unter Windows nicht unterstützt. Es wird von der Netscape/Mozilla Benutzeragenten-Familie und von Opera unter Windows unterstützt.
Das blink-Element wird von vielen Benutzeragenten unterstützt, auch wenn es nicht Teil der offiziellen HTML- oder XHTML-Spezifikationen ist. Es führt dazu, dass jeder Text innerhalb des Elements in einer vorher bestimmten Frequenz blinkt. Dies kann weder vom Benutzer unterbrochen werden, noch kann es als Einstellung abgeschaltet werden. Das Blinken dauert so lange, wie die Seite angezeigt wird. Daher scheitert Inhalt, der blink benutzt, am Erfolgskriterium, da das Blinken für mehr als 3 Sekunden andauern kann.
Eine Seite mit einer Liste an Produkten benutzt das blink-Element, um die Aufmerksamkeit auf die reduzierten Preise zu ziehen. Damit wird das Erfolgskriterium nicht erfüllt, da Benutzer das Blinken nicht steuern können.
Code-Beispiel:
<p>My Great Product <blink>Sale! $44,995!</blink></p>Durchsuchen Sie den Code nach vorhandenen blink-Elementen.
Wenn #1 wahr ist, dann scheitert der Inhalt am Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Dieses Dokument beschreibt einen Fehler, der durch die Benutzung des HTML pre-Elements zur Auszeichnung von tabellarischen Informationen verursacht wird. Das pre-Element bewahrt nur die visuelle Formatierung. Wenn das pre-Element benutzt wird, um tabellarische Informationen auszuzeichnen, dann gehen die visuell implizierten logischen Beziehungen zwischen den Tabellenzellen und den Überschriften verloren, wenn der Benutzer den Bildschirm nicht sehen kann oder wenn sich die visuelle Darstellung signifikant ändert.
Stattdessen ist das HTML table-Element dazu gedacht, tabellarische Daten darzustellen. Assistierende Techniken benutzen die Struktur einer HTML-Tabelle, um dem Benutzer Daten auf eine logische Art und Weise zu präsentieren. Diese Struktur steht nicht zur Verfügung, wenn das pre-Element benutzt wird.
Code-Beispiel:
<pre>
Monday Tuesday Wednesday Thursday Friday
8:00-
9:00 Meet with Sam
9:00-
10:00 Dr. Williams Sam again Leave for San Antonio
</pre>Code-Beispiel:
<pre>
CIRCUIT COURT JUDGE BRANCH 3
W
R
M R E I
A . L T
M L R B E
I A Y E -
K N R I
E G T N
----- ----- -----
0001 TOWN OF ALBION WDS 1-2 22 99 0
0002 TOWN OF BERRY WDS 1-2 52 178 0
0003 TOWN OF BLACK EARTH 16 49 0
0004 TOWN OF BLOOMING GROVE WDS 1-3 44 125 0
0005 TOWN OF BLUE MOUNDS 33 117 0
0006 TOWN OF BRISTOL WDS 1-3 139 639 1
0007 TOWN OF BURKE WDS 1-4 80 300 0
0008 TOWN OF CHRISTIANA WDS 1-2 22 50 0
</pre>Es gibt für diese Technik keine Ressourcen.
Prüfen Sie, ob das pre-Element benutzt wird
Prüfen Sie für jedes Vorkommen des pre-Elements, ob die eingeschlossenen Informationen tabellarisch sind.
Wenn Tests #2 wahr ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Frühere Screenreader lasen den Webinhalt wortwörtlich vom Bildschirm ab, was zu Problemen geführt hat, wenn Tabellen für Layoutzwecke benutzt wurden und wobei eine Tabellenzelle als Ganzes gelesen werden sollte bevor die nächste Tabellenzelle gelesen wurde. Heutige Screenreader arbeiten mit dem zugrunde liegenden Markup, was bedeutet, dass sie eine Tabellenzelle in ihrer Gesamtheit lesen, bevor sie zur nächsten Zelle weitergehen, aber Layout-Tabellen können nach wie vor unbeabsichtigt Probleme mit der natürlichen Lesereihenfolge des Inhalts verursachen.
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 jedoch eine Layout-Tabelle benutzt wird, ist es wichtig, dass der Inhalt einen Sinn ergibt, wenn er linearisiert wird.
Dieser Fehler tritt auf, wenn eine bedeutungstragende Abfolge des Inhalts, die durch die Darstellung vermittelt wird, verloren geht, weil HTML-Tabellen, die dazu benutzt werden, um die visuelle Platzierung des Inhalts zu steuern, nicht korrekt „linearisieren“. Tabellen präsentieren Inhalte in zwei visuellen Dimensionen, horizontal und vertikal. Screenreader jedoch präsentieren diese zweidimensionalen Inhalte in der linearen Reihenfolge des Inhalts im Quelltext, wobei sie mit der ersten Zelle in der ersten Reihe beginnen und mit der letzten Zelle in der letzten Reihe enden. Der Screenreader liest die Tabelle von oben nach unten, wobei der den gesamten Inhalt jeder Zeile liest, bevor er zur nächsten Zeile weitergeht. Der gesamte Inhalt jeder Zelle wird gesprochen — einschließlich des gesamten Inhalts jeder Tabelle, die innerhalb einer Zelle verschachtelt ist. Dies wird Linearisierung genannt.
Nehmen wir an, dass eine Webseite so gestaltet ist, dass sie eine Tabelle mit 9 Spalten und 22 Reihen benutzt. Der Screenreader spricht den Inhalt der Zelle in Spalte 1, Reihe 1 gefolgt von den Zellen in den Spalten 2, 3, 4 usw. bis hin zu Spalte 9. Wenn allerdings irgendeine Zelle eine verschachtelte Tabelle enthält, dann liest der Screenreader die gesamte verschachtelte Tabelle, bevor er die nächste Zelle in der ursprünglichen (äußeren) Tabelle liest. Wenn zum Beispiel die Zelle in Spalte 3, Reihe 6 eine Tabelle mit 6 Spalten und 5 Reihen enthält, dann werden all diese Zellen vor Spalte 4, Reihe 6 der ursprünglichen (äußeren) Tabelle gelesen . Das kann dazu führen, dass die bedeutungstragende Reihenfolge, die durch die visuelle Darstellung vermittelt wird, möglicherweise nicht wahrnehmbar ist, wenn der Inhalt von einem Screenreader gesprochen wird.
Eine Anzeige benutzt die visuelle Positionierung geschickt, aber die Bedeutung wird verändert, wenn dies linearisiert wird.
Code-Beispiel:
<table>
<tr>
<td ><img src="logo.gif" alt="XYZ mountaineering"></td>
<td rowspan="2" valign="bottom">top!</td>
</tr>
<tr>
<td>XYZ gets you to the</td>
</tr>
</table>Die Lesereihenfolge dieses Beispiels wäre:
XYZ mountaineering top!
XYZ gets you to the
Eine Webseite einer Museumsausstellung positioniert eine Navigationsleiste, die eine lange Liste mit Links enthält, auf der linken Seite der Seite. Rechts neben der Navigationsleiste ist eine Ansicht eines der Bilder aus der Ausstellung. Rechts neben dem Bild ist die Sorte von „Anschlag“-Text, den Sie an der Wand neben dem Objekt sehen würden, wenn Sie im Museum wären. Unterhalb des Textes ist eine Überschrift die „Beschreibung“ lautet und unterhalb der Überschrift ist eine Beschreibung des Bildes. Das Bild, der angeschlagene Text, die Überschrift der Beschreibung und der Text der Beschreibung bilden eine bedeutungstragende Abfolge.
Eine Layout-Tabelle wird benutzt, um die Elemente der Seite zu positionieren. Die Links in der Navigationsleiste sind in unterschiedliche Zellen in der äußerst linken Spalte aufgeteilt.
Code-Beispiel:
<table>
<tr>
<td><a href="#">Link 1</a></td>
<td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
<td rowspan="6"><img src="placard.png" alt="Placard text"></td>
</tr>
<tr>
<td><a href="#">Link 2</a></td>
</tr>
<tr>
<td><a href="#">Link 3</a></td>
</tr>
<tr>
<td><a href="#">Link 4</a></td>
</tr>
<tr>
<td><a href="#">Link 5</a></td>
</tr>
<tr>
<td><a href="#">Link 6</a></td>
</tr>
<tr>
<td><a href="#">Link 7</a></td>
<td rowspan="2"><h2>Image Heading</h2></td>
</tr>
<tr>
<td><a href="#">Link 8</a></td>
</tr>
<tr>
<td><a href="#">Link 9</a></td>
<td rowspan="12">Description of the image</td>
</tr>
<tr>
<td><a href="#">Link 10</a></td>
</tr>
...
<tr>
<td><a href="#">Link 20</a></td>
</tr>
</table>Die Lesereihenfolge dieses Beispiels wäre:
Link 1
Image
Placard Text
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Image Heading
Link 8
Link 9
Link 10
...
Link 20
Da die Links der Navigationsleiste mit dem Inhalt, der das Bild beschreibt, verzahnt sind, können Screenreader den Inhalt nicht in einer bedeutungstragenden Reihenfolge, die mit der visuell präsentierten Reihenfolge übereinstimmt, präsentieren.
Es gibt für diese Technik keine Ressourcen.
Linearisieren Sie den Inhalt in einer der folgenden Art und Weise:
Stellen Sie den Inhalt in der Quelltext-Reihenfolge dar
Entfernen Sie das Tabellen-Markup um den Inhalt herum
Prüfen Sie, ob die lineare Lesereihenfolge irgendeiner bedeutungstragenden Reihenfolge, die durch die Präsentation vermittelt wird, entspricht.
Wenn Test #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Techniken, die durch Skript gesteuertes Blinken des Inhalt unterstützen.
Dieser Fehler bezieht sich auf:
Scripts können benutzt werden, um Inhalt zum Blinken zu bringen, indem man die Sichtbarkeit des Inhalts in regelmäßigen Intervallen an- und ausschaltet. Es ist ein Fehler, wenn das Script keinen Mechanismus enthält, um das Blinken nach 5 Sekunden oder früher anzuhalten. Siehe SCR22: Benutzung von Scripts, um das Blinken zu steuern und in 5 Sekunden oder weniger zu beenden (Scripting) für Informationen dazu, wie man die Technik modifiziert, um das Blinken zu beenden.
Das folgende Beispiel benutzt Script, um Inhalt blinken zu lassen, aber das Blinken geht auf unbestimmte Zeit weiter statt nach fünf Sekunden aufzuhören.
Code-Beispiel:
...
<script type="text/javascript">
<!--
// blink "on" state
function show()
{
if (document.getElementById)
document.getElementById("blink1").style.visibility = "visible";
settime-out("hide()", 450);
}
// blink "off" state
function hide()
{
if (document.getElementById)
document.getElementById("blink1").style.visibility = "hidden";
settime-out("show()", 450);
}
// kick it off
show();
//-->
</script>
...
<span id="blink1">This content will blink</span>Für jedes Instanz von blinkendem Inhalt:
Stellen Sie fest, ob das Blinken in 5 Sekunden oder weniger aufhört.
Wenn #1 falsch ist, dann scheitert der Inhalt am Erfolgskriterium.
Findet Anwendung, wenn Scripting benutzt wird, um neue Fenster zu öffnen.
Dieser Fehler bezieht sich auf:
Einige Websites öffnen ein neues Fenster, wenn eine Seite geladen wird, um ein Produkt oder eine Dienstleistung zu bewerben. Das Ziel dieser Technik ist es sicherzustellen, dass Seiten die Benutzer nicht desorientieren, indem ein oder mehrere neue Fenster geöffnet werden, die automatisch den Fokus erhalten, sobald eine Seite geladen wird.
Anmerkung: Es gibt verschiedene Methoden, durch die dieser Fehler ausgelöst werden kann. Zwei gängige Beispiele, die in verschiedenen Versionen von Benutzeragenten unterschiedlich unterstützt werden, sind unten als Beispiele aufgeführt.
Das folgende Beispiel wird üblicherweise in HTML 4.01 benutzt, um neue Fenster zu öffnen, wenn Seiten geladen werden.
Code-Beispiel:
window.onload = showAdvertisement;
function showAdvertisement()
{
window.open('advert.html', '_blank', 'height=200,width=150');
}Das folgende Beispiel wird üblicherweise in XHTML benutzt, um neue Fenster zu öffnen, wenn Seiten geladen werden.
Code-Beispiel:
if (window.addEventListener) {
window.addEventListener("load", showAdvertisement, true);
}
if (window.attachEvent) {
window.attachEvent("onload", showAdvertisement);
}
function showAdvertisement()
{
window.open('noscript.html', '_blank', 'height=200,width=150');
}Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Laden Sie eine neue Seite
Prüfen Sie, ob ein neues Fenster durch das Laden der neuen Seite geöffnet wurde
Prüfen Sie, ob das neue Fenster automatisch den Fokus erhält
Wenn Schritt 2 und Schritt wahr sind, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
Techniken, die Event-Handler haben, die charakteristisch für Zeigegeräte sind.
Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken
Keine aufgeführt
Dieser Fehler bezieht sich auf:
Wenn für Zeigegeräte charakteristische Event-Handler die einzigen zur Verfügung stehenden Mechanismen sind, um eine Funktion des Inhalts aufzurufen, dann sind sowohl Benutzer ohne Sehvermögen (die solche Geräte, wie beispielsweise eine Maus, die eine Auge-Hand-Koordination erfordert, nicht benutzen können) als auch Benutzer, die alternative Tastaturen oder Eingabegeräte, die als Tastatur-Emulatoren fungieren, benutzen müssen, nicht in der Lage, auf die Funktion des Inhalts zuzugreifen.
Das folgende Beispiel ist das eines Bildes, das auf einen Mausklick reagiert, um zu einer anderen Seite zu gehen. Dies ist ein Fehler, weil die Tastatur nicht benutzt werden kann, um zur nächsten Seite zu gehen. <p><img onmousedown="nextPage();" src="nextarrow.gif" alt="Go to next page"></p>
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob für Zeigegeräte charakteristische Event-Handler die einzige Möglichkeit sind, um Scripting-Funktionen aufzurufen.
Wenn Sie irgendwelche finden, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
Gilt für alle Inhalte, die Script unterstützen.
Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken
Keine aufgeführt
Dieser Fehler bezieht sich auf:
Von Inhalt, der normalerweise den Fokus erhält, wenn auf den Inhalt per Tastatur zugegriffen wird, kann der Fokus per Scripting entfernt werden. Dies wird manchmal gemacht, wenn der Designer den Fokus-Indikator des Systems als unansehnlich erachtet. Der Fokus-Indikator des Systems ist allerdings ein wichtiger Bestandteil der Barrierefreiheit für Tastaturbenutzer. Darüber hinaus entfernt diese Methode den Fokus komplett, was bedeutet, dass auf den Inhalt nur noch mit einem Zeigegerät, wie beispielsweise einer Maus, zugegriffen werden kann.
Code-Beispiel:
<input type="submit" onFocus="this.blur();"> Code-Beispiel:
<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a> Code-Beispiel:
<a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a> Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Benutzen Sie die Tastatur um nachzuprüfen, ob Sie zu allen interaktiven Elementen gelangen können, indem Sie die Tastatur benutzen.
Prüfen Sie, ob der Fokus, wenn er auf jedem Element positioniert ist, dort bleibt, bis der Benutzer ihn bewegt.
Wenn #2 falsch ist, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
Jede server-seitige Scripting-Sprache
Inhalt erfüllt nicht die Erwartungen im Erfolgskriterium für erlaubte Zeitlimits.
Dieser Fehler bezieht sich auf:
Der Refresh-header ist nicht in HTTP/1.1 oder HTTP/1.0 definiert, wird aber verbreitet von Browsern unterstützt (getestet in Firefox 1.0 und IE 6 unter Windows).
Server-seitige Scripting-Sprachen ermöglichen es Entwicklern, den Nicht-Standard HTTP-header „Refresh“ mit einem Zeitlimit (in Sekunden) einzustellen und mit einem URI, zu dem der Browser nach dem festgelegten Zeitlimit umgeleitet wird. Wenn das Zeitintervall zu kurz ist, haben blinde Menschen nicht genügend Zeit, ihren Screenreader die Seite lesen zu lassen, bevor die Seite unerwartet aktualisiert wird und das führt dazu, dass der Screenreader oben mit dem Lesen beginnt. Sehende Benutzer können möglicherweise ebenfalls durch die unerwartete Aktualisierung orientierungslos werden.
Der HTTP-header, der festgelegt wird, lautet Refresh: {time in seconds}; url={URI of new location}. Es ist auch möglich, den URI wegzulassen und eine sich periodisch aktualisierende Seite zu erhalten, was zu den gleichen Problemen führt. Der HTTP-header, der festgelegt wird, lautet Refresh: {time in seconds}.
Das folgende Beispiel ist ein Fehler, da eine zeitlich festgelegte server-seitige Umleitung in Java Servlets oder JavaServer Pages (JSP) implementiert wird.
Code-Beispiel:
public void doGet (HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
response.setHeader("Refresh", "10; URL=TargetPage.html");
out.println("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
out.println("<html><head><title>Redirect</title></head><body>");
out.println("<p>This page will redirect you in 10 seconds.</p>");
out.println("</body></html>");
}Das folgende Beispiel ist ein Fehler, da eine zeitlich festgelegte server-seitige Umleitung in Active Server Pages (ASP) mit VBScript implementiert wird.
Code-Beispiel:
<% @Language = "VBScript" %>
<% option explicit
Response.Clear
Response.AddHeader "Refresh", "5; URL=TargetPage.htm"
%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
…
<!--HTML code for content that is shown before the redirect is triggered-->
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Wenn eine Webseite gerendert wird, prüfen Sie, ob diese einen nach einer bestimmten Zeit automatisch zu einer anderen Seite umleitet, ohne dass der Benutzer irgendeine Handlung durchführt.
Wenn eine solche Umleitung gefunden wird, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
HTML und XHTML mit Scripting.
Dieser Fehler bezieht sich auf:
Dieser Fehler zeigt, wie die Benutzung von generischen HTML-Elementen zur Erstellung von Steuerelementen der Benutzerschnittstelle dazu führen kann, dass die Steuerelemente für assistierende Techniken unzugänglich sind. Assistierende Techniken sind darauf angewiesen, Kenntnis über die Rolle und den aktuellen Status einer Komponente zu haben, um diese Information an den Benutzer weiterzugeben. Viele HTML-Elemente haben gut definierte rollen, wie beispielsweise Links, Schaltflächen, Textfelder usw. Generische Elemente wie beispielsweise div und span haben keinerlei vorgegebenen Rollen. Wenn diese generischen Elemente benutzt werden, um in HTML Steuerelemente der Benutzerschnittstelle zu erstellen, dann ist es möglich, dass die assistierende Technik nicht die notwendigen Informationen hat, um das Steuerelement zu beschreiben und damit zu interagieren.
Lesen Sie unten im Abschnitt Ressourcen etwas über Links zu Spezifikationen, die Mechanismen beschreiben, um die notwendigen Informationen zu Rolle und Status zur Verfügung zu stellen, um komplett barrierefreie Steuerelemente der Benutzerschnittstelle zu erstellen.
Das folgende Beispiel ist ein Fehler, weil es ein Kontrollkästchen erstellt, indem span und ein Bild benutzt wird.
Code-Beispiel:
<p>
<span onclick="toggleCheckbox('chkbox')">
<img src="unchecked.gif" id="chkbox" alt=""> Include Signature
</span>
</p>Hier ist der Scripting-Code, der die Bildquelle ändert, wenn man mit der Maus auf span klickt.
Code-Beispiel:
var CHECKED = "check.gif";
var UNCHECKED = "unchecked.gif";
function toggleCheckbox(imgId) {
var theImg = document.getElementById(imgId);
if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) {
theImg.src = UNCHECKED;
// additional code to implement unchecked action
}
else {
theImg.src = CHECKED;
// additional code to implement checked action
}
} Ein auf diese Art erstelltes Kontrollkästchen wird mit assistierenden Techniken nicht funktionieren, da es keine Informationen gibt, die dieses als Kontrollkästchen identifizieren. Darüber hinaus ist dieses Beispiel auch nicht von der Tastatur aus bedienbar und würde an Richtlinie 2.1 scheitern.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Durchsuchen Sie den Quellcode nach Elementen, denen Event-Handler innerhalb des Markups oder via Scripting zugewiesen wurden.
Wenn diese Elemente als Steuerelemente der Benutzerschnittstelle fungieren, prüfen Sie, ob die Rolle des Steuerelements definiert wurde.
Wenn Tests #2 falsch ist und das erstellte Steuerelement der Benutzerschnittstelle keine Information zur Rolle hat, dann trifft diese Fehlersituation zu.
Allgemein
Dieser Fehler bezieht sich auf:
Dieses Dokument beschreibt einen Fehler der auftritt, wenn ein neues Fenster für einen anderen Zweck als eine Fehlermeldung geöffnet wird als Antwort darauf, dass ein Benutzer ein Textfeld ausfüllt.
Dies ist ein unzulässiges Beispiel, das einen Fehler zeigt: Ein Benutzer trägt seine Postanschrift ein. Wenn er seine Postleitzahl eingibt, wird ein neues Fenster geöffnet, das Werbeanzeigen für Dienstleistungen, die es in seiner Stadt gibt, enthält.
Dieses Beispiel ist zulässig: Ein Benutzer trägt seine Postanschrift in ein Formular ein. Wenn er seine Postleitzahl einträgt, dann läuft ein Script zur Überprüfung, ob es sich um eine gültige Postleitzahl handelt. Wenn der Wert nicht gültig ist, dann öffnet sich ein Fenster mit Anweisungen dazu, wie man das Feld ausfüllt.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Finden Sie alle Texteingabefelder in den Formularen
Ändern Sie den Wert in jedem Formularfeld
Prüfen Sie, ob sich neue Fenster öffnen
Prüfen Sie bei jedem neuen Fenster, das sich öffnet, ob es eine Fehlermeldung enthält und eine Schaltfläche, die das Fenster schließt und so den Fokus zurück auf das auslösende Formularelement setzt.
Wenn #3 wahr und #4 falsch ist, dann findet die Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium.
Allgemein
Dieser Fehler bezieht sich auf:
Dieses Dokument beschreibt einen Fehler, der auftritt, wenn der Inhalt, der das gesamte Ansichtsfenster des Benutzers ausfüllt, automatisch aktualisiert wird und der Inhalt keine Optionen enthält, um dieses Verhalten zu deaktivieren.
Eine Nachrichten-Site aktualisiert sich selber automatisch um sicherzustellen, dass sie die neuesten Schlagzeilen enthält. Es gibt keine Option, um dieses Verhalten zu deaktivieren.
Eine Diashow füllt das gesamte Ansichtsfenster aus und geht automatisch zum nächsten Dia weiter. Es gibt keine Stop-Schaltfläche.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
(derzeit keine aufgelistet)
Öffnen Sie den Inhalt
Lassen Sie den Inhalt für 24 Stunden geöffnet
Prüfen Sie, ob sich der Inhalt geändert hat
Bestätigen Sie, dass der Inhalt keine Einstellungen enthält, um automatische Änderungen zu deaktivieren
Wenn sowohl 3 als auch 4 wahr sind, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Gilt für das Document Object Model (DOM) für XML.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es sicherzustellen, dass Webseiten beständig von Benutzeragenten einschließlich assistierender Technik interpretiert werden können. Wenn bestimmte Beziehungen auf einer Webseite zweideutig sind, dann könnten unterschiedliche Benutzeragenten einschließlich assistierender Techniken ihren Benutzern unterschiedliche Informationen anzeigen. Es kann zum Beispiel sein, dass Benutzern von assistierenden Techniken andere Informationen präsentiert werden als Benutzern anderer etablierter Benutzeragenten. Einige Elemente und Attribute in Auszeichnungssprachen müssen einzigartige Werte haben und wenn diese Anforderung nicht eingehalten wird, kann das Ergebnis unregelmäßig oder nicht eindeutig auflösbarer Inhalt sein.
Ein id-Attribut-Wert, der nicht einmalig ist.
Ein SVG-Dokument benutzt id-Attribute auf title-Elementen (für alternativen Text), um diese an anderen Stellen im Dokument wiederverwenden zu können. Eines der title-Elemente hat allerdings eine id, die auch an einer anderen Stelle im Dokument benutzt wird, also ist das Dokument nicht eindeutig.
Ein DAISY-Dokument benutzt das imgref-Attribut auf dem caption-Element, um Untertitel mit Bildern zu verbinden. Der Wert des imgref-Attributs bezieht sich allerdings nicht auf das id-Attribut des img-Elements, zu dem es gehört, also kann der Benutzeragent nicht den Untertitel für jenes Bild finden.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
(derzeit keine aufgelistet)
Prüfen Sie, ob alle id-Werte innerhalb des Dokumentes (wie durch das Schema definiert) einmalig sind.
Prüfen Sie, ob Elemente oder Attribute, die auf einmalige Identifier innerhalb des gleichen Dokumentes Bezug nehmen, einen dementsprechenden id-Wert haben.
Beachten Sie, dass sich dieses bei XML-Document-Types, die durch eine DTD definiert sind, auf Attribute des Typs ID, IDREF oder IDREFS bezieht. Bei XML-Document-Types, die durch ein W3C XML-Schema definiert sind, bezieht sich dies auf Elemente oder Attribute des Typs ID, IDREF oder IDREFS. (Aus Kompatibilitätsgründen sollten die Typen ID, IDREF und IDREFS nur auf Attributen benutzt werden, aber ihre Benutzung bei Elementen ist möglich gemäß XML Schema Part 2: Datatypes Second Edition.) Für andere Schema-Sprachen prüfen Sie die entsprechenden Mechanismen zur Spezifizierung von IDs und Hinweise auf IDs.
Wenn #1 oder #2 falsch sind, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Dies beschreibt eine Fehlersituation, wenn sich der Kontext, der benötigt wird, um einen Linkzweck zu verstehen, in Inhalt befindet, bei dem es sich nicht um einen durch Software bestimmten Link-Kontext handelt. Wenn der Kontext für den Link nicht im gleichen Satz, Absatz, Listenelement oder der gleichen Tabellenzelle wie der Link ist, dann wird der Benutzer nicht mit Leichtigkeit in der Lage sein herauszufinden, wohin der Link führt. Wenn der Benutzer den Link verlassen muss, um nach dem Kontext zu suchen, dann handelt es sich bei dem Kontext nicht um durch Software bestimmten Link-Kontext und diese Fehlersituation tritt auf.
Ein Nachrichten-Service listet die ersten paar Sätze eines Artikels in einem Absatz auf. Der nächste Absatz enthält den Link „Lesen Sie mehr...“. Da der Link nicht im gleichen Absatz wie der Anschmecker-Satz ist, kann der Benutzer nicht leicht erkennen, über was der Link ihn mehr lesen lassen wird.
Code-Beispiel:
<p>A British businessman has racked up 2 million flyer miles and plans to
travel on the world's first commercial tourism flights to space.</p>
<p><a href="ff.html">Read More...</a></p>Eine Audio-Site stellt Links dahin bereit, wo man deren Player herunterladen kann. Die Informationen dazu, was durch den Link heruntergeladen wird, sind in der vorhergehenden Reihe der Layout-Tabelle; dies ist kein durch Software bestimmter Kontext für den Link.
Code-Beispiel:
<table>
<tr>
<td>Play music from your browser</td>
</tr>
<tr>
<td>
<a href="http://www.example.com/download.htm">
<img src="download.jpg" width="165" height="32" alt="Download now"></a>
</td>
</tr>
</table>In HTML und XHTML stellen Definitionslisten eine programmtechnische Verbindung zwischen dem Begriff und seiner Definition bereit. Also könnte theoretisch ein Link, der in einer Definition bereitgestellt wird, den Definitionsbegriff als seinen Kontext benutzen. Die Unterstützung für Definitionslisten ist jedoch ausgesprochen schlecht und es gäbe für Benutzer heutiger assistierender Techniken keine Möglichkeit, den Kontext durch die alleinige Benutzung einer Definitionsliste zu erkennen. Definitionslisten sind ein nützlicher Mechanismus, um assoziative Beziehungen bereitzustellen, können aber zum jetzigen Zeitpunkt nicht als ausreichend für Erfolgskriterium 2.4.2 betrachtet werden.
Code-Beispiel:
<dl>
<dt>Harry Potter and the Chamber of Secrets</dt>
<dd>Story of a boy with magical powers who has to face Lord Voldemort.</dd>
<dd><a href="potter.php?id=123">Buy now</a></dd>
<dt>Harry Potter and the Goblet of Fire</dt>
<dd>Harry finds himself selected as an underaged competitor in a dangerous multi-wizardry school competition.</dd>
<dd><a href="potter.php?id=124">Buy now</a></dd>
<dt>Harry Potter and the Prisoner of Azkaban</dt>
<dd>
Something wicked this way comes. It's Harry's third year at Hogwarts;
not only does he have a new "Defense Against the Dark Arts" teacher,
but there is also trouble brewing. Convicted murderer Sirius Black has
escaped the Wizards' Prison and is coming after Harry.
</dd>
<dd><a href="potter.php?id=125">Buy now</a></dd>
</dl> Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Machen Sie Inhalt ausfindig, der benötigt wird um zu verstehen, wie der Linktext den Zweck des Links beschreibt.
Prüfen Sie, ob der Inhalt im gleichen Satz, Absatz, Listenelement oder der gleichen Tabellenzelle enthalten ist oder ob er in der vorhergehenden Überschrift ist.
Wenn Test 2 falsch ist, dann scheitert der Inhalt am Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Dies beschreibt eine Fehlersituation für Textalternativen auf Bildern. Wenn es kein alt-Attribut gibt, dann sind assistierende Techniken nicht dazu in der Lage, das Bild zu identifizieren oder dem Benutzer dessen Zweck zu vermitteln.
Es ist möglich, dass einige assistierende Techniken versuchen, den fehlenden alt-Text zu kompensieren, indem sie den Dateinamen des Bildes lesen. Aber es ist aus vielerlei Gründen nicht ausreichend, sich einfach auf den Dateinamen zu verlassen. So kann es zum Beispiel sein, dass Dateinamen nicht deskriptiv sind (z.B. images/nav01.gif) und Technik-Spezifikationen verlangen keine deskriptiven Dateinamen. Einige assistierende Techniken lesen möglicherweise den Dateinamen nicht, wenn der alt-Text fehlt.
Im Codebeispiel unten würde die Person, die einen Screenreader benutzt, nicht den Zweck des Bildes kennen.
Code-Beispiel:
<img src="../images/animal.jpg" />Es gibt für diese Technik keine Ressourcen.
Identifizieren Sie alle img-, area- und input-Elemente des Typs „image“
Prüfen Sie, ob das alt-Attribut für diese Elemente existiert.
Wenn Test #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Gilt für alle Techniken.
Dieser Fehler bezieht sich auf:
Dies beschreibt eine Fehlersituation für alle Techniken, die Navigationsmechanismen beinhalten, die auf mehreren Webseiten innerhalb eines Satzes an Webseiten (Erfolgskriterium 3.2.3) wiederholt werden. Wenn der Mechanismus die Reihenfolge der Links auf zwei oder mehr Seiten in einer anderen Reihenfolge darstellt, dann wird dieser Fehler ausgelöst.
Beispiele eines Navigationsmechanismus, der Links in einer unterschiedlichen Reihenfolge anzeigt.
Menü Seite 1
Code-Beispiel:
<div id="menu">
<a href="Brazil.htm">Brazil</a><br />
<a href="Canada.htm">Canada</a><br />
<a href="Germany.htm">Germany</a><br />
<a href="Poland.htm">Poland</a>
</div>Menü Seite 2
Code-Beispiel:
<div id="menu">
<a href="Canada.htm">Canada</a><br />
<a href="Brazil.htm">Brazil</a><br />
<a href="Germany.htm">Germany</a><br />
<a href="Poland.htm">Poland</a>
</div>Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Prüfen Sie, ob ein Navigationsmechanismus auf mehr als einer Webseite benutzt wird.
Prüfen Sie die Standard-Darstellung des Navigationsmechanismus auf jeder Seite um zu sehen, ob die Liste der Links auf jeder Webseite in der gleichen relativen Reihenfolge ist.
Anmerkung: „Die gleiche relative Reihenfolge“ bedeutet, dass sekundäre Navigationselemente auf manchen Seiten zwischen den Linkelementen sein können. Sie können vorhanden sein, ohne dass Sie einen Einfluss auf das Ergebnis dieses Tests haben.
Wenn #1 wahr und #2 falsch ist, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es den Fehler zu beschreiben, der auftritt, wenn die lange Beschreibung für Nicht-Text-Inhalt nicht den gleichen Zweck erfüllt oder nicht die gleichen Informationen präsentiert wie der Nicht-Text-Inhalt. Dies kann Menschen, die den Nicht-Text-Inhalt nicht interpretieren können, Probleme bereiten, weil sie darauf angewiesen sind, dass die lange Beschreibung die notwendigen Informationen, die vom Nicht-Text-Inhalt vermittelt werden, bereitstellt. Ohne eine lange Beschreibung, welche die kompletten Informationen zur Verfügung stellt, ist es möglich, dass eine Person nicht in der Lage ist, die Webseite zu verstehen oder mit ihr zu interagieren.
Ein Bild, das die Veranstaltungsorte für Ereignisse bei den Olympischen Spielen anzeigt, dargestellt auf einer Straßenkarte. Das Bild enthält auch ein Symbol für jede Art Sportereignis, das an jedem Veranstaltungsort stattfindet. Die lange Beschreibung lautet: „Karte, auf welcher der Standort jedes olympischen Veranstaltungsortes angezeigt wird. Eislaufen, Hockey und Eisstockschießen finden in der Winter Park Ice Arena statt, Abfahrtslauf und Skispringen finden in Snow Mountain statt, Turnen findet in der JumpUp Arena statt, Langlauf findet im Kilometer Forest statt.“ Während diese Beschreibung zwar nützliche Informationen bereitstellt, vermittelt sie aber nicht die gleichen Informationen wie das Bild, weil sie keine speziellen Informationen zum Standort bereitstellt wie beispielsweise die Adresse oder die Entfernung jedes Standortes von irgendeinem Fixpunkt aus. Beachten Sie, dass lange Beschreibungen nicht immer in Prosa geschrieben sein müssen; manchmal können Informationen am besten in einer Tabelle oder einem anderen alternativen Format präsentiert werden.
Es gibt für diese Technik keine Ressourcen.
Für sämtlichen Nicht-Text-Inhalt, der eine lange Beschreibung benötigt
Prüfen Sie, ob die lange Beschreibung den gleichen Zweck erfüllt oder die gleichen Informationen präsentiert wie der Nicht-Text-Inhalt.
Wenn Schritt #1 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
HTML- und XHTML-Steuerelemente, die sichtbare Label benutzen
Dieser Fehler bezieht sich auf:
Dieser Fehler beschreibt ein Problem, das auftritt, wenn kein Label-Element benutzt wird, um ein Formular-Steuerelement explizit mit einem Label zu verbinden und wo das visuelle Design ein Label benutzt.
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 folgende Beispiel zeigt ein Formular, das Label für Formular-Steuerelemente visuell anzeigt, das label-Element aber nicht benutzt, um diese mit ihren Steuerelementen zu verbinden. Das unten stehende Code-Beispiel ist ein Fehler, weil assistierende Techniken möglicherweise nicht in der Lage sind zu bestimmen, welches label zu welchem Steuerelement gehört.
Code-Beispiel:
<form>
First name:
<input type="text" name="firstname">
<br />
Last name:
<input type="text" name="lastname">
<br />
I have a dog <input type="checkbox" name="pet" value="dog" />
I have a cat <input type="checkbox" name="pet" value="cat" />
</form>In den folgenden Code-Beispielen werden die Namen, die mit den Texteingabe-Steuerelementen verbunden sind, von assistierenden Techniken nicht korrekt bestimmt.
Code-Beispiel:
<form action="..." method="post">
<p>
<label>
First Name
<input type="text" name="firstname">
</label>
<label>
<input type="text" name="lastname">
Last Name
</label>
</p>
</form>Code-Beispiel:
<form action="..." method="post">
<p>
<label>First Name </label>
<input type="text" name="firstname">
<label>Last Name</label>
<input type="text" name="lastname">
</p>
</form>Die Such-Textbox hat im folgenden Beispiel keinen Namen. Der Name kann entweder mit dem title-Attribut oder mit einem per CSS versteckten label-Element bereitgestellt werden.
Code-Beispiel:
<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">Für alle input-Elemente des Typs radio, checkbox, text, file oder password, für alle textareas und für alle select-Elemente auf der Webseite:
Prüfen Sie, ob das visuelle Design ein Text-Label benutzt, das den Zweck des Steuerelements kennzeichnet
Prüfen Sie, ob ein label-Element den Text mit allen input-Elementen des Typs „radio“, „checkbox“, „text“, „file“ oder „password“, mit allen textareaElementen und mit allen select-Elementen verknüpft
Wenn Tests #1 wahr ist und Test #2 ist falsch, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium.
HTML, XHTML und CSS
Dieser Fehler bezieht sich auf:
Das Ziel dieser Fehlersituation ist es, ein Problem zu beschreiben, das auftritt, wenn die Änderung der Textgröße dazu führt, dass Text beschnitten, abgeschnitten oder undeutlich wird, so dass er dem Leser nicht länger zur Verfügung steht. Im Allgemeinen tritt dieser Fehler auf, wenn es für die Layout-Engine eines Benutzeragenten keine Möglichkeit gibt, alle Layout-Hinweise im HTML in der neuen Schriftgröße zu beachten. Einige der Möglichkeiten, wie dies auftreten kann, beinhalten:
Festsetzen des overflow-Property des umschließenden Elements auf hidden
Benutzung von absolut positioniertem Inhalt
Erstellung von Popups, die in der neuen Schriftgröße nicht groß genug für ihren Inhalt sind
Die Schriftgröße wird auf skalierbare Weise festgelegt, aber der Container wird auf eine feste Pixelgröße gesetzt. Ein grauer Rahmen zeigt die Grenzen des Textcontainers. Wenn der Text in der Größe verändert wird, dann schwappt der aus dem Container heraus und verdunkelt den nächsten Absatz.
Code-Beispiel:
<div style="font-size:100%; width:120px; height:100px; border: thin solid gray;>
Now is the time for all good men to come to the aid of their country.
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>Illustration von Beispiel 1:
Dieses Beispiel ist identisch zum letzten, mit der Ausnahme, dass der Container so eingestellt wurde, dass er den Text abschneidet. Der Text überlagert nicht länger den nächsten Absatz, sondern wird nun beschnitten. Dies ist auch ein Fehler.
Code-Beispiel:
<div style="font-size:100%; width:120px; height:100px; overflow: hidden; border: thin solid gray;>
Now is the time for all good men to come to the aid of their country.
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>Illustration von Beispiel 2:
(derzeit keine aufgelistet)
Vergrößern Sie die Textgröße um 200%.
Prüfen Sie, ob kein Text beschnitten, abgeschnitten oder undeutlich wird.
Wenn Test #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesen Erfolgskriterien.
Auszeichnungssprachen: HTML, XHTML und andere SGML- oder XML-basierte Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieses Fehlers ist es, Beispiele mit Markup-Fehlern in element-tags zu identifizieren, die dazu führen könnten, dass assistierende Techniken nicht in der Lage sind, ein zufriedenstellendes Modell der Seite zu generieren. Unterschiedliche Benutzeragenten können möglicherweise unterschiedliche Heuristiken implementieren, um sich von Fehlern zu erholen, was zu inkonsistenten Darstellungen der Seite zwischen Benutzeragenten führt.
Einige der gängigen Arten von Problemen mit start- und end-tags, die zu dieser Fehlersituation führen (dies ist allerdings keine vollständige Liste):
Opening- und Closing-Tags, bei denen die opening < und closing > Klammern fehlen.
Closing-Tag, bei dem der anfängliche / fehlt, um zu kennzeichnen, dass es sich hierbei um einen Closing-Tag handelt.
Attribut-Werte, die ein „opening quote“ aber kein „closing quote“ haben. Attribut-Werte müssen entweder komplett in Anführungszeichen stehen oder können in manchen Auszeichnungssprachen ohne Anführungszeichen stehen.
Fehlen von Leerschritten zwischen Attributen.
Attribut-Werte ohne Anführungszeichen, die Leerschritte im Wert haben.
Versäumnis, ein closing-element-tag für Elemente bereitzustellen, die keine empty-element-syntax akzeptieren.
Der folgende Code ist fehlerhaft, da beim opening-tag eine spitze Klammer fehlt und die beabsichtigte Begrenzung des Tags unklar ist.
Code-Beispiel:
<p This is a paragraph</p>Der folgende Code ist fehlerhaft, da beim closing-tag der Schrägstrich fehlt, so dass es aussieht, als wäre es in Wirklichkeit ein weiterer opening-tag.
Code-Beispiel:
<p>This is a paragraph<p>Der folgende Code ist fehlerhaft, da beim attribute-value die schließenden Anführungszeichen fehlen, wodurch die Begrenzung des attribute-value-Paars unklar wird.
Code-Beispiel:
<input title="name type="text">Der folgende Code ist fehlerhaft, da es zwischen den Attributen keine Leerschritte gibt, wodurch die Grenzen zwischen attribute-value-Paaren unklar werden.
Code-Beispiel:
<input title="name"type="text">Der folgende Code ist fehlerhaft, da ein Attribut-Value nicht in Anführungszeichen steht und Leerschritte enthält, wodurch die Grenzen des attribute-value-Paares unklar werden.
Code-Beispiel:
<input title=Enter name here type=text>Der folgende Code ist fehlerhaft, da der closing-tag des ersten Absatzes fehlt, wodurch es unklar wird, ob der zweite Absatz ein Kind oder ein „Sibling“ des ersten ist.
Code-Beispiel:
<p>This is a paragraph
<p>This is another paragraph</p>(derzeit keine aufgelistet)
Prüfen Sie den Quellcode von Seiten, die in Markup-Sprachen implementiert sind.
Prüfen Sie, ob irgendwelche opening-tags, closing-tags oder Attribute missgestaltet sind.
Wenn Test #2 wahr ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Jede Technik
Dieser Fehler bezieht sich auf:
Das Ziel dieser Fehlersituation ist es zu vermeiden, dass Zeichen, deren Glyphen ähnlich wie der beabsichtigte Buchstabe aussehen, statt des beabsichtigen Buchstabens benutzt werden. Das Unicode Character Set definiert tausende von Buchstaben und deckt so Dutzende von Schreibsystemen ab. Auch wenn die Glyphen für einige dieser Zeichen in der visuellen Darstellung vielleicht aussehen wie die Glyphen für andere Zeichen, so werden sie von Text-zu-Sprache-Werkzeugen dennoch nicht gleich verarbeitet.
Zum Beispiel sehen die Zeichen U+0063 und U+03F2 beide wie der Buchstabe „c“ aus, allerdings ist das erste aus dem westlichen Alphabet und das zweite aus dem griechischen Alphabet und wird in westlichen Sprachen nicht benutzt. Die Zeichen U+0033 und U+04E0 sehen beide wie die Zahl „3“ aus, das zweite ist aber in Wirklichkeit ein Buchstabe aus dem kyrillischen Alphabet.
Anmerkung: Dieser Fehler gilt auch bei der Benutzung von Zeichenentitäten. Es ist die Benutzung des falschen Zeichens, das wegen seiner Glyphen-Darstellung benutzt wird, das den Fehler ausmacht, nicht der Mechanismus, durch den das Zeichen implementiert wurde.
Das folgende Wort sieht in Browsern mit entsprechender Unterstützung von Schriftarten aus wie das englische Wort „cook“, besteht allerdings aus dem String U+03f2 U+043E U+03BF U+006B, von dem nur eines ein Buchstabe aus dem westlichen Alphabet ist. Dieses Wort wird nicht sinngebend verarbeitet und eine Textalternative wird nicht bereitgestellt.
Code-Beispiel:
ϲоοkDas folgende Beispiel sieht, wie das oben genannte, aus wie das englische Wort „cook“, wenn es in Browsern mit entsprechender Unterstützung von Schriftarten gerendert wird. In diesem Fall sind die Zeichen mit Zeichenentitäten implementiert, aber das Wort wird nach wie vor nicht sinngebend verarbeitet und eine Textalternative wird nicht bereitgestellt.
Code-Beispiel:
ϲоοkFunktionierendes Beispiel: „ϲоοk“
(derzeit keine aufgelistet)
Überprüfen Sie die Zeichen oder Zeichenentitäten, die benutzt werden, um Text darzustellen.
Wenn die benutzen Zeichen nicht den dazugehörigen Zeichen für die angezeigten Glyphen in der menschlichen Sprache des Inhalts entsprechen, dann werden gleich aussehende Glyphen benutzt.
Wenn gleich aussehende Glyphen benutzt werden und es keine Textalternative für jeden Textbereich, in dem gleich aussehende Glyphen benutzt werden, gibt, dann erfüllt der Inhalt nicht das Erfolgskriterium.
Jede Technik
Dieser Fehler bezieht sich auf:
Das Ziel dieser Fehlersituation ist es, die Benutzung von ASCII art zu vermeiden, wenn keine Textalternative zur Verfügung gestellt wird. Obwohl ASCII-Art als Zeichenfolge implementiert wird, so kommt seine Bedeutung von dem Mustern der Glyphen, das durch die visuelle Darstellung dieses Strings entsteht und nicht durch den Text selber. Daher handelt es sich bei ASCII-Art um Nicht-Text-Inhalt und eine Textalternative ist erforderlich. Textalternativen oder Links zu diesen sollten in der Nähe der ASCII-Art platziert werden, damit sie damit in Zusammenhang gebracht werden.
Bei der folgenden ASCII-Art fehlt eine Textalternative und daher erfüllt dies nicht Erfolgskriterium 1.1.1. Beachten Sie, dass dieses Fehlerbeispiel tatsächlich dazu führt, dass diese Seite das Erfolgskriterium nicht erfüllt, aber Sie können das Beispiel überspringen.
Code-Beispiel:
<pre>
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
Flash frequency (Hz)
</pre>(derzeit keine aufgelistet)
Greifen Sie auf eine Seite mit ASCII-Art zu.
Prüfen Sie für jedes Vorkommen von ASCII-Art, ob es dafür eine Textalternative gibt.
Wenn Test #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Jede Technik
Dieser Fehler bezieht sich auf:
Das Ziel dieser Fehlers ist es, Situationen zu vermeiden, in denen Menschen, die keine Farbunterschiede wahrnehmen können, keine Links erkennen können. Link-Unterstreichungen oder eine andere Form der nicht-farblichen visuellen Unterscheidung sind erforderlich. Während einige Links möglicherweise durch das Seitendesign und den Kontext visuell evident sind, wie zum Beispiel Navigationslinks, werden Links innerhalb des Textes oft nur durch ihre eigenen Darstellungsattribute visuell verstanden. Das Entfernen der Unterstreichung und das alleinige Belassen des Farbunterschieds für solche Links wäre ein Fehler, da es (neben der Farbe) keine anderen Hinweis darauf gibt, dass dies ein Link ist.
Anmerkung 1:Wenn der nicht-farbige Hinweis nur dann auftritt, wenn die Maus über dem Link schwebt oder wenn der Link den Fokus erhält, dann ist es immer noch ein Fehler.
Anmerkung 2:Wenn der Link in einer anderen Farbe und fett ist, dann wäre es kein Fehler, da die Fettschrift nicht von der Farbe abhängig ist.
Eine Webseite enthält eine große Anzahl an Links innerhalb des Textkörpers. Die Links sind so gestaltet, dass sie keine Unterstreichung haben und sind dem Textkörper farblich sehr ähnlich. Dies wäre ein Fehler, da die Benutzer nicht in der Lage wären, die Links vom Textkörper zu unterscheiden.
Der folgende Code ist ein Beispiel für das Entfernen der Unterstreichung von einem Link in einem Satz oder Absatz, ohne für einen anderen visuellen Hinweis neben der Farbe zu sorgen.
Code-Beispiel:
<head>
<style type="text/css">
p a:link {text-decoration: none}
p a:visited {text-decoration: none}
p a:active {text-decoration: none}
p a:hover {text-decoration: underline; color: red;}
</style>
</head>
<body>
<p>To find out more about the <a href="rain_in_spain.htm">rain in spain</a>there are many resources.</p>
</body>Anmerkung: Wenn der visuelle Hinweis nur „on hover“ (wie im oben genannten Beispiel) bereitgestellt wird, dann wäre dies nach wie vor ein Fehler.
(derzeit keine aufgelistet)
Überprüfen Sie, ob jeder Link innerhalb von Text, der Teil eines Satzes oder Absatzes auf der Seite ist (oder in einem anderen Bereich, in dem er mit nicht verlinktem Text verwechselt werden könnte), unterstrichen oder anderweitig visuell als Link erkennbar ist (d.h. fett, kursiv), ohne auf Farbe (Farbtönung) angewiesen zu sein.
Wenn Test #1 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Seiten, die synchronisierte Medienalternativen für Text bereitstellen.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Fehlers ist es, Situationen zu vermeiden, in denen synchronisierte Medienalternativen nicht mit dem Text beschriftet sind, für den sie Alternativen sind. Synchronisierte Medienalternativen stellen einen verbesserten Zugriff für Benutzer dar, für die synchronisierte Medien ein effektiveres Format als Text darstellen. Da es sich dabei um Alternativen für Text handelt, müssen sie nicht selber redundante Textalternativen haben. Sie müssen allerdings deutlich mit dem Text beschriftet sein, den sie ersetzen, so dass Benutzer sie finden können und so, dass Benutzer, die normalerweise Textalternativen für synchronisierte Medien erwarten, wissen, dass sie nicht danach suchen müssen.
Eine Seite mit Anweisungen dazu, wie man ein Steuerformular ausfüllt, stellt eine Prosa-Beschreibung der auszufüllenden Felder, der anzugebenden Daten usw. zur Verfügung. Darüber hinaus stellt eine synchronisierte Medienalternative gesprochene Anweisungen zur Verfügung, mit dem Video einer Person, die den im Audio besprochenen Abschnitt ausfüllt. Obwohl auf der Seite beide Versionen bereitgestellt werden, wird die synchronisierte Medienversion an anderen Stelle der Seite bereitgestellt und sie ist nicht deutlich mit dem Teil des Textes beschriftet, für den sie als Ersatz dient. Dadurch wird es für Benutzer, die auf den Text treffen, schwierig, diese zu finden und Benutzer, die auf das Video treffen, wissen nicht, wo seine Textalternative ist.
(derzeit keine aufgelistet)
Prüfen Sie Seiten, die synchronisierte Medienalternativen für Text bereitstellen.
Prüfen Sie, ob die synchronisierten Medien deutlich mit dem Text, für den sie die Alternative sind, beschriftet sind.
Wenn Test #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesen Erfolgskriterien.
Jede Technik
Dieser Fehler bezieht sich auf:
Das Ziel dieses Fehlers ist es, Situationen zu vermeiden, in denen synchronisierte Medienalternativen mehr Informationen bereitstellen als der Text, für den sie Alternativen sind, die aber nicht ihre eigenen Textalternativen bereitstellen, um Zugriff auf die zusätzlichen Informationen zu bieten. Synchronisierte Medienalternativen stellen einen verbesserten Zugriff für Benutzer dar, für die synchronisierte Medien ein effektiveres Format als Text darstellen. Da es sich dabei um Alternativen zu Text handelt, müssen sie selber keine redundanten Textalternativen in Form von Untertiteln, Audiodeskriptionen oder volllen Textalternativen haben. Wenn sie allerdings mehr Informationen bereitstellen als der Text, für den sie eine Alternative sind, dann sind sie nicht nur einfache Alternativen, sondern dann sind sie eigenständige synchronisierte Medieninhalte. In diesem Fall unterliegen sie den vollen Anforderungen von Erfolgskriterium 1.2.2 an die Bereitstellung von Untertiteln und von Erfolgskriterium 1.2. und 1.2.5..
(derzeit keine aufgelistet)
Überprüfen Sie synchronisierte Medienalternativen auf Untertitel.
Prüfen Sie, ob die synchronisierte Medienalternative nicht mehr Informationen bereitstellt, als auf der Seite in Textform angeboten wird.
Anmerkung: Synchronisierte Medienalternativen benutzen oft unterschiedliche Worte, um das, was auf der Seite ist, zu präsentieren, aber sie sollten keine neuen Informationen zum Thema der Seite geben.
Wenn Test #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesen Erfolgskriterien.
Gilt für alle Techniken.
Dieser Fehler bezieht sich auf:
Ein unerwarteter Wechsel des Kontextes ohne vorhergehende Instruktion aufgrund der Änderung von Einstellungen der Benutzerschnittstelle kann Benutzer manchmal verwirren. Benutzer müssen Instruktionen erhalten, bevor sie damit in Berührung kommen. Die Bereitstellung von Instruktionen auf eine Art und Weise, in der Benutzer möglicherweise nicht die Möglichkeit haben, diese nochmal durchzusehen, kann unter Umständen die Möglichkeit zur Verwirrung zurücklassen.
Fehlerbeispiele:
Die fehlende Bereitstellung von Instruktionen auf der Webseite vor dem Element der Benutzerschnittstelle, das die Änderung des Kontextes durch die Änderung der Einstellung verursacht.
Die fehlende Bereitstellung an einem Punkt des Prozesses vor dem Schritt, wo der Benutzer möglicherweise auf eine solche Änderung des Kontextes treffen könnte - im Falle eine mehrschrittigen Prozesses, in dem Benutzer verschiedene Schritte ausführen müssen, um das Element der Benutzerschnittstelle zu erreichen, an dem die Änderung der Einstellung zu einer Änderung des Kontextes führen würde.
Die fehlende Bereitstellung obligatorischer Anweisungen über die Änderung des Kontextes im Falle einer Intranet-Webanwendung.
Finden Sie Vorkommen von Kontextänderungen aufgrund von Änderungen der Einstellung der Benutzerschnittstelle
Finden Sie Material mit Anweisungen, das alle Benutzer durchsehen müssen, bevor sie auf die Änderung des Kontextes treffen.
Wenn #1 wahr und #2 falsch ist, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium.
Alle XML-basierten Auszeichnungssprachen, einschließlich HTML 4.01 und XHTML 1.x.
Dieser Fehler bezieht sich auf:
Dies beschreibt eine Fehlersituation, in der doppelte ID-Fehler dafür bekannt sind, Probleme bei assistierenden Techniken zu verursachen, wenn diese versuchen, mit dem Inhalt zu interagieren. Doppelte Werte vom Typ ID können für Benutzeragenten, die auf dieses Attribut angewiesen sind, um dem Benutzer Beziehungen zwischen verschiedenen Teilen des Inhalts genau zu vermitteln, problematisch sein. Zum Beispiel kann es sein, dass ein Screenreader ID-Werte benutzt, um den entsprechenden Inhalt der Überschrift für eine Datenzelle innerhalb einer Datentabelle zu identifizieren, oder um ein Eingabe-Steuerelement zu erkennen, für das ein vorgegebenes Label gilt. Wenn diese Werte nicht einmalig sind, dann ist der Screenreader nicht in der Lage, durch Software zu bestimmen, welche Überschriften mit der Datenzelle verbunden sind oder welches Steuerelement mit welchem Label oder Namen verknüpft ist.
Die Überprüfung, ob ID-Attribut-Werte innerhalb eines Dokumentes einmalig sind, kann durchgeführt werden, indem man das Dokument gegen sein Schema validiert, denn das Schema definiert, welche Attribute dokumentweit einmalige Identifier enthalten.
Anmerkung 1:In den meisten Auszeichnungssprachen sind ID-Werte gleich Attribute-Werte, z.B. in HTML und XHTML.
Anmerkung 2:XML-Dokumente, die nur das xml:id-Attribut als ID-Attribut benuzen: Die Syntaxanalyse des XML-Dokuments mit einem validierenden Parser, der die xml:id specification unterstützt, ist ausreichend.
Ein Benutzer nutzt einen Online-Validierungs-Service, um zu überprüfen, ob alle id-Attribut-Werte einmalig sind.
Ein Entwickler benutzt Funktionen in seinem Autorenwerkzeug um sicherzustellen, dass die id-Attribut-Werte einmalig sind.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
xml:id Version 1.0 - W3C Recommendation 9 September 2005.
Extensible Markup Language (XML) 1.0 (Fourth Edition): Validity constraint: ID
HTML 4.01: id attribute
Prüfen Sie, ob alle Werte des Typs ID auf der Webseite einmalig sind
Wenn Schritt #1 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Jede Technik
Dieser Fehler bezieht sich auf:
Hier wird eine Fehlersituation beschrieben, die auftritt, wenn der visuelle Standard-Indikator des Tastatur-Fokus im Benutzeragenten ausgeschaltet wird oder durch eine andere Formatierung auf der Seite unsichtbar gemacht wird, ohne dass ein vom Autor gelieferter visueller Fokus-Indikator bereitgestellt wird. Das Abschalten des Fokus-Indikators weist den Benutzeragenten an, den Fokus-Indikator nicht darzustellen. Eine andere Formatierung kann es erschweren, den Fokus-Indikator zu sehen, auch wenn er vorhanden ist, wie z.B. Konturen, die genauso aussehen wie die Fokus-Kontur oder dicke Rahmen, welche die gleiche Farbe haben wie der Fokus-Indikator, so dass man diesen dagegen nicht sehen kann.
Das folgende CSS-Beispiel entfernt den Standard-Fokus-Indikator, wodurch die Anforderung, dass ein sichtbarer Fokus-Indikator bereitgestellt werden muss, nicht erfüllt wird.
Code-Beispiel:
:focus {outline: none}Das folgende CSS-Beispiel erstellt eine Kontur um Links herum, die genauso aussieht, wie der Fokus-Indikator. Damit wird es für Benutzer unmöglich festzustellen, welcher den Fokus hat, auch wenn der Benutzeragent den Fokus-Indikator zeichnet.
Code-Beispiel:
a {outline: thin dotted black}Das folgende CSS-Beispiel erstellt einen Rahmen um Links herum, der nicht genügend Kontrast hat, damit der Fokus-Indikator gesehen werden kann, wenn er darüber gezeichnet wird. In diesem Fall wird der Fokus-Indikator gerade eben außerhalb des Rahmens gezeichnet, da aber beide schwarz sind und der Rahmen dicker ist als der Fokus-Indikator erfüllt dieser nicht mehr die Definition „sichtbar“.
Code-Beispiel:
a {border: medium solid black}Es gibt für diese Technik keine Ressourcen.
Setzen Sie den Fokus auf alle fokussierbaren Elemente auf einer Seite.
Prüfen Sie, ob der Fokus-Indikator sichtbar ist
#2 ist wahr.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Ob ein Bestandteil der Benutzerschnittstelle den Fokus hat, ist ein besonders wichtiger Aspekt seines Status. Viele Arten an assistierenden Techniken verlassen sich auf das Verfolgen des aktuellen Tastatur-Fokus. Screenreader bewegen die Aufmerksamkeit des Benutzers zu dem fokussierten Bestandteil der Benutzerschnittstelle und Vergrößerungssoftware ändert de Anzeige des Inhalts so, dass die fokussierte Komponente sichtbar ist. Wenn assistierende Techniken nicht benachrichtigt werden, wenn sich der Fokus zu einer neuen Komponente bewegt, dann wird der Benutzer verwirrt, wenn er versucht, mit der falschen Komponente zu interagieren.
Während Benutzeragenten diese Funktionalität bei Standard-Steuerelementen normalerweise verarbeiten, so sind hingegen selbst per Script erstellte Bestandteile der Benutzerschnittstelle verantwortlich für die Benutzung von Barrierefreiheits-APIs, um die Fokus-Informationen und Benachrichtigungen verfügbar zu machen.
Ein maßgeschneidertes Menü zeigt Menü-Elemente an, indem sie explizit gerendert, Maus- und Tasten-Events direkt verarbeitet werden und das aktuell ausgewählte Menü-Element hervorgehoben wird. Der Programmierer zeigt das Menü-Element, das den Fokus hat, nicht über das Barrierefreiheits-API, so dass assistierende Techniken nur feststellen können, dass der Fokus irgendwo im Menü ist, aber nicht bestimmen können, welches Menü-Element den Fokus hat.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie die Steuerelemente, indem Sie die Barrierefreiheitsprüfung für die Technik benutzen (oder, wenn diese nicht verfügbar ist, untersuchen Sie den Code oder testen Sie mit einer assistierenden Technik) um zu sehen, ob diese den Fokus-Status durch das Barrierefreiheits-API zeigen.
Prüfen Sie, indem Sie die Barrierefreiheitsprüfung für die Technik benutzen (oder, wenn diese nicht verfügbar ist, untersuchen Sie den Code oder testen Sie mit einer assistierenden Technik), ob assistierende Techniken benachrichtigt werden, wenn sich der Fokus von einem Steuerelement zum nächsten bewegt.
Wenn Test #1 oder Test #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
HTML, XHTML und CSS
Dieser Fehler bezieht sich auf:
Das Ziel dieser Fehlersituation ist es, ein Problem zu beschreiben, das auftritt, wenn das Ändern der Textgröße nicht dazu führt, dass text-basierte Formular-Steuerelemente entsprechend in der Größe geändert werden. Dies bedeutet, dass der Benutzer Schwierigkeiten dabei haben könnte, Text einzugeben und zu lesen, was er eingegeben hat, weil der Text nicht in der vom Benutzer benötigten Textgröße angezeigt wird.
Text-basierte Formular-Steuerelemente beinhalten sowohl Eingabefelder (Text und Textarea) als auch Schaltflächen.
Ein Nehmen-Sie-Kontakt-mit-uns-auf-Formular hat einige einleitende Informationen und dann Formular-Steuerelemente, damit Benutzer ihren Vornamen, Nachnamen, Telefonnummer und E-Mail-Adresse eingeben können. Die Überschrift, der einleitende Text und die Beschriftungen der Formular-Steuerelemente wurden auf skalierbare Art implementiert, die Formular-Steuerelemente selber aber nicht.
Die XHTML-Komponente:
Code-Beispiel:
<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />Die CSS-Komponente :
Code-Beispiel:
h1 { font-size: 2em; }
p, label { font-size: 1em; }
input {font-size: 12pt}Es gibt für diese Technik keine Ressourcen.
(derzeit keine aufgelistet)
Geben Sie Text in text-basierte Formular-Steuerelemente, die vom Benutzer eingegebenen Text erhalten, ein.
Vergrößern Sie die Textgröße um 200%.
Prüfen Sie, ob sich der Text in den text-basierten Formular-Steuerelementen um 200% vergrößert hat.
Wenn Test #3 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesen Erfolgskriterien.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Das Ziel dieser Technik ist es, den Fehler zu beschreiben, der auftritt, wenn ein Pflichtfeld oder ein Fehlerfeld nur durch Farbunterschiede gekennzeichnet wird, ohne alternative Möglichkeit, das Pflicht- oder Fehlerfeld zu identifizieren. Dies kann bei Menschen, die blind oder farbenblind sind, Probleme verursachen, da sie möglicherweise nicht in der Lage sind, die Farbunterschiede wahrzunehmen, die anzeigen, bei welchem Feld es sich um ein Pflichtfeld handelt oder welches Feld den Fehler verursacht.
Ein Benutzer füllt ein Online-Formular aus, und das Feld Telefonnummer ist ein Pflichtfeld. Um anzuzeigen, dass es sich bei dem Feld Telefonnummer um ein Pflichtfeld handelt, wird die Beschriftung „Telefonnummer“ in einer Farbe angezeigt, die sich von der für optionale Felder benutzten Farbe unterscheidet, ohne jede weitere Kennzeichnung, dass es sich bei „Telefonnummer“ um ein Pflichtfeld handelt. Ein blinder oder farbenblinder Benutzer kann möglicherweise nicht in der Lage sein zu erkennen, dass „Telefonnummer“ ein Pflichtfeld ist.
Ein Benutzer schickt ein Online-Formular ab und lässt ein Pflichtfeld leer, was zu einem Fehler führt. Das Formularfeld, das den Fehler verursacht hat, wird nur durch roten Text gekennzeichnet, ohne jede weitere nicht-farbliche Kennzeichnung, dass das Feld einen Fehler verursacht hat.
Anmerkung: In beiden Beispielen könnte die Farbe fehlerfrei benutzt werden, wenn sich der Text in seiner visuellen Darstellung ausreichend unterscheiden würde (z.B. fett oder in einer anderen Schriftart), so dass er leicht von dem ihn umgebenden Text unterschieden werden könnte, wenn die Farbe entfernt würde. Es wäre auch kein Fehler, wenn die ausgewählte Farbe einen ausreichenden Unterschied in der Luminanz (Helligkeit) im Vergleich zu dem anderen Text hätte, so dass man sie leicht als unterschiedlich erkennen würde, wenn man sie in schwarz-weiß sieht. In diesen Fällen würde die Information nicht nur in Farbe (Farbton) angezeigt, sondern auch entsprechend in „Darstellungsweise“ oder „Helligkeit“.
Für alle Pflicht- oder Fehlerfelder auf der Webseite, die durch die Benutzung von Farbunterschieden identifiziert werden:
Prüfen Sie, ob es eine nicht-farbige Möglichkeit gibt, um Pflicht- oder Fehlerfelder zu erkennen.
Wenn Schritt #1 falsch ist, dann gilt diese Fehlersituation und der Inhalt scheitert am Erfolgskriterium.
Jede Technik
Dieser Fehler bezieht sich auf:
Dieser Fehler stellt sicher, dass Menschen mit Seh- oder kognitiven Behinderungen Telefonnummer-Felder erkennen und verstehen, welche Informationen bereitgestellt werden müssen, um die Felder auszufüllen. Telefonnummern werden häufig auf festgelegte, markante Art formatiert und Autoren könnten der Ansicht sein, dass die reine Bereitstellung der visuellen Formatierung der Felder ausreichend ist, um diese zu identifizieren. Aber auch wenn alle Felder durch Software bestimmte Namen haben, muss auch ein Text-Label den Satz an Feldern als Telefonnummer kennzeichnen.
In den USA werden Telefonnummern in eine dreistellige Vorwahl, ein dreistelliges Präfix und eine vierstellige Nebenstelle unterteilt. Eine Webseite erstellt Texteingabefelder mit festgelegter Länge für die drei Teile der Telefonnummer, wobei das erste Feld von Klammern umgeben ist und das zweite und dritte Feld mit einem Bindestrich getrennt werden. Aufgrund dieser Formatierung erkennen einige Benutzer diese Felder als Telefonnummer. Es gibt allerdings kein Text-Label für die Telefonnummer auf der Webseite. Da kommt daher, dass das Label für jedes Feld der am nächsten stehende, vorhergehende Text ist, so dass die drei Felder entsprechend mit „(“, „)“ und „-“ beschriftet wären.
Prüfen Sie für jeden Satz an Telefonnummer-Feldern auf der Webseite, der eine einzige Telefonnummer darstellt, ob der Satz an Feldern mit einem sichtbaren Text-Label beschriftet ist, das in der Nähe der Telefonnummer-Felder positioniert ist.
Für jeden Satz an Telefonnummer-Feldern auf der Webseite, der eine einzige Telefonnummer darstellt, gibt es Anweisungen dazu, wir man die Felder ausfüllt.
Wenn sowohl Test #1 und Test #2 falsch sind, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Jede Technik
Dieser Fehler bezieht sich auf:
Dieser Fehler tritt auf, wenn Menschen mit geringem Sehvermögen nicht in der Lage sind, Text zu lesen, der über einem Hintergrundbild angezeigt wird. Wenn es zwischen dem Hintergrundbild und dem Text keinen ausreichenden Kontrast gibt, dann können Bestandteile des Hintergrundbildes mit dem Text verwechselt werden, was es schwierig macht, den Text genau zu lesen.
Um Erfolgskriterien 1.4.3 und 1.4.6 zu erfüllen, muss es einen ausreichenden Kontrast zwischen dem Text und seinem Hintergrund geben. Bei Bildern bedeutet dies, dass es einen ausreichenden Kontrast zwischen dem Text und den Teilen des Bildes, die dem Text am ähnlichsten sind und hinter dem Text liegen, geben müsste.
Schwarzer Text überlagert ein Bild mit schwarzen Linien. Die Linien kreuzen sich hinter den Buchstaben, wodurch die Buchstaben F wie der Buchstabe E aussehen usw.
Schwarzer Text überlagert ein Bild mit dunkelgrauen Bereichen. An allen Stellen, an denen der Text dunkelgraue Bereiche kreuzt, ist der Kontrast so schlecht, dass der Text nicht gelesen werden kann.
Schnelltest: Machen Sie zuerst einen Schnelltest um zu sehen, ob der Kontrast zwischen dem Text und dem Bereich des Bildes, der am dunkelsten (bei dunklem Text) oder am hellsten (bei hellem Text) ist, dem Kontrast, der gemäß dem Erfolgskriterium (1.4.3 oder 1.4.5) erforderlich ist, entspricht oder diesen übersteigt. Wenn der Kontrast den angegebenen Kontrast erfüllt oder übersteigt, dann gibt es keinen Fehler.
Wenn der Schnelltest falsch ist, dann prüfen Sie, ob der Hintergrund hinter jedem Buchstaben einen ausreichenden Kontrast zu dem Buchstaben hat.
Wenn der Schnelltest falsch ist und #2 falsch ist, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium.
HTML und XHTML
Dieser Fehler bezieht sich auf:
Dieser Fehler beschreibt eine gängige Situation, wo Links wie „Hier klicken“ oder „Mehr“ als anchor-Elemente benutzt werden und wo Sie den umgebenden Text haben müssen, um deren Zweck zu verstehen und wo es keinerlei Mechanismus gibt, um das Ziel aus sich selbst heraus deutlich zu machen, wie z.B. eine Schaltfläche, um den Linktext zu erweitern.
Viele blinde Menschen, die Screenreader benutzen, rufen eine Dialogbox auf, die eine Liste mit Links von der Seite enthält. Sie benutzen diese Liste um zu entscheiden, wohin sie gehen werden. Wenn aber viele der Links in dieser Liste einfach nur „Hier klicken“ oder „Mehr“ lauten, dann sind sie nicht in der Lage, die Screenreader-Funktion, bei der es sich um eine zentrale Navigationsstrategie handelt, zu benutzen. Daher ist ein Fehler bei 2.4.9, wenn keine Möglichkeit bereitgestellt wird, die es ihnen erlaubt, das Ziel aus dem Linktext alleine zu erkennen. Dies gilt ebenfalls für Menschen, die per Tab durch die Links gehen. Wenn alles, was sie hören, wenn sie per Tab durch das Dokument gehen, „Hier klicken, Hier klicken, Hier klicken usw.“ lautet, dann werden sie verwirrt.
Code-Beispiel:
<a href="file110.htm">Click here</a> for more information on the Rocky Mountains.Code-Beispiel:
<h2>News headlines</h2>
The middle east peace meetings have yielded fruitful dialogue.
<a href="r4300.htm">read more</a>Untersuchen Sie jeden Link auf der Seite.
Prüfen Sie um zu sehen, ob es nicht-deskriptiven Linktext wie „Hier klicken“ oder „Mehr“ gibt, dessen Zweck von dem umliegenden Text bestimmt werden kann, nicht aber vom Linktext alleine.
Prüfen Sie, ob es auf der Seite einen Mechanismus gibt, der alle nicht deskriptiven Links auf der Seite in deskriptive Links umwandelt.
Wenn Schritt #2 wahr ist UND #3 ist falsch, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Dies beschreibt die Fehlersituation, die sich ergibt, wenn eine Webseite einen Bestandteil einer Dialog- oder eine Menü-Schnittstelle öffnet, der auf eine Art und Weise auf der Seite eingebettet ist, die es für einen Tastaturbenutzer schwierig macht, ihn zu bedienen aufgrund seiner Position in der sequentiellen Navigationsreihenfolge. Wenn der Benutzer den auf der Seite eingebetteten Dialog oder das Menü öffnet, indem er eine Schaltfläche oder einen Link aktiviert, dann wird es seine nächste Handlung sein, mit dem Dialog oder dem Menü zu interagieren. Wenn sich der Dialog oder das Menü in der sequentiellen Navigationsreihenfolge nicht neben dem auslösenden Steuerelement befindet, dann ist es für den Tastaturbenutzer schwierig, den Dialog oder das Menü zu bedienen.
Wenn ein DHTML-Menü oder -Dialog aktiviert wird, wird es dynamisch erstellt, visuell in der Nähe des Auslösers positioniert und an das Ende des DOM angehängt. Da es an das Ende angehängt wird, befindet es sich am Ende der sequentiellen Navigationsreihenfolge. Der Benutzer muss per Tab durch den Rest der Webseite gehen, bevor er mit dem Dialog oder dem Menü interagieren kann.
Wenn ein DHTML-Menü ausgeblendet wird, dann wird es von der Webseite entfernt oder versteckt und der Fokus wird auf das Dokument gesetzt. Der Benutzer muss per Tab vom Beginn der Navigationssequenz bis hin zu dem Punkt gehen, von dem aus das Menü geöffnet wurde.
Für jedes auf der Webseite eingebettete Menü oder jeden eingebetteten Dialog, das oder der über ein auslösendes Steuerelement geöffnet wird:
Aktivieren Sie das auslösende Steuerelement per Tastatur.
Prüfen Sie, ob der Fokus im Menü oder Dialog ist.
Prüfen Sie, ob das Weiterrücken des Fokus in der sequentiellen Navigationsreihenfolge den Fokus auf das Menü oder den Dialog setzt.
Blenden Sie das Menü oder den Dialog aus.
Prüfen Sie, ob der Fokus auf dem auslösenden Steuerelement liegt.
Prüfen Sie, ob das Verschieben des Fokus rückwärts in der sequentiellen Navigationsreihenfolge den Fokus auf das auslösende Steuerelement setzt.
Wenn beide Punkte unter Schritt 1 falsch sind, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Wenn beide Punkte unter Schritt 2 falsch sind, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Allgemein
Dieser Fehler bezieht sich auf:
Dies beschreibt eine Fehlersituation bei Erfolgskriterium 4.1.2, wo einige oder alle Teile eines mehrteiligen Formularfeldes keine Namen haben. Oft gibt es ein Label für das mehrteilige Feld, das entweder durch Software mit dem ersten Teil oder gar nicht mit irgendwelchen Teilen verknüpft ist.
Anmerkung: Ein Name muss nicht zwingend sichtbar sein, ist aber für assistierende Techniken sichtbar.
Eine US-amerikanische Telefonnummer besteht aus einer dreistelligen Vorwahl, einem dreistelligen Präfix und einem vierstelligen Suffix. Diese sind typischerweise wie folgt formatiert ([area code]) [prefix]-[suffix], wie beispielsweise (206) 555-1212. Formulare, die nach einer Telefonnummer fragen, enthalten häufig 3 separate Felder, aber mit nur einem einzigen Label, wie beispielsweise:
Code-Beispiel:
Phone number:
(<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">Der Fehler tritt auf, wenn es nicht für jedes der 3 Felder einen Namen im Barrierefreiheits-API gibt. Ein Benutzer mit assistierender Technik erfährt diese als drei undefinierte Textfelder. Einige assistierende Techniken lesen die Zeichensetzung als Kennzeichnung für die Textfelder, was noch verwirrender sein kann. Im Falle einer US-amerikanischen Telefonnummer besehend aus drei Feldern würden einige assistierende Techniken die Felder „(“, „)“ und „-“ benennen, was nicht sehr hilfreich ist.
Die gleiche US-amerikanische Telefonnummer. In diesem Fall ist das Label nicht mit irgendeinem der Teile durch Software verknüpft. Telefonnummer:
Code-Beispiel:
(<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">Ein Benutzer mit assistierender Technik erfährt diese als drei undefinierte Textfelder.
Die gleiche US-amerikanische Telefonnummer. In diesem Fall ist das Label mit dem ersten Teil durch Software verknüpft.
Code-Beispiel:
<label for="area">Phone number:</label>
(<input id="area" type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">Ein Benutzer mit assistierender Technik erhält den Eindruck, dass das erste Feld für die gesamte Telefonnummer ist und erfährt das zweite und dritte Feld als undefinierte Textfelder.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Microsoft Active Accessibility 2.0 SDK. Includes Inspect32.exe and other MSAA tools.
Microsoft Internet Explorer Developer Toolbar. Allows examination of script-generated DOM in Microsoft Internet Explorer.
Firebug. Allows examination of script-generated DOM in Firefox.
Allgemeine Vorgehensweise:
Installieren Sie ein Werkzeug, das es Ihnen erlaubt, das Barrierefreiheits-API für Ihre Plattform anzusehen (siehe Abschnitt Ressourcen)
Finden Sie jedes Formular-Steuerelement
Prüfen Sie, ob das name-property für jedes Steuerelement eingetragen ist
Alternative Vorgehensweise für HTML und XHTML:
Finden Sie jedes input-, select- und textarea-Element im HTML-Quellcode
Prüfen sie, ob es auf dem Element ein title-Attribut gibt
Prüfen Sie, ob es ein verknüpftes label-Element gibt
Allgemeine Vorgehensweise:
Wenn Test #3 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Alternative Vorgehensweise für HTML und XHTML:
Wenn Tests #2 und #3 falsch sind, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Alle Techniken, die CSS unterstützen.
Dieser Fehler bezieht sich auf:
:before und :after werden nicht von IE7 und niedriger unterstützt
Die CSS Pseudo-Elemente :before und :after geben die Position von Inhalt vor und nach dem Inhalt des Dokumentenbaumes eines Elements an. Das content-Property gibt in Verbindung mit diesen Pseudo-Elementen an, was eingefügt wird. Bei Benutzern, die Formatierungsinformationen individuell anpassen oder ausschalten müssen, um Inhalte entsprechend ihrer Bedürfnisse anzusehen, kann es sein, dass assistierende Techniken nicht in der Lage sind, auf die Informationen zuzugreifen, die durch die Benutzung von CSS eingefügt werden. Daher ist es ein Fehler, diese Properties zu benutzen, um nicht-dekorativen Inhalt einzufügen.
Im folgenden Beispiel werden :before und :after benutzt, um den Wechsel des Sprechers anzuzeigen und um Anführungszeichen in ein Drehbuch einzufügen.
Das CSS enthält:
Code-Beispiel:
p.jim:before { content: "Jim: " }
p.mary:before { content: "Mary: " }
q:before { content: open-quote }
q:after { content: close-quote }Es wird in diesem Auszug benutzt:
Code-Beispiel:
<p class="jim">
<q>Do you think he's going to make it?</q>
</p>
<p class="mary">
<q>It's not looking good.</q>
</p>In diesem Beispiel wird :before benutzt, um Fakten von Meinungen zu unterscheiden.
Das CSS enthält:
Code-Beispiel:
p.fact:before { content: "Fact: "; font-weight: bold; }
p.opinion:before { content: "Opinion: "; font-weight: bold; }Es wird in diesem Auszug benutzt:
Code-Beispiel:
<p class="fact">
The defendant was at the scene of the crime when it occurred.
</p>
<p class="opinion">
The defendant committed the crime.
</p>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie alle Inhalte, die durch die Benutzung der :before und :after Pseudo-Elemente und das content-Property eingefügt wurden
Prüfen Sie nach, ob der Inhalt dekorativ ist.
Wenn der eingefügte Inhalt nicht dekorativ ist, prüfen Sie, ob die Informationen assistierenden Techniken bereitgestellt werden und ob diese auch verfügbar sind, wenn CSS abgeschaltet wird.
Wenn die Tests #2 oder #3 falsch sind, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesem Erfolgskriterium.
Alle Techniken.
Dieser Fehler bezieht sich auf:
Viele Menschen mit kognitiven Behinderungen haben große Probleme mit Text im Blocksatz (Text, der sowohl rechts als auch links ausgerichtet ist). Die Zwischenräume zwischen den Worten führen zu sogenannten „rivers of white“, welche die Seite hinunterlaufen, wodurch es für manche Menschen erschwert wird, den Text zu lesen. Dieser Fehler beschreibt Situationen, bei denen dieses verwirrende Text-Layout auftritt. Der beste Weg, um dieses Problem zu vermeiden, ist es, kein Text-Layout im Blocksatz zu erstellen (ausgerichtet an sowohl den linken als auch rechten Rändern).
Im folgenden Beispiel eines Fehlers wird das HTML align-Attribut benutzt, um Text im Blocksatz zu erstellen.
Code-Beispiel:
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus.
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.
</p>In diesem Beispiel eines Fehlers wird das CSS text-align-Property benutzt, um Text im Blocksatz zu erstellen.
Code-Beispiel:
...
p {text-align: justify}
...
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus.
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.</p>Öffnen Sie die Seite in einem gängigen Browser.
Überprüfen Sie, ob Inhalte nicht im Blocksatz ausgerichtet sind (sowohl links- als auch rechtsbündig ausgerichtet.
Wenn Testverfahren #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an der Erfüllung von Erfolgskriterium 1.4.8.
Inhalt, der Links enthält.
Dieser Fehler bezieht sich auf:
Verschiedene assistierende Techniken verwenden unterschiedliche Reparatur-Strategien, wenn sie es mit Links zu tun haben, denen einen Textalternative fehlt. Bei HTML kann es sein, dass sie, wenn vorhanden, das title-Attribut des anchor oder den Wert des src-Attributs des img-Elements benutzen.
Diese Fehlersituation tritt auf, wenn ein Link nur Nicht-Text-Inhalt enthält, wie z.B. ein Bild, und der Nicht-Text-Inhalt so implementiert wurde, dass er von assistierenden Techniken ignoriert werden kann. Da es sich bei einem Link um ein interaktives Steuerelement handelt, kann der Benutzer per Tab dorthin gehen und es aktivieren. Da es innerhalb des Links keinen Text-Inhalt gibt, der als Name benutzt werden kann, verwenden assistierende Techniken eine Vielzahl an Reparatur-Techniken, um irgendeinen Namen zu finden, den sie für den Link benutzen können.
Oft werden auf einer Seite sowohl Text als auch Bilder benutzt, um zu dem gleichen Ziel zu verlinken. Dies führt zu einem „Stotter“-Effekt, wenn zwei nahezu identische (zwei nahe beieinander liegende) Links den gleichen Namen haben und Autoren versuchen, die Redundanz zu entfernen, indem sie ein leeres alt-Attribut für das Bild bereitstellen. Dies macht das Problem leider oft schlimmer. H2: Kombination nebeneinander liegender Bild- und Textlinks für die gleiche Ressource (HTML) ist die empfohlene Herangehensweise, um die Anzahl an separaten Links und die unerwünschte Redundanz zu reduzieren.
Eine Such-Site gibt Suchergebnisse zurück, die sowohl einen Text- als auch einen Bild-Link zu der Treffer-Site beinhalten. Das Bild hat ein leeres alt-Attribut, da das Ergebnis bereits einen Link mit einer Textbeschreibung enthält. Der Screenreader ignoriert den Bild-Link allerdings nicht, sondern benutzt Heuristik, um irgendeinen Text zu finden, der den Zweck des Links beschreiben könnte. Der Screenreader könnte beispielsweise ansagen: „football dot gif Football Scorecard“.
Code-Beispiel:
<a href="scores.html">
<img src="football.gif" alt="" />
</a>
<a href="scores.html">
Football Scoreboard
</a>
}Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob der Link nur Nicht-Text-Inhalt enthält.
Prüfen Sie, ob der Nicht-ext-Inhalt so implementiert wurde, dass er von assistierenden Techniken ignoriert werden kann.
Wenn alle Tests wahr sind, dann trifft diese Fehlersituation zu und der Inhalt scheitert am Erfolgskriterium.