Seien wir ehrlich: Ein Produkt, das AA- oder AAA-konform barrierefrei ist, kann einschüchternd sein. Glücklicherweise ist ein barrierefreies Produkt nicht alles oder nichts. Selbst scheinbar kleine Verbesserungen können für viele Menschen eine angenehme Erleichterung bedeuten.
In diesem Sinne sind hier fünf Barrierefreiheits-Sofortmaßnahmen, die Sie heute umsetzen können.
Sofortmaßnahme 1: Aktuelle Seite anzeigen
Es ist wahrscheinlich sicher anzunehmen, dass ein anderer Stil die häufigste Methode ist, um die aktuelle Seite einer Website oder App zu kommunizieren. Selbst wenn diese Stile klar und mit guten Kontrastverhältnissen sind, sind sie immer noch nur ein visueller Hinweis.
Was passiert also, wenn eine Person mit eingeschränktem Sehvermögen diese Trennung nicht sehen kann? Woher weiß sie, auf welcher Seite sie sich befindet?
Die Erstellung eines barrierefreien Produkts bedeutet, sicherzustellen, dass sein Markup die gleiche Klarheit wie sein Design vermittelt.
Das Hinzufügen von aria-current="page" zum aktiven Navigationselement ist eine Möglichkeit, um sicherzustellen, dass Markup und Design dieselben Informationen mit oder ohne assistierende Technologien kommunizieren.
<a aria-current="page" href="/">Home</a>🎉 Bonus
Verwenden Sie CSS-Attributselektoren, um das Element aria-current="page" zu gestalten, damit die visuellen und Markup-Hinweise miteinander verknüpft bleiben.
[aria-current="page"] {
/* Active element styles */
}Sofortmaßnahme 2: Dokumentensprache
Während einige Leute eine Website besuchen und die Sprache oder das Gebietsschema ihrer Inhalte bestimmen können, haben nicht alle Menschen diesen Luxus. Auch hier muss das Markup dieselben Informationen kommunizieren wie das visuelle Design – auch wenn diese Informationen impliziert zu sein scheinen.
Fügen Sie das Attribut lang zum Tag <html> hinzu, um nicht nur die Sprache des Dokuments, sondern auch sein Gebietsschema zu kommunizieren. Dies hilft assistierenden Technologien wie Screenreadern, den Inhalt zu verstehen und zu kommunizieren. Selbst wenn die App nur eine Sprache unterstützt, kann dies für viele Menschen eine angenehme Verbesserung der Lebensqualität sein.
<html lang="en-US">Für Apps, die mehrere Sprachen unterstützen, muss wahrscheinlich nicht nur das Element <html> seinen lang-Wert definiert haben. Verwenden Sie das lang-Attribut für bestimmte Elemente, deren Sprache vom Rest des Dokuments abweicht, z. B. Links in einem Sprachumschaltmenü. In diesem Fall kombinieren Sie die Verwendung von lang mit dem hreflang-Attribut, um nicht nur die Sprache des Links selbst, sondern auch die seines Ziels zu kommunizieren.
<a lang="fi" hreflang="fi" href="/" title="Suomeksi">
<bdi>Suomeksi</bdi>
</a>Sofortmaßnahme 3: Verwenden Sie prefers-reduced-motion
Ob es darum geht, auf Aktionen oder Aktualisierungen aufmerksam zu machen oder ein Gefühl von Lebendigkeit und Charme zu erzeugen – Bewegung in einer App kann ihre Erfahrung wirklich aufwerten. Manche Menschen empfinden diese Erfahrung jedoch als desorientierend.
Windows und MacOS bieten beide eine Einstellung auf OS-Ebene, mit der Menschen die Menge an Bewegung bei der Nutzung ihrer Systeme stark reduzieren können. Die Einstellung prefers-reduced-motion
Nun, mit CSS-Media-Queries können sie das.
Die Media-Query prefers-reduced-motion kann verwendet werden, um die gesamte Bewegung einer App stark zu reduzieren oder zu entfernen, wenn die Systemeinstellung aktiviert ist.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Der hier gezeigte Pauschalansatz verhindert *jede* Bewegung, aber er lässt wenig Raum für Nuancen. Es wäre am besten, die Bedürfnisse der Produktnutzer zu überprüfen, aber auch diese anderen Optionen in Betracht zu ziehen.
Ein Ansatz könnte darin bestehen, nur eine Eigenschaft pro prefers-reduced-motion-Einstellung zu animieren. Betrachten Sie also ein <Modal />, das mit opacity und transform ein- und ausgefadet wird. In Umgebungen mit reduzierter Bewegung würde nur die opacity überblenden. Der Skalierungseffekt würde entfernt, da er häufiger problematisch ist als das Einblenden.
Eine weitere Option könnte sein, die prefers-reduced-motion-Umgebung etwas wörtlicher zu nehmen und jede *Bewegung* zu entfernen. Dies würde unsere skalierenden Modals, gleitenden Schubladen und hüpfenden Benachrichtigungen abschaffen, würde aber Raum für Farbübergänge bei Links und Schaltflächen lassen.
Sofortmaßnahme 4: Daten-Sortierungsstatus anzeigen
Ein gemeinsames Thema bei all diesen Tipps ist die Gewährleistung, dass das visuelle Design und das Markup einer App dieselben Dinge kommunizieren. Wenn das Design also einen Pfeil verwendet, um die Sortierrichtung einer Tabellenspalte anzuzeigen, wie kann dies auch im Markup kommuniziert werden?
Das Setzen des Attributs aria-sort auf ascending /descending auf der Kopfzeile der aktiv sortierten Spalte ermöglicht es dem Markup, dieselbe Inhaltsstruktur wie eine visuelle Anzeige in der Benutzeroberfläche zu kommunizieren.
Dies stellt sicher, dass Menschen, die assistierende Technologien nutzen, und solche, die es nicht tun, den Inhalt auf dieselbe Weise verstehen.
<thead>
<tr>
<th>First Name</th>
<th aria-sort="ascending">Last Name</th>
</tr>
</thead>Sofortmaßnahme 5: Lazy Loading von Listen
Ob beim Scrollen durch einen endlosen Tweet-Strom oder eine unmöglich zu entscheidende Produktliste – das Web hat das Lazy Loading von langen Datenlisten (und Alliterationen, anscheinend) voll und ganz angenommen.
Hier werden die Attribute aria-setsize und aria-posinset sehr wertvoll. Während die Progression einer Person durch die Liste auf verschiedene Weise visuell kommuniziert werden kann, werden diese Attribute verwendet, um dieselbe Progression an viele assistierende Technologien zu kommunizieren.
Als Entwickler haben wir wahrscheinlich Zugriff auf die Länge einer gesamten Liste sowie auf den Index der aktuell angezeigten Elemente. Damit würde das aria-setsize-Attribut die Gesamtlänge der Liste definieren, während das aria-posinset-Attribut die spezifische Position (oder den Index) eines Elements innerhalb dieser Liste definieren würde.
Wenn die Gesamtlänge der Liste nicht bekannt ist, sollte aria-setsize auf -1 gesetzt werden.
Mit diesen Attributen können assistierende Technologien eine Liste besser interpretieren und eine Person ihre Position darin besser verstehen.
<h2 id="top-artists-title">Top Artists of 2021</h2>
<ul role="listbox" aria-labelledby="top-artists-title">
<li role="option" aria-setsize="20" aria-posinset="5">Bloodbound</li>
<li role="option" aria-setsize="20" aria-posinset="6">Manimal</li>
<li role="option" aria-setsize="20" aria-posinset="7">Powerwolf</li>
</ul>Hören Sie sich an, wie diese Attribute mit MacOS VoiceOver angekündigt werden.
🎉 Bonus-Sofortmaßnahme: Axe-DevTools-Erweiterung
Die Umsetzung dieser fünf Barrierefreiheits-Sofortmaßnahmen ist ein großartiger Anfang, aber genau das ist es – ein Anfang. Es gibt eine riesige Landschaft an assistierenden Technologien und Fähigkeiten, die eine Person besitzen kann, und diese allein zu navigieren, kann überwältigend sein.
Glücklicherweise gibt es viele Tools, die bei der Überprüfung der Barrierefreiheit eines Produkts helfen und die Reise überschaubarer machen. Mein persönlicher Favorit – mein treuer Kompass für Barrierefreiheit – ist die Axe-DevTools Browser-Erweiterung.
Das Ausführen des Axe-DevTools Barrierefreiheits-Scanners kann jede Menge wertvolle Informationen liefern. Nicht nur zeigt es alle gefundenen Probleme und Warnungen auf der Seite an, sondern es gruppiert sie auch nach ungefähren Schweregrad. Es kann auch das Element auf der Seite oder im Tab Elemente hervorheben und Links anbieten, um mehr über das spezifische Problem zu erfahren.
Am wichtigsten ist jedoch, dass es klare und prägnante Lösungsansätze für das spezifische Problem bietet.
Zusammenfassend
Ein Produkt wird nicht über Nacht barrierefrei; noch ist die Arbeit an der Barrierefreiheit eines Produkts jemals wirklich abgeschlossen. Wie alles andere im Web entwickelt sich Barrierefreiheit weiter und erfordert Wartung. Doch selbst scheinbar kleine Ergänzungen können Auswirkungen auf die Barrierefreiheit eines Produkts und die Gesamterfahrung einer Person haben.
Nachdem ich mich in eine neue Codebasis eingearbeitet habe, sind dies oft einige der ersten Dinge, die ich mir ansehe – sozusagen „leicht erreichbares Obst“ für die Barrierefreiheit.
AAA oder sogar AA-Konformität zu erreichen, kann sich anfühlen wie die Besteigung eines 8.000 Meter hohen Gipfels. Diese Schritte werden Sie nicht zum Gipfel tragen, aber eine Expedition wird niemals in einem einzigen Schritt abgeschlossen.
Ressourcen
- Erfahren Sie mehr über das
aria-current-Attribut - Erfahren Sie mehr über das
lang-Attribut - Erfahren Sie mehr über das
hreflang-Attribut - Erfahren Sie mehr über
prefers-reduced-motion - Erfahren Sie mehr über das
aria-sort-Attribut - Erfahren Sie mehr über das
aria-setsize-Attribut - Erfahren Sie mehr über das
aria-posinset-Attribut - Axe-DevTools Browser-Erweiterung
Es sei jedoch darauf hingewiesen, dass schnelle Farb- und Elementänderungen für manche Menschen ein großes Problem darstellen können. In diesem Fall kann
@prefers-reduced-motionnatürlich in einen höheren Wert füranimation-durationübersetzt werden.Auch eine Frage: Wenn eine Website es Benutzern erlaubt, die Interfacesprache zu wählen, sodass die Interfacesprache von der Hauptsprache des Seiteninhalts abweichen kann, welche sollte dann der
lang-Attribut des<html>-Elements widerspiegeln?Sie können das
lang-Attribut zu jedem Element hinzufügen, das Inhalt auf der Seite umschließt, auch zu verschachtelten Elementen. Es ist global.In diesem Fall würde ich also das
html-lang-Attribut auf die Sprache setzen, die zuerst oder am häufigsten in dieser Tiefe vorkommt (normalerweise die Interfacesprache), undlang-Attribute hinzufügen, um Inhalt zu umschließen, der davon abweicht.Solange das nächstgelegene umschließende Element oder Elternelement das richtige
lang-Attribut hat, ist alles in Ordnung.Ich würde mir mehr Dokumentation über die Vorteile der Verwendung von
hreflangauf<a>-Elementen wünschen. Die verlinkte Seite spricht nur über<link>-Elemente zusammen mit dem Attribut.Sofortmaßnahme 0: Hören Sie auf, font-weight: 300 zu verwenden.
Sofortmaßnahme -1: Hören Sie auf, grauen Text auf grauem Hintergrund zu verwenden.