Web Seiten sind für alle Besucher da, auch solchen mit Einschränkungen!
Millionen Menschen sind durch unsachgemäße Webpräsenzen betroffen!
Der Anzahl an Menschen mit eine schwere Sehbehinderung dürfte ca. 7 % der Bevölkerung betreffen. Den Anzahl an Blinden dürfte bei ca. 1 % liegen. Da die Statistische Erhebungen in Deutschland nicht gerade gut sind könnten dies Zahlen auch höher sein. Ca. 8 % der Männer dürften irgend eine Forme von Farbblindheit haben.
Blinde können nicht ein Mauscursor wahrnehmen. Die Tastatur Navigation ist unerlässlich.
Beim Zittern der Hand, kann die Maus nicht zielgerichtet bewegt werden.
Bei manche Erkrankungen, können die Anwender nicht genau vom Ende einer Zeile zum Anfang nachfolgende Zeile die Augen richten. Dies wird durch ein zu geringen Zeilenabstand und auch von zu breite Texte verursacht.
Daten über den Anzahl an Betroffenen dürften schwer zu ermitteln sein. Laut Erhebungen aus de USA, dürften 7 % der im Arbeitsfähigen Altern dürften fein motorische Schwierigkeiten haben.
Den Anzahl an Taiben liegt bei ca. 0,1 % (Taubheit). Viele Menschen, vor allem älteren haben Beeinträchtigungen.
Mit zunehmendem Alter nimmt der Prozentsatz Hörgeschädigter zu
Multimediale Elemente, ohne visuelle Unterstützung, sind ungeeignet, sie können nicht oder nur unzureichend wahrgenommen werden.
Eine nicht geringe Anteil der Menschen haben Leseschwächen (1 % bis 4
%)
Noch mehr sind Analphabet oder funktionale Analphabet (13 %).
Eine schlechte Ergonomie einer Seite kann die Bedienbarkeit und Übersichtlichkeit erschweren und Kognitive Fähigkeiten des Anwenders überfordern.
Mehrdeutige oder ungenaue Beschriftungen können sehr verwirrend sein.
Überfrachte Seiten, ergonomisch undurchdachten Seitenausbau, zu kleine oder zu Kontrastarmen Schriften verursachen zusätzliche kognitiven Arbeiten und führen, bestenfalls, nur zur schnellerer Ermüdung einem, ansonsten, »gesunden« Mensch.
Nachstehende Beispiele sollten den Aspekt Farben Gestaltung von Texte aufzeigen.
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 21
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 21
Die Schrift mit der Linienbreite 100 erscheint, bei beide Darstellungen eher grau als schwarz und, obwohl ein Kontrast, laut WCGA, von 21 gegeben ist nicht wirklich lesbar.
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 3,86
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 3,86
Solche Techniken werden gerne verwendet, in dem Fall, reicht das Kontrast gerade für WCAG AA. Für AAA reicht es nicht mehr aus. Das Schriftgrad müsste laut APAC 20.25 px betragen, auf der Seite corona.rlp.de, eine Behörde Seite sind die Texte mit lediglich 14 px versehen.
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 8,59
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 2,44
Die Farbe Blau hat einen kleinen Anteil an der Luminanz, ca. 7 %. Dementsprechend ist das wahrgenommenen Kontrast von schwarze Schriften nicht besonders gut.
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 15.3
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 1,37
Die Farbe Grün ist, mit ca. 71 % Anteil an der Luminanz, »Hell«. Deswegen ist eine weiße Schrift sehr ungeeignet.
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 5,25
Linienstärke: 100
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 400
123456 i1IL jÎ
123456 i1IL jÎ
Linienstärke: 700
123456 i1IL jÎ
123456 i1IL jÎ
Kontrast: 4
Rot ist mit 7 % Anteil an der Luminanz relativ dunkel. Trotzdem weist die schwarze Schrift ein bessere Kontrast auf. Im Beispiel erreicht das Kontrast ein Wert von 5,25. Dies entspricht AA für der Stufe WCAG 2.0. AAA wird nicht erreicht.
Laut APCA erreicht die schwarze Farbe »Lc 40.0« und Weiß »Lc »69.6«. Die Angabe des Schriftgrades für eine normale Strichstärke beträgt dabei 60 px bzw. 19,75 px!
Kontrasten sind auch von der Umgebung abhängig. Eine starke Umgebungshelligkeit beeinflusst (Sonneneinstrahlung) beispielsweise die Lesbarkeit einen Smartphone. Dies kann leicht nach geprüft werden. Bei Computerbildschirme ist es auch nicht viel anders.
Einige Menschen werden durch helle Farben geblendetm daher ist es empfehlenswert zwei Dartsllungsarten (Hell / Dunkel), auch wenn es vom WCAG nicht gefordet wird, vorzusehen.
Ein Auswahl dunklen/hellen Hintergrund sollte vorhanden sein. Dabei ist zu beachten, dass Weiße Schriften auf schwarzen Hintergrund bei manchen Besucher zur Blendung führen können und dass das Schriftgrad ein wenig vergrößert werden sollte.
Wenn ein dunklen Hintergrund vorhanden ist, öffnen sich die Pupillen, damit erscheinen die helle Teilen des Dokumentes wesentlich heller und bei einer Weiß auf Schwarz Darstellung kommt es zu eine zu große Helligkeit.
Visuelle Beinträchtigung
Motorische Beeinträchtigung
Die Standard Tastatur von Apple Geräte beinhaltet kein Nummernblock, deswegen ist die Maus Emulation sowohl auf ein mögliche Nummernblock sowie auf die Tasten 7, 8, 9, U, O, J, K, und L sowie M, , und . gelegt. Dies bedarf das Umschalten des Betriebsmodus.
Unter Windows und Linux wirkt die Maus Emulation nur über ein Nummernblock.
Für Blinde nicht unbedingt geeignet.
Microsoft bietet zwar die Funktionalität, leider funktioniert es nicht!
NoComprendo (Linux) funktioniert recht gut, auch wenn die letzte Release im Jahr 2017 veröffentlicht wurde. Als Sprache stehen nur englisch und Französisch, einer Anpassung für weitere Sprache sollte möglich sein, bedarf allerdings die Übersetzung der Oberfläche und das Zurverfügungstellen einige Konfigurationsdateien.
Anwender können der Browser so, dass manche Vorlieben eingestellt werden. Seiten die keiner Rücksicht darauf nehmen zeugen nicht unbedingt vom Respekt den Anwender gegenüber.
Der »WCAG Color contrast checker« ist für eine schelle Übersicht gut zu gebrauchen. Besonders interessant ist die Simulation von verschiedene Farbwahrnehmungsstörungen wie Protanopia usw. mit Umrechnung des Kontrast entsprechend der untersuchte Störung.
Mit WAWE kann schnell eine Übersicht angezeigt werden. Die Überprüfung der ARIA Attribute (Screenreader) wird berücksichtigt.
Lighthouse ist zwar schön, vergibt auch Punkten, ist aber nicht immer zielführend.
Das Tool WAVE Accessibility Extension und lighthouse komplettieren sich, manches wird mit lighthouse nicht offenbart (mögliche fehlenden Labels usw.) mit WAWE wird dies als Alert dargestellt.
Die Hervorhebung der angesprungene Bedien-Elementen und Links wird von keine der untersuchte Tools untersucht. Farbkontraste werden auch nicht immer vollständig überprüft.
<form name="suche" role="search" >
<fieldset>
<legend>Suche</legend>
<div role="radiogroup">
<label aria-hidden="true" for="auswahl1"
>Auswahl 1</label
><input aria-label="Auswahl 1"
id="auswahl1" name="auswahl" type="radio" checked="true"
><label aria-hidden="true" for="auswahl2">Auswahl 2</label
><input aria-label="Auswahl 2" id="auswahl2" name="auswahl" type="radio">
</div>
<div>
<label aria-hidden="true" for="option1">Option 1</label
><input aria-label="Option 1"
id="option1" type="checkbox" checked="false"
><label aria-hidden="true" for="option2">Option 2</label
><input aria-label="Option 2" id="option2" type="checkbox">
</div>
<div>
<input type="search" aria-label="Suchstring eingeben (Pflicht)"
><button type="submit">Suchen</button>
</div>
</fieldset>
</form>Damit die Sprachausgabe nicht ausufert, sind die Labels mit aria-hidden=“true” versehen, dafür wir für die Input Elementen aria-label=<Text> versehen.
Ohne dieser Aufzeichnung, ist die Bedienung des Radiobuttons sehr unergonomisch Das Selektieren erfolgt, innerhalb des Formulars per Kursor Tasten. mit den Tabulator wird das nächsten Element außerhalb der Gruppe angesteuert.
Die eigenartige Formatierung “><input usw.” sorgt dafür, dass es kein Leerzeichen zwischen den Radio Button vorhanden sind (Aussprache leerzeizen).
Dies wurde mit NVDA, JAWS, Narrator, VoiceOver und Orca getestet.