E-Mail

Leitfaden: Barrierefreiheit

  • Ab dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) viele Unternehmen, ihre Webseiten barrierefrei zu gestalten. Ziel ist, digitale Angebote für alle zugänglich zu machen – etwa durch Screenreader-Kompatibilität, klare Navigation und verständliche Inhalte.
  • Die Umsetzung ist komplex und teilt sich in 2 Bereiche auf:
  • Anpassungen im Template und Web-System
  • Dinge, die ein Redakteur bei der Pflege beachten muss
  • Um die Barrierefreiheit zu garantieren, sollte bei der Veröffentlichung eines Inhalts ein Barrierefreiheitscheck durchgeführt werden. Hierzu empfehlen wir 2 Tools:
  • Silktide: kostenfreies Browser-AddOn, mit dem einzelne Seiten geprüft werden können
  • ScreamingFrog: kostenpflichtes Offline-Tool, mit dem die komplette Webseite geprüft werden kann
  • weniger Empfehlenswert: Lighthouse → Accessibility-Test. Testet zu oberflächlich und zeigt deshalb nicht alle Probleme an.
  • Hinweis: Die unterschiedlichen Programme finden auch unterschiedliche Probleme. Teilweise werden auch Probleme erkannt, die nach näherer Betrachtung nicht vorhanden sind.

Barrierefreiheits-Probleme: Tipps + Lösungsansätze für Redakteure

Hinweise:
  • Die folgenden Lösungsansätze beziehen sich ausschließlich auf bee.tools Websysteme.
  • Ob die Lösungen funktionieren, hängt vom Eingabe-Element und dem individuellen Styling Ihrer Webseite ab.
  • Möglicherweise sind Klassen und Einstellungen, die hier genannt werden, in Ihrem Styling, in Ihren individuellen Eingabe-Templates nicht vorhanden.
Bei Fragen wenden Sie sich bitte an unseren Support.

Mehrere nacheinander folgende Links im Text
Mehrere nacheinanderfolgende Links müssen als Liste ausgegeben werden.
  • Um bei den bee.tools Web-Systemen die Listenpunkte zu entfernen, tragen Sie im Textblock-Feld „CSS-Klasse(n) für Text / Liste“ den Wert „sim“ ein.
  • Sollen die Listenwerte nebeneinander angeordnet werden, verwenden Sie zusätzlich die Angabe
    • inlinestart, wenn die Listenpunkte links angeordnet werden sollen
    • inlinecenter, wenn die Listenpunkte mittig angeordnet werden sollen
    • inlineend, wenn die Listenpunkte rechts angeordnet werden sollen
Text Farbkontrast zum Hintergrund
Der Text muss klar lesbar sein. Vor allem bei Elementen, die als Hintergrundfarbe eine der Unternehmens-CI-Farben oder Hintergrundbilder verwenden, taucht das Problem häufig auf.
Regel: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
  • Keine Farben über den Editor setzen.
  • Eine andere Hintergrundfarbe über die CSS-Klasse setzen oder ein anderes Hintergrundbild wählen.
  • Eine andere CSS-Klasse für den Text wählen.
Die Überschriftenstufen sollten sich immer nur um eine erhöhen
Wie bei einem Buch, sollten auch auf einer Webseite die verwendeten Überschriften in der korrekten Hierarchie angegeben werden.
Korrekt: H1 → H2 → H3 → H4 → H5 → H6

In unseren aktuellen Designs gibt es die CSS-Klassen h1, h2, h3, h4, h5, h6. Soll eine Überschrift der 2ten Ebene (H2) wie eine H3 ausschauen, dann bei der Überschrift die „CSS-Klasse(n) für Überschrift“ h3 eintragen.
Dürfen mehrere Überschrift der Ebene 1 (H1) auf einer Seite verwendet werden?
Ja, sofern sich diese thematisch komplett unterscheiden.

In der Regel geht es auf einer Seite / in einem Artikel um ein Thema. Dies wird dann mit den weiteren Unterebenen (H2, H3, H4, H5, H6) korrekt untergliedert. Hier ist eine weitere H1 nicht erlaubt.

Mit der „CSS-Klasse(n) für Überschrift“ h1 kann der Style der 1ten Überschriften-Ebene verwendet werden. Vorsicht, Google orientiert sich bei der Überschriftendarstellung nach eigener Aussage an den Schriftgrößen, nicht an die Überschrift-Ebenen. Deshalb sollte auch dies vermieden werden.
Mehrere Links mit gleicher Bezeichnung, aber unterschiedlichem Ziel
Mehrere Links mit der gleichen Bezeichnung, dürfen nur immer auf das gleiche Ziel zeigen.
Regel: https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context

  • Nutzen Sie unterschiedliche Link-Bezeichnungen.
Links müssen lesbaren Text haben
Leere Links ohne Text dürfen nicht verwendet werden.
  • Prüfen Sie die Editor-Texteingaben, ob leere Links verwendet wurden. Entfernen Sie diese leeren Links.
Videos erfordern Kapitel-Angaben
Videos benötigen Beschriftungen im Untertitel, die das Video und die Hintergrundgeräusche beschreiben.
Regel: https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI

  • Fügen Sie über unseren "VTT-Editor" Untertitel, Kapitel und Beschriftungen hinzu.
  • Fügen Sie title, desc und alt-Angaben hinzu
Weitere Informationen in unserem Ratgeber: https://www.beetools.de/beetools-CMS-Video-fuer-Google-Ranking-vorbereiten

Weitere Hilfeseiten

BedienungsanleitungLeitfäden zur Qualitätssicherung