Barrierefreie Websites
Barrierefreies Webdesign mit Herz: Für alle zugänglich, funktional und stilvoll.
Kernpunkte für Barrierefreie Websites
Barrierefreie Websites für öffentliche Einrichtungen und den Mittelstand
Für öffentliche Einrichtungen und den Mittelstand ist die Online-Präsenz der Schlüssel zu einer breiten Zielgruppe, doch um wirklich erfolgreich zu sein, muss sie für alle zugänglich sein. Als professionelle Webagentur sind wir auf die Entwicklung von barrierefreien Websites spezialisiert, die jedem Benutzer eine gleichberechtigte Online-Erfahrung bieten.
Haben Sie Fragen, oder Interesse an einen Angebot?
Unsere Experten optimieren die Schriftgröße und den Kontrast, integrieren Vorlesefunktionen und sorgen für die Zugänglichkeit von Formularen. Wir erstellen Websites, die nicht nur visuell ansprechend sind, sondern auch den höchsten Standards in Sachen Barrierefreiheit entsprechen.
Eine barrierefreie Website ist nicht nur ethisch wichtig, sondern erweitert auch Ihre Reichweite und steigert die Benutzerzufriedenheit. Für öffentliche Einrichtungen ist es bereits Pflicht, für mittelständische Unternehmen wird dies 2025 folgen. Wir berücksichtigen die Bedürfnisse von Menschen mit verschiedenen Fähigkeiten und Einschränkungen, indem wir klare Strukturen, alternative Texte für Bilder, leicht verständliche Inhalte und Tastaturzugänglichkeit sicherstellen.
Im Alltag können uns immer wieder Barrieren begegnen, welche uns überhaupt nicht auffallen. Für Menschen mit Einschränkung handelt es sich hierbei aber oft um unüberwindbare Hindernisse, die eine Lösung bedürfen. Beispielsweise zu benennen sind Stufen in ein Geschäft, welche für einen Rollstuhlfahrer nicht zu überwinden sind. Eine gleiche Problematik kann auch im Internet auftreten, sodass nicht jeder Webseiten auf die gleiche Art nutzen kann.
Wichtig diesbezüglich zu wissen ist, wie viele Menschen im Internet durch digitale Barrieren blockiert werden können:
- 5 % haben motorische Einschränkungen, sodass sie weder Maus noch Tastatur nutzen können
- 6 % haben Probleme mit dem richtigen Erfassen und Interpretieren von digitalen Inhalten
- 3 % sind optisch sehr eingeschränkt oder komplett blind
- 15 % leiden unter einer teilweisen visuellen Einschränkung
- 3 % besitzen nur eine begrenzte Hörfähigkeit, welche bis zu Taubheit reichen kan
Vorteile von Barrierefreien Websites, die sowohl für die Website-Betreiber als auch für die Benutzer von großer Bedeutung sind:
Erweiterte Zielgruppe:
Eine barrierefreie Website ist für Menschen mit Behinderungen leicht zugänglich, was die Reichweite erhöht und ein größeres Publikum anspricht.
Verbesserte Benutzererfahrung:
Barrierefreie Websites sind oft benutzerfreundlicher und bieten eine optimierte Benutzererfahrung für alle, unabhängig von ihren Fähigkeiten.
Bessere Suchmaschinenplatzierung:
Suchmaschinen bevorzugen barrierefreie Websites, da sie qualitativ hochwertige Inhalte und klare Strukturen schätzen, was zu einer besseren Sichtbarkeit in den Suchergebnissen führt.
Rechtliche Compliance:
Die Einhaltung von Barrierefreiheitsrichtlinien und -standards kann rechtliche Probleme vermeiden und das Risiko von Diskriminierungsklagen minimieren.
Positives Image und Reputation:
Barrierefreies Webdesign zeigt Engagement für soziale Verantwortung und kann das Image und die Reputation eines Unternehmens oder einer Organisation stärken, indem es Inklusion und Zugänglichkeit fördert.
Ein Leitfaden für eine Barrierefreie Webdesign Website inklusive Online-Erfolg
Eine barrierefreie Website ist eine, die für alle Menschen, unabhängig von ihren Fähigkeiten oder Einschränkungen, leicht zugänglich ist. Sie fördert die Inklusion und bietet eine gleichberechtigte Online-Erfahrung für alle Benutzer. Hier sind 15 wichtige Punkte, die bei der Gestaltung einer barrierefreien Website berücksichtigt werden sollten:
Bieten Sie Ihrer Zielgruppe eine inklusive Online-Erfahrung und verbessern Sie gleichzeitig Ihren digitalen Erfolg. Kontaktieren Sie uns heute, um mehr darüber zu erfahren, wie wir eine barrierefreie Website für Ihr Unternehmen entwickeln können. Ihre Website sollte für alle zugänglich sein, und wir machen das möglich.
Mit einfachen Schritten zur Barrierefreien Tab-Navigation
Accessible Rich Internet Applications (ARIA) ist eine Technologie, die zur Verbesserung der barrierefreien Navigation in Webanwendungen entwickelt wurde. ARIA bietet spezielle Attribute und Eigenschaften, die es ermöglichen, semantische Informationen für Benutzer mit Behinderungen bereitzustellen und die Interaktion mit komplexen Benutzeroberflächen zu erleichtern.
Hier sind einige Möglichkeiten, wie ARIA zur barrierefreien Navigation beiträgt:
Rollen und Zustände:
ARIA bietet Rollen und Zustände, die Elementen in der Benutzeroberfläche zugeordnet werden können. Dies ermöglicht es Benutzern, schnell zu verstehen, welche Funktion ein Element hat.
Landmarken:
ARIA unterstützt die Markierung von Hauptinhalten, Kopfzeilen, Navigationsbereichen und anderen wichtigen Abschnitten einer Webseite. Dies erleichtert die Navigation und Orientierung für Benutzer mit Bildschirmlesern.
Fokussteuerung:
ARIA ermöglicht die Steuerung des Tastaturfokus und die Angabe, wie Tastaturinteraktionen behandelt werden sollen. Dies ist entscheidend für die Bedienung von interaktiven Elementen.
Aria-labelledby und Aria-describedby:
Diese Attribute ermöglichen die Zuordnung von Beschreibungen und Bezeichnungen zu Elementen, was die Informationsvermittlung erleichtert.
Live-Regionen:
ARIA ermöglicht die Aktualisierung von Teilen der Seite ohne Seitenneuladung und informiert Benutzer über Änderungen in dynamischen Inhalten, z. B. bei Chat-Anwendungen oder Aktualisierungen in Echtzeit.
Aria-hidden:
Dieses Attribut ermöglicht es, Elemente vor Screenreadern zu verbergen, die keine relevanten Informationen für Benutzer mit Behinderungen bereitstellen.
Durch die Verwendung von ARIA können Entwickler barrierefreie Webanwendungen erstellen, die für eine breite Palette von Benutzern zugänglich und benutzerfreundlich sind. Dies trägt dazu bei, die digitale Inklusion zu fördern und sicherzustellen, dass Menschen mit Behinderungen das volle Potenzial des Internets nutzen können.
Der Lighthouse-Test ist ein leistungsstarkes Tool zur Überprüfung der Barrierefreiheit von Websites.
Sie können den Lighthouse-Test in Google Chrome verwenden, um die Zugänglichkeit Ihrer Website zu bewerten. Hier sind die Schritte, um Ihre Website auf Barrierefreiheit zu testen:
1. Öffnen Sie Google Chrome
Stellen Sie sicher, dass Sie Google Chrome als Ihren Webbrowser verwenden, da der Lighthouse-Test in diesem Browser integriert ist.
2. Besuchen Sie Ihre Website
Gehen Sie zu Ihrer Website, die Sie auf Barrierefreiheit überprüfen möchten.
3. Öffnen Sie die Entwicklertools
Klicken Sie mit der rechten Maustaste auf Ihre Website und wählen Sie "Untersuchen" oder drücken Sie die Tastenkombination "Strg + Shift + I" (Windows) oder "Cmd + Option + I" (Mac), um die Entwicklertools zu öffnen.
4. Navigieren Sie zur Lighthouse-Registerkarte
In den Entwicklertools finden Sie eine Registerkarte namens "Lighthouse". Klicken Sie darauf.
5. Starten Sie den Test
Klicken Sie auf die Schaltfläche "Generiere Bericht", um den Lighthouse-Test zu starten.
6. Wählen Sie die Barrierefreiheitsprüfung aus
In den Testoptionen können Sie "Barrierefreiheit" auswählen, um speziell die Barrierefreiheit Ihrer Website zu überprüfen. Sie können auch andere Tests wie Leistung und SEO auswählen, wenn gewünscht.
7. Starten Sie den Test
Klicken Sie auf die Schaltfläche "Bericht generieren", um den Test zu starten.
8. Warten Sie auf die Ergebnisse
Lighthouse führt den Test aus und zeigt Ihnen anschließend einen Bericht mit den Ergebnissen an. Sie erhalten eine Punktzahl für die Barrierefreiheit und detaillierte Informationen zu möglichen Problemen und Verbesserungsvorschlägen.
9. Arbeiten Sie an den Verbesserungen
Basierend auf den Ergebnissen können Sie die barrierefreien Aspekte Ihrer Website verbessern. Lighthouse bietet klare Anleitungen zur Behebung von Problemen.
10. Testen Sie erneut
Führen Sie den Lighthouse-Test nach den Änderungen erneut durch, um sicherzustellen, dass Ihre Website barrierefrei ist.
Der Lighthouse-Test ist eine wertvolle Ressource, um sicherzustellen, dass Ihre Website die Bedürfnisse aller Benutzer erfüllt, einschließlich solcher mit Behinderungen.
Der BITV Test und die Prüfschritte für Barrierefreie Websites
Der BITV-Test (Barrierefreie Informationstechnik-Verordnung) ist ein Instrument zur Überprüfung der Barrierefreiheit von Websites und Anwendungen gemäß den Vorgaben der deutschen Barrierefreiheitsstandards. Dieser Test zielt darauf ab, sicherzustellen, dass digitale Inhalte für alle Menschen, einschließlich Menschen mit Behinderungen, zugänglich sind. Die BITV 2.0 hat spezifische Prüfschritte, darunter:
Textalternativen
Prüfung, ob Bilder und Multimedia-Elemente alternative Texte für Screenreader-Nutzer haben.
Schriftgröße und Kontrast
Überprüfung der Schriftgröße und des Farbkontrasts für eine gute Lesbarkeit.
Seitenstruktur
Sicherstellen, dass die Seitenstruktur klar und konsistent ist, um die Navigation zu erleichtern.
Formularzugänglichkeit
Überprüfung von Formularen, um sicherzustellen, dass sie auch ohne Mausbedienung ausgefüllt werden können.
Multimedia-Untertitel
Sicherstellen, dass Videos Untertitel für Hörgeschädigte haben.
Tastaturzugänglichkeit
Überprüfen, ob die Website mit der Tastatur navigiert werden kann.
Text-Transkripte
Sicherstellen, dass Audioinhalte Texttranskripte für Benutzer mit Hörbehinderungen haben.
Navigation ohne Maus
Prüfen, ob alle Interaktionen ohne Maus möglich sind.
Blinkende Inhalte
Verhindern von Elementen, die Epilepsie auslösen können.
Der BITV-Test gewährleistet, dass digitale Inhalte die Anforderungen an Barrierefreiheit erfüllen und für alle Menschen zugänglich sind. Eine ausführliche Auflistung der Prüfschritte finden Sie hier.
Mit gutem Pagespeed zur Barrierefreien Website
Der Google PageSpeed Insights-Test ist ein Online-Tool, das von Google entwickelt wurde, um die Leistung von Webseiten zu bewerten und Optimierungsvorschläge bereitzustellen. Dieser Test bewertet, wie schnell eine Webseite lädt und wie gut sie auf Mobilgeräten funktioniert. Hier ist eine Erklärung, wie der PageSpeed Insights-Test funktioniert:
1. Webseiten-URL eingeben:
Sie geben die URL der zu überprüfenden Webseite in das PageSpeed Insights-Tool ein und starten den Test.
2. Analyse der Ladezeit:
Das Tool analysiert die Ladezeit der Webseite für Desktop- und Mobilgeräte. Es berücksichtigt Faktoren wie Serverantwortzeit, Ressourcenkomprimierung und Bildoptimierung.
3. Bewertung der Performance:
PageSpeed Insights gibt der Webseite eine Punktzahl auf einer Skala von 0 bis 100, wobei eine höhere Punktzahl auf bessere Leistung hinweist.
4. Optimierungsvorschläge:
Das Tool bietet konkrete Optimierungsvorschläge, um die Ladezeit und die Benutzererfahrung zu verbessern. Diese können beispielsweise die Komprimierung von Bildern, die Minimierung von CSS und JavaScript oder die Reduzierung von Serverantwortzeiten umfassen.
5. Berichte für mobile Geräte:
PageSpeed Insights bietet separate Berichte für die Mobilgeräte-Performance, da mobile Optimierung besonders wichtig ist.
Detaillierte Diagnose:
Das Tool stellt detaillierte Informationen zu jeder Optimierungsempfehlung zur Verfügung, um Entwicklern bei der Fehlerbehebung zu helfen.
Der PageSpeed Insights-Test ist ein wertvolles Werkzeug, um die Geschwindigkeit und die Leistung einer Webseite zu bewerten und zu verbessern. Eine schnelle Ladezeit und eine gute Leistung sind entscheidend, um die Benutzerzufriedenheit zu steigern und das Ranking in den Suchmaschinen zu verbessern.
Barrierefreie Webseiten: Die richtigen Schritte für Unternehmen und Organisationen
Dieser Artikel soll Ihnen das Werkzeug in die Hand geben, um eine barrierefreie Website bei einer Webagentur in Auftrag zu geben und ein gutes Ergebnis geliefert zu erhalten. Wir, Artmedia-Jäger, sind eine Webagentur aus Wiesbaden, die bereits barrierefreie Webseiten für Kunden programmiert und gestaltet hat.
Anders ausgedrückt: Der Schwerpunkt dieses Artikels liegt nicht darauf, was eine barrierefreie Website ist, sondern wie Sie selbst als Unternehmen oder Organisation zu einer eigenen barrierefreien Website gelangen – auch wenn dies ihr erstes Mal ist.
Barrierefreie Website erstellen
Das sollte man vorab wissen, wenn man eine barrierefreie Website in Auftrag gibt:
- Welche Organisationen sind verpflichtet, die Website barrierefrei zu gestalten?
- Welche Webseitenbetreiber profitieren von barrierefreien Webseiten?
- Wie sollte man eine Agentur für die Programmierung einer barrierefreien Website auswählen?
- Welche Richtlinien und Verordnungen bestehen?
- Wie brieft man eine Webagentur für die Erstellung einer barrierefreien Website?
- Welches Prüfsiegel wird für barrierefreie Webseiten vergeben?
Der Begriff der Barriere bezieht sich nicht nur auf Behinderungen von Personen. Eine Barriere kann auch durch fehlende Technik entstehen, durch eine fremde Sprache oder durch eine räumliche Situation.
Die fehlende Technik kann ein defekter Lautsprecher sein; dann lässt sich ein Podcast nicht anhören. Deutsche Vlogger führen Interviews mit Experten in Englisch; wer diese Sprache nicht gut genug beherrscht, ist außen vor. Eine räumliche Situation erlaubt nicht, einen Lautsprecher zu benutzen und ein Kopfhörer ist nicht grad zur Hand. All diese Barrieren lassen sich durch technische Hilfsmittel ausräumen.
Webseiten lassen sich bereits weitgehend barrierefrei gestalten, wenn einfache Regeln der Gestaltung beachtet werden. Personen mit Farbsehschwäche erkennen einige Farben nicht. Eine rosa Schrift auf hellgrauem Grund wäre dann nicht lesbar. Diese Farbkombination ist aber auch für Menschen ohne Farbsehschwäche ungünstig. Zu kleine Schrift führt dazu, dass ältere oder weitsichtige Menschen die Schrift nicht mehr lesen können.
Welche Organisationen sind verpflichtet, die Website barrierefrei zu gestalten?
Sämtliche öffentlich zugänglichen Webangebote des Bundes müssen nach §3 des Deutschen Behindertengleichstellungsgesetzes barrierefrei sein.
Welche Webseitenbetreiber profitieren von barrierefreien Webseiten?
Webseitenbetreiber mit kommerziellem Hintergrund haben ein eigenes Interesse daran, dass der Inhalt der Website von möglichst vielen potentiellen Käufern wahrgenommen wird. Viele Onlineshops optimieren ihr organisches SEO oder bezahlen sogar Google Ads, um mehr Kunden zu erreichen.
Die Investition in eine barrierefreie Website, auch wenn sie nicht vom Gesetzgeber vorgeschrieben ist, kann schnell durch den Mehrumsatz wieder ausgeglichen werden.
Motorische Barrieren
Menschen mit einer motorischen Behinderung haben Probleme mit der herkömmlichen Maus und navigieren stattdessen mit ihrer Tastatur. Barrierefreie Webseiten lassen sich ohne Einschränkungen mit der Tastatur bedienen und alle Webelemente könn
Akustische Barrieren
Gehörlose Menschen haben mit der herkömmlichen Schriftsprache ein Problem und können keine akustischen Inhalte auf Webseiten aufnehmen. Barrierefreie Webseiten ersetzen sämtliche akustischen Inhalte mit visuell sichtbaren Inhalten oder stellen diese den Nutzern zusätzlich zur Verfügung. Stehen die Inhalte der Webseiten in der Gebärdensprache bereit, können sie von gehörlosen Menschen genutzt werden.
Kognitive Barrieren
Umständlich formulierte Texte, Schachtelsätze oder Fremdwörter sind für Menschen mit einer kognitiven Behinderung problematisch. Aus diesem Grund sollten alle Webseiten ausschließlich in einer "leichten Sprache" zur Verfügung stehen. Alternativ sollte es zumindest eine Übersetzung in die "leichte Sprache" geben.
Wie wählt man eine barrierefreie Website-Agentur aus?
Lassen Sie sich von der Agentur einige barrierefreie Webseiten zeigen, die von der Agentur erstellt wurden. Fragen Sie nach, welche Beratungsleistung die Agentur in diesem Zusammenhang gegenüber dem Kunden erbracht hat. Welche Ideen der Agentur sind in die Website eingeflossen und wie ist die Website in das Marketing-Kommunikations-Konzept des Kunden eingebunden? Welche Art der Betreuung leistet die Agentur, wenn die barrierefreie Website fertig erstellt ist?
Über die Antworten erhalten Sie einen Eindruck, ob die Agentur daran interessiert ist, eine strategische Zusammenarbeit mit den Kunden aufzubauen oder ob sie nur schnell eine Website erstellt.
Richtlinien, Verordnungen und Prüfverfahren für barrierefreie Webseiten: WCAG und BITV 2.0
Bei den WCAG (Web Content Accessibility Guidelines ) handelt es sich um Richtlinien für Webseiten-Programmierer und Redakteure. Die BITV 2.0 ist die Barrierefreie Informationstechnik-Verordnung. Wie stehen WCAG und BITV in Zusammenhang? Die WCAG sind als globale Empfehlungen zu verstehen, auf denen die einzelnen Staaten rechtlich verbindliche Verordnungen erlassen.
Wie testet man, ob die eigene Website dem BITV genügt? Hierfür hat das Bundesministerium für Arbeit und Soziales einen Test entwickelt. Die Schritte und Inhalte, was geprüft wird, sind öffentlich zugänglich. Die Website wird dann von einer BITV-Prüfstelle getestet. Dies kann bereits während der Entwicklung geschehen oder abschließend, wenn die Website fertig gestellt ist.
Falls alle geprüften Seiten BITV-konform sind, kann das BITV-Prüfzeichen und der Prüfbericht auf der eigenen Website platziert werden. Die eigene Website für Personen mit Einschränkungen zugänglich zu machen, ist eine vorbildliche Entscheidung und über diese gute Tat kann man auf der eigenen Website informieren. Für WCAG gibt es auch Testverfahren, maßgeblich ist aber der abschließende Test nach BITV.
Für Nicht-Techniker: Was muss man berücksichtigen, um eine Website barrierefrei zu machen?
Für eine angenehme Erfahrung beim Surfen auf einer Webseite muss ein Programmierer drei wesentliche Aspekte beachten: Das Betriebssystem, den Browser und das Endgerät. Ein Betriebssystem ist beispielsweise Microsoft Windows 10. Für Browser stehen beispielhaft Mozilla Firefox, Google Chrome und Microsoft Edge. Das Endgerät ist das Gerät, das der Besucher nutzt: ein PC, Laptop, Smartphone oder Tablet.
Erfahrung aus der Praxis: Selbst innerhalb großer Organisationen oder Konzerne kann es vorkommen, dass nicht auf die aktuelle Version umgerüstet wird, um Kosten zu sparen. Dies sollte der Kunde im Rahmen des Briefings erwähnen. Die Webagentur kann dies bei der Programmierung berücksichtigen.
Die Browser spielen für die Darstellung der Website eine besondere Rolle. Die Einsen und Nullen aus der Telefonleitung und die Programmiersprachen werden erst durch den Browser in Schrift und Bild übersetzt, so dass ein Mensch etwas mit der Website anfangen kann.
Ein mobiles Endgerät wiederum hat ein anderes Seiten- und Höhenverhältnis wie ein PC, der Bildschirm beim Smartphone ist kleiner und die Maus als Eingabehilfe fehlt. Der Webprogrammierer erstellt deshalb einen eigenen Code für die Darstellung und Interaktion auf mobilen Endgeräten.
Die Website wird geprüft, ob sie unter den gängigen Browsern, Betriebssystemen und Endgeräten läuft. Zur Prüfung der Barrierefreiheit haben die Webprogrammierer für die Entwicklungsphase noch Tools wie Google Lighthouse, die vor dem offiziellen BITV-Test eingesetzt werden, um bestehende Mängel rechtzeitig zu erkennen.
Nicht genug?
Für noch mehr Informationen zum Thema, gibt es hier noch weiteren Input.