[ Dies ist eine Übersetzung des englischsprachigen Artikels „Web Accessibility for Designers„. Copyright © by www.Webaim.org ]
Der Fokus von Barrierefreiheit im Internet liegt oft auf der Web-Entwicklung – den Dingen, welche in HTML, CSS oder JavaScript passieren, nachdem eine Webseite visuell gestaltet wurde. Optimale Zugänglichkeit sollte dabei viel früher beginnen, als Teil des visuellen Gestaltungsprozesses. Wir haben eine Infografik erstellt, welche einige wichtige Prinzipien der barrierefreien Gestaltung hervorheben soll.
Infografik
Text-Version
Planen Sie frühzeitig die übergeordnete Struktur
Stellen Sie sicher, dass Inhalte und Gestaltung in eine logische übergeordnete Struktur passen.
Berücksichtigen Sie die Leserichtung
Die Leserichtung sollte der visuellen Ordnung entsprechen.
Bieten Sie einen gutes Kontrastverhältnis
Seien Sie besonders vorsichtig mit leichten Schattierungen der Farben grau, orange und gelb. Überprüfen Sie Ihr Kontrastverhältnis mit unserem Farbkontrast-Checker.
Benutzen Sie reinen Text wo immer dies möglich ist
Reiner Text lässt sich besser vergrößern, lädt schneller und ist einfacher zu übersetzen. Benutzen Sie CSS um visuelle Stilelemente hinzuzufügen.
Passen Sie bei dem Benutzen von GROßBUCHSTABEN auf
Alle Großbuchstaben können schwer zu lesen sein und falsch von Screenreadern vorgelesen werden.
Benutzen Sie eine angemessene Schriftgröße
Die Schriftgröße kann aufgrund der gewählten Schriftart variieren, wobei 10 PT normalerweise das Minimum sind.
Denken Sie an die Zeilenlänge
Gestalten Sie diese weder zu kurz noch zu lang.
Stellen Sie sicher, dass Hyperlinks wahrnehmbar sind.
Differenzieren Sie Hyperlinks im Text der Seite mit Unterstrichen oder etwas anderem als nur einer anderen Farbe.
Gestalten Sie Erkennungsmerkmale für wichtige Hyperlinks
Stellen Sie sicher, dass Tastatur-Benutzer visuell einen fokussierten Hyperlink identifizieren können. Benutzen Sie die standardmäßige „gestrichelte Linie“ oder andere farbunabhängige Erkennungsmerkmale.
Erstellen Sie einen „Skip to Main Content“-Hyperlink.
Ein Hyperlink zur Sprungnavigation für Tastatur-Benutzer sollte sich oben auf der Seite befinden. Dieser kann zwar versteckt sein, sollte aber bei der Verwendung der Tastatur-Navigation sichtbar sein.
Stellen Sie sicher, dass die Hyperlinks für sich genommen Sinn machen.
Vermeiden Sie „Hier klicken“ als Linktext. Andere mehrdeutige Hyperlinks, wie „Mehr“ oder „Weiter“ können ebenso verwirrend sein.
Benutzen Sie Animationen, Videos und Audiokommentare vorsichtig
Wenn diese benutzt werden, bieten Sie ein Play/Pause -Schaltfläche an. Vermeiden Sie blinkenden oder blitzende Inhalte: Diese können zu Anfällen führen.
Verlassen Sie sich nicht nur auf die farbliche Gestaltung
Da Benutzer Farben oft nicht unterscheiden können oder diese deaktivieren, können Farben nicht der einzige Weg sein, über welchen Informationen vermittelt werden.
Gestalten Sie zugängliche Steuerelemente für Formulare
Stellen Sie sicher, dass Steuerelemente für Formulare über aussagekräftige Beschreibungen und Anweisungen verfügen. Achten Sie genau auf Fehlermeldungen beim Ausfüllen und Wiederherstellungs-Mechanismen.
Einbettungscode