Barrierefreies Webdesign ist eine wichtige Komponente zur Bereitstellung einer positiven Nutzererfahrung und der allgemeinen Nutzerzufriedenheit der Anwendung. Eine zugängliche Webanwendung gewährleistet denselben Zugang für Menschen mit unterschiedlichen Fähigkeiten und für Menschen an verschiedenen geografischen Standorten. Menschen mit Einschränkungen in Bezug auf ihre akustischen, kognitiven, Sprech- oder Sehfähigkeiten sowie vorübergehende Einschränkungen in Bezug auf kurzfristige Beeinträchtigungen, eine langsame Internetverbindung oder selbst helles Sonnenlicht sollten auf Ihre Webanwendung zugreifen können. Verwenden Sie beim Erstellen des Front-Ends Ihrer Webanwendung von Anfang an Bedienungshilfen, um Probleme mit der Barrierefreiheit zu vermeiden und Aufgaben später während des Build-Prozesses zu wiederholen. Ihre Anwendungsinhalte müssen von Web-Crawlern und Screenreadern durchsucht werden können und gleichzeitig eine positive Nutzererfahrung bieten.
Barrierefreiheit ist in vielen Ländern und Branchen eine rechtliche Verpflichtung. Sie müssen diese Richtlinien verstehen und Lösungen für Barrierefreiheit in Ihr Front-End-Design einbinden. Verschiedene Anwendungsfälle unterstreichen auch die Bedeutung der Barrierefreiheit für Webinhalte.
Ressourcen wie MDN und WCAG bieten grundlegende Richtlinien und Vorschläge zur Verbesserung der Zugänglichkeit Ihrer Webanwendung. Sie können auch den Kurs Barrierefreiheit im Internet auf web.dev absolvieren.
Die Interdependenz zwischen verschiedenen Komponenten ist ein wesentlicher Aspekt, um eine Webanwendung für verschiedene Nutzer zugänglich zu machen.
Farbe und Kontrast
Die Verwendung von Farben ist ein Hauptfaktor bei der Beurteilung der Zugänglichkeit einer Webanwendung. Front-End-Nutzer müssen den Inhalt der Seite wahrnehmen können und Farbe und Kontraste müssen die Wahrnehmung der Inhalte durch den Nutzer erheblich beeinflussen. Anzeigebedingungen und Sehbehinderungen können temporär, situativ oder dauerhaft sein. Sie müssen jedoch beim Erstellen des Front-Ends Ihrer Webanwendung berücksichtigt werden. Wenn Sie den richtigen Kontrast oder Helligkeitsunterschied zwischen den Farben auf der Benutzeroberfläche für Nutzer erstellen, kann Ihre Webanwendung für diverse Nutzer zugänglicher werden. Das Kontrastverhältnis gibt den Helligkeitsunterschied zwischen Hintergrund und Text an.
Zum Messen des Kontrasts können Sie mithilfe der Formel für das Kontrastverhältnis dafür sorgen, dass für den Text oder die Symbole im Hintergrund ein minimaler Kontrast vorhanden ist. Es gibt viele Formen von Beeinträchtigungen der Farbwahrnehmung, die berücksichtigt werden müssen, aber neue Farbmodelle können dafür sorgen, dass Inhalte auch in Graustufen korrekt wahrgenommen werden.
Häufig wird die Verwendung eines dunklen Designs empfohlen, um Farben und Kontraste für die Barrierefreiheit zu unterstützen. Dunkle Designs werden häufig für die visuelle Eingabe bevorzugt, da sie aufgrund von weißem Licht und Problemen beim Lesen nicht gut lesbar sind. Da inhaltsorientierte Anwendungen eine große Menge an Text und Bildern enthalten, ist es wichtig, dass Sie Farbe und Kontrastverhältnis sorgfältig einsetzen, um den unterschiedlichen Anforderungen Ihrer Nutzer gerecht zu werden.
Weitere Informationen zu Farbe und Kontrast auf web.dev
Typografie
Typografie bezieht sich auf die Wahl und Anordnung von Texten, die für verschiedene Nutzende lesbar und lesbar ist. Eine der am häufigsten geänderten Bedienungshilfen ist die Standardschriftgröße auf Geräten. Einige Nutzer möchten möglicherweise mehr Text auf dem Bildschirm mit einer kleineren Schriftgröße unterbringen oder den Text so groß wie möglich gestalten. Daher ist es sehr wichtig, die Typografiegröße flexibel und lesbar zu gestalten. Außerdem sollten einzelne Textzeichen für den Leser erkennbar sein und der gesamte Text muss lesbar sein. Achten Sie beim Front-End-Design Ihrer Anwendung darauf, dass Sie Schriftbilder auswählen, die sowohl Lesbarkeit als auch Lesbarkeit umfassen.
Schriftart
Das Schriftbild oder die Schriftfamilie, die Sie für Ihre Webanwendung auswählen, sollte für eine große Bandbreite von Lesern visuell zugänglich sein. Das Schriftbild ist das visuelle Design der Buchstaben, die im Text Ihrer Anwendung verwendet werden. In vielen Studien wird die Bedeutung der Schriftart für die Bewertung der Zugänglichkeit von Webinhalten beschrieben. Wenn Sie die richtige Balance zwischen der Marke, den Designzielen der Benutzeroberfläche und der Lesbarkeit finden, wird Ihre Anwendung für eine größere Bandbreite von Nutzern angenehmer. Überlegen Sie beim Erstellen des Front-Ends, inwiefern die Schriftbildoptionen sowie die darin enthaltenen Schriftartoptionen zur Barrierefreiheit und zum Gesamtdesign Ihrer Anwendung beitragen.
Schriftgröße
Erwägen Sie, den Browser-Zoom zu verwenden, um Nutzer mit eingeschränktem Sehvermögen oder einer Beeinträchtigung der Farbwahrnehmung zu unterstützen. Die Schriftart des Textes in Ihrer Webanwendung muss für verschiedene Leser sichtbar sein. Schriftgrößenvariationen können durch einen Wechsel von px zu rem erreicht werden. Bei Rem-Einheiten ist eine Schriftgröße relativ zum Stammelement der WEP-Anwendung möglich. Dies ist eine vielseitige Option, mit der Sie die Zugänglichkeit Ihrer Webanwendung insgesamt verbessern können.
Struktur und Layout
Verschiedene Struktur- und Layouteigenschaften wirken sich auf die Barrierefreiheit Ihrer Oberfläche aus. Zu den zu berücksichtigenden Layoutfunktionen gehören der Abstand zwischen Textblöcken und die Ausrichtung sowie der Abstand zwischen Textzeilen und sogar einzelnen Buchstaben. Verwenden Sie Gitter und visualisieren Sie die Komponenten, die Sie in Ihr Design aufnehmen möchten. Das Layout und die Struktur der Inhalte sollten ansprechend und für die Nutzer angenehm sein. Komplexe Layouts oder unruhige Hintergründe mit mehreren Textblöcken können für manche Nutzer schwierig sein, z. B. für Nutzer mit ADHS. Priorisieren Sie bei Ihrem Front-End-Designprozess unbedingt Inklusion.
ARIA und HTML
Accessible Rich Internet Applications (ARIA) enthalten eine Reihe von Richtlinien und Attributen, um die Barrierefreiheit von Webanwendungen für Nutzer zu verbessern. ARIA ergänzt HTML und ermöglicht unter anderem barrierefreie JavaScript-Widgets, Live-Inhaltsaktualisierungen und Fehlermeldungen. Der richtige Einsatz von ARIA ist unerlässlich, um die Barrierefreiheit Ihrer Webanwendung zu verbessern. Die falsche Verwendung von ARIA kann zu Fehlern führen und die Barrierefreiheit Ihrer Anwendung für Nutzer beeinträchtigen.
Verwenden Sie nach Möglichkeit ARIA-Labels, um alternative Formate einzuführen, die mit Braille und Sprachausgabe kompatibel sind. Mit ARIA-Rollen und -Labels können Sie den Baum für Barrierefreiheit ändern, wenn er sich vom Dom-Baum unterscheidet. Diese Labels sind auch wichtig, wenn Sie nicht standardmäßige Tags verwenden, z. B. div, die als anklickbare Schaltfläche verwendet werden. ARIA ist erforderlich, wenn ein HTML-Element keine Bedienungshilfen unterstützt. Achten Sie beim Entwerfen Ihrer inhaltsorientierten Anwendung darauf, dass Screenreader und andere Hilfsgeräte gut unterstützt werden, damit Ihre Anwendung so viele Nutzer wie möglich erreichen kann.
Weitere Informationen zu ARIA und HTML auf web.dev
Internationalization
Internationalisierung bezieht sich auf das Entwerfen einer Webanwendung, die für Nutzer mit unterschiedlichen linguistischen und kulturellen Hintergründen zugänglich ist. Ihre Webanwendung sollte ohne wesentliche Codeänderungen an verschiedene Sprachen, Regionen und kulturelle Vorlieben angepasst werden können. Zu den Hauptkomponenten der Internationalisierung gehören u. a. mehrsprachige Unterstützung, Lokalisierung, Trennung von Inhalten, Formatierung von Datum und Uhrzeit, Textrichtung und Sprachverhandlungen.
Durch die Internationalisierung Ihrer Webanwendung können Sie eine inklusive und nutzerfreundliche Umgebung für ein breites globales Publikum schaffen. Internationalisierung ist für jede Webanwendung mit einer vielfältigen Nutzerbasis oder dem Ziel einer internationalen Expansion unerlässlich.
Logische Attribute
Wenn Sie Stile in CSS erstellen, müssen Sie start / end anstelle von Eigenschaften wie top / down/ left/ right verwenden. Dadurch werden Menüs und Websitelayouts bei linksläufigen Sprachen entsprechend angepasst.
Alternative Inhalte
Fügen Sie dem HTML-Tag das Attribut lang mit Links zu alternativen Dokumenten in den Header ein, um benutzerdefiniertes Markup für Ihre Inhalte bereitzustellen. So kann der Browser die richtige Seite auswählen, wenn die festgelegte Sprache von der Standardsprache des Browsers abweicht. Sie kann Webbrowsern und Suchmaschinen dabei helfen, die Sprache der Seite zu verstehen. Dies ist wichtig für die korrekte Darstellung der Inhalte und für eine effektive SEO.
International
Das Intl-Objekt in JavaScript ist ein wichtiges Tool zum Erstellen mehrsprachiger und kultursensiver Webanwendungen. Er bietet Internationalisierungs- und Lokalisierungsfunktionen für Webanwendungen und sorgt dafür, dass Ihre Benutzeroberfläche und Ihre Inhalte für Nutzer auf der ganzen Welt verständlich und kulturell passend sind. Zu den vom Intl-Objekt bereitgestellten Funktionen gehören Datums- und Uhrzeitformatierung, Zahlenformatierung und Stringsortierung.
Weitere Informationen zur Internationalisierung auf web.dev
Formulare
HTML-Formulare sind ein wichtiger Bestandteil von inhaltsorientierten Webanwendungen. Sie ermöglichen Nutzerinteraktionen und stellen eine strukturierte Methode zum Erfassen von Nutzerinformationen bereit. Wenn HTML-Formulare für eine große Zielgruppe nicht zugänglich sind, kann dies zu Frustration und Unzufriedenheit bei den Nutzern führen.
Um HTML-Formulare zugänglich zu machen, verwenden Sie semantische HTML-Elemente für alle Formularfelder. Dies hilft assistiven Technologien, den Zweck jedes Feldes zu verstehen, und erleichtert es den Nutzern, sie auszufüllen. Achten Sie außerdem darauf, alle Formularfelder eindeutig zu beschriften. So können Nutzer korrekte und nützliche Informationen bereitstellen. Außerdem ist es wichtig, die Zugänglichkeit Ihrer HTML-Formulare zu testen. Dazu können Sie mithilfe von Hilfstechnologien die Erfahrung eines Nutzers simulieren, der diese Technologien zum Verarbeiten der Inhalte Ihrer Anwendung benötigt.
Weitere Informationen zum Erstellen von Formularen auf web.dev