3. »Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten,
dass jeder sie nutzen und lesen kann.« Jan Eric Hellbusch
Barrierefreiheit geht sehr häufig Hand in Hand
mit Usability oder Suchmaschinenoptimierung.
Barrierefreiheit und gutes Design widersprechen sich nicht!
Allerdings gibt es durchaus ein paar kleine Details,
die Designer und/oder Frontendentwickler nerven können.
BARRIEREFREIHEIT IM FOKUS
ein Dutzend Beispiele für a11y
41. FOCUS05
Prüfen, ob die Reset-Anweisungen sinnvoll sind
:focus { outline: none; }
unterdrückt die Outline für alle User;
sowohl beim Draufklicken mit der Maus als auch bei Nutzung der Tastatur
a:hover, a:active { outline: none; }
unterdrückt die Outline beim Draufklicken mit der Maus
Nutzer mit Tastatur sehen nun aber den fokussierten Link mit Outline
🔗 http://webkrauts.de/2009/12/11/verliere-nicht-den-focus
73. ARIA ROLES10
Abstract Roles – Abstract roles are used for the ontology. Authors MUST NOT
not use abstract roles in content.
Widget Roles – These roles act as standalone user interface widgets or as part of
larger, composite widgets. dialog / progressbar / slider / status
Document Structure – These roles describe structures that organize content in a
page. Document structures are not usually interactive.
article / columnheader / definition / directory / document
Landmark Roles – These roles are regions of the page intended as
navigational landmarks. contentinfo / form / main / navigation / search
76. FARBKONTRASTE11
»Das W3C macht da mit der WCAG 2.0 (Web Content Accessibility
Guidelines 2.0) klare Vorgaben. Der Kontrast zwischen Text im Vordergrund und
seiner Hintergrundfarbe sollte bei einer Textgröße kleiner 18px (ohne Fettschrift)
und kleiner 14px (fett geschrieben) ein Verhältnis 4,5:1 aufweisen, kleiner 18px
(nicht fett geschrieben) und größer 18px (bei Fettschrift) noch 3:1, um die AA
Spezifikationen zu erfüllen. Für die AAA-Spezifikation beträgt die Ratio sogar 7:1
bzw. 4,5:1 (A, AA und AAA sind die Stufen der Konformität, mit denen die Zu-
gänglichkeit einer Internetseite vom W3C bewertet wird). Text über gemustertem
Hintergrund oder Bildern sollte dementsprechend höher kontrastiert werden. Texte
und Schriften als Teil eines Logos oder mit rein dekorativem Charakter hingegen
sind von diesen Bestimmungen ausgenommen.«
🔗 http://webkrauts.de/2009/08/05/kontrastreiche-farbwelten