Hintergrund zu BFSG, EAA & WCAG

Das BFSG, das eigentlich „Gesetz zur Stärkung der Barrierefreiheit im Bereich des privaten Sektors“ heißt, soll die Richtlinien des EAA und der WCAG zur weitgehenden Umsetzung bringen. Mehr zu den Web Content Accessibility Guidelines mit ihren A und AA-Kriterien kannst Du hier beim World Wide Web Consortium (W3C) nachlesen. Und hier findest Du die Website des BFSG.

Empfohlene SEO-Maßnahmen für eine erfolgreiche BFSG-Strategie

In der Suchmaschinenoptimierung können wir vor allem durch korrekte Verwendung von Auszeichnungssprachen und Attributswerte zur besseren Nutzbarkeit unserer Webseiten und zum einfacheren Konsum unserer Inhalte beitragen.

0. Leichte Sprache & Einfache Sprache

Leichte Sprache nennt man eine Ausdrucksweise, die vorwiegend aus Hauptsätzen besteht und auf lange und eher unbekanntere Wörter verzichtet, oder sie erklärt. Sie folgt einem Regelwerk, an das man sich halten kann. Dagegen ist Einfache Sprache soweit ich weiß nicht definiert. Eine sehr gute Definition findest Du hier bei der Bundeszentrale für politische Bildung (bpb) und ich gebe Dir einen hoffentlich guten Überblick über Leichte Sprache und Suchmaschinenoptimierung.

Potentielle Probleme bei doppelten Inhalten:

• Bietest Du vorhandene Inhalte zusätzlich in leichter Sprache an, könnte Google diese Seiten mit leichter Sprache in den Suchergebnissen ausliefern und das könnte den Großteil Deiner Seitenbesucher irritieren. (UX)
• Zum Anderen kann es vorkommen, dass Google die beiden Versionen als [[Duplicate Content]] betrachtet. Das kann zu einer schlechten Beurteilung der Website, bis hin zu De-Listing führen. (SEO)

Duplicate Content vermeiden:

• Bietet man Inhalte zusätzlich in leichter oder einfacher Sprache an, sollte man diese Inhalte entweder durch [[Link-Maskierung]] und weitere Maßnahmen vor Suchmaschinen verstecken, oder die Seiten auf [[NOINDEX]] setzen.
• Zusätzlich sollten diese Inhalte in nicht in einer XML-Sitemap auftauchen.

Nicht empfohlene Methoden:

• Keine guten Lösungen sind meiner Meinung nach, das Kanonisieren ([[Canonical]]) oder eine Zweckentfremdung von [[hreflang]] , rel=alternate oder Bot-Weichen.

Gedanken zur (technischen) Umsetzung:

Ich denke, es wäre am wirtschaftlichsten, ein LLM zu verwenden, um große Mengen von Text in einfache Sprache zu transformieren. Dabei denke ich vor allem an Produkttexte in Onlineshops.

• Man könnte das LLM lokal auf einem eigenen Server laufen lassen, um volle Kontrolle zu haben und nicht API-Nutzungskosten zahlen zu müssen, für Modelle, die laufend wechseln und angepasst werden müssen.
• Wenn das Shop- oder Content-Management-System bereits multilingual ist, könnte einfache Sprache praktischerweise über das selbe System pflegbar gemacht werden.

Wenn sich Texte in einfacher Sprache im Browser in die Seite einfügen lassen, müsste man sich nicht um Duplicate Content durch eigene URLs oder Parameter kümmern.

1. <title>-Tag

Bietet eine kurze Beschreibung des Inhalts eines Dokuments oder einer Sektion.

2. Headlines h1-h6

Die Verwendung von Überschriften-Tags (<h1> bis <h6>) ist eine bewährte Methode zur Strukturierung von Inhalten auf einer Webseite und zur Verbesserung der Zugänglichkeit. Hier sind einige Gründe und Best Practices für die Verwendung von Überschriften-Tags:

Gründe für die Verwendung von Überschriften-Tags

• Struktur und Hierarchie: Überschriften-Tags helfen dabei, den Inhalt in logische Abschnitte zu unterteilen und die Hierarchie der Informationen klar darzustellen. Dies ist sowohl für menschliche Leser als auch für Suchmaschinen hilfreich.
• Zugänglichkeit: Screenreader und andere Hilfsmittel nutzen Überschriften-Tags, um Benutzern eine Inhaltsübersicht zu bieten und ihnen die Navigation auf der Seite zu erleichtern.
• SEO: Suchmaschinen verwenden Überschriften, um den Inhalt einer Seite zu verstehen und zu indexieren. Eine klare Hierarchie der Überschriften kann dazu beitragen, dass eine Seite besser in den Suchergebnissen platziert wird.

Best Practices für die Verwendung von Überschriften-Tags

• Logische Reihenfolge: Verwenden Sie die Überschriften-Tags in einer logischen Reihenfolge (<h1> für die wichtigste Überschrift, <h2> für die nächste Ebene usw.).
• Überschriften nicht überspringen: Vermeiden Sie das Überspringen von Ebenen (z. B. von <h1> direkt zu <h3>), um eine klare und logische Hierarchie zu gewährleisten.
• Ein <h1> pro Seite: Jede Seite sollte nur ein <h1>-Tag haben, das den Hauptinhalt oder das Hauptthema der Seite beschreibt.
• Beschreibende Überschriften: Stellen Sie sicher, dass die Überschriften den Inhalt des nachfolgenden Abschnitts prägnant und klar beschreiben.

3. Definition Lists für Akkordeons

Eine Definitionsliste (<dl>) kann für Akkordeon-Listen verwendet werden, um die Struktur und Semantik der Inhalte klarer zu gestalten.

Hier ist ein Beispiel, wie eine Akkordeon-Liste mit einer Definitionsliste erstellt werden kann:

HTML-Beispiel erklärt

• HTML-Struktur:
  • <dl>: Umschließt die gesamte Definitionsliste.
  • <dt>: Definiert den Titel oder die Frage der FAQ.
  • <dd>: Definiert die Antwort zur entsprechenden Frage.
  • <button>: Dient als Schaltfläche für das Akkordeon, die den jeweiligen Antworttext ein- und ausklappt.
• ARIA-Attribute:
  • Hierzu gibt es einen eigenen Abschnitt: 8. ARIA-Attribute, aber hier die drei verwendeten Attribute:
    • aria-expanded: Gibt an, ob der Inhalt sichtbar ist.
    • aria-controls: Verknüpft die Schaltfläche mit dem entsprechenden Inhalt.
    • hidden: Verbirgt den Inhalt standardmäßig.

Das vollständige HTML-Beispiel für barrierfreie Akkordeons mit korrekter Auszeichnung dank Definitionslist-HTML inklusive CMS und JavaScript findet Ihr in meinem Codepen: codepen.io/wingerter-the-flexboxer/pen/BagKGYo

4. Tabellen korrekt auszeichnen

Tabellarische Daten lassen sich in HTML mit Tags  wie <table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <col>, und <colgroup> so strukturieren, dass Screenreader und Suchmaschinen die Daten korrekt lesen und Zusammenhänge verstehen können.

• Barrierefreiheit (Accessibility): Um die Zugänglichkeit zu verbessern, sollten Tabellen mit <caption> versehen werden, um den Inhalt zu beschreiben, und <th>-Tags verwendet werden, um Spalten- und Zeilenüberschriften zu definieren.
• Die Strukturierung mit <thead>, <tbody> und <tfoot> erleichtert es Screenreadern, die Daten korrekt zu interpretieren und vorzulesen.
• Suchmaschinenoptimierung (SEO): Durch die Verwendung semantisch korrekter Tags und das Einfügen relevanter Keywords in <caption> und <th>-Tags wird die Sichtbarkeit der Inhalte in den Suchergebnissen verbessert.
• UI / Design: Das Hinzufügen von <colgroup> und <col> ermöglicht eine konsistente Formatierung ganzer Spalten, was die Lesbarkeit weiter erhöht.

Besonders tabellarische Daten sind meist sehr komplex und gar nicht so leicht für nicht analytisch veranlagte Menschen zu verstehen. Die korrekte Anwendung dieser HTML-Tags für tables trägt also dazu bei, dass Tabellen auf Webseiten sowohl für Menschen als auch für Maschinen barrierefrei zugänglich und verständlich sind.

5. <abbr>

Das abbrevation (Abkürzung) Tag kennzeichnet Abkürzungen und bietet eine vollständige Beschreibung von Akronymen.

<abbr title="Barrierefreiheitsstärkungsgesetz">BFSG</abbr>

• Das HTML5-Tag <abbr> ersetzt sozusagen das veraltete <acronym>-Tag.
• Das title-Attribut erklärt das Akkronym.
• Akronyme aus anderen Sprachen, wie etwa „FBI“ für Federal Bureau of Investigation sollte man zusätzlich mit der Sprachinformation ergänzen: 6. fremdsprachige Wörter im Korpus ausziechnen (lang / xml:lang)
• Verwendung von optisch ansprechenden Tool-Tips, ohne Verlustiggehen der Barrierefreiheit: title-Attribut durch ARIA-Attribut ersetzen
  • Hier ist ein Beispiel, wie <abbr> korrekt verwendet wird, wenn man das title-Attribut nicht verwenden möchte, um einen optisch schön gestalteten Tool-Tip anzuzeigen: codepen.io/wingerter-the-flexboxer/pen/YzoyjLw
    • 
  • Und hier erkläre ich ARIA-Attribute: 8. ARIA-Attribute

6. fremdsprachige Wörter im Korpus auszeichnen (lang / xml:lang)

Das Einbinden von ausländischen Begriffen in Fließtext und deren Übersetzung mithilfe des <span>-Tags und der lang/xml:lang-Attribute ist eine gute Praxis, um die Zugänglichkeit und die korrekte Sprachunterstützung zu gewährleisten. Dies hilft nicht nur Benutzern, die unterschiedliche Sprachen sprechen, sondern auch Suchmaschinen und Screenreadern, die Sprache korrekt zu interpretieren.

• Erklärung:
  • Im <head>-Bereich wird die Hauptsprache des Dokuments angegeben.
  • <span>-Tag: Umschließt den ausländischen Begriff und die Übersetzung.
  • lang-Attribut: Gibt die Sprache des umschlossenen Textes an. Dies hilft Browsern und Screenreadern, die korrekte Spracheinstellungen anzuwenden.
  • xml:lang-Attribut: Eine Alternative zum lang-Attribut, hauptsächlich für XML-basierte Dokumente.
• Vorteile:
  • Zugänglichkeit: Screenreader erkennen die Sprache des Textes korrekt und lesen ihn entsprechend vor.
  • SEO: Suchmaschinen können den Inhalt besser interpretieren und korrekt indexieren.
  • Klarheit: Benutzer sehen sofort die Übersetzung des Begriffs, was die Verständlichkeit verbessert.
• Tipps:
  • Verwende das lang-Attribut für jede Sprache, die innerhalb des Fließtextes verwendet wird.
  • Stelle sicher, dass die Übersetzungen korrekt sind und die Bedeutung des Originalbegriffs genau wiedergeben.
  • Verwende das xml:lang-Attribut, wenn Ihr Dokument auch in XML-Formaten verwendet wird oder wenn Du sicherstellen möchtest, dass ältere Benutzeragenten den Sprachwechsel erkennen.

7. Alt-Attribute für Bilder

Da Maschinen wie Text-Reader Bildinhalte nicht „sehen“ können, beschreiben wir die Bildinhalte in einem eigenen Bildattribut namens „alt“ (kurz für Alternativtext). 

Beschreibe genau den Bildinhalt so, als würdest Du das Wesentliche für eine blinde Person erklären. Verwende dabei Keywords, aber fasse Dich kurz. Es sollten nur Bestandteile des Motivs beschrieben werden, die wichtg sind, um die Aussage des Bildes verstehen zu können. Dazu gehören:

• Setting
• Hauptobjekt und ggebenenfalls Nebenobjekte
• Was passiert?
• Emotionale Message oder was zwischen den Zeilen gelesen werden sollte

Beispiel:

<img src="wirt-serviert-kellerbier.jpg" alt="Mann serviert Kellerbier in Krug: Kaukasischer Mann in grüner Schürze und weißem Hemd steht hinter Tresen aus dunkelbraunem Holz und reicht lächelnd einen grauen Steinkrug, auf dem eine cremefarbene Schaumkrone ruht.">

Best Practices für alt -Attribute bei Produktbildern im e-Commerce Shop (B2C & B2B)

• Minimalversion:
  • Verwende klare und präzise Beschreibungen, die das Bild genau wiedergeben.
  • Beispiel: alt="knöchelhohe schwarze Lederschuhe fürs Büro, Modell MODELLNAME mit Schnürsenkeln von HERSTELLER"
• Relevante Details einschließen:
  • Füge relevante Details hinzu, die das Bild beschreiben, wie Farbe, Material, Modell oder spezielle Merkmale.
  • Beispiel: alt="Rotes Baumwoll-T-Shirt für Herren mit V-Ausschnitt und kurzen Ärmeln"
• Einzigartige Beschreibungen für verschiedene Ansichten:
  • Wenn mehrere Bilder dasselbe Produkt aus verschiedenen Blickwinkeln zeigen, erstelle einzigartige Beschreibungen für jede Ansicht.
  • Beispiel: alt="Seitenansicht des schwarzen Lederschuhs MODELL von HERSTELLER" und alt="Rückansicht des schwarzen Lederschuhs MODELL von HERSTELLER"
• Anwendungsfälle beschreiben:
  • Wenn ein Bild das Produkt in einem bestimmten Anwendungsfall zeigt, beschreibe diese Verwendung.
  • Beispiel: alt="MODELL Lederschuhe von HERSTELLER in Schwarz, getragen von einem Mann mit Schuhgröße 43 in einem Büro-Setting"
• Keine redundanten Informationen:
  • Vermeide redundante Informationen, die bereits im Kontext des Bildes klar sind, wie „Bild von“ oder „Foto von“.
  • Beispiel: Statt alt="Bild von roten Handschuhen" einfach alt="Rote Handschuhe"
• Videos ebenfalls beschreiben:
  • Wenn Videos eingebettet sind, stelle sicher, dass sie ebenfalls gut beschriebene alt-Texte oder aria-Attribute haben.
  • Beispiel: aria-label="Video: Detailaufnahmen der besonderen Polster und Nähte vom HERSTELLER Lederschuh MODELL in der Bewegung"
• Suchmaschinenoptimierung (SEO):
  • Verwende relevante Keywords, aber vermeide Keyword-Stuffing.
  • Beispiel: alt="knöchelhohe schwarze Lederschuhe fürs Büro, Modell MODELLNAME mit Schnürsenkeln von HERSTELLER für Herren, Größe 43, geschnürt, verfügbar im Onlineshop"

8. ARIA-Attribute

ARIA (Accessible Rich Internet Applications) ist eine Reihe von Attributen, die entwickelt wurden, um die Zugänglichkeit von Webinhalten und -anwendungen zu verbessern, insbesondere für Benutzer, die Screenreader oder andere assistive Technologien verwenden.

• aria-label: Fügt eine beschreibende Textalternative für ein Element hinzu.

  <button aria-label="Schließen">X</button>

• aria-labelledby: Das aria-labelledby-Attribut wird verwendet, um ein oder mehrere Elemente als Beschriftung für ein anderes Element anzugeben. Dies ist besonders nützlich, wenn die Beschriftung aus mehreren Elementen besteht oder wenn die Beschriftung nicht innerhalb des Elements selbst enthalten ist.

  <label id="username-label">Benutzername:</label>
  <input type="text" id="username" aria-labelledby="username-label">

• aria-describedby: Verweist auf ein anderes Element, das zusätzliche Informationen zum aktuellen Element liefert.

  <input type="text" id="search" aria-describedby="search-desc">
  <div id="search-desc">Geben Sie hier Ihren Suchbegriff ein</div>

  • Ein Beispiel aus der echten Welt für aria-describedby ist das Ergänzen einer
    •  Transkription für Audio-Inhalte:

      • <h2 id="audio-title">Podcast über Traktorreifen</h2>
        <audio controls aria-labelledby="audio-title">
         <source src="audio.mp3" type="audio/mpeg">
         Ihr Browser unterstützt das Audio-Tag nicht.
        </audio>
        <div>
         <h2>Transkription</h2>
         <p>Willkommen zu unserem Podcast über Traktorreifen.</p>
         <p>In diesem Podcast erklären wir die verschiedenen Arten von Traktorreifen und deren Anwendungen.</p>
        </div>

    • und einer Transkription für Video-Inhalte:

      • <video controls aria-describedby="video-description">
         <source src="video.mp4" type="video/mp4">
         Ihr Browser unterstützt das Video-Tag nicht.
        </video>
        <div id="video-description">
         <p>Dieses Video erklärt die verschiedenen Arten von Traktorreifen und ihre Anwendungen.</p>
        </div>

9. Transkription von Audio- und Video-Inhalten

• Audio- und Video-Inhalte sollten als Text angeboten werden, wenn ihre Inhalte einen wesentlichen Teil des Informationsangebots ausmachen.
  • Ausnahmen wären zum Beispiel Hintergrundmusik und Header-Hintergrund-Loops, die eher als Stimmungs- oder Design-Elemente funktionieren.
• Untertiteldateien (.vtt) und Einbindung ins HTML5-Video-Tag sind für selbst gehostete Mediendateien zu empfehlen.
• Sind die Videos von YouTube oder Vimeo eingebunden, sollte man dort Untertitel ermöglichen. Dann werden die Untertitel und Übersetzungen von den jeweiligen Plattformen zur Verfügung gestellt.

10. Übliche Seitenhygiene: korrekte Statuscodes, keine broken links,…

Server Response Codes:

Jedes Dokument (HTML, PDF, Bild, …) sollte immer den korrekten Server-Status-Code zurückliefern.

• Erreichbar und sinnvolle Seite: 200 (Found)
• Kein Inhalt für den aufgerufenen URL bekannt: 404 (Not Found)
• Dokument permanent umgezogen: 301 (Permanent redirect)
• Dokument durch anderes ersetzt: 303 (See other)
• Dokument bewusst nicht mehr vorhanden: 410 (Gone)
• Wartungsarbeiten: 503 (Planned downtime)

404er vermeiden:

Interne und ausgehende Links eines Dokuments sollten vor oder direkt nach der Veröffentlichung des Dokuments geprüft werden, ob sie wie gewünscht funktionieren (durchklicken).

Redirect-Chains vermeiden:

• Es sollte bestenfalls nur immer der direkte Weg von einem URL zum nächsten gegangen werden.
• Es dürfen nie mehr als 3 Redirects in Folge passieren. Manche Browser verfolgen aus technischen Gründen oder um Betrugsversuche zu vermeiden nicht mehr als ein bis drei Redirects, bevor sie abbrechen.

Surftipps (unbezahlt, keine Werbung)

• Wirklich alles barrierefreies HTML findest Du im kostenlosen Webdesign-Kurs von Michael Jendryschik:
  jendryschik.de/archiv/einfuehrung
• Eine gute Übersicht über Webdesign-Regeln für ein barrierearmes und ein barrierefreies Internet findest Du bei Jan Hellbusch:
  www.barrierefreies-webdesign.de/barrierefrei/ueberblick.html