Barrierefreies Web: Top-10 Accessibility Tools

Fokus Reihenfolge festlegen, Alt Texte schreiben, A11y-Check – alles kein Hexenwerk mit den Werkzeugen von Accessibility-Expertin Sabrina Mattle. Sabrina Mattle arbeitet als UX/UI-Designerin bei der IT-Beratung und Designagentur Leanatic und berät Kunden vor allem in Fragen rund um strategisches Design, Prozessoptimierung, Barrierefreiheit und ganz einfach gute, digitale Produkte. Neben klassischen Design-Thinking-Methoden wie User Research und Prototyping gehören zu ihrem Mehtoden-Repertoire auch Usability-Analyse und UX Writing. Sabrina stellt ihre Lieblingstools für barrierearmes, inklusives UX Design vor – darunter ein eigenes Template für inklusive Personas. https://sabrinamattle.de

Stark

Mein absolutes Lieblingstool, wenn es darum geht, Designs barrierefrei zu gestalten. Die Plattform bietet sowohl Plug-ins für Designtools wie Figma oder Sketch als auch Browsererweiterungen, die mich während des gesamten Projektverlaufs unterstützen. In der Designphase nutze ich das Figma-Plug-in, um Kontraste, Typografie und Klickflächen zu optimieren. Bei der Übergabe an die Entwicklung achte ich auf Anmerkungen zur Fokus-Reihenfolge (damit Nutzer:innen mit dem Keyboard die Website-Komponenten in einer festgelegten Reihenfolge ansteuern können). Besonders praktisch: Ich kann damit bereits im Design die Alt-Texte für Bilder vorbereiten. www.getstark.co

Google Lighthouse

Zum Testen bestehender Webseiten eignet sich das Open-Source-Tool Google Lighthouse hervorragend. Es führt automatisierte Analysen durch und überprüft verschiedene Aspekte der Barrierefreiheit, wie die Lesbarkeit von Texten, die Verwendung von ARIA-Labels für die interaktiven Elemente und Struktur des HTML-Codes. Nach dem Audit erhält man eine detaillierte Auswertung mit Verbesserungsvorschlägen. Praktischerweise testet Lighthouse dabei auch gleich die Performance der Website und SEO-Eiegenschaften. Das Tool ist über die Chrome-Entwickelr-Tools oder hier im Web zugänglich: https://pagespeed.web.dev

ChatGPT- Alt-Text Generator von Codora

Alt-Texte sind eine einfache Möglichkeit, Barrierefreiheit zu verbessern, indem man sie in Content-Management-Systemen einfügt. Ein nützliches Tool hierfür ist der Alt-Text Generator für Web-Bilder (Deutsch) von codora. Man lädt ein Bild hoch und die KI generiert einen verständlichen, informativen Alt-Text. Wie bei jedem KI-Tool gilt: Die Ergebnisse sollte man noch einmal überprüfen, da die Texte bei komplexen Bildinhalten unpassend und ungenau sein können.
https://chatgpt.com/g/g-7TpYB2tFs-alt-text-generator-fur-web-bilder-deutsch

Cards for Humanity

Ein tolles Tool für inklusives Design ist das Kartenset von frog Cards for Humanity. Sie werfen zufällig zwei Karten aus – eine Person und eine Eigenschaft – und schaffen so individuelle Szenarien, die neue Denkansätze und Perspektiven fördern. Neben der Webversion lassen sie sich auch als Figma-Plug-in im nächsten Remote-Workshop verwenden.
https://cardsforhumanity.frog.co

FigJam Inklusive Personas – Template

Personas sind im UX Design oft ein Diskussionspunkt. Ich persönlich finde sie hilfreich, um fundierte Entscheidungen zu treffen – vorausgesetzt, sie basieren auf echten Nutzer:innen. Das »Inklusive Personas Template« ist eine FigJam-Board-Vorlage, die mir hilft, inklusive Personas zu erstellen. Neben klassischen Persona-Kategorien bietet sie auch Beispiele für Sinne und Eigenschaften wie »Sehen«, »Hören«, »Tasten« und »Kognitiv«. So integrieren wir Barrierefreiheit konsequent in unsere Entscheidungen. Besonders spannend in Kombination mit den Cards for Humanity (oben), wenn es darum geht, neue Perspektiven zu entwickeln. www.figma.com/community/file/1418169269159391047/inklusive-personas

axe for Designers

Wie Lighthouse erkennt auch dieses Figma-Plug-in viele Accessibility-Probleme bereits in der Designphase. Der A11y(Accessebility)-Check scannt die Designs und liefert in kurzer Zeit eine Priorisierung der gefundenen Barrierefreiheits¬probleme. Besonders hilfreich finde ich, dass das Tool die Ergebnisse priorisiert und gleich Erklärungen dazu liefert. Zusätzlich bietet es einen Kontrast-Checker und Annotations-Tool für die Übergabe an die Entwicklung.
www.figma.com/community/plugin/1085612091163821851/axe-for-designers-a-free-accessibility-plugin

WAVE von WebAim

Ein leistungsstarkes Tool, um Barrierefreiheitsfehler und Verstöße gegen die Web Content Accessibility Guidelines (WCAG) zu finden. WAVE hebt Probleme wie fehlende Alt-Texte, schlechte Farbkontraste und unstrukturierte Überschriften direkt auf der Seite hervor. Die Nutzung ist einfach: Man benötigt lediglich die URL der Testseite oder verwendet die WAVE-Browser-Extensions. https://wave.webaim.org

Mental Health & Cognition Plugin

Microsoft bietet mehrere hilfreiche Figma-Plug-ins für digitale Barrierefreiheit an. Das Mental Health & Cognition Plugin habe ich letztens eher zufällig entdeckt. Es enthält Checklisten, die helfen, kognitive Bedürfnisse in Designs zu berücksichtigen. Sie sind nach Kategorien sortiert und Nutzerstimmen verdeutlichen, warum die einzelnen Punkte relevant sind – ideal für ein besseres Verständnis.
www.figma.com/community/plugin/1268611308971699930/mental-health-cognition-plugin

leserlich.info

Die lehrreiche Seite erklärt nicht nur, was Texte lesbar macht und worauf man beim ihrer Gestaltung achten sollte. Sie bietet auch praktische Tools, um Kontraste zu testen und Schriftgrößen zu definieren. Der Kontrastrechner hilft sicherzustellen, dass Text und Hintergrund den WCAG-Richtlinien entsprechen und genügend Kontrast aufweisen. Das Schriftgrößenrechner unterstützt Designer:innen dabei, die optimale Schriftgröße für verschiedene Bildschirmgrößen und Lesedistanzen festzulegen. Zudem bietet leserlich.info wertvolle Best Practices zur Textgestaltung, wie zum Beispiel die ideale Zeilenlänge und geeignete Schriften. www.leserlich.info

LanguageTool

In meinen Designs setze ich gerne echte Texte ein, damit Kund:innen meine Ideen besser verstehen. Wenn Einfache Sprache gefordert ist, nutze ich LanguageTool, um die Texte zu vereinfachen. Das Tool macht Stilvorschläge, die helfen, komplizierte Satzstruk¬turen und Fachbegriffe zu vermeiden, was besonders für Menschen mit kognitiven Ein¬schränkungen wichtig ist. Es prüft Rechtschreibung, Grammatik und Stil, kürzt lange Sätze und schlägt alternative Formulierungen für eine bessere Verständlichkeit vor. https://languagetool.org/de/text-umformulieren

Weiterlesen zum Thema Inclusive Design und barrierefreie Gestaltung auf PAGE-Online:

• Wenn ihr diese zehn Punkte beachtet, seid ihr auf dem richtigen Weg zu einer barrierefreien Website – mehr geht natürlich immer! https://page-online.de/kreation/10-grundregeln-fuer-mehr-barrierefreiheit/
• Auch Angst vor den vielen Design-Anforderungen, wenn es um barrierefreie Webinhalte geht? Perspectives filtert und sortiert die Standards für uns. https://page-online.de/branche-karriere/komplexitaet-baendigen-mit-perspectives-inklusiv-gestalten/
• Diese Extension zeigt Schwachstellen auf: Der Prototyp der Chrome-Extension »zugangsformen« von Daniela Hach visualisiert Barrieren im Netz. https://page-online.de/branche-karriere/web-accessibility-diese-extension-zeigt-schwachstellen-auf/
• Das Roblox Game ›Blackout at Mt. Earverest‹ musste eine gute Balance finden zwischen Accessibility und spielerischen Challenges. Diese Tools waren dafür hilfreich. https://page-online.de/kreation/toolbox-inclusive-design-in-roblox/

PAGE 03.2024

Produkt-Details anzeigen

Agenturen adieu – hallo Wirtschaft! ++ ENGLISH SPECIAL Hattie Stewart ++ Chance: Hochschulen als Auftraggeber ++ Marken allein im Metaverse? ++ Ratgeber: Perfekt präsentieren ++ PAGE Ranking 2024

• Download
• Print-Ausgabe

9,90 €

11,90 €

Lieferzeit: 2-3 Werktage

AGB