Wichtige Standards für barrierefreie Linkbenennung (KI-generiert / Gemini):

• Sprechende Linktexte: Linktexte müssen den Zweck des Links eindeutig beschreiben, z.B. statt „hier klicken“ oder „mehr“ besser „Anmeldeformular herunterladen“.

• Kontextunabhängigkeit: Ein Link muss auch ohne den umgebenden Text verständlich sein, da blinde Nutzer oft mit dem Screenreader eine Liste aller Links auf einer Seite aufrufen.

• Identische Links, identischer Zweck: Links mit demselben Text sollten auf dasselbe Ziel führen.

• Verlinkte Grafiken: Wenn Bilder verlinkt sind, muss der Alternativtext (Alt-Text) das Ziel des Links beschreiben (nicht nur das Bild selbst).

• Dateiformate: Bei Links auf Dokumente sollte das Format angegeben werden, z.B. „PDF-Dokument: Jahresbericht (1,5 MB)“.

• Externe Links / Neue Fenster: Wenn sich ein Link in einem neuen Fenster öffnet, muss dies angekündigt werden, z.B. durch ein Icon mit entsprechendem Alternativtext.

Im Kontext von Barrierefreiheit bezieht sich das Schlagwort "Navigation" auf die Art und Weise, wie Nutzer durch eine Webseite navigieren können. Eine barrierefreie Navigation sollte folgende Aspekte berücksichtigen:

1. Einfache Zugänglichkeit: Die Navigation sollte für alle Benutzer leicht zu finden und zu benutzen sein, unabhängig von ihren Fähigkeiten. Menschen mit Behinderungen nutzen unterschiedliche Hilfsmittel, um durch Webseiten zu navigieren. Zum Beispiel verwenden viele Menschen mit Sehbehinderungen Screenreader, die den Text auf der Seite laut vorlesen. Andere nutzen Tastaturkürzel, um sich durch die Navigation zu bewegen, da sie möglicherweise keine Maus verwenden können. Auch Menschen mit motorischen Einschränkungen profitieren von einer Navigation, die einfach mit der Tastatur bedient werden kann. Dazu gehört, dass alle interaktiven Elemente gut erreichbar sind und keine komplexen Mausbewegungen erfordern.

2. Klare Struktur: Die Menüstruktur sollte logisch und intuitiv sein, damit Nutzer schnell die Informationen finden, die sie suchen. Überschriften und Unterkategorien sollten klar benannt sein. Das Anlegen von Akkordeons, einer Content-Navigation oder verschiedenen Spaltenelementen kann helfen, die Webseite weiter zu strukturieren und Inhalte übersichtlich darzustellen.

3. Visuelle Unterstützung: Links und Menüs sollten visuell hervorgehoben werden, um die Orientierung zu erleichtern. Hauptüberschriften sollten mit der Schriftgröße H2 gesetzt werden, während alle Unterthemen kleinere Überschriften verwenden sollten. Die Größe der Schrift beschreibt die Hierarchien und priorisiert somit die Themen in ihrer Navigationstiefe. Außerdem sind ausreichende Kontraste und angemessene Schriftgrößen wichtig.

4. Unterstützung für Screenreader: Die Navigation muss so gestaltet sein, dass sie von Screenreadern gut interpretiert werden kann. Das bedeutet, dass Links beschreibende Texte haben sollten, die den Inhalt des Links klar machen. Auch Bilder müssen einen Alternativtext haben, der beschreibt, was auf dem Bild zu sehen ist. Wenn Bilder als Verlinkungen dienen, sollten sie ebenfalls entsprechend im Alternativtext beschrieben werden, um den Nutzern den Kontext zu vermitteln.

1. Schriftarten: Gut lesbare Schriftarten sind essentiell. Sans-Serif-Schriften wie Arial oder Helvetica sind eine gute Wahl für Online-Inhalte, da sie klar und modern wirken.

2. Schriftgrößen: Unterschiedliche Schriftgrößen für Hierarchien erleitern die Navigation mit Hilfe eines Screenreaders. Hauptüberschriften (H2) sollten größer sein als Unterüberschriften (H3, H4). Eine gute Grundschriftgröße für Fließtext liegt bei etwa zwölf bis fünfzehn Pixeln.

3. Kontrast: Ausreichende Kontraste zwischen Text und Hintergrund sind essentiell. Dunkler Text auf hellem Hintergrund oder umgekehrt verbessert die Lesbarkeit erheblich.

4. Zeilenabstand: Ein ausreichender Zeilenabstand (mindestens eins-komma-fünf) sorgt dafür, dass der Text leichter zu lesen ist und nicht zu gedrängt wirkt.

5. Textausrichtung: Linksbündigkeit fördert die Lesbarkeit. Zentrierter oder rechtsbündiger Text kann schwerer zu lesen sein, besonders bei längeren Absätzen.

1. Bilder

• Alternativtexte: Fügen Sie für alle Bilder und Grafiken beschreibende Alternativtexte hinzu, damit Screenreader die Inhalte beschreiben können.

2. Struktur

• Überschriften: Verwenden Sie eine klare Hierarchie mit Überschriften (H1, H2, H3) für eine bessere Navigation.
• Tabellen: Fügen Sie Beschriftungen und Zusammenfassungen für Tabellen hinzu, damit sie von Screenreadern verstanden werden können.

3. Farbkontraste

• Ausreichender Kontrast: Stellen Sie sicher, dass der Farbkontrast zwischen Text und Hintergrund ausreichend ist, um eine gute Lesbarkeit zu gewährleisten. Verwenden Sie Tools wie den Web Content Accessibility Guidelines (WCAG) Contrast Checker, um den Kontrast zu überprüfen.

4. Interaktive Elemente

• Beschriftete Links und Formularfelder: Fügen Sie interaktive Elemente wie Links und Formularfelder hinzu, die von Screenreadern erkannt werden können. Stellen Sie sicher, dass alle Links beschriftet sind und einen sinnvollen Kontext bieten.

5. Tipp:

• In Microsoft Word lässt sich die Barrierefreiheit umgehend überprüfen. Sobald hier das Dokument als barrierefrei eingestuft wird, lässt sich ein barrierefreies pdf-Dokument drucken und in Typo3 einbinden.  

Um einen Selbsttest Ihrer Webseite auf Barrierefreiheit durchzuführen, können Sie die folgenden Schritte befolgen:

1. Rufen Sie die gewünschte Homepage in Mozilla Firefox auf: Öffnen Sie den Firefox-Browser und gehen Sie zu der Webseite, die Sie testen möchten.

2. Rechtsklick und gehen Sie auf "Untersuchen": Klicken Sie mit der rechten Maustaste irgendwo auf die Seite und wählen Sie "Untersuchen" aus dem Kontextmenü.

3. Im unteren Bereich der Seite ploppt ein Menü auf: Dies öffnet die Entwicklerwerkzeuge am unteren Rand des Browsers.

4. Gehen Sie auf den Reiter "Barrierefreiheit": Suchen Sie den Tab mit der Bezeichnung "Barrierefreiheit" in den Entwicklerwerkzeugen.

5. Im Untermenü befindet sich der Unterpunkt "Überprüfung auf Probleme": Klicken Sie auf diesen Unterpunkt, um die Barrierefreiheitsanalyse zu starten.

6. Wählen Sie "Alle Probleme": Dies zeigt Ihnen eine umfassende Liste von Barrierefreiheitsproblemen auf der Webseite.

7. Nun wird in bunter Schrift angezeigt, was nicht die Barrierefreiheitsstandards erfüllt und was verändert werden muss: Ein Ausrufezeichen wird neben den jeweiligen Problemen angezeigt, um sie hervorzuheben.

8. Mit einem Klick auf das Symbol mit dem Ausrufezeichen wird an rechten Bildrand die Problematik erläutert: Hier erhalten Sie detaillierte Informationen darüber, was das Problem ist und wie Sie es beheben können.

Durch diese Schritte können Sie die Barrierefreiheit Ihrer Webseite effektiv überprüfen und notwendige Anpassungen vornehmen!