PAGE online

Webdesign: 10 Grundregeln für mehr Barrierefreiheit

Wenn ihr diese zehn Punkte beachtet, seid ihr auf dem richtigen Weg zu einer barrierefreien Website – mehr geht natürlich immer!

Accessibility­-Checklisten erleichtern die Designar­beit enorm, wenn es darum geht, den Überblick über alle Anforderungen an technisch korrekte und gute Gestaltung zu behalten. Ein Tipp vorab: Die einfachsten Dinge, zum Beispiel Kon­traste oder Alternativtexte, haben oft die größte He­belwirkung!

10 Tipps für mehr Web-Accessibility

  1. Semantisches HTML und lineares Layout: Achtet auf eine logische Reihenfolge der Überschriftenstruktur und anderer ordnender Elemente. Beispiel: Eine H3- Überschrift kann es nur nach einer vorangegangenen H2 geben und eine H2 nur nach einer H1. Eine H3 darf also nicht auf eine H1 folgen. Das hilft Screenreadern, den Inhalt korrekt zuzuordnen.
  2. Bilder mit Alt-Texten versehen: Nutzer:innen, die Screenreader verwenden, müssen Inhalt und Funktion des Bildes vermittelt bekommen.
  3. Text separat bereitstellen: Vermeidet Text auf Bildern und bietet Beschreibungstexte für Nicht-Text-Inhalte (zum Beispiel für Grafiken oder Videos) an.
  4. Barrierefreie Links: Verlasst euch nicht auf Farben. Links sollten entweder unterstrichen oder fett markiert sein. Vermeidet Beschreibungen wie »Hier klicken«, sondern benennt das Klickziel in Worten. Gebt in Downloadlinks die Dateigröße an. Handelt es sich um einen externen Link, dann vermerkt es für User:innen mit Screenreader.
  5. Fokusstatus: Damit eine Website sich überhaupt per Tastatur bedienen lässt, brauchen Links und andere interaktive Elemente (Buttons, Navigationen, Formulare et cetera) unbedingt einen Fokusstatus, der anzeigt, welches Element gerade angesteuert wird.
  6. Farbkontraste beachten: Bei Schriftgrößen unter 24 Pixel beziehungsweise unter 18,7 Pixel bei fetter Schrift wird ein Kontrastverhältnis von 4,5 : 1 oder größer gefordert.
  7. Tabellen immer mit einer Kopfzeile versehen: Denkt auch hier an User:innen mit Screenreader: Tabellen enthalten Daten und sind kein Designelement.
  8. Pinch und Zoom bereitstellen: Mit <meta name=”viewport”, user-scalable=”yes”>.
  9. Dem Wunsch zu schrumpfen widerstehen: Verkleinert Texte und Bilder nicht, nur damit der Inhalt passt.
  10. Untertitel für Video und Audio anbieten:  Von Nutzer:innen selbst auswählbare Closed Captions bevorzugen! Die Untertitel sollten als separate editierbare Datei vorliegen.

Dieser Beitrag ist Teil unseres Artikels »Accessible UX Design« und ist erstmals in PAGE 12.2023 erschienen. Die ganze Ausgabe jetzt als P+-Abonnent:in kostenfrei downloaden:

PDF-Download: PAGE 12.2023

Branding by/for Creatives ++ KI-Tools im Packaging Design ++ UX Design: Accessibility ++ ENGLISH SPECIAL Cari Sekendur ++ Game-Experience für Metaverse und Stores ++ Hybride Lern- und Lehrumgebung »hands on« ++ Making-of: Type-Tool Burrowlab ++ Algorithmen und der Verlust der Diversität

9,90 €
AGB

 

Produkt: Download PAGE - Parallax Scrolling – Basics, Cases, Tutorials - kostenlos
Download PAGE - Parallax Scrolling – Basics, Cases, Tutorials - kostenlos
Webdesign Trends und Parallax Scrolling Tutorials

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren