camindu GmbH

Benutzer von Bildschirmlesegeräten sind nicht in der Lage, den Zweck von Elementen zu erkennen, dierole="dialog"oderrole="alertdialog"die keinen zugänglichen Namen haben.

Die Verwendung desaria-hidden="true"Attribut für ein Element entfernt das Element und ALLE seine untergeordneten Knoten aus der Zugänglichkeits-API, wodurch es für Screenreader und andere Hilfstechnologien völlig unzugänglich wird. Aria-hidden darf nur mit äußerster Vorsicht verwendet werden, um sichtbar gerenderten Inhalt vor Hilfstechnologien zu verbergen, wenn der Akt des Verbergens dieses Inhalts dazu dient, die Erfahrung für Benutzer von Hilfstechnologien zu verbessern, indem redundante oder überflüssige Inhalte entfernt werden. Wenn aria-hidden verwendet wird, um sichtbare Inhalte vor Bildschirmlesern zu verbergen, muss die gleiche oder eine gleichwertige Bedeutung und Funktionalität für unterstützende Technologien verfügbar sein.

Anmerkung:Verwendung vonaria-hidden="false"auf Inhalte, die von einem Element abstammen, das mitaria-hidden="true"wird dieser Inhalt NICHT der Eingabehilfen-API zugänglich gemacht und ist für Bildschirmlesegeräte oder andere unterstützende Technologien nicht zugänglich.

Die Regel gilt für jedes Element mit einemaria-hidden="true"Attribut.

Durch Hinzufügen vonaria-hidden="true"zu einem Element stellen Inhaltsautoren sicher, dass assistive Technologien das Element ignorieren. Dies kann verwendet werden, um dekorative Teile einer Webseite auszublenden, wie z. B. Icon-Schriften, die nicht von assistiven Technologien gelesen werden sollen.

Ein fokussierbares Element mitaria-hidden="true"wird als Teil der Lesereihenfolge ignoriert, ist aber immer noch Teil der Fokusreihenfolge, so dass nicht klar ist, ob es sichtbar oder verborgen ist.

• https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

• https://www.w3.org/TR/wai-aria-1.1/#aria-hidden

• https://www.w3.org/TR/html/editing.html#can-be-focused

Diese neue Regel stellt sicher, dass jedes ARIA-Eingabefeld einen zugänglichen Namen hat. Zugängliche Namen müssen für die folgenden Eingabefeldrollen existieren:

• Combobox
• Listenfeld
• Suchfeld
• Schieber
• spinbutton
• Textfeld

Die Verwendung von ARIA-Attributen in Rollen, in denen sie verboten sind, kann dazu führen, dass wichtige Informationen nicht an Benutzer von Hilfstechnologien weitergegeben werden. Hilfstechnologien können auch versuchen, das Problem zu kompensieren, was zu einem inkonsistenten und verwirrenden Verhalten dieser Werkzeuge führt.

ARIA-Widget-Rollen erfordern zusätzliche Attribute, die den Zustand des Widgets beschreiben. Der Zustand des Widgets wird Screenreader-Benutzern nicht mitgeteilt, wenn ein erforderliches Attribut weggelassen wird.

Bestimmte Rollen fungieren als zusammengesetzte Widgets der Benutzeroberfläche. Als solche fungieren sie in der Regel als Container, die andere, enthaltene Widgets verwalten. Wenn ein Objekt von mehreren Vorfahren erbt und ein Vorfahre die Unterstützung für eine Eigenschaft angibt, während ein anderer Vorfahre angibt, dass die gleiche Eigenschaft erforderlich ist, wird die Eigenschaft für das ererbende Objekt erforderlich. In einigen Fällen reichen Standardwerte aus, um die ARIA-Attributanforderungen zu erfüllen.

Wenn die erforderlichen Zustands- und Eigenschaftsattribute für bestimmte Rollen (und Unterklassenrollen) nicht vorhanden sind, können Bildschirmlesegeräte die Definition der Rolle des Elements möglicherweise nicht an die Benutzer weitergeben.

Für jede Rolle definiert WAI-ARIA ausdrücklich, welche untergeordneten und übergeordneten Rollen zulässig und/oder erforderlich sind. ARIARolles fehlendes WunschkindRolles nicht in der Lage sein, die vom Entwickler beabsichtigten Zugänglichkeitsfunktionen auszuführen.

Hilfsmittel müssen dem Benutzer den Kontext vermitteln. Zum Beispiel, in einerBaumartikelist es wichtig, das übergeordnete Element (Container), das Element oder die Geschwister im Ordner zu kennen. Dies kann auf zwei Arten geschehen:

1. Code Ordnung oder DOM:Der erforderliche Kontext ergibt sich häufig aus der Codefolge oder dem DOM.
2. LUFT:ARIA (wie zum Beispielaria-owns) kann verwendet werden, um die Beziehungen bereitzustellen, wenn die Hierarchie nicht mit der Codestruktur oder dem DOM-Baum übereinstimmt.

Für jede Rolle definiert WAI-ARIA ausdrücklich, welche untergeordneten und übergeordneten Rollen zulässig und/oder erforderlich sind. Elemente, die ARIA enthaltenRolleWerte fehlen erforderliches übergeordnetes ElementRolleWerte ermöglichen es der assistiven Technologie nicht, wie vom Entwickler beabsichtigt zu funktionieren.

Wenn es notwendig ist, dem Benutzer von Hilfsmitteln Kontext in Form von Hierarchie zu vermitteln (z. B. die Bedeutung eines übergeordneten Containers, Elements oder Geschwisters in einem Ordnerbaum), und die Hierarchie nicht mit der Codestruktur oder dem DOM-Baum übereinstimmt, gibt es keine Möglichkeit, die Beziehungsinformationen ohne die Verwendung von ARIA-Rollen-Eltern-Elementen bereitzustellen.

Ungeeignetaria-roledescriptionAttributwerte, die mit den impliziten oder expliziten Werten eines Elements in Konflikt stehenRolleWert kann die Zugänglichkeit der Webseite beeinträchtigen. Ein widersprüchlicheraria-roledescriptionAttributwert kann dazu führen, dass die Zugänglichkeit der Anwendung nicht beeinflusst wird, und kann ein Verhalten auslösen, das die Zugänglichkeit für ganze Teile einer Anwendung deaktiviert.

Wennaria-roledescription> Attribute auf HTML-Elemente angewendet werden, die nicht mit WAI-ARIA 1.1 übereinstimmen, besteht ein semantischer Konflikt zwischen denaria-roledescriptionWert und das implizite oder explizite ElementRolleWertes, was dazu führen kann, dass Produkte für unterstützende Technologien unsinnige Informationen über die Benutzeroberfläche (UI) melden, die die beabsichtigte UI-Erfahrung nicht korrekt wiedergeben.

ARIA-Attribute (d.h. beginnend mitaria-) müssen gültige Werte enthalten. Diese Werte müssen richtig geschrieben sein und den Werten entsprechen, die für ein bestimmtes Attribut sinnvoll sind, um die beabsichtigte Funktion der Barrierefreiheit zu erfüllen.

Viele ARIA-Attribute akzeptieren einen bestimmten Satz von Werten. Erlaubte Werte, akzeptable "undefined" Werte und akzeptable "default" Werte sind erforderlich. Die Nichteinhaltung der zulässigen Werte führt zu Inhalten, die für Benutzer von Hilfstechnologien nicht zugänglich sind.

Benutzer von Bildschirmlesegeräten sind nicht in der Lage, den Zweck von Elementen zu erkennen, dierole="link",role="button", oderrole="menuitem"die keinen zugänglichen Namen haben.

Da auf Websites häufig sekundäre, sich wiederholende Inhalte auf mehreren Seiten angezeigt werden (z. B. Navigationslinks, Überschriftengrafiken und Werberahmen), profitieren Benutzer, die nur über eine Tastatur verfügen, von einem schnelleren, direkteren Zugriff auf den primären Inhalt einer Seite. Dies reduziert die Anzahl der Tastenanschläge und verringert die damit verbundenen körperlichen Beschwerden.

Für Benutzer, die keine Maus benutzen können, ist das Navigieren mit der Tastatur schwieriger und zeitaufwändiger, wenn die Schnittstelle keine Methoden zur Erleichterung der Tastaturnavigation enthält. Um beispielsweise einen Link in der Mitte einer Webseite zu aktivieren, muss ein Tastaturbenutzer unter Umständen durch eine große Anzahl von Links und Schaltflächen in der Kopfzeile und der Hauptnavigation der Seite navigieren.

Im Extremfall können Benutzer mit schweren motorischen Einschränkungen mehrere Minuten benötigen, um alle diese Elemente durchzugehen, was bei einigen Benutzern zu Ermüdung und möglicherweise körperlichen Schmerzen führen kann. Selbst Benutzer mit weniger starken Einschränkungen werden länger brauchen als Mausbenutzer, die in ein oder zwei Sekunden auf den gewünschten Link klicken können.

Manche Menschen mit Sehschwäche leiden unter einem geringen Kontrast, d. h. es gibt nicht sehr viele helle oder dunkle Bereiche. Alles erscheint in etwa gleich hell, was es schwierig macht, Umrisse, Ränder, Kanten und Details zu erkennen. Text, dessen Luminanz (Helligkeit) zu stark an den Hintergrund angeglichen ist, kann schwer zu lesen sein.

Es gibt fast dreimal so viele Menschen mit Sehschwäche wie mit völliger Blindheit. Eine von zwölf Personen kann nicht das gesamte Farbspektrum sehen, das sind etwa 8 % der Männer und 0,4 % der Frauen in den USA. Eine Person mit Sehschwäche oder Farbenblindheit ist nicht in der Lage, Text vor einem Hintergrund ohne ausreichenden Kontrast zu erkennen.

Farbtransparenz und Deckkraft werden im Hintergrund berücksichtigt.

Farbtransparenz und -undurchsichtigkeit im Vordergrund sind aufgrund dessen schwieriger zu erkennen und zu berücksichtigen:

• 1:1 Farben im Vorder- und Hintergrund.
• CSS-Hintergrundfarbverläufe.
• Hintergrundfarben in CSS-Pseudo-Elementen.
• Mit CSS-Rahmen erstellte Hintergrundfarben.
• Überschneidungen mit einem anderen Element im Vordergrund - dies führt manchmal zu einer kniffligen Positionierung.
• Elemente, die per CSS außerhalb des Ansichtsfensters verschoben werden.

Manche Menschen mit Sehschwäche leiden unter einem geringen Kontrast, d. h. es gibt nicht sehr viele helle oder dunkle Bereiche. Alles erscheint in etwa gleich hell, was es schwierig macht, Umrisse, Ränder, Kanten und Details zu erkennen. Text, dessen Luminanz (Helligkeit) zu stark an den Hintergrund angeglichen ist, kann schwer zu lesen sein.

Es gibt fast dreimal so viele Menschen mit Sehschwäche wie mit völliger Blindheit. Eine von zwölf Personen kann nicht das gesamte Farbspektrum sehen, das sind etwa 8 % der Männer und 0,4 % der Frauen in den USA. Eine Person mit Sehschwäche oder Farbenblindheit ist nicht in der Lage, Text vor einem Hintergrund ohne ausreichenden Kontrast zu erkennen.

Farbtransparenz und Deckkraft werden im Hintergrund berücksichtigt.

Farbtransparenz und -undurchsichtigkeit im Vordergrund sind aufgrund dessen schwieriger zu erkennen und zu berücksichtigen:

• 1:1 Farben im Vorder- und Hintergrund.
• CSS-Hintergrundfarbverläufe.
• Hintergrundfarben in CSS-Pseudo-Elementen.
• Mit CSS-Rahmen erstellte Hintergrundfarben.
• Überschneidungen mit einem anderen Element im Vordergrund - dies führt manchmal zu einer kniffligen Positionierung.
• Elemente, die per CSS außerhalb des Ansichtsfensters verschoben werden.

Bildschirmlesegeräte haben eine bestimmte Art, Definitionslisten anzukündigen. Wenn solche Listen nicht ordnungsgemäß gekennzeichnet sind, kann dies zu einer verwirrenden oder ungenauen Bildschirmleserausgabe führen.

Eine Definitionsliste wird verwendet, um die Definitionen von Wörtern oder Phrasen bereitzustellen. Die Definitionsliste wird mit der OptiondlElement. Innerhalb der Liste wird jeder Begriff in einem separatendtElement, und seine Definition wird in derddElement, das ihm direkt folgt.

Benutzer von Bildschirmlesegeräten verwenden Seitentitel, um sich einen Überblick über den Inhalt der Seite zu verschaffen. Das Navigieren durch die Seiten kann für Screenreader-Nutzer schnell schwierig und verwirrend werden, wenn die Seiten nicht mit einem Titel versehen sind. Die SeiteTitelElement ist das erste, was Screenreader-Nutzer beim ersten Laden einer Webseite hören.

DieTitelist das erste, was Screenreader-Benutzer hören, wenn sie auf einer Seite ankommen. Wenn es keineTiteloder wenn dieTitelnicht beschreibend und eindeutig ist, müssen Screenreader-Nutzer die Seite durchlesen, um ihren Inhalt und Zweck zu bestimmen.

Doppelte IDs sind häufige Validierungsfehler, die die Zugänglichkeit von Beschriftungen, z. B. von ARIA-Elementen, Formularfeldern und Tabellenkopfzellen, beeinträchtigen können.

Eindeutige ID's unterscheiden jedes Element von einem anderen und verhindern ungültiges Markup, bei dem nur die erste Instanz durch clientseitiges Scripting bearbeitet wird oder bei dem unterstützende Technologien typischerweise nur auf die erste genau verweisen.

Die Zuweisung mehrerer Beschriftungen zu demselben Formularfeld kann bei einigen Kombinationen von Bildschirmlesegeräten und Browsern Probleme verursachen, und die Ergebnisse sind von einer Kombination zur nächsten uneinheitlich. Einige Kombinationen lesen die erste Beschriftung. Einige lesen die letzte Beschriftung. Andere lesen beide Beschriftungen.

Ohne das axe-core-Skript ist es dem Tool nicht möglich, die Prüfung von Verstößen auf mehreren Ebenen verschachtelter iframes durchzuführen.

Benutzer von Bildschirmlesegeräten verlassen sich auf einen Rahmentitel, um den Inhalt des Dokuments zu beschreiben.Rahmen. Navigieren durchRahmenundiframeElemente wird für die Nutzer dieser Technologie schnell schwierig und verwirrend, wenn das Markup keineTitelAttribut.

Benutzer von Bildschirmlesegeräten haben die Möglichkeit, eine Liste von Titeln für alle Frames auf einer Seite aufzurufen. Durch das Hinzufügen von beschreibenden, eindeutigen Titeln können die Benutzer schnell den gewünschten Rahmen finden. Wenn keine Titel vorhanden sind, kann die Navigation durch Frames schnell schwierig und verwirrend werden. Wenn kein Titel aufgeführt ist, geben Screenreader stattdessen Informationen wie “Frame,” “JavaScript,” den Dateinamen oder die URL an. In den meisten Fällen sind diese Informationen nicht sehr hilfreich.

Der eigentliche Zweck von Kopfzeilen besteht darin, die Struktur der Seite zu vermitteln. Für sehende Benutzer wird derselbe Zweck durch unterschiedliche Textgrößen erreicht. Die Textgröße ist jedoch für Benutzer von Bildschirmlesegeräten nicht hilfreich, da ein Bildschirmlesegerät eine Überschrift nur dann erkennt, wenn sie richtig gekennzeichnet ist. Wenn die Überschriftenelemente richtig eingesetzt werden, ist die Seite sowohl für Screenreader als auch für sehende Benutzer viel einfacher zu navigieren.

Genauso wie sehende Benutzer eine Seite überfliegen und sich einen Überblick über den Inhalt verschaffen können, können Benutzer von Bildschirmlesegeräten dasselbe tun, indem sie durch Überschriften navigieren. Gut geschriebene und richtig angeordnete Überschriften können den Nutzern, insbesondere denen, die Bildschirmlesegeräte verwenden, viel Zeit und Frustration ersparen.

Der Zweck von Überschriften ist es, die Struktur der Webseite zu beschreiben und nicht nur wichtigen Text hervorzuheben. Sie sollten kurz, klar und eindeutig sein und mith1überh6Elemente in hierarchischer Reihenfolge. All diese Eigenschaften machen Überschriften zu wertvollen Hilfsmitteln für Screenreader-Nutzer. Ähnlich wie sehende Benutzer eine Seite überfliegen und sich ein Bild von ihrem Inhalt machen können, können Screenreader-Benutzer durch Überschriften navigieren. Gut geschriebene und richtig angeordnete Überschriften können Bildschirmlesern Zeit und Frustration ersparen.

Neben der besseren Zugänglichkeit der Seite haben Überschriften noch weitere Vorteile, da Suchmaschinen Überschriften beim Filtern, Ordnen und Anzeigen von Ergebnissen verwenden. Die Verbesserung der Zugänglichkeit Ihrer Website kann auch dazu führen, dass Ihre Seite besser auffindbar ist.

Bei der Konfiguration eines Bildschirmlesegeräts wählen die Benutzer eine Standardsprache aus. Wenn die Sprache einer Webseite nicht angegeben wird, nimmt das Bildschirmlesegerät die vom Benutzer eingestellte Standardsprache an. Spracheinstellungen werden zu einem Problem für Benutzer, die mehrere Sprachen sprechen und auf Websites in mehr als einer Sprache zugreifen. Es ist wichtig, eine Sprache festzulegen und sicherzustellen, dass sie gültig ist, damit der Text der Website richtig ausgesprochen wird.

Bildschirmlesegeräte verwenden für jede Sprache unterschiedliche Soundbibliotheken, die auf der Aussprache und den Eigenschaften der jeweiligen Sprache basieren. Bildschirmlesegeräte können problemlos zwischen diesen Sprachbibliotheken wechseln, allerdings nur, wenn in den Dokumenten angegeben ist, welche Sprache(n) wann gelesen werden soll(en). Wenn die Sprache nicht angegeben ist, liest das Bildschirmlesegerät das Dokument in der Standardsprache des Benutzers vor, was zu einem seltsamen Akzent führt! Es ist unmöglich, etwas zu verstehen, wenn Screenreader die falsche Sprachbibliothek verwenden.

Bildschirmlesegeräte haben keine Möglichkeit, ein Bild in Worte zu übersetzen, die dem Benutzer vorgelesen werden können, selbst wenn das Bild nur aus Text besteht. Daher ist es notwendig, dass Bilder kurze, beschreibende Texte enthalten.altText, damit Screenreader-Benutzer Inhalt und Zweck des Bildes klar verstehen.

Wenn man nicht sehen kann, sind alle Arten von visuellen Informationen, wie z. B. Bilder, völlig nutzlos, es sei denn, es wird eine digitale Textalternative bereitgestellt, so dass Bildschirmlesegeräte den Text entweder in Ton oder Braille umwandeln können. Das Gleiche gilt in unterschiedlichem Maße für Menschen mit Sehschwäche oder Farbenblindheit.

Benutzer von Bildschirmlesegeräten sind nicht in der Lage, den Zweck eines Textes zu erkennen.input type="button"ohne einen zugänglichen Namen.

Benutzer von Bildschirmlesegeräten können den Zweck eines Bildes ohne einen erkennbaren und zugänglichen Textnamen nicht verstehen. Ein Titel für ein Bild kann nur beratende Informationen über das Bild selbst liefern. Unbenannte aktionsfähige Grafiken wie Schaltflächen haben keine klare Beschreibung des Ziels, des Zwecks, der Funktion oder der Aktion für den Nicht-Text-Inhalt, wenn er als Steuerelement verwendet werden soll.

Wirksame Formularbeschriftungen sind erforderlich, um Formulare zugänglich zu machen. Der Zweck von Formularelementen wie Kontrollkästchen, Optionsschaltflächen, Eingabefeldern usw. ist für sehende Benutzer oft offensichtlich, selbst wenn das Formularelement nicht programmatisch beschriftet ist. Benutzer von Bildschirmlesegeräten benötigen nützliche Formularbeschriftungen, um Formularfelder zu identifizieren. Das Hinzufügen einer Beschriftung zu allen Formularelementen beseitigt Zweideutigkeiten und trägt zu einem besser zugänglichen Produkt bei.

Wenn Beschriftungen für Formularelemente fehlen, wissen Benutzer von Bildschirmlesegeräten nicht, welche Eingabedaten sie erwarten. Bildschirmlesegeräte können ohne eine etablierte Beschriftungsbeziehung (oder redundanten Text, der als Beschriftung dient) keine Informationen über Eingabeobjekte programmatisch ermitteln.

Das Fehlen von Beschriftungen verhindert, dass Felder beim Lesen durch Bildschirmlesegeräte in den Mittelpunkt gerückt werden, und Benutzer mit eingeschränkter motorischer Kontrolle haben nicht den Vorteil eines größeren anklickbaren Bereichs für das Steuerelement, da das Anklicken der Beschriftung das Steuerelement aktiviert.

Ergänzende Inhalte sind Nebeninhalte zum Hauptthema eines Dokuments oder einer Seite. Benutzer von Bildschirmlesegeräten haben die Möglichkeit, ergänzende Inhalte zu übergehen, wenn sie auf der obersten Ebene der Zugänglichkeits-API erscheinen. Das Einbetten eines<aside>Element in einem anderen Orientierungspunkt kann die Bildschirmlesefunktion deaktivieren, die es den Nutzern ermöglicht, durch ergänzende Inhalte zu navigieren.

Einer der Hauptzwecke von Orientierungspunkten ist es, blinden Nutzern ein schnelles Auffinden und Navigieren zum entsprechenden Orientierungspunkt zu ermöglichen, daher sollten Sie die Gesamtzahl der Orientierungspunkte relativ gering halten. Andernfalls müssen die Benutzer von Bildschirmlesegeräten zu viele zusätzliche Informationen durchsuchen, um das zu finden, was sie suchen.

Trotz des ganzen Geredes über die Verwendung einer korrekten semantischen Struktur für die Barrierefreiheit fehlten in HTML bisher einige wichtige semantische Marker, wie die Möglichkeit, Abschnitte der Seite als Kopfzeile, Navigation, Hauptinhalt und Fußzeile zu kennzeichnen. Mit HTML5 sind diese Bezeichnungen möglich, indem die neuen ElementeKopfzeile,nav,HauptundFußzeile. Ähnliche Funktionen sind über die ARIA-Attribute (Accessible Rich Internet Application) verfügbarrole="banner",role="navigation",role="main"undrole="contentinfo".

JAWS, NVDA und VoiceOver unterstützen die Möglichkeit, mithilfe von ARIA-Landmarken zu Abschnitten einer Webseite zu navigieren. Landmarken bieten eine elegantere Lösung für das Problem, dass Benutzer zum Hauptinhalt der Webseite springen können. Es gibt keine sichtbare Veränderung des Webdesigns, was sie unauffällig und unsichtbar macht. Natürlich ist die Tatsache, dass diese Technik unsichtbar ist, für blinde Benutzer von Bildschirmlesegeräten gut, aber nicht so gut für sehende Tastaturbenutzer oder Benutzer von Bildschirmvergrößerungsgeräten mit geringer Sehkraft. In diesem Sinne können HTML 5-Regionen und ARIA-Landmarken die altmodischen "Skip Navigation" Links noch nicht ersetzen. Die Browser verfügen noch nicht über eine eingebaute Möglichkeit, den Benutzern mitzuteilen, dass HTML 5-Regionen oder ARIA-Landmarken vorhanden sind. Nur Benutzer von Bildschirmlesegeräten können sie nutzen. Es gibt eineFirefox ARIA Wahrzeichen Erweiterungzur Verfügung, die die Möglichkeit bietet, in Firefox nach Orientierungspunkten zu navigieren, aber dies ist keine native Funktion des Browsers.

Die Navigation auf einer Webseite ist für Benutzer von Bildschirmlesegeräten viel einfacher, wenn der gesamte Inhalt auf einen oder mehrere übergeordnete Abschnitte aufgeteilt ist. Inhalte außerhalb dieser Abschnitte sind schwer zu finden, und ihr Zweck kann unklar sein.

HTML hat in der Vergangenheit einige wichtige semantische Marker vermissen lassen, wie z. B. die Möglichkeit, Abschnitte der Seite als Kopfzeile, Navigation, Hauptinhalt und Fußzeile zu kennzeichnen. Die Verwendung von HTML5-Elementen und ARIA-Markierungen im selben Element gilt als Best Practice, aber die Zukunft wird HTML-Regionen bevorzugen, da die Browserunterstützung zunimmt.

landmark-uniqueist eine neue Best-Practice-Regel, die sicherstellt, dass Landmarken eine eindeutige Kombination aus Rolle oder zugänglichem Namen (d. h. Rolle, Bezeichnung, Titel) haben.

Manche Menschen mit Sehschwäche leiden unter einem geringen Kontrast, d. h. es gibt nicht sehr viele helle oder dunkle Bereiche. Alles erscheint in etwa gleich hell, was es schwierig macht, Umrisse, Ränder, Kanten und Details zu erkennen. Text, dessen Luminanz (Helligkeit) zu stark an den Hintergrund angeglichen ist, kann schwer zu lesen sein.

Es gibt fast dreimal so viele Menschen mit Sehschwäche wie mit völliger Blindheit. Jeder zwölfte Mensch hat eine Farbfehlsichtigkeit - etwa 8 % der Männer und 0,4 % der Frauen in den USA. Eine Person mit Sehschwäche oder Farbenblindheit ist nicht in der Lage, Text vor einem Hintergrund ohne ausreichenden Kontrast zu erkennen.

Wenn das Farbkontrastverhältnis von 3:1 nicht ausreicht, um die Farbe des Linktextes von der Farbe des umgebenden Textes zu unterscheiden, können sehbehinderte Nutzer mit geringem Kontrast nicht erkennen, dass der Text als Link gedacht ist.

Unzugängliche Link-Elemente stellen ein Hindernis für die Zugänglichkeit dar, da sie ein wesentlicher Bestandteil einer Website sind.

Benutzer, die sich ausschließlich mit der Tastatur (und nicht mit der Maus) auf einer Webseite bewegen, können nur auf Links klicken, die den programmatischen Fokus erhalten können. Ein Link, der keinen programmatischen Fokus erhält, ist für diese Benutzer unzugänglich.

Wie sehende Benutzer müssen auch Benutzer von Bildschirmlesegeräten wissen, wohin ein Link verweist. Der innere Linktext liefert diese Information, wird aber nicht genutzt, wenn ein Screenreader nicht darauf zugreifen kann.

Tastaturbenutzer, einschließlich sehbehinderter Screenreader-Benutzer oder Personen, die keine Maus benutzen können, können nur die Links und Formularelemente aktivieren, die den programmatischen Fokus erhalten können. Alle Ereignisse, die ausschließlich durch andere Arten von Fokus aktiviert werden, zum BeispielonmouseoverEreignisse, die vom Mausfokus abhängen, sind für Tastaturbenutzer unzugänglich. Nur Links und Formularelemente erhalten standardmäßig den Tastaturfokus. Ändern Sie Elemente, die keine Links oder Formularkomponenten sind, damit sie den Fokus erhalten, indem Sietabindex="0".

Bildschirmlesegeräte haben eine besondere Art, Listen anzukündigen. Diese Funktion macht Listen verständlicher, funktioniert aber nur, wenn die Listen richtig strukturiert sind.

Wenn andere Inhaltselemente als Listenelemente in einem Satz von Listenelementen enthalten sind, können Bildschirmlesegeräte den Zuhörer nicht darüber informieren, dass sie Elemente innerhalb der Liste hören.

Damit eine Liste gültig ist, muss sie sowohl übergeordnete Elemente haben (eine Gruppe vonulElemente oder eine Reihe vonolElemente) und untergeordnete Elemente (die innerhalb dieser Tags unter Verwendung derliElement), und alle anderen Inhaltselemente sind ungültig.

Obwohl einigeNicht-InhaltElemente wie Script, Template, Style, Meta, Link, Map, Area und Datalist sind in Listen erlaubt,Inhaltandere Elemente alslisind nicht erlaubt.

Damit eine Liste gültig ist, muss sie sowohl übergeordnete als auch untergeordnete Elemente enthalten. Übergeordnete Elemente können entweder eine Menge vonulTags oder einer Reihe vonolTags. Kindelemente müssen innerhalb dieser Tags mit derlitag.

Bildschirmlesegeräte benachrichtigen die Benutzer, wenn sie zu einer Liste kommen, und teilen ihnen mit, wie viele Elemente in einer Liste enthalten sind. Die Ansage der Anzahl der Elemente in einer Liste und des aktuellen Listenelements hilft den Zuhörern zu wissen, was sie gerade hören und was sie erwarten können.

Wenn Sie eine Liste nicht mit dem richtigen semantischen Markup in einer Hierarchie auszeichnen, können Listenelemente den Zuhörer nicht darüber informieren, dass sie eine Liste hören, wenn kein übergeordnetes Element das Vorhandensein einer Liste und den Typ der Liste angibt.

Dieuser-scalable="no"Parameter innerhalb derInhaltAttribut von<meta name="viewport">Element deaktiviert das Zoomen auf einer Seite. Das ElementMaximalskalaschränkt den Zoomfaktor für den Benutzer ein. Dies ist problematisch für Menschen mit Sehschwäche, die auf Bildschirmlupen angewiesen sind, um den Inhalt einer Webseite richtig sehen zu können.

Benutzer mit eingeschränktem Sehvermögen und Sehschwäche entscheiden sich oft dafür, die Schriftarten in ihrem Browser zu vergrößern, um Texte im Internet besser lesen zu können. Der Fokus des Browsers ist alles, was zu einem bestimmten Zeitpunkt im Browserfenster sichtbar ist. Wird der Browser auf einem hochauflösenden Monitor auf volle Größe vergrößert, wird der Fokusbereich des Browsers groß und kann die gesamte Webseite umfassen.

Wenn das Browserfenster klein ist, umfasst der Viewport-Fokusbereich nur einen kleinen Teil der Webseite. Der Viewport-Fokus des Browsers hat keinen Einfluss auf den programmatischen Fokus. Benutzer können auf der Webseite nach oben und unten scrollen, aber der programmatische Fokus folgt nicht dem Ansichtsfenster. Die Richtlinien für die Zugänglichkeit von Web-Inhalten fordern die Entwickler auf, Seiten so zu gestalten, dass sie eine Größenänderung von bis zu 200 % unterstützen.

stellt sicher, dass dieuser-scalable="no"ist nicht in der Datei<meta name="viewport">Element und das ElementMaximalskalanicht kleiner als 2 ist.

Fokussierbare Elemente mit einem interaktiven Steuerelement als Vorgänger (jedes Element, das Benutzereingaben akzeptiert, wie z. B. Schaltflächen oder Ankerelemente) werden von Bildschirmlesegeräten nicht angezeigt und erzeugen einen leeren Tabstopp. Das heißt, Sie können mit der Tabulatortaste auf das Element zugreifen, aber der Bildschirmleser wird seinen Namen, seine Rolle oder seinen Status nicht anzeigen.

Benutzer von Bildschirmlesegeräten können mit Hilfe von Tastenkombinationen direkt zur ersten Seite navigierenh1die es ihnen im Prinzip ermöglichen sollte, direkt zum Hauptinhalt der Webseite zu gelangen. Wenn es keineh1, oder wenn dieh1an einer anderen Stelle als am Anfang des Hauptinhalts erscheint, müssen sich die Benutzer von Bildschirmlesegeräten mehr von der Webseite anhören, um ihre Struktur zu verstehen, was wertvolle Zeit vergeudet.

Denken Sie daran, dass blinde Benutzer eine Webseite nicht einfach nur ansehen und sofort verstehen können, wie es ein visueller Benutzer kann. Visuelle Benutzer können viele Informationen über das Layout der Seite aufnehmen, ohne den gesamten Inhalt lesen zu müssen. Blinde Benutzer haben diesen Luxus nicht. Bildschirmlesegeräte lesen linear, was bedeutet, dass sie sich die gesamte Webseite anhören müssen, es sei denn, es gibt eine andere bequeme Möglichkeit, sich einen Überblick über das Layout und die Struktur der Seite zu verschaffen. Es hat sich herausgestellt, dass Überschriften eine Möglichkeit sind, dies zu tun. Benutzer von Bildschirmlesegeräten können Tastaturkürzel verwenden, um durch die Überschriftenstruktur eines Dokuments zu navigieren.

Die Navigation auf einer Webseite ist für Benutzer von Bildschirmlesegeräten viel einfacher, wenn der Inhalt in mehrere übergeordnete Abschnitte aufgeteilt ist. Inhalte außerhalb von Abschnitten sind schwer zu finden, und der Zweck des Inhalts kann unklar sein.

In der Vergangenheit fehlten in HTML einige wichtige semantische Marker wie die Möglichkeit, Abschnitte der Seite als Kopfzeile, Navigation, Hauptinhalt und Fußzeile zu kennzeichnen. Die Verwendung sowohl von HTML5-Elementen als auch von ARIA-Marken im selben Element gilt als Best Practice, aber die Zukunft begünstigt die Verwendung nativer HTML5-Elementregionen, da die Browserunterstützung zunimmt.

Überprüft scrollbare Inhalte auf fokussierbare Elemente, die eine Tastaturnavigation ermöglichen. Die Tastaturnavigation sollte nicht fehlschlagen, wenn sich der Fokus auf ein Element innerhalb eines scrollbaren Bereichs bewegt.

Wirksame Formularbeschriftungen sind erforderlich, um Formulare zugänglich zu machen. Der Zweck von Formularelementen wie Kontrollkästchen, Optionsschaltflächen, Eingabefeldern usw. ist für sehende Benutzer oft offensichtlich, selbst wenn das Formularelement nicht programmatisch beschriftet ist. Benutzer von Bildschirmlesegeräten benötigen nützliche Formularbeschriftungen, um Formularfelder zu identifizieren. Das Hinzufügen einer Beschriftung zu allen Formularelementen beseitigt Zweideutigkeiten und trägt zu einem besser zugänglichen Produkt bei.

Wenn Beschriftungen für Formularelemente fehlen, wissen Benutzer von Bildschirmlesegeräten nicht, welche Eingabedaten sie erwarten. Bildschirmlesegeräte können ohne eine etablierte Beschriftungsbeziehung (oder redundanten Text, der als Beschriftung dient) keine Informationen über Eingabeobjekte programmatisch ermitteln.

Bildschirmlesegeräte geben den Inhalt in der Reihenfolge wieder, in der er in der HTML-Datei erscheint. Für Benutzer von Hilfsmitteln bedeutet dies, dass der Inhalt am Anfang der Seite, in der Regel einschließlich der gesamten Navigation, dem Benutzer vorgelesen wird, bevor er zum Hauptinhalt gelangt. Da der Inhalt am Anfang der Seite oft sehr lang sein kann, kann es zeitaufwändig sein, sich den gesamten Inhalt anzuhören oder mit der Tabulatortaste durchzugehen, wenn der Benutzer nur am Hauptinhalt interessiert ist. Die Aufnahme eines Skip-Links in eine HTML-Seite ist für blinde und sehbehinderte Benutzer sowie für Benutzer, die nur mit der Maus arbeiten, von Vorteil.

Verwendung vonRegisterkarte "Indexmit einem Wert größer als 0 kann ebenso viele Probleme verursachen wie lösen. Es entsteht eine unerwartete Tabulatorreihenfolge, die die Seite weniger intuitiv macht und den Anschein erwecken kann, dass bestimmte Elemente ganz übersprungen werden.

Hier sind einige der Probleme, dieRegisterkarte "Index(mit einem Wert von 1 oder höher) verursacht:

• Unerwartete Tabulatorreihenfolge:Aus der Sicht des Nutzers,Registerkarte "Indexändert die Standard-Tabulatorreihenfolge auf unerwartete Weise, was zu Verwirrung führen kann.
• Elemente können scheinbar vollständig übersprungen werden:Die Elemente erscheinen nur einmal in der Reihenfolge der Registerkarten. Wenn ein Benutzer die Registerkarte über dieRegisterkarte "Indexund weiter durch den Rest der Webseite geht, gelangt der Nutzer irgendwann an die Stelle, an der dieRegisterkarte "IndexElemente, aber der Tabbing-Prozess überspringt diese Links, weil der Benutzer sie bereits zu Beginn des Zyklus übersprungen hat. Falsche Tabulatorreihenfolgen sind frustrierend, wenn der Benutzer nicht in der Lage ist, auf Elemente zuzugreifen, und möglicherweise nicht weiß, dass er den gesamten Satz von Links auf der Seite durchlaufen muss, um diese Links erneut aufzurufen.
• AlleRegisterkarte "IndexElemente werden vor allen nichtRegisterkarte "IndexArtikel.Wenn Sie die Tabulatorreihenfolge der ersten Elemente UND eines Abschnitts später auf der Seite ändern möchten, müssen Sie dieRegisterkarte "IndexWert für jedes einzelne Element bis zum Ende des geänderten Abschnitts. Auf die Spitze getrieben: Wenn Sie 20 Links auf einer Seite haben, und wenn Sie den WertRegisterkarte "Indexeines dieser Links zutabindex="100"wird der Benutzer zuerst zu diesem Link navigieren, auch wenn es weniger als 100 Links auf der Seite gibt. Es gibt keine Möglichkeit, die Reihenfolge der Registerkarten für spätere Abschnitte auf der Seite zu ändern, es sei denn, Sie legen die Reihenfolge der Registerkarten für alle Links vor diesem Abschnitt manuell fest.

Bildschirmlesegeräte haben eine bestimmte Art, Tabellen anzuzeigen. Wenn Tabellen nicht ordnungsgemäß gekennzeichnet sind, kann dies zu einer verwirrenden oder ungenauen Bildschirmleserausgabe führen.

Wenn Tabellen nicht semantisch gekennzeichnet sind und keine korrekte Kopfstruktur aufweisen, können Benutzer von Bildschirmlesegeräten die Beziehungen zwischen den Zellen und ihrem Inhalt nicht richtig wahrnehmen.

Wenn ein Video keine Untertitel hat, haben gehörlose Nutzer nur begrenzten oder gar keinen Zugang zu den darin enthaltenen Informationen. Selbst wenn eine Untertitelspur vorhanden ist, muss sichergestellt werden, dass sie alle wichtigen Informationen im Video enthält, nicht nur den Dialog.

Gehörlose Betrachter können zwar alles im Video sehen, aber ohne Untertitel nichts davon hören. Ohne eine Untertitelspur haben gehörlose Zuschauer keine Möglichkeit, den Dialog, die Erzählung oder die wesentlichen Geräusche zu erkennen, die nicht von Menschen gesprochen werden, wie z. B. dramatische Instrumentalmusik, Applaus, Schreie oder andere Geräusche, die die Szene bestimmen, den Kontext liefern oder dem Video Bedeutung verleihen.