Nach oben
Designe für alle
Relevante Aspekte
Ein Design prüfen
Kontakt
Barrierefreie Webseiten / Barrierefrei gestalten

Barrierefrei gestalten

„Shifting left“ ist das Gebot der Stunde: Damit ist ist gemeint, dass die Zugänglichkeit / Barrierefreiheit in Projekten so weit nach vorne geschoben werden sollte wie möglich. Indem schon das Design auf Barrierefreiheit untersucht wird, können vor dem Start der Entwicklung wichtige Weichen gestellt werden. Es hilft Designern, barrierefreier zu denken und Entwicklern, barrierefreier zu implementieren.

Designe für alle

Designe

Barrierefreiheit und besser Zugänglichkeit, sind kein Hindernis für Innovation oder gutes Design. Sie sind einfach eine weitere Anforderung. Sie sind Teil der Herausforderung, etwas Tolles zu schaffen, und eine Chance, noch bessere Lösungen zu entwickeln, die am Ende zu Produkten und Features führen, die alle gerne benutzen.

Eine animierte Reihe von Personen verschiedenster Altersgruppen und Geschlechter. Es gibt z. B. eine Person mit Skateboard, eine im Rollstuhl, eine trinkt, eine hat Einkaufstüten
Relevante Aspekte in der Designphase

Relevante Aspekte

Aspekte der Barrierefreiheit*, die bereits in der Designphase relevant sind, beinhalten:

  • Struktur und Navigation
  • Farben und Kontraste
  • Alpha-Transparenz (das ist die Voraussetzung dafür, dass ein Text auf Hintergründen scheinbar unverpixelt funktioniert)
  • Die Lesbarkeit von Schriftarten und Schriftauszeichnung
  • Schriftgrößen und Schriftvergrößerung
  • Tastatursteuerung mit Pseudoklassen :hover, :focus, :active
  • Die Reihenfolge der Inhalte auch auf verschiedenen Endgeräten
  • Navigations-Mechanismen & Brotkrumenpfad und praktische Abkürzungen für Screenreader
  • Slider oder andere zeitgesteuerter Inhalte
  • Bilder mit Bildunterschriften, Überschriften und umgebenden Text und dessen Bedeutung für Alternativtexte
  • Formulare und Fehlermeldungen
  • Korrekte HTML5 Semantik

*Aus: Accessibility Design Screenguide (pdf) von Anatom5

Extrem Hilfreich: Barrierefreiheits-Annotationen

Annotationen sind Hinweise, die ein Design für die Entwicklung transparent machen. Genau wie Annotationen zur UX können Hinweise zur Barrierefreiheit im Design (also z.B dem Figma File) hinterlegt werden. Das können Hinweise zu Überschriften und ihre Hierarchie, verlinkte Icons und ihre Bezeichnungen, Hinweise zu Buttons oder ein Konzept zu Hover- und Fokus-Zuständen sein.

Leitfaden zum Prüfen eines Designs

Leitfaden:

Mit den Fragen und Anleitungen aus diesem Leitfaden könnt ihr in sechs Schritten die Barrierefreiheit eine UI-Designs überprüfen.

1. Seitentitel

Gibt es nur eine H1 die über dem Hauptinhalt steht? Beschreibt der Titel knapp und präzise den Seiteninhalt?

2. Überschriften

  • Immer eine Top Level Headline (<h1>) vorsehen auf jeder Seite.
  • Die Überschriften-Hierarchie muss passen (keine <h4> vor einer <h2>)
  • Werden Überschriften dazu verwendet, Inhalte auf logische Art und Weise aufzuteilen?
  • Kann ein User den Content überfliegen, indem er die Headlines scannt?
  • Haben alle wichtige Absätze und Sektionen Überschriften?
  • Sind die Inhalte durch das Überfliegen von Überschriften gut „scanbar“?

3. Links

  • Kennzeicnung: Links im Fließtext dürfen nicht nur durch eine andere Farbe gekennzeichnet sein. Sie müssen mindestens ein weiteres Merkmal haben (fett, mit Icon, unterstrichen, andere Schriftart…)
  • Sagt jeder Link aus, wohin er verweist? Beschreibt jeder Button deutlich, was er auslöst?
  • Wird mit Links oder Buttons auf eine Seite eine ähnliche Aktion ausgelöst, wie z.B "Details Ansehen" sollte pro Link oder Button jeweils unterschieden werden. Z.B:  „Details zu Thema XY ansehen“.
  • Unterschiede funktional zwischen Links und Buttons: Ist es ein Link, führt er auf eine neue Seite, eine andere Aktion auf derselben seite oder öffnet Modal/Popup?. Ist es ein Button, löst er eine Aktion aus.

4. Farben und Kontraste

Hintergrund- und Vordergrundfarben von Texten und Elementen brauchen einen ausreichenden Farbkontrast zueinander. Tools, die helfen: Online-Kontrast-Checker oder Color Contrast Analyzer zur lokalen Verwendung auf dem Rechner.

5. Bilder

  • Texte die direkt in Bilder hineingeredet wurden sind für Screenreader unsichtbar. Als HTML-Text kann Text auf Bild funktionieren, wenn die Kontrastwerte mit dem Hintergrundbild immer ausreichend sind.
  • Haben alle Bilder (auch Icons) eine Text-Alternative über das alt-Attribut? Hier ein paar Weiterführender Link zu Alt-Texten und was ein guter alt-Text ist.
  • Wenn das Bild dekorativ ist, muss das Alt-Attribut leer sein (alt=““). Wenn es nicht Eindeutig ist, ob das Bild dekorativ ist es besser einen Alt-Text zu vergeben.

6. Formulare und ihre Fehlermeldungen

  • Jedes Formular muss einen Absende Button haben, das gilt auch für Formulare, die nur aus einem einzigen Feld bestehen z.B. für Suchfelder.
  • Input-Felder sollten sichtbare Labels haben. Theoretisch geht es ohne, aber dann müssen aria-label gesetzt werden. In unserem Barrierefreien Blog haben wir einige Infos zu Formularen zusammengetragen, unter anderem einen Blog-Post zum Thema „Formulare designen“.
  • Wenn der Name eines Formular-Elementes nicht sichtbar ist, wird er anderweitig erwähnt?
  • Haben gruppierte Formular-Elemente einen Namen wie z. B. Multiple Choice Fragen? Der Name sollte Kontext für die individuellen Fragen in der Gruppe geben. Hier ein Artikel zum Gruppieren mit zwei Herangehensweisen im Beispiel.
  • Handelt es sich um Standard-Komponenten wie z. B. select, radio, checkbox? Wenn nicht, wäre es möglich, eine Standard-Komponente zu verwenden?
  • Sind Fehlermeldungen klar und hilfreich? Sagen die Meldungen was schief gelaufen ist und wie man es korrigieren kann? Wird der Fehler mit mehr Attributen als nur über die Farbe gekennzeichnet?

Hilfreiche Tools und noch mehr Infos

Du hast Fragen oder brauchst Unterstützung?

Wir helfen

Wenn du Unterstützung brauchst oder Fragen hast, schreib uns. Wir nehmen uns gerne Zeit für dich.

Schreib uns