SEGERT BLOG
Rubrik: Webdesign
Fragen und Antworten zu barrierefreien Websites mit Blick auf das Barrierefreiheitsstärkungsgesetz (BFSG)
Am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Ab diesem Tag gilt EUweit für Websites und Apps eine gesetzliche Pflicht zur Barrierefreiheit. Geregelt wird das im European Accessibility Act (EAA), der ein Mindestmaß an Barrierefreiheit für Produkte und Dienstleistungen regelt. Die folgenden Fragen und Antworten richten sich an Website-Betreiber. Die FAQ soll Unternehmen, Institutionen und Vereine bei der Entscheidungsfindung helfen, um Notwendigkeit und Wege zur Barrierefreiheit der eigenen Website zu klären. Gerne berate ich Sie auch vor Ort und validiere Ihre Website: 0162 4274462.
-
Barrierefreie Websites sind so gestaltet und entwickelt, dass Menschen mit unterschiedlichen Fähigkeiten und Behinderungen sie problemlos nutzen können. Ziel ist, dass alle Benutzer, unabhängig von ihren körperlichen oder kognitiven Fähigkeiten, gleichermaßen auf Informationen und Funktionen zugreifen können. Barrierefreie Website sind besonders wichtig, um die digitale Inklusion zu fördern und sicherzustellen, dass das Internet für alle zugänglich ist.
Einige wichtige Aspekte einer barrierefreien Website umfassen zum Beispiel:
1. Text-Alternative: Bereitstellung von Alternativtexten für Bilder, um sicherzustellen, dass Benutzer mit Sehbehinderungen den Inhalt verstehen können.
2. Strukturierte und sinnvolle Inhalte: Die Verwendung semantischen HTML, um eine klare Struktur und Bedeutung für den Inhalt zu schaffen. Dies hilft nicht nur Benutzern mit Bildschirmlesegeräten, sondern verbessert auch die allgemeine Benutzererfahrung.
3. Kontrastreiche Gestaltung: Verwendung von ausreichendem Kontrast zwischen Text und Hintergrund, um die Lesbarkeit für Menschen mit Sehbeeinträchtigungen zu verbessern.
4. Tastaturzugänglichkeit: Gewährleistung, dass alle Funktionen der Website über die Tastatur bedient werden können, um Benutzer mit Mobilitätseinschränkungen zu unterstützen.
6. Flexibles Layout: Ein responsives Design, das sich an verschiedene Bildschirmgrößen anpasst, um die Benutzerfreundlichkeit für Menschen mit unterschiedlichen Geräten zu gewährleisten.
7. Barrierefreie Formulare: Formulare sollten klar beschriftet sein, und es sollten Hinweise gegeben werden, um die Eingabe zu erleichtern.
Barrierefreiheit ist nicht nur eine ethische Verpflichtung, sondern in vielen Ländern auch gesetzlich vorgeschrieben. Zum Beispiel erfordert die Barrierefreie-Informationstechnik-Verordnung (BITV) in Deutschland, dass öffentliche Websites barrierefrei gestaltet werden müssen, um die Chancengleichheit für alle Internetnutzer sicherzustellen.
-
Die Kosten für die Entwicklung einer barrierefreien Website variieren stark und hängen von verschiedenen Faktoren ab, einschließlich der Größe und Komplexität der Website, der bereits vorhandenen Barrierefreiheit, der Art der Inhalte sowie den spezifischen Anforderungen und Standards, die erfüllt werden müssen. Zur Frage der Validierung schreibt die Website der Aktion Mensch (dort finden Sie weiteren Zahlen zur Frage was kostet eine barrierefreie Website):
"Eine erste, grobe Analyse Ihrer Website kostet oft nur einen Personentag. Diese Kosten belaufen sich in etwa zwischen 600 Euro und 1.200 Euro. Die Analyse lohnt sich in der Regel für Websites und Onlineshops jeder Größenordnung."
Faktoren für die Kosten einer barrierefeien Website können zum Beispiel folgende sein:
Umfang der Website: Die Anzahl der Seiten, Funktionen und Interaktionen auf der Website beeinflusst die Gesamtkosten. Eine einfache Informationswebsite wird kostengünstiger sein als eine komplexe E-Commerce-Plattform oder eine umfangreiche Webanwendung.
Barrierefreiheitsstandards: Die Einhaltung von Barrierefreiheitsstandards, wie die WCAG-Richtlinien, kann zusätzliche Kosten verursachen. Höhere Konformitätsstufen (z.B., WCAG 2.1 Level AAA im Vergleich zu Level AA) erfordern häufig mehr Ressourcen.
Bestehende Website: Wenn es bereits eine Website gibt, müssen möglicherweise bestehende Inhalte überarbeitet und neue Funktionen hinzugefügt werden, um die Barrierefreiheit zu verbessern. Dies kann die Kosten beeinflussen.
Design-Anpassungen: Die Anpassung des Designs, um sicherzustellen, dass es barrierefrei ist, verursacht zusätzliche Kosten. Dies beinhaltet die Optimierung von Farbkontrasten, Schriftgrößen und Layouts.
Schulung und Überwachung: Schulungen für Entwickler, Designer und Redakteure sind oft notwendig, um sicherzustellen, dass sie die Prinzipien der Barrierefreiheit verstehen und umsetzen können. Die laufende Überwachung und Wartung der Barrierefreiheit können ebenfalls Kosten verursachen.
-
Die Validierung einer Website auf Barrierefreiheit beinhaltet die Überprüfung, ob die Website die Standards und Richtlinien für barrierefreie Webinhalte erfüllt. Eine der häufigsten Grundlagen für diese Überprüfung sind die Web Content Accessibility Guidelines (WCAG), die von der Web Accessibility Initiative (WAI) des World Wide Web Consortiums (W3C) erstellt wurden.
Ich teste den technischen Ist-Zustand Ihrer Website auf folgende Anforderungen der Barrierefreiheit:
HTML-Validierung: Die Website sollte korrektes HTML verwenden, um eine klare Struktur und semantische Bedeutung sicherzustellen. Dies kann durch die Verwendung von HTML-Validierungswerkzeugen wie dem W3C Markup Validation Service überprüft werden.
CSS-Validierung: Cascading Style Sheets (CSS) sollten korrekt implementiert werden, um sicherzustellen, dass das Design und die Präsentation der Website konsistent und zugänglich sind. CSS-Validierungstools wie der W3C CSS Validation Service können dabei helfen.
JavaScript-Validierung: Wenn JavaScript auf der Website verwendet wird, sollte es so implementiert werden, dass es barrierefrei ist. Dazu gehört die Gewährleistung, dass alle interaktiven Elemente auch ohne Maus bedienbar sind und dass Informationen für assistive Technologien zugänglich sind.
Leichte Sprache: Die Verwendung von leichter Sprache kann die Verständlichkeit für eine breitere Zielgruppe verbessern, einschließlich Menschen mit kognitiven Beeinträchtigungen. Websites sollten auf die Anwendung von Prinzipien leichter Sprache überprüft werden, wie klare Struktur, einfache Wörter und kurze Sätze.
Alternativtexte für Bilder: Alle Bilder sollten mit prägnanten und aussagekräftigen Alternativtexten versehen sein, um sicherzustellen, dass Menschen mit Sehbehinderungen den Inhalt verstehen können. Überprüfen Sie, ob alle wichtigen Bilder entsprechende Alternativtexte haben.
Formulare und interaktive Elemente: Formulare sollten leicht verständlich und bedienbar sein. Überprüfen Sie, ob alle Formulare Etiketten haben, die Tastaturnavigation unterstützen und valides Markup verwenden.
Farbkontraste: Überprüfen Sie die Farbkontraste auf der Website, um sicherzustellen, dass der Text für Menschen mit Sehbeeinträchtigungen ausreichend lesbar ist. Es gibt Online-Tools, die Farbkontraste automatisch überprüfen können.
Responsive Design: Stellen Sie sicher, dass das Design der Website auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert, um die Bedienbarkeit für Menschen mit unterschiedlichen Fähigkeiten zu gewährleisten.
Tests mit verschiedenen Browsern und Plattformen: Überprüfen Sie die Website auf verschiedenen Browsern und Plattformen, um sicherzustellen, dass sie konsistent und barrierefrei funktioniert.
A11y-Validierungstools: Es gibt spezialisierte Barrierefreiheitsvalidierungstools wie WAVE und andere, die ich für die Überprüfungen von Barrierefreiheitsproblemen nutze.
Ziel ist es, die Konformitätsstufe Level AA (Intermediate) zu erreichen. Mit der Stufe AA wäre eine ausgewogene Barrierefreiheit Ihrer Website erreicht, die eine breite Palette von Benutzerbedürfnissen abdeckt. Was die Konzeption und Umsetzung einer neuen Website angeht, ist Barrierefreiheit nicht nur eine technische Angelegenheit, auch eine bewusste Design- und Entwicklungspraxis ist erforderlich.
-
Private und B2B-Websites sind vom Barrierefreiheitsstärkungsgesetz ausgenommen. Auch Kleinunternehmen gehören dazu. Als Kleinunternehmen gelten: Unternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz von maximal 2 Millionen Euro.
Webdesign-Glossar (mit Begriffen aus der Welt des CMS ExpressionEngine)
Meine Angebote für Webdesign-Leistungen mit Konzeption, Design und CMS ExpressionEngine sind differenziert. Fachbegriffe lassen sich nicht vermeiden. Deshalb schicke ich mit meinen Angeboten seit 2014 ein Webdesign-Glossar als PDF mit. Das ist eine gute Sache und wird gerne angenommen. Und da Webtechniken ständig in der Entwicklung sind, wird das Glossar immer mal wieder erweitert mit verständlich erklärten Begriffen. Über neue Begriffe informiere ich an dieser Stelle.
-
- In einem Content Management System hat der Administrator (auch Super-Admin genannt) sämtliche Rechte, um das System zu konfigurieren, zu erweitern und anzupassen und sämtliche Inhalte zu editieren. Im besten Fall weiss der Super-Admin, wie Layout und Funktionalitäten der Website ausgebaut werden können.
- Allgemein ist ein Administrator für die Pflege und Konfiguration von Software-Systemen wie zum Beispiel einem Webserver zuständig. Bei technischen Problemen ist er der erste Ansprechpartner.
-
- Ist eine Website oder Teil einer Website, in der Verlage, Firmen, Privatpersonen regelmäßig Inhalte zu mehr oder weniger speziellen Themen veröffentlichen (auch englisch „posten“ genannt). Die Beiträge können in den meisten Fällen von Besuchern kommentiert werden. Ein Blog wird nach Datum organisiert, die aktuellsten Beiträge stehen sinnvollerweise meistens oben.
- Mit ExpressionEngine kann man schnell und einfach Bloginhalte ganz oder teilweise auch in anderen Bereichen der Web-Site wie zum Beispiel der Startseite unterbringen. Das kann dann nur der Titel sein und nur die drei neuesten Einträge. Das ist frei und flexibel bestimmbar.
-
- Das ist die Software, mit der Internetnutzer „durch das Web surfen“ können. Auf Windows heißt der Browser „Edge“, auf Apple-Systemen Safari. Weit verbreitet sind die Browser Firefox und Chrome (von Google). Eine kleine Gemeinde nutzt auch Opera oder den Chrome-Klon Brave, der sich auf die Fahne geschrieben hat, dem gläsernen Surfer entgegenzuwirken.
- Ich arbeite beim Webdesignen vorwiegend mit Chrome und teste zwischendurch immer mal wieder die Arbeitsfortschritte mit Firefox und Safari.
-
- Ein Channel bezeichnet in ExpressionEngine einen Inhaltsbereich, in dem Inhalte strukturiert, sortiert und unter Kategorien abgelegt werden können. Channels sind beliebig anlegbar und sehr differenziert zu konfigurieren, das kommt ganz auf die Inhalte der Hauptbereiche einer Website an. Bereiche können sein: Aktuell, Presse, Projekte, Jobs, Standorte, Produkte.
Logoentwicklung und Webdesign mit dem CMS ExpressionEngine für eine Steuerberater-Kanzlei
Der Kunde DÜSTER | STEPHAN Steuerberater aus Voerde kontaktierte mich, weil den beiden Inhabern eine Website eines Kunden von mir besonders gut gefiel. Der neue Kunde wünschte ein komplett neues Auftreten im Web und beauftragte mich zugleich, ein Logo (Typo-Signet), Visitenkarten und einen neuen Briefbogen zu entwerfen und umzusetzen.
Das Ernst Weiß Portal für Literaturliebhaber
Zur Förderung der Wiederentdeckung des fast vergessenen Arztes und Schriftstellers Ernst Weiß habe ich das Ernst Weiß Portal konzipiert und umgesetzt. Es soll u.a. den wissenschaftlichen Austausch fördern.
Redesign: OnePager für einen Freelancer ;-)
Ich dachte, ich schaue noch ein paar Mal nach, ob es wirklich wahr ist, aber es ist wahr: Ich habe endlich das Redesign meiner beruflichen Website auf segert.net fertiggestellt und mich an einen etwas umfangreicheren OnePager versucht. Dafür habe ich das sehr featurereiche Script fullPage.js und das dazugehörige Bundle der fullPage.js Extensions genutzt (dazu später mehr in einem Extra-Post).
Minimalistisches Webdesign für ein Architekturbüro in Bottrop
Für die Holtkamp Architekten aus Bottrop durfte ich ein neues Webdesign entwerfen, das auf das Wesentliche reduziert sein sollte und auch responsiv auf dem Smartphone seinen Charakter nicht verlieren sollte. Als CMS kommt zudem ExpressionEngine zum Einsatz. Das flexible CMS ermöglicht meinem Kunden, ohne Lernkurve neue Bauprojekte mit eigenen Bildern anzulegen oder aktuelle Neuigkeiten zu veröffentlichen. Zudem kam für meinen Kunden alles aus einer Hand: Das Design, die Programmierung und die technische Administration des Webhostings und alles, was damit zusammenhängt. Zur Website Holtkamp Architekten.
Skalierbare Schriften mit den CSS: min(), max() und clamp()
Da der Browser-Support von min(), max() und clamp() mittlerweile so gut ist, werde ich diese CSS-Skalierungsfunktionen für zukünftige Projekte einsetzen, um Schriften endlich skalierbar zu machen. Wie man das macht, erläutert der Beitrag min(), max() und clamp(): drei CSS-Funktionen für dynamischere Websites auf Kulturbanause. Und was Entwickler*innen alles mit clamp() anstellen könnten, zeigt ausführlich der Artikel Use cases for CSS comparison functions von Ahmad Shadeed.
Webdesign und ExpressionEngine für die Eifelgemeinde Weinsheim
Zusammen mit Werbegentur Sentio Media aus Gerolstein habe ich das Redesign der Eifelgemeinde Weinsheim erstellt und dafür wieder das Content Management System ExpressionEngine eingesetzt. Sentio Media war für die Projektleitung und die Konzeption zuständig und ich habe das responsive Webdesign gestaltet, die Website programmiert und das CMS eingerichtet.
Webdesign und CMS für einen vielseitigen Künstler
Ich habe mich sehr gefreut, als der Künstler Bernd Finkeldei aus Düsseldorf für eine neue Website auf mich zukam. Es war eine leicht und frei wirkende, minimalistische Website zu gestalten, die zugleich viele unterschiedliche Bilder, Texte und Publikationen enthalten sollte. Mit dem vielseitigen Künstler, dessen Arbeit mich begeistert, ergab sich eine erfreulich produktive Zusammenarbeit. Eine technische Herausforderung war, die unterschiedlichsten Bildformate des Künstlers auch für mobile Endgeräte genussfertig und schön zu präsentieren. So entstand eine Mischung aus responiver und adaptiver Website.
Ein Onepager ohne CMS und Cookies
Für die Automotive Claim Consulting GmbH hatte ich 2011 eine statische Website entworfen und umgesetzt. Und obwohl die Website auch mobil noch gut funktionierte, kam der Kunde wegen eines Redesigns auf mich zu. So entwarf ich (angelehnt an das Design der alten Website) einen zweisprachigen Onepager, der selbstredend ohne ein CMS wie WordPress auskommt und entsprechend völlig cookiefrei funktioniert. Das Design selbst ist unaufgeregt, seriös und fokussiert auf die Inhalte. Insgesamt eine schnelle, schlanke Website ohne Script-Overflow.
Webdesign und ExpressionEngine für ein medizinisches Startup
Für das Startup Institut für digitale Schlafmedizin aus dem Ruhrgebiet durfte ich eine Website gestalten und entwickeln, die gestern offiziell online ging. Zum Einsatz kommt wieder das wunderbare CMS ExpressionEngine.
Effizienter designen mit der Sketch-App und dem Sketch-Wiki
Für alle User Interface Designer und die, die es werden wollen und bereits mit der geschätzten Sketch-App arbeiten, habe ich etwas ganz Feines entdeckt. Das toll aufgemachte und sehr informative Sketch-Wiki von Micha Wiebe. Sehr nützlich finde ich zum Beispiel die Seite mit den Tastenkombinationen für Sketch 4, mit denen das Arbeiten sehr beschleunigt werden kann. Ausserdem gibt eine Reihe von Tutorials, die in die Grundlagen einführen. Und wer im PlugIn-Dschungel einige der nützlichen kennenlernen möchte, wird auf dem Sketch-Wiki bestens bedient. Voilà!
