Die Praxis-Webseite barrierefrei gestalten – Teil 4
Teil 4: Verstehen und umsetzen Individuelle Bedürfnisse erfordern flexible Lösungen, vor allem im digitalen Raum, wo unterschiedliche Anforderungen miteinander kollidieren können. „Barrierefreiheit“ sollte daher weniger als ein erreichbares Ziel verstanden werden, sondern vielmehr als eines, an das wir uns annähern, indem wir Inhalte insgesamt zugänglicher gestalten.
Internationale Standards für Barrierefreiheit werden durch die Web Content Accessibility Guidelines (WCAG) des World Wide Web Consortium (W3C) definiert.1 Um als barrierefrei zu gelten, müssen Webseiten festgelegte Kriterien erfüllen. Die WCAG bilden auch die technische Grundlage des Barrierefreiheitsstärkungsgesetzes, das 2025 in Kraft tritt und die Privatwirtschaft zur Einhaltung digitaler Barrierefreiheit verpflichtet.1
Bestehende Webseite überarbeiten
Die Überarbeitung einer bestehenden Praxis-Webseite erfordert technische Expertise, da viele Aspekte der digitalen Barrierefreiheit in der Webseitenentwicklung verankert sind. Bisher verfügen auch erfahrene Entwicklerinnen und Entwickler nicht zwangsläufig über das spezifische Know-how im Bereich der Barrierefreiheit, weswegen ein spezialisierter Anbieter ratsam sein könnte. Die barrierefreie Überarbeitung kann komplex und aufwendig sein, sodass die Neuentwicklung einer Webseite, bei der Barrierefreiheit von Anfang an implementiert wird, finanziell sinnvoll sein kann.
Erste einfache Schritte
Trotz der Komplexität gibt es einfache Maßnahmen, die Webseitenbetreibende auch ohne tiefes Verständnis von HTML & Co. leicht umsetzen können. Diese mögen zwar (noch) nicht zu einer komplett barrierefreien Webseite führen, tragen jedoch zu einer zugänglicheren Gestaltung bei:
Farbauswahl
Schrift- und Hintergrundfarben sollten einen deutlichen Kontrast aufweisen, der einfach mit kostenlosen Anwendungen wie z. B. dem Colour Contrast Analyser2 berechnet werden kann. Ein Mindestfarbkontrast von 4.5:1 wird empfohlen. Komplementärfarben sollten vermieden werden, weil diese Kombinationen als unangenehm oder sogar schmerzhaft empfunden werden können. Auch bei der Schwarz-Weiß-Kombination empfiehlt sich schwarze Schrift auf einem leicht abgedunkelten Weiß oder sehr hellem Grau.
Schriftart
Viele gängige Schriftarten wie Times New Roman, Calibri oder Arial verwenden ähnliche Symbole für unterschiedliche Zeichen, was die Lesbarkeit beeinträchtigen kann. Wählen Sie daher eine Schriftart, bei der das kleine l, das große I, die Ziffer 1 sowie das große O und die Null deutlich voneinander abweichen. Das ist beispielsweise bei den Google Fonts Aleo, Roboto, Atkinson Hyperlegible und Signika der Fall.
Schriftbild
Für eine verbesserte Lesbarkeit nutzen Sie einen linksbündigen Flattersatz ohne Silbentrennung und einen Zeilenabstand von 1.5. Gliedern Sie Fließtexte in Abschnitte mit Zwischenüberschriften, und platzieren Sie den Text idealerweise auf einem einfarbigen Hintergrund. Vermeiden Sie Muster und Bilder als Hintergrund.
Alternativtexte
Bilder und Grafiken benötigen einen kurzen, objektiven Alternativtext, der das Dargestellte prägnant beschreibt. Die meisten Anwendungen und Content Management Systeme bieten dafür einfache Eingabemöglichkeiten.
Weiterführende Schritte zur digitalen Barrierefreiheit
Alternative Formate
Bereitstellung von Alternativen für verschiedene Sinne, z. B. Transkripte für Podcasts
Information durch Farbkodierung
Vermeidung der Verwendung von Farben zur Informationsübermittlung. Zusätzliche Merkmale wie Muster und Struktur sollten verwendet werden, z. B. gepunktete und gestrichelte Linien in Liniendiagrammen.
HTML
Konsequente und korrekte semantische Auszeichnung aller Inhalte mit Tags und Attributen. Bei entsprechenden Vorkenntnissen ist die Verwendung von ARIA-Attributen (Accessible Rich Internet Applications) empfohlen.
Links
Verwendung von beschreibenden Links: z. B. „Das Barrierefreiheitsstärkungsgesetz tritt 2025 in Kraft.“ anstelle von „Infos zum Barrierefreiheitsstärkungsgesetz:
Verwendung von Tabellen ausschließlich für die Darstellung von Daten, nicht für reine Design-Zwecke. Vermeidung von komplexen Tabellenstrukturen (verbundene Zellen etc.). Einfügen von Überschriftenzeilen bzw. -spalten.
Überfordernde Reize
Vermeidung von blinkenden oder flimmernden Elementen. Bewegliche Elemente oder Videos oder gifs müssen pausiert oder ausgeblendet werden können.
Überschriften
Einfügen von Zwischenüberschriften. Schaffung einer logischen und stringenten Überschriftenhierarchie (z. B. H1 – H2 – H3, nicht H3 – H1 – H1). Verwendung aussagekräftiger und eindeutiger Überschriften.
Wir erheben und verarbeiten Ihre Daten auf dieser Website, um besser zu verstehen, wie sie verwendet wird. Wir holen hierfür immer Ihre Einwilligung ein. Sie können Ihre Datenschutzeinstellungen hier ändern.
Sie haben noch kein Benutzerkonto?
Jetzt kostenlos registrieren und von Ihrem Mitgliedsstatus profitieren:
