Verbesserung der Zugänglichkeit von Websites – bewährte Praktiken

Was ist Barrierefreiheit im Internet?

Die Zugänglichkeit von Websites ist in erster Linie der Prozess der Webentwicklung und -gestaltung unter Verwendung von Werkzeugen und Technologien, die die Wahrnehmung, das Verständnis, die Teilnahme, die Navigation und die Interaktion einer Person mit einer Behinderung auf einer Website erleichtern. Probleme wie das langsame Laden einer Website, schlechtes Seitendesign mit kleinen Schriftarten und geringem Kontrast oder Frustration beim Navigieren auf einer nicht mobilfreundlichen Seite sind für jeden Nutzer ein Ärgernis. Aber für Menschen mit Behinderungen können sie die Nutzung des Internets völlig einschränken.

Wie Sie Ihre Website barrierefrei gestalten

Die meisten Webinhalte können durch die korrekte Verwendung von Hypertext Markup Language-Elementen zugänglich gemacht werden. Dieser Artikel beschreibt, wie HTML verwendet werden kann, um eine Website so zugänglich wie möglich zu machen. Eine barrierefreie Website ist eine Website, die so gestaltet ist, dass jeder sie problemlos nutzen kann, auch Menschen mit Behinderungen. Wenn Sie sich bei der Webentwicklung an die WCAG-Anforderungen halten, können Sie die Benutzerfreundlichkeit verbessern, auch für Menschen mit Behinderungen. Hier sind einige hilfreiche Tipps, die Sie zur Verbesserung der Zugänglichkeit Ihrer Website verwenden können.

Wenn Sie die Website programmatisch in C# auf die Einhaltung der WCAG-Richtlinien überprüfen wollen, bietet Aspose.HTML for .NET den Aspose.Html.Accessibility Namensraum, der für alle Manipulationen und Überprüfungen im Zusammenhang mit der Barrierefreiheit im Web vorgesehen ist. Finden Sie heraus, ob Ihre Website WCAG-konform ist!

Nachstehend finden Sie eine Liste der wichtigsten Grundsätze für barrierefreies Design.

Alt-Text zu Bildern hinzufügen

Alternativtext ist eine Textbeschreibung des Nicht-Text-Inhalts von Webseiten (Bilder, Illustrationen, Diagramme usw.). Achten Sie darauf, Alt-Text zu verwenden, um Bildinhalte für Menschen mit Sehschwäche zugänglich zu machen, einschließlich Menschen, die Bildschirmleser oder Braille-Ausgabegeräte verwenden. Um einen effektiven Alt-Text zu schreiben, müssen Sie wissen, dass er prägnant, zugänglich und informativ sein muss.

<img src="lioness.jpg" alt="The muzzle of a lioness close-up. The lioness looks away.">

Alternative Texte (“alt text”) vermitteln den Zweck des Bildes, einschließlich Bildern, Illustrationen, Diagrammen usw. Weitere Informationen finden Sie im Artikel Zugänglichkeit für Bildschirmleser.

Bereitstellung von Alternativen für Audio- und Videoinhalte

Informationen in Audiodateien sind für Gehörlose nicht verfügbar, Videoinformationen sind für Blinde oder Sehbehinderte nicht verfügbar. Video- und Audiodateien müssen in einem alternativen Format wie Untertiteln und Texttranskriptionen bereitgestellt werden.

Der Hauptzweck des Elements <track> ist die Bereitstellung von Untertiteln für Video- und Audioinhalte. Sie können es wie folgt verwenden:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="captions.vtt" kind="subtitles" srclang="en" label="English Captions">
</video>

In diesem Beispiel hat ein <video>-Element ein <track>-Element, das auf eine captions.vtt-Datei verweist, die Untertitel oder Untertitel enthält. Weitere Informationen finden Sie im Artikel Multimedia-Zugänglichkeit.

Verwenden Sie das richtige Farbkontrastverhältnis – Setzen Sie Farben sorgfältig ein

Für die visuelle Wahrnehmung des Inhalts ist es notwendig, den optimalen Farbkontrast von Hintergrund und Text zu gewährleisten, die optimale Skalierung des Textes sicherzustellen, ohne dass Inhalt oder Funktionalität verloren gehen, und dabei die Schriftart, den Zeilenabstand und vieles mehr zu berücksichtigen.

Unten sehen Sie ein Beispiel für einen guten Kontrast zwischen Schrift und Hintergrund und ein Beispiel für einen schlechten Kontrast:

Good contrast

Bad contrast

Weitere Informationen finden Sie im Artikel Zugänglichkeit von Farbkontrasten.

Semantisches HTML – Darstellung der logischen Struktur der Seite

Semantisches HTML bezieht sich auf die Verwendung von HTML-Elementen zur Darstellung der logischen Struktur und Bedeutung von Inhalten auf einer Webseite. Es ist ein grundlegendes Konzept in der Webentwicklung, das die Zugänglichkeit, die Suchmaschinenoptimierung (SEO) und ein besseres Verständnis von Webdokumenten durch Menschen und Maschinen fördert.

Überschriften, Zwischenüberschriften, Tabellen, Listen und andere Strukturelemente geben Webseiten Sinn und Struktur. Sie helfen nicht-visuellen Nutzern zu verstehen, wie die Seite aufgebaut ist, und erleichtern Nutzern von Bildschirmlesegeräten die Navigation. Sie können auch das Navigieren auf der Seite mit der Tastatur erleichtern.

Stellen Sie sicher, dass in Inhalten, die mit Hilfe von Auszeichnungssprachen implementiert wurden, die Elemente vollständige Start- und End-Tags haben, dass die Elemente gemäß ihren Spezifikationen verschachtelt sind, dass die Elemente keine doppelten Attribute enthalten und dass alle Bezeichner eindeutig sind, es sei denn, die Spezifikationen erlauben solche Merkmale.

Stellen Sie sicher, dass der Inhalt klar geschrieben und leicht zu lesen ist

Angabe der Sprache des Textes. Geben Sie die Hauptsprache jeder Seite an, indem Sie das Attribut lang im html-Tag verwenden, zum Beispiel <html lang=“en”>. Verwenden Sie das Attribut lang für bestimmte Elemente, wenn sich die Sprache des Elements vom Rest der Seite unterscheidet.

<html lang="en"> <!--document head and body--> </html> 

Zugang über die Tastatur

Die Benutzer können mit allen Steuerelementen und interaktiven Elementen entweder mit der Maus, der Tastatur oder einem Hilfsmittel interagieren. Viele Benutzer mit motorischen Behinderungen sind jedoch auf eine Tastatur angewiesen. Daher ist die Tastaturzugänglichkeit einer der wichtigsten Aspekte der Barrierefreiheit im Web. Einige wichtige Überlegungen und bewährte Verfahren zur Gewährleistung der Tastaturzugänglichkeit bei der Webgestaltung und -entwicklung sind:

1. Tastaturzugriff auf alle interaktiven Elemente wie Schaltflächen, Links, Formularfelder und Menüs.
2. Bieten Sie einen sichtbaren Fokusindikator, z. B. einen hervorgehobenen Rahmen, um interaktive Elemente nacheinander zu navigieren, während die Benutzer mit der Tabulatortaste und Umschalt+Tab durch die Elemente vorwärts und rückwärts navigieren.
3. Stellen Sie sicher, dass Dropdown-Menüs und Navigationsmenüs über die Tastatur zugänglich sind und dass Benutzer mit den Pfeiltasten und der Eingabe- oder Leertaste in Untermenüs navigieren können.
4. Stellen Sie sicher, dass Sie modale Dialoge und Pop-ups mit der Tastatur verschieben und schließen können.
5. Führen Sie Usability-Tests mit Personen durch, die auf die Tastaturnavigation angewiesen sind, und sammeln Sie Feedback zur Benutzerfreundlichkeit.

Zugänglichkeit der Navigation

Die Unterstützung der Benutzer bei der Navigation, beim Auffinden von Inhalten und bei der Bestimmung ihres Standorts auf einer Website oder in einer Webanwendung ist für die Schaffung eines benutzerfreundlichen und zugänglichen digitalen Erlebnisses unerlässlich. Um dies zu erreichen, sollten Sie die folgenden Möglichkeiten bieten:

1. Implementieren Sie ein klares Navigationsmenü am oberen Rand der Seite, das Links zu den wichtigsten Abschnitten und Seiten Ihrer Website enthält.
2. Verwenden Sie beschreibende Bezeichnungen für Menüpunkte, damit die Nutzer wissen, wohin die einzelnen Links führen.
3. Platzieren Sie eine Suchleiste an prominenter Stelle auf Ihrer Website, damit Nutzer nach bestimmten Inhalten oder Produkten suchen können.
4. Stellen Sie sicher, dass sich Ihre Website an verschiedene Bildschirmgrößen und Geräte anpasst und eine konsistente Navigation und Inhaltserfassung bietet.
5. Verwenden Sie klare und aussagekräftige Überschriften (<h1>, <h2>, usw.), um den Inhalt zu strukturieren und den Inhalt der Seite anzuzeigen.
6. Achten Sie darauf, dass Links und Schaltflächen klare und informative Bezeichnungen haben. Vermeiden Sie generische Beschriftungen wie “hier klicken” oder “mehr lesen”

Sicherstellung eines vorhersehbaren Erscheinungsbildes von Webseiten

Das Erscheinungsbild und die Funktionsweise von Webseiten sollen vorhersehbar sein. Stellen Sie sicher, dass das Ändern der Einstellungen einer UI-Komponente nicht automatisch den Kontext ändert, wenn der Benutzer das Verhalten vor der Verwendung der Komponente nicht kannte.

Stellen Sie sicher, dass Beschriftungen und Anweisungen für die Benutzereingabe vorhanden sind

Machen Sie das Formular zugänglich. Versehen Sie jedes Formularelement (Textfeld, Kontrollkästchen, Auswahlliste usw.) mit Anweisungen oder Beschriftungen, die die Steuerelemente im Formular identifizieren, damit die Benutzer wissen, welche Eingaben erwartet werden. Im Falle von Optionsfeldern, Kontrollkästchen, Kombinationsfeldern oder ähnlichen Steuerelementen, die dem Benutzer Optionen bieten, sollte jede Option mit einer entsprechenden Beschriftung versehen werden, damit der Benutzer weiß, was er tatsächlich wählt. Verwenden Sie das Element <label>, um Beschriftungen mit Formularsteuerelementen zu verknüpfen.

Schlussfolgerung

Barrierefreie Websites sind entscheidend für ein gutes Nutzererlebnis. Mit diesen Tipps und Tricks können Sie Ihre Website für alle Nutzer zugänglich machen, auch für Menschen mit Behinderungen. Durch die Umsetzung dieser Strategien können Sie eine benutzerfreundliche und zugängliche Webumgebung schaffen, die den Nutzern hilft, effizient zu navigieren, Inhalte zu finden und einen klaren Überblick über ihren Standort zu behalten.

Siehe auch

• Im Kapitel Zugänglichkeitsprüfung erfahren Sie, wie Sie die Zugänglichkeit einer Website auf die Einhaltung der WCAG überprüfen oder nur bestimmte Kriterien erfüllen können, indem Sie Klassen und Methoden der Namensräume Aspose.Html.Accessibility und Aspose.Html.Accessibility.Results verwenden.
• Schauen Sie sich den Artikel Farbkontrast in C# prüfen an, wenn Sie erfahren möchten, wie Sie den Kontrast Ihrer Webinhalte richtig an die WCAG-Standards, die weltweite Autorität für Barrierefreiheit im Web, anpassen. Sie erfahren, wie Sie die Zugänglichkeit von Farbkontrasten mit C# testen und Ihre Webinhalte für alle Benutzer leicht lesbar machen können.
• Im Artikel Accessibility Validator lernen Sie die Klasse AccessibilityValidator kennen, die zum Testen von Zugänglichkeitsregeln wie Prinzipien, Richtlinien und Kriterien verwendet werden kann.
• Der Artikel Fehler und Warnungen beschreibt die Klassen und Schnittstellen, mit deren Hilfe Informationen über Fehler und Warnungen während des Testens der Barrierefreiheit von Websites gesammelt werden können. Er konzentriert sich auf die Fehlerkriterien und Methoden, die Fehler melden, und bietet ein C#-Beispiel zum Abrufen von Fehlern bei der Barrierefreiheit nach dem Testen eines HTML-Dokuments.
• Verwenden Sie den Online- Farbkontraste Prüfer, um die Kontrastverhältnisse in Ihren Webdesigns zu überprüfen. Dieses Tool gibt Ihnen Rückmeldung darüber, ob Ihre Farbwahl den Zugänglichkeitsstandards entspricht.