Barrierefreiheit von Internetseiten [Stand: 22.04.25]
  • Ab 28.06.2025: Barrierefreiheitspflicht für Apothekenwebseiten
  • Auffälligste Erfordernisse: Tatstatur-Navigation, CSS-Unabhängigkeit, Vorlesbarkeit, Genderverbot, verpflichtende "Erklärung zur Barrierefreiheit"
  • Betrifft nur Internetauftritte, die sich an Endverbraucher wenden, damit auch Apothekenseiten.
  • Ausnahmen:
    Weniger als 10 Beschäftigte (Gesamtarbeitnehmerzahl aller Filialen inkl. Boten und Reinigungspersonal)
    und Umsatz unter 2 Mio € (inkl. aller Filialen)
    und ohne Shop (Barriere­freiheits­stärkungs­gesetz). Unklar, wieso die Internet-Barrierefreiheit von der Mitarbeiteranzahl abhängig gemacht wurde.

    Online Testtools für Barrierefreiheit


    Barrierefehler-Prüfer:
  • wave.webaim.org/report
    - Bei Errors, Contrast Errors und Alerts sollte 0 stehen
    - Bei Features und Structural Elements sollten Zahlen > 0 stehen
    - Bei Aria kann 0 oder eine Zahl > 0 stehen
  • www.experte.de/barrierefreiheit (Antwort z.T. erst zeitverzögert)
    - Bei "Nicht Bestanden" sollte 0 stehen
  • www.accessibilitychecker.org
    - Bei "Critical issues" sollte 0 stehen
    Performance/ Robustheits-Test:
  • www.webpagetest.org
    - Bei Quick (Schnelligkeit), Usable (Funktionsfähigkeit) und Resilent (Robustheit) sollte "Looks great" oder "Not bad" stehen
    Bildschirmgrößen-Test:
  • bluetreev1.bluetree.ai/screenfly-embed
  • Test auf verschiedene Bildschirmgrößen
  • Die Bildschirmbreite vergrößert sich bei mobilen Geräten noch um die Breite des evt. angezeigten Scollbalkens
    Kontrastprüfer:
  • www.siteimprove.com/de/toolkit/color-contrast-checker
  • Vorgeschrieben ist ein ausreichender Kontrast von Schrift/ farbigen Links und Hintergrund.
  • evt. verschiedene Kontrastprüfer verwenden
    Sicherheits-Check:
  • sitecheck.sucuri.net
  • Test auf Schadsoftware und gemeldete Sicherheitswarnungen bezüglich der Seite
  • Sollte "No Malware Found" und "Site is not Blacklisted" erscheinen
    Scriptfehler entfernen:
  • validator.w3.org
    - Es sollten keine Errors und keine Warnings erscheinen
    - CAVE: Beanstandet z.T. anscheinend zulässige Meta-Tags (z.B. bei http-equiv)
  • infohound.net/tidy
    - Es sollten keine Errors und keine Warnings erscheinen
    - CAVE: Beanstandet z.T. anscheinend zulässige Meta-Tags
  • ! In Firefox und Edge stehen mit rechter Maustaste ➜ "Untersuchen" verschiedene Scriptprüfer-Tools zur Verfügung
    Weitere Tools (Liste):
  • www.w3.org/WAI/test-evaluate/tools/list
  • Englischer Fachbegriff: Web Content Accessibility Guidelines

    Allgemeine Hinweise

  • Vorgeschrieben ist die Überprüfbarkeit der Seite mit automatischen Tools (ohne genauere Angaben). Hier ist eine Auswahl gelistet ohne Aussage zur Zuverlässigkeit der Tools, die z.T. unterschiedliche Ergebnisse liefern. Die erforderlichen Punkte in Bezug auf Barrierefreiheit wurden verschiedenen Internetseiten entnommen, die z.T. unterschiedliche Angaben aufweisen. Bei Barrierefreiheits-Analysetools werden z.T. bis zu 66 Punkte geprüft. Auflistung fehlt. Damit erheben die hier gelisteten Hinweise keinerlei Anspruch auf Vollständigkeit.
  • Neben barrierefreier Syntax muss die Seite auf verschiedenen Betriebssystemen, mit verschiedenen Browsern und bei verschiedenen Bildschirmgrößen (Handy bis XL-Monitor) laufen.
  • Zudem muss die Seite eine gute Performance aufweisen in puncto Schnelligkeit, Funktionsfähigkeit, aber auch Robustheit inkl. Scriptfehlerfreiheit
  • Zudem muss die Tastaturnavigierbarkeit, auch bei CSS-Inaktivierung, gewährleistet sein, die Vorlesbarkeit und eine gute Ausdruckbarkeit
  • Kommerzielle Anbieter bieten die Zertifizierung von Webseiten nach Prüfung auf Barrierefreiheit an. Eine Zertifizierungspflicht besteht nicht.

    Alt-Texte

  • Alt-Texte werden anstelle des Bildes angezeigt, wenn das Bild nicht geladen wird, und werden von Vorlesefunktionen genutzt.
  • Alt-Texte sollen aussagekräftig sein
  • z.B. ist der Alt-Text "Logo" nicht ausreichend. Z.B. Apothekennamen hinzufügen
  • Max. 150 Zeichen mit korrekter Schreibweise und Zeichensetzung für die Vorlesefunktion
    Testmöglichkeiten:
  • Die oben genannten online Tools testen z.T. auf aussagekräftige Alt-Texte
  • Seite mit Vorlesefunktion testen
  • Programmiertechnisch: img-Ordner umbenennen, damit Alt-Texte angezeigt werden

    Animationen

  • Kein Blinken (u.a. Epileptiker-Gefährdung)
  • Keine sich bewegenden Elemente. Nach anderer Angabe max. 5-Sekunden-Animationen bei Ausstellmöglichkeit für den Bediener.
  • Unklarheit in Bezug auf Anker-Verweise (Sprungmarken), ob Springen oder Scrollen besser (css: 'scroll-behavior:smooth' )
  • Unklarheit in Bezug auf Größenveränderungen von Links bei Mausberührung
  • Unklarheit in Bezug auf Drop-Down-Menüs
  • Unklarheit in Bezug auf Einblendungen

    Ausdruckbarkeit

  • Die Seite sollte gut ausdruckbar sein
  • Seitenumbruch bei Ausdruck erzwingen mit <div style='page-break-before:always;' ></div>
  • CSS-Druck-Anpassungen mit @media print, ebenso blockieren von Teilen, die nicht mitgedruckt werden sollen

    Bildunterschriften

  • Bildunterschriften sollen aussagekräftig sein, um ein sinnvolles Vorlesen zu ermöglichen.

    Browserunabhängige Funktionalität

  • Evt. auf Verlinkung mittels Javascript (onclick) verzichten (s. unten "Verlinkung ohne <a> und ohne Javascript"), da nicht ausgeschlossen ist, dass manche Browser derartige Weiterleitungen blockieren oder eine Bestätigung anfordern.

    CSS-Unabhängigkeit

  • CSS = Seitendesign, z.B. Festlegung der Schriftfarbe, Schriftgröße, Positionierungen, etc.
  • Auch bei abgeschaltetem CSS muss die Navigation, Funktionalität und Lesbarkeit gewährleistet sein. Der Hintergrund ist, dass Nutzer, die von Barrieren betroffen sind, anscheinend z.T. CSS ausschalten bzw. durch eigene CSS ersetzen.
  • Mit HTML 5 wurde allerdings weitgehend auf CSS umgestellt und u.a. der HTML Font-Tag (<font ...></font>) zur Schriftgestaltung abgeschafft.
  • Zweckentfremdete Gestaltungselemente, wie unsichtbare Tabellen, sind ebenfalls unzulässig, da die Vorlesbarkeit dadurch beeinträchtigt werden kann.
  • CAVE: Kein Ausblenden von Elementen mit display:none, da bei CSS-Deaktivierung sichtbar. Umgehungsmöglichkeit z.B. mit Javascript: Entsprechende Bereiche mit anderem Inhalt füllen.
    Testen der Seite mit ausgeschaltetem CSS:
  • Entweder CSS im Browser inaktivieren
  • oder z.B. in wave.webaim.org/report Styles mit Schieber ausstellen ("OFF")
  • oder programmiertechnisch die CSS-Datei oder den CSS-Link umbenennen, sodass die CSS-Datei nicht mehr aufgerufen werden kann, sofern ausschließlich mit class gearbeitet wurde ohne style='...'
    CSS im Browser ausschalten:
  • Firefox: 1) Menüleiste einblenden, 2) Ansicht ➜ Webseiten-Style ➜ Kein Stil
  • Firefox: Menüleiste einblenden: 1. Mit rechter Maustaste neben das Symbol mit dem Hacken klicken ("In Pocket speichern") 2. Menüleiste anklicken 3. Die Menüleiste erscheint dann als neue ganz obere Leiste über dem Browser
    Vorgehen:
  • Entweder css-freie Seite gestalten und anschließend mit css designen
  • oder mit Javascript bei CSS-Inaktivierung alternativen Content laden
    Javascript-Prüfung, ob CSS inaktiviert:
  • offsetHeight oder offsetWidth eines leeren DIV ergibt bei CSS-Inaktivierung den Wert 0, bei aktiviertem CSS den vorgegeben Wert
    Permanente Abfrage stellt sicher, dass Javascript auch die CSS-Inaktivierung mitbekommt: setTimeout("f()",500);
    Weitere abgeschaffte Tags mit HTML 5:
  • basefont
  • big
  • blink
  • center: css: <div style='text-align:center;' ></div>
  • font
  • marquee
  • multicol
  • nobr (<nobr></nobr>): css: <span style='white-space:nowrap;' ></span>
  • spacer
  • tt
  • Komplette Liste

    Einfache Sprache

  • vorgeschrieben ist Hochdeutsch
  • vorgeschrieben ist eine einfache Sprache: Verständliche und kurze Sätze. Vermeidung von langen zusammengesetzten Wörtern (Komposita) wie "Barriere­freiheits­stärkungs­gesetz". Stattdessen z.B. Verwendung von Bindestrichen zur Wortauftrennung.
    Korrekte Schreibweisen:
  • E-Mail (nicht eMail oder Email)
  • E-Rezept (nicht eRezept)

    Erklärung zur Barrierefreiheit

  • Ebenso wie das Impressum und die Datenschutzerklärung ist eine "Erklärung zur Barrierefreiheit" verpflichtend und muss ebenso von jeder Webseite des Projektes zugänglich sein (§ 7 Barrierefreie-Informationstechnik-Verordnung)
  • Vorgeschrieben: Kontaktmöglichkeit zur Meldung von Barrieren
  • Vorgeschrieben: Beschwerdemöglichkeit, wenn auf die Meldung einer Barriere keine Rückmeldung erfolgt

    Genderverbot

  • Gendersprache mit Sonderzeichen ist nicht barrierefrei. Andere Auffassungen existieren zwar (selbst von Betroffenenverbänden), obwohl die Vorlesbarkeit der Seite nicht mehr gegegeben ist, was die Barrierefreiheit zerstört.
  • Damit wäre im Sinne des Barriere­freiheits­stärkungs­gesetz die Verwendung von Gendersprache mit Sonderzeichen auf Business­webseiten als diskriminierend einzustufen.
  • Gendersprache ist keine Pflicht. Gendersprache ohne Gender-Sonderzeichen ist nicht verboten: Das bayerische Genderverbot bezieht sich nur auf Sonderzeichen-Gendern und gilt nur für staatliche Einrichtungen. Allerdings könnte die Verkomplizierung der Sprache durch Genderelemente ebenfalls gegen die Barrierefreiheit verstoßen, die die Verwendung einer möglichst einfache Sprache vorschreibt.
  • Gender-Alternative: Genderhinweis im Impressum, z.B. "Aus Gründen der leichteren Lesbarkeit wird in den Texten auf eine geschlechtsspezifische Differenzierung verzichtet. Entsprechende Begriffe gelten im Sinne der Gleichbehandlung für alle Geschlechter."

    Genormte Seitengliederung

  • Vorgeschrieben ist die Gliederung mit <head></head>, <main></main> und <footer></footer> Bereichen
  • Strukturierung mit Überschriften-Tags, also mind. 1x <h1></h1>
  • Zweckentfremdete Gestaltungselemente, wie unsichtbare Tabellen, sind unzulässig, da die Vorlesbarkeit dadurch beeinträchtigt werden kann.

    Impressum

  • Freiwillige weitere Angaben bezüglich Barrierefreiheit:
  • Link auf das Angebot einer Gebärdensprechstunde der Aufsichtsbehörde, sofern eine solche von der Aufsichtsbehörde angeboten wird.
    Prinzipielles:
  • Bis einschließlich 19.07.2025 muss auf die online-Streitlegungsseite der EU verlinkt werden. Die Linknennung ohne Verlinkung ist per Gerichtsurteil nicht ausreichend. Damit muss bis dahin auf eine externe Seite verlinkt werden, mit entsprechenden Konsequenzen für das Impressum und die Datenschutzerklärung in Bezug auf Hinweise zu externen Links.
  • Versandapotheken müssen das vorgeschriebene DIMDI-Logo lt. DIMDI-AGB als externes Image einbinden, mit entsprechenden Konsequenzen für das Impressum und die Datenschutzerklärung in Bezug auf externe Inhalte. Zusätzlich könnte das DIMDI über die Häufigkeit des abgerufenen Images Rückschlüsse auf den Traffic der Seite generieren.
  • Die ab November 2024 zugeschickte Wirtschafts-ID muss nur im Impressum angegeben werden, wenn keine Umsatzsteuer-ID vorhanden ist.
  • Apotheken gelten als Betreiber von Medizinprodukten. Ab 20 Beschäftigen (Gesamtarbeitnehmerzahl aller Filialen inkl. Boten und Reinigungspersonal) ist ein Medizinprodukte-Beauftragte zu bestellen (§6 Abs. 1 MPBetreibV) und im Impressum zu listen mit einer eigenen Funktions-E-Mail-Adresse (keine persönliche), z.B. bfmps@...-Apotheke.de oder Medizinproduktesicherheit@...-Apotheke.de (§6 Abs. 4 MPBetreibV)
  • Beim Datenschutz muss sowohl ein Datenschutz-Verantwortlicher (z.B. Inhaber) als auch ein Datenschutz-Beauftragter genannt sein.

    Link-Bezeichnungen

  • Links sollen aussagekräftig sein, um ein sinnvolles Vorlesen zu ermöglichen.

    Meta-Tag-Pflicht

  • Einige wichtige Meta Tags:
  • Meta Language: Die korrekte Angabe ist <html lang="de"> und nicht <meta http-equiv="content-language" content="de" />
  • Meta Author
  • Meta Owner
  • Meta Viewport mit initial-scale
  • Meta Keywords wird von Google seit 2009 ignoriert

    Performance

  • Eine Perfomance-Verbesserung dürfte in erster Linie Seiten mit großen Datenmengen oder großen Scriptdateien betreffen
  • Evt. Datengröße von Images reduzieren (z.B. tinypng.com)
  • Scripte evt. komprimieren mit einem JS-Beautifyer (Entfernung von Kommentaren und anderen nicht erforderlichen Teilen) und JS-Compressor/ JS-Minimizer
  • Bei externen Scripten "defer" ergänzen: Verhindert das parallele Laden von Seite und Script, sodass zuerst die Seite und dann das Script geladen wird
    <script src="script.js" defer></script>

    Preisangaben


    Angebotspreise:
  • Neue Vorgaben bei Angebotspreisen: Es darf nicht mehr mit Preisersparnissen gegenüber dem UVP, etc., geworben werden, sondern nur gegenüber dem tiefsten Preis der letzten 30 Tage vor Anwendung der Preisreduktion, der mit anzugeben ist (EuGH-Urteil 26.09.2024).
  • Damit wäre der bisherige Pflichttext ("Verbindlicher Festpreis nach der sog. Lauer-Taxe bei Abgabe zu Lasten der gesetzlichen Krankenversicherung ...") durch den 30-Tage-Tiefpreis zu ersetzen, was die Sache evt. sogar erleichtert.
  • Gestiegene Preise dürfen nicht als guter Preis beworben werden
  • Unklar, welche Synonyme für Angebote ohne Angabe des 30-Tage-Bestpreises noch zulässig sind (Kracher-, Knaller-, Knüller-, Highlight-, Mega-, Vorteils-, Aktions-, Guter-, Toller-, Bester-, Süßer-, Zugreif-, Für-günstige-, Für-Nur-, Bei-uns-nur-, Sonder-, Schnäppchen-, Tief-, Traum-, Superpreis, etc.?). Evt. zulässig: Unser-, Monats-, Online-, Vor-Ort-, Freundschaftsspreis, etc.
    Grundpreisangaben:
  • Die Grundpreisangabe ist nicht für alle Artikel vorgeschrieben: Ausnahmen für bestimmte Kleinmengen.

    Sciptfehler vermeiden

  • Vorgeschrieben: Debugging von Scriptfehlern und keine Benutzung veralteter HTML-Tags (Liste)
  • Kein onresize() und kein onorientationchange() im <body>-Tag. Umgehungsmöglichkeit mit window.addEventListener("resize",Fantasiename,0) und window.addEventListener("onorientationchange",Fantasiename,0); Fantasiename = Name der aufzurufenden Funktion function Fantasiename(){alert();}; ggf. in einer window.onload-Funktion ablaufen lassen, um direkt bei Seitenaufruf die Größe anzupassen.

    Tastaturnavigation

  • Mit der [TAB]- Taste müssen alle Elemente ansteuerbar sein. Gilt auch für das Ausfüllen von Formularen.
  • Die Navigation muss nur mit der Tastatur ohne Maus und ohne Touch möglich sein - auch bei Inaktiviertem CSS.
  • Dies gilt auch für vorgelagerte Elemente (wie Cookie-Zustimmungen) und Einblendungen.
  • Mit der [Tab]-Taste werden automatisch alle Link-Elemente <a></a> und <button></button> detektiert, unabhängig von einem onclick-Befehl in <button>
    Deutliche Fokussierung:
  • Die angesteuerten Elemente müssen deutlich als fokussierte Elemente erscheinen (z.B. deutliche Umrandung oder Farbwechsel, etc.). Die Umrandung kann mit CSS verstärkt werden (border Eigenschaften bei onfocus von <a> und <button>)
  • Bei größeren Bildern/ Elementen erscheint die Umrandung z.T. nur im unteren Bereich (Schrifthöhe) und ist damit ohne Scollen nicht sichtbar.
    Statt <a><img></a>: Schachtelung mit <button onclick=f() ><img></button>
  • CAVE: Schachtelung mit <a><button></button></a> führt zu Doppelfokussierung (erst von <a>, dann von <button>)
  • CAVE: Bei Schachtelung mit DIV: Bei ausgeschaltetem CSS: Untereinander, statt nebeneinander: <a><div style='display:inline-block'><div style='height:100%'><img></div></div></a>

    Verlinkung ohne <a> und ohne Javascript

  • Evt. ist es sinnvoll, auf Javascript bei Weiterleitungen zu verzichten, da nicht ausgeschlossen ist, dass manche Browser derartige Weiterleitungen blockieren oder eine Bestätigung anfordern.
  • Mit Formaction sind Verlinkungen ohne <a> und ohne Javascript (onclick) möglich:
  • <form><button formaction="link1.html" ></button><button formaction="link2.html" ></button></form>

    Vergrößerbarkeit

  • Die Seite muss noch bei einer Vergrößerung von 200% lesbar und navigierbar sein

    Vorlesbarkeit

  • Angebote, die nur grafisch dargestellt sind, müssen vorlesbar sein, da dies ein Hauptanliegen von der Seite sein dürfte
  • Alternativen: Alt-Texte oder zusätzliche Textversion
  • Links müssen aussagekräftig sein
  • CAVE: Z.T. beginnen Vorlesefunktion bei <h1>, somit am Seitenanfang am besten <h1>
    Testmöglichkeiten
  • Edge: Menü (3-Punkte-Symbol rechts oben) ➜ Weitere Tools ➜ Laut vorlesen

    Weiterhin erlaubt

  • Scriptsprachen (Javascript, JQuery, etc.) und die Datenmenge (Seitengröße in Kilobyte) scheinen kein Barrierehemmnis darzustellen.
  • Verschiedene HTML-Tags wurden bis jetzt nicht abgeschafft, wie z.B. <b></b>