1. Deine Rolle: Entwickler*in

2. Deine Projektphase: Projektdurchführung

Rolle oder Phase ändern

Tipps und Empfehlungen

Entwickler*innen tragen eine besondere Verantwortung für die Umsetzung von Barrierefreiheit bei Software. Es folgen Tipps
und Empfehlungen zur Umsetzung für Entwickler*innen. Um zu erfahren, worauf diese Tipps basieren, besuche die Info-Seite.
Klicke auf die einzelnen Kategorien, um herauszufinden, was du als Entwickler*in konkret für barrierefreie Software beachten kannst. 

1. Sprache

  • Achte darauf, dass die Sprache deiner Webanwendung angegeben ist (als Attribut im HTML <html lang=“de“>)
  • Lege ebenfalls die Sprache von Wörtern oder Textabschnitten in einer anderen Sprache fest (z. B. <blockquote lang=“es“>)
  • Die Mark-up Sprache HTML sollte korrekt eingesetzt werden (prüfe dies z. B. mit dem W3C-HTML-Validator)

2. Unterstützung

  • Stelle sicher, dass es min. zwei Zugangswege zum gesamten Inhalt der Webanwendung gibt (z. B. Navigation, Suche)
  • Die Seite sollte benutzerdefinierte Browsereinstellungen berücksichtigen (z. B. Farben, Kontraste, Schriftarten)
  • Bietet deine Webanwendung einen technischen Support (Telefon, Mail oder Chat) an, sollte dieser Informationen zu Barrierefreiheitsfunktionen und Kompatibilität zu assistiven Technologien bereitstellen
  • Ein Support sollte außerdem die Kommunikationsbedürfnisse von Menschen mit Behinderungen berücksichtigen und effektive, d. h. funktionierende und tragfähige Kommunikationskanäle anbieten

3. Dokumentation

  • Die Dokumentation der Webanwendung sollte zusätzliche Eigenschaften und Funktionen in Bezug auf Barrierefreiheit auflisten und erklären, falls diese selbst programmiert wurden (z. B. Vorlesefunktion, Farbschemata)
  • Beachte, dass die Webseite eine barrierefreie Dokumentation hat (auch Erklärung zur Barrierefreiheit)

4. Testing 

  • Während der gesamten Projektdurchführung sollten entwicklungsbegleitende Barrierefreiheitstests durchgeführt werden
    (z. B. mit WAVE, axe-core)

1. Allgemein

  • Seitenelemente sollten in einer sinnvollen und brauchbaren Reihenfolge stehen
  • Achte auf eine ordentliche Struktur und die Verwendung korrekter HTML-Strukturelemente für:
    – Überschriften (h1 bis h6)
    – Listen (ul, ol etc.)
    – Zitate (blockquote)
    – Absätze (p)
    – Hervorhebungen (strong, em)
    – Datentabellen (th für Zeilen- und Spaltenüberschriften)
    – Beschriftungen (label-Elemente) und Eingabefelder (for-Attribut)
    – Formular-Elemente (fieldset und Überschriften für zusammenhängende Gruppen)
  • Füge Text-Inhalt nicht per CSS ein
  • Inhalte deiner Webanwendung sollten sowohl im Hoch- als auch im Querformat nutzbar sein, außer eine bestimmte Ausrichtung des Inhaltes ist unerlässlich
  • Seiteninhalte sollten so umbrechen, dass alle Informationen und Funktionen verfügbar sind, ohne dass Nutzende horizontal scrollen müssen 


2. Links

  • Links sollten aussagekräftig benannt werden (Ziel und Zweck)
  • Interaktive Bedienelemente wie Links und Schaltflächen sollten programmatisch ermittelbare Namen und Rollen haben


3. Tabellen

  • Verwende für Datentabellen vorgesehenes Mark-up nicht für Layouttabellen
  • Achte bei komplexen Tabellen auf den Bezug von Überschriften und Inhalten (scope oder id und header)

4. Formulare

  • Fehler bei Formularen sollten die fehlerhaften Felder identifizieren und Hinweise zum Korrigieren geben
  • Verwende Beschriftungen für Formularelemente (Bei Eingabefeldern links neben oder über dem Feld, bei Checkboxes und Radiobuttons rechts daneben)
  • Eingabefelder, die sich auf die Nutzenden beziehen, sollten den Zweck bezeichnen (z. B. über ein autocomplete-Attribut)
  • Statusmeldungen bei Inhalten (z. B. bei Abschicken eines Formulars), sollten über geeignete Rollen und Eigenschaften ausgezeichnet werden und programmatisch ermittelbar sein