Sie denken vielleicht, dass sich Best Practices für Barrierefreiheit auf Seitenelemente innerhalb des body -Elements konzentrieren. Das stimmt zwar, aber es gibt ein paar andere interessante Punkte, die woanders liegen, nämlich das head .
Sehen wir uns einige globale Seitenprobleme an, auf die Sie beim Testen der Barrierefreiheit achten sollten.
Seitensprache
Manchmal kann es aufgrund lokaler Akzente oder Beugungen schwierig sein, das gesprochene Wort von jemandem aus einem anderen Teil der Welt zu verstehen. Das Gleiche gilt, wenn wir Inhalte bereitstellen, die in einer anderen Sprache geschrieben sind als die des Endbenutzers, der sich auf die Sprachankündigung dieser Inhalte verlässt.
Um sicherzustellen, dass Hilfstechnologien Inhalte mit dem richtigen Akzent und der richtigen Flexion aussprechen können, muss die Inhaltssprache des HTML-Dokuments festgelegt werden. Dies geschieht durch Hinzufügen des lang -Attributs zum html -Element, das normalerweise das zweite Element in einem Dokument nach der doctype-Deklaration ist.
<html class="..." lang="en"> <!-- ... --> </html> Wenn das Attribut lang mit dem entsprechenden Sprachcode festgelegt ist, wird der Inhalt mit dem entsprechenden, lokalisierten Akzent laut vorgelesen.
Andere internationalisierte Inhalte innerhalb von Inhalten
Für den Fall, dass Inhalte in einer anderen Sprache als der Primärsprache geschrieben sind, können Sie das gleiche Muster verwenden, um den korrekten Akzent durch unterstützende Technologie auszugeben.
Wenn Sie beispielsweise eine Sprachumschaltfunktion hätten, einen Link für „Englisch“ und einen für „Französisch“, müssten Sie den Umschaltlink für die Sprache, die nicht lokal auf der aktuellen Seite ist, mit dem lang -Attribut umschließen. Oder es würde auch funktionieren, das lang Attribut direkt auf den Link zu setzen.
<a href="/fr" lang="fr">Français</a>
Barrierefreiheit ist auch Internationalisierung
WCAG-Erfolgskriterien
Dies kommt auf 3.1.1 Sprache der Seite zurück, wo es heißt:
"Die standardmäßige menschliche Sprache jeder Webseite kann programmgesteuert bestimmt werden."
Viewport-Meta-Tag
Wenn in der Vergangenheit jemand mit Sehbehinderung sein Mobil- oder Desktop- Browserfenster zoomen musste, um Inhalte klarer lesen zu können, führte dies traditionell zu einer schlechten Erfahrung mit zweidimensionalem Scrollen; sowohl horizontal als auch vertikal scrollen müssen, um den Inhalt zu konsumieren.
Das 2D-Scrollen ist nicht nur für die meisten Menschen irritierend, es führt auch zu einer neuen Schwierigkeitsstufe für jeden mit einer motorischen Beeinträchtigung oder für jemanden, der sich zum Navigieren allein auf die Tastatur verlässt; Dies erfordert einen Wechsel von der Verwendung der Tab / Space zum vertikalen Lesen von Inhalten zu den Pfeiltasten zum horizontalen Lesen und wieder zurück.
Wenn heutzutage jemand seinen Browser zoomt, um den Inhalt zu vergrößern, werden die Layout- und Stilregeln, die in den CSS-Medienabfragen definiert sind, mit zunehmender Zoomstufe geladen. Mit anderen Worten, wenn der Inhalt gezoomt wird, erlebt die Person auf der anderen Seite des Bildschirms das "mobile" Layout, wodurch das horizontale Scrollen entfällt, was zu einer positiven Benutzererfahrung führt. Dies liegt zum Teil an der Aufnahme des Viewport- meta -Tags:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Dies weist den Browser an, die Breite des Inhalts auf die Breite des Geräts selbst einzustellen und diesen Inhalt beim Laden auf 1 zu skalieren.
Wenn das Seitenlayout mit Best Practices für responsives Design entwickelt wurde, würde dies ausreichen, um jegliches 2D-Scrollen zu entfernen, damit ein Zoom-Benutzer den Inhalt bequem konsumieren kann.
Zoom verhindern
Mit diesem Meta-Tag kann das Zoomen des Ansichtsfensters verhindert werden. Dies ist das Gegenteil von „Ein barrierefreies Erlebnis schaffen“. Vermeiden Sie die Verwendung der folgenden Attribute:
-
maximum-scale=1.0; -
user-scalable=no;
WCAG-Erfolgskriterien
Dies kommt auf 1.3.3 Sensorische Eigenschaften zurück, wo es heißt:
„Inhalte können ohne Informations- oder Funktionsverlust und ohne Scrollen in zwei Dimensionen dargestellt werden.“
HTML-Validator
Gültiges HTML ist der Schlüssel für jede solide, hochwertige Website oder App. Es stellt die grundlegende Erfahrung für Ihre Benutzer dar und wie Browser sowie unterstützende Technologien Ihre Inhalte lesen und interpretieren. Dies trägt auch dazu bei, eine konsistente Benutzererfahrung auf allen Geräten zu generieren.
Stellen Sie sicher, dass Sie das von Ihrer Website oder Webanwendung generierte Markup mit dem W3 Nu HTML Checker testen, um sicherzustellen, dass Best Practices verwendet werden.
WCAG-Erfolgskriterien
Dies kommt auf 4.1.1 Parsing zurück, wo es heißt:
„Bei Inhalten, die mit Markup-Sprachen implementiert werden, haben Elemente vollständige Start- und End-Tags, Elemente sind gemäß ihren Spezifikationen verschachtelt, Elemente enthalten keine doppelten Attribute und alle IDs sind eindeutig, es sei denn, die Spezifikationen erlauben diese Funktionen.“
Titel Attribut
Das title ist ein globales HTML-Attribut, das einen „Tooltip“-ähnlichen Text bereitstellt, wenn mit der Maus über das angewendete Element gefahren wird. Es mag wie eine bequeme Methode erscheinen, um zusätzlichen Kontext hinzuzufügen, aber in Wirklichkeit hat es das Potenzial, einige Barrierefreiheitsprobleme zu verursachen:
- Der
titleist nur per Mouse-Hover verfügbar, wobei sehende Benutzer, die nur Tastatur oder Sprachdiktat verwenden, ausgelassen werden. - Der Text, der beim Hover angezeigt wird, kann das Lesen von anderem Text in der Nähe für Menschen mit Sehbehinderung, die eine Zoom- Software benötigen, stören
- Screenreader können den barrierefreien Namen (den sichtbaren Teil oder Text) des Elements zusätzlich zum
titleansagen, wodurch ein überflüssiges oder übermäßig ausführliches Erlebnis entsteht - Abhängig von der Einrichtung ignorieren Screenreader den Inhalt von
titlemöglicherweise vollständig
Die allgemeine Empfehlung lautet, die Verwendung des title Attributs vollständig zu vermeiden . Wenn Sie einen Tooltip für eine bestimmte Benutzeroberfläche benötigen, beachten Sie Folgendes:
- Legen Sie den möglichen Tooltip-Inhalt als reinen Text in Klammern fest
- Passen Sie die Benutzeroberfläche an, um zu vermeiden, dass ein Tooltip erforderlich ist
- Erstellen Sie eine benutzerdefinierte, barrierefreie QuickInfo
Eine Ausnahme
Eine Ausnahme bildet die Bereitstellung einer Beschreibung für iframe Elemente. Screenreader müssen dem Benutzer einen Kontext darüber geben, wofür der iframe dient, und eine der einfachsten Möglichkeiten, dies zu erreichen, ist das Einfügen eines title . Es muss nichts Besonderes sein, nur ein Hinweis auf den Inhalt des iframe .
Der Grund dafür, dass dies eine Anforderung ist, liegt darin, dass iframe -Elemente Inhalte von Drittanbietern darstellen, die auf der Seite eingebettet sind. Infolgedessen müssen Bildschirmlesegeräte in den Frame "einsteigen", bevor sein Inhalt entdeckt werden kann.
Um beispielsweise einen iframe mit VoiceOver einzugeben, würde der Benutzer zuerst über den virtuellen Cursor ( Ctrl + Opt und Right ) auf den iframe stoßen und dann Ctrl + Opt + Shift und Down drücken.