Werkzeuge und Helferlein

Inhaltsverzeichnis überspringen

In der Welt der Barrierefreiheit gibt es eine Vielzahl von Aspekten zu berücksichtigen, und das in verschiedenen Bereichen wie Gestaltung, Entwicklung oder Inhaltserstellung. Es kann schnell passieren, dass versehentlich eine kleine Barriere entsteht. Doch wenn man regelmäßig darauf prüft, können diese in der Regel schnell gefunden und behoben werden.

Im Folgenden stelle ich interessante und nützliche Werkzeuge vor, die meiner Meinung nach hilfreich sind. Die Liste ist natürlich nicht abschließend. Falls du noch weitere nützliche Werkzeuge kennst, freue ich mich über eine Nachricht von dir.

Hinweis: Die meisten Werkzeuge sind in englischer Sprache verfügbar und die Browser-Plugins sind für Chrome bzw. Brave. Die meisten davon sind jedoch auch für Firefox erhältlich.

Gestaltungshilfen

Barrierefreiheit betrifft nicht nur Entwickler, sondern auch das Design. Aspekte wie Farbauswahl, Schriftarten, Abstände und Schriftgrößen müssen berücksichtigt werden und es gibt zahlreiche Hilfestellungen, die dabei unterstützen können. Es ist inspirierend zu sehen, wie durch bewusste Designentscheidungen eine inklusive und zugängliche Umgebung geschaffen werden kann, die für alle Nutzerinnen und Nutzer angenehm ist.

  • Who can use - Online-Werkzeug mit welchem Farbkombinationen für Konformitätslevel, sowie visuelle Beeinträchtigungen geprüft werden können
  • ColorSafe - Online-Werkzeug zur Generierung von Farbpaletten auf Basis einer vorgegebenen Farbe sowie weiteren Angaben, wie z.B. Konformitätslevel
  • WCAG Contrast Checker - Browser-Erweiterung zur Prüfung von Kontrasten mittels Pipette auf WCAG-Konformität
  • Colour Contrast Analyser - frei verfügbare Software zur Prüfung und Anpassungen von Farbkombinationen hinsichtlich WCAG-Konformität

Entwicklungshilfen

Nach dem Designprozess geht die Reise zur Barrierefreiheit in die Entwicklung über. Doch auch hier stehen uns nützliche Werkzeuge und Browser-Erweiterungen zur Verfügung, um unseren Fortschritt zu überprüfen. Diese Werkzeuge ermöglichen es uns, potenzielle Hindernisse zu identifizieren und zu beheben, und tragen dazu bei, dass unsere Produkte für eine breite Palette von Nutzern zugänglich und benutzerfreundlich sind.

Prüfung und Validierung

  • W3-Validator - Online-Werkzeug zur Validierung von HTML
  • WAVE - Browser-Erweiterung von Webaim zur Prüfung von Webseiten hinsichtlich existenten Barrieren
  • BITV-Selbsttest - Online-Werkzeug zur manuellen Prüfungen nach einem Checklisten-Schema (eine Registrierung ist kostenfrei aber erforderlich)
  • HeadingsMap - Browser-Erweiterung zur Überprüfung der Überschriftenstruktur (die Anzeige des HTML5 Outline Trees muss in den Einstellungen aktiviert werden)
  • Bookmarklets - Auflistung unterschiedlichster Bookmarklets, z.B. für die Anpassung von Textabständen
  • Accessibility Insights for Web - Browser-Erweiterung zur Prüfung von Webseiten, z. B. Visualisierung der Tab-Reihenfolge einer Webseite
  • Accessibility Support - Online-Werkzeug zur Prüfung der Unterstützung von aria-Features in Assistenztechnologien
  • This is WCAG - Website mit Filterung der WCAG-Erfolgskriterien nach Thema, z. B. Formulare

Simulation

  • Landmarks - Browser-Erweiterung, welche es ermöglicht eine Webseite über vorhandene Landmarks zu navigieren
  • Web Disability Simulator - Browser-Erweiterung mit welcher es möglich ist, eine Webseite so zu bedienen, als hätte man z.B. visuelle oder motorische Einschränkungen

Hilfe bei der Inhaltserstellung

Selbst wenn die Webseite gestaltet und vollständig entwickelt ist, bedeutet das noch lange nicht, dass sie barrierefrei ist. Auch bei der Inhaltserstellung können noch Barrieren entstehen. Doch auch in diesem Stadium stehen uns hilfreiche Werkzeuge zur Verfügung, um dies zu vermeiden. Durch bewusste Entscheidungen und den Einsatz dieser Hilfsmittel können wir sicherstellen, dass unsere Inhalte für alle Nutzerinnen und Nutzer zugänglich sind.

  • An "alt" decision tree - Entscheidungsbaum von W3C zur Vergabe eines Alternativtextes für Bilder
  • HeadingsMap - Browser-Erweiterung zur Überprüfung der Überschriftenstruktur (die Anzeige des HTML5 Outline Trees muss in den Einstellungen aktiviert werden)

Screenreader

Wenn alles soweit fertig ist, ist es eine ausgezeichnete Idee, sich das Ergebnis auch einmal vorlesen zu lassen. Auf diese Weise können wir Schreibfehler, fragwürdige Grammatik oder fehlende Alt-Texte in Bildern entdecken und direkt beheben. Diese letzte Überprüfung gewährleistet, dass unsere Inhalte nicht nur barrierefrei, sondern auch inhaltlich korrekt sind.

Diese Seite wurde am 21.09.2023 erstellt und zuletzt am 05.07.2024 aktualisiert.