Barrierefreie Erfahrungen schaffen
Landmark-Regionen
ARIA-Landmark-Rollen helfen Screenreader-Nutzern zu verstehen, wie Inhalte auf einer Webseite organisiert und strukturiert sind. Visuell strukturierte Informationen können programmgesteuert beschriftet werden, damit sie von Screenreader-Nutzern verstanden werden können. Landmarks können auch als Ziele für „Skip-Links“ dienen und Tastaturkürzel für Screenreader-Nutzer bereitstellen, damit sie zwischen den Abschnitten einer Seite springen können.
Implementieren von Landmarks
Der erste Schritt besteht darin, eine Seite in wahrnehmbare Inhaltsbereiche zu unterteilen. Weisen Sie als Nächstes jedem dieser Hauptabschnitte Landmarks zu. Beispiel: banner, main, complementary und contentinfo sind Landmarks der obersten Ebene. Die Web Accessibility Initiative (WAI) bietet eine detaillierte Erläuterung aller verfügbaren Landmark-Regionen.
Landmarks können nicht auf Jutro-Komponentenebene festgelegt werden. Sie müssen daher entscheiden, welche Landmarks am besten für die Verwendung in Ihrer Anwendung geeignet sind.
Überschriften
Überschriften geben an, wie der Inhalt einer Seite strukturiert ist. Nutzer von assistiven Technologien, wie z. B. Screenreadern, können für die Navigation auf einer Seite auch Tastenkombinationen verwenden, wenn die Überschriften korrekt verwendet werden.
Überschriften werden nach ihrer Ebene verschachtelt und reichen von <h1>, der wichtigsten Überschrift, bis zur am wenigsten wichtigen Überschrift <h6>. Vermeiden Sie nach Möglichkeit das Überspringen von Überschriftenebenen, da dies eventuell Verwirrung stiften kann. Vermeiden Sie es beispielsweise, auf <h2> unmittelbar <h5> folgen zu lassen.
In Jutro erhalten bestimmte Komponenten und Muster eine bestimmte Standard-Überschriftenebene. Sie müssen darauf achten, dass die Überschriftenhierarchie logisch bleibt, wenn neue Jutro-Komponenten in einer Anwendung hinzugefügt werden. Wenn Text visuell als Abschnittsüberschrift dient, markieren Sie ihn als Überschrift, um eine korrekte Interpretation durch assistive Technologien zu gewährleisten.
Das folgende Beispiel aus der Web Accessibility Initiative veranschaulicht eine hierarchische Überschriftenstruktur, die eine klare Dokumentenorganisation für Benutzer in den Vordergrund stellt:
Sichtbarkeit des Fokus
Stellen Sie für die Navigation per Tastatur zu einem fokussierbaren Element eine deutlich sichtbare Fokusanzeige bereit. Zu den fokussierbaren Elementen gehören Links, Schaltflächen und Formularsteuerelemente. Alle Jutro-Komponenten verfügen über eine Fokusanzeige mit einem Kontrastverhältnis von mindestens 3:1. Möglicherweise müssen Sie jedoch die Farbe der Fokusanzeige je nach Farbdesign Ihrer Anwendung anpassen. Wenn z. B. die Standard-Fokusanzeige blau ist, Sie aber einen Hintergrund in einem ähnlichen Blau verwenden, fällt die Fokusanzeige möglicherweise nicht auf. Die Fokussichtbarkeit kann mithilfe von Design-Token schnell geändert und einheitlich auf anwendbare Komponenten angewendet werden.
Das folgende Beispiel zeigt ein fokussiertes Texteingabefeld:
Validierung
Hinweise für Formulare
In Jutro wird zur Markierung von Pflichtfeldern ein Sternchen verwendet. Das Sternchen steht vor der Feldbeschriftung. Benutzer können so leicht herausfinden, welche Felder erforderlich sind, indem sie nur das Zeichen ganz links in der Beschriftung prüfen.
Zusätzlich zur Markierung erforderlicher Felder mit einem Sternchen wird empfohlen, klare Anweisungen am oberen Rand des Formulars einzufügen, z. B. „Alle mit einem Sternchen gekennzeichneten Felder sind Pflichtfelder“, um sicherzustellen, dass die Benutzer die Bedeutung des Sternchens verstehen.
Wichtige Anweisungen dürfen nicht als Platzhaltertext hinzugefügt werden, da dies für einige Benutzer eine Reihe von Problemen verursachen kann. Platzhaltertext verschwindet oft, wenn ein Benutzer mit der Eingabe beginnt, was die kognitive Belastung erhöht. Zudem weist Platzhaltertext häufig einen schlechten Kontrast auf. Positionieren Sie Hinweise und Anweisungen, einschließlich Formatierungsbeispiele und -anforderungen, stattdessen außerhalb des Felds. Wenn ein Benutzer beispielsweise das Datumsformat kennen muss, sollte es bevorzugt als dauerhafter Hilfetext eingebunden werden.
Wenn eine Eingabe Sonderzeichen erfordert, muss dies aus der Anleitung klar hervorgehen. Wenn beispielsweise bei der Registrierung ein Kennwort mindestens 8 Zeichen und einen Großbuchstaben enthalten muss, muss dies angezeigt werden, bevor ein Benutzer ein Kennwort ohne diese Vorgaben erstellt.
Fehlermeldungen
Achten Sie darauf, dass Fehlermeldungen so hilfreich wie möglich sind, damit Benutzer Fehler schnell beheben können. Wenn ein Benutzer ein längeres Formular ausgefüllt hat und es mehrere Fehlermeldungen gibt, die nur lauten „Dieses Feld enthält einen Fehler“, ist dies nicht hilfreich. Viel hilfreicher sind stattdessen Fehlermeldungen wie die folgenden:
- „In der E-Mail-Adresse fehlt ein @-Symbol.“
- „Sie haben nichts eingegeben.“
Alternativtext
Alternativtexte sind unerlässlich, um zu gewährleisten, dass Bilder von Menschen mit verschiedenen Behinderungen interpretiert werden können. Zum Beispiel meldet eine Bildschirmlesesoftware alternative Texte und hilft Menschen mit Sehbehinderungen zu verstehen, was eine Abbildung vermittelt.
Es muss entschieden werden, ob ein Bild rein dekorativ ist (ignoriert werden kann) oder einen Alternativtext benötigt. Die Web Accessibility Initiative (WAI) bietet einen hilfreichen Entscheidungsbaum für Alternativtext.
Einige Jutro-Komponenten enthalten Symbole, für die wir einen entsprechenden Standard-Alternativtext mit aria-label hinzugefügt haben. Beispiel:
<svg class="jut__Icon__icon jut__Icon__iconSizeLarge" viewBox="0 0 24 24" role="img" data-testid="icon-gw-check-circle" aria-label="Success icon">
…
</svg>
Wenn Sie einer eigenständigen Symbolkomponente Alternativtext hinzufügen möchten, können Sie dies tun, indem Sie eine aria-label-Eigenschaft an die Komponente übergeben.