Web-Barrieren

Beispiel Weiß/Schwarz -Schwarz/Weiß

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.

Grau auf Grau

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.

Beispiel Blau/Weiß - Blau/Schwarz

Die Farbe Blau hat einen kleinen Anteil an der Luminanz, ca. 7 %. Dementsprechend ist das wahrgenommenen Kontrast von schwarze Schriften nicht besonders gut.

Beispiel Grün/Schwarz - Grün/Weiß

Die Farbe Grün ist, mit ca. 71 % Anteil an der Luminanz, »Hell«. Deswegen ist eine weiße Schrift sehr ungeeignet.

Beispiel Rot/Schwarz - Rot/Weiß

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!

Farbkontrast ermitteln

• WGAC Berechnung vergessen, einiges passt nicht!
• WGAC 3.0 enthält Hinweise auch ein bessere Modell SAPC (alt) APAC (WAGC)

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.

Hintergrund Farbe

• Manchen ziehen ein dunklen Hintergrund vor.
• Anderen mögen eher ein hellen Hintergrund.

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.

Farben Fehlsichtigkeit

• Beispiele sind unter CVD einsehbar

Tastatur Navigation Textfluss

• Mit den Kursortasten kann von Element zum Element ein nicht sichtbaren Kursor bewegt werden.
• Der Fluss muss bedacht werden, damit Blinden sich auf der Seite logisch bewegen können.
• Beim Einsatz einer Braille-Zeile wird die aktuelle Position im Text entsprechend positioniert.
• Mit den Tabulator kann von fokussierbaren und Elemente die als Sprungmarke gekennzeichnet sind gesprungen werden.
• Die Kursor Tasten nach unten oder oben werden anders behandelt wenn ein Screenreader verwendet wird, Links die eigentlich nicht fokussierbar sind, werden als solchen verwendet. Dies ist für die Navigation über der Tastatur wichtig.
• Mit den Tasten h sowie 1 bis 6 kann von Titel zum Titel navigiert werden. Es bedeutet, dass Titel Elementen richtig verwendet werden müssen!

Bilder

• Bilder sind oft ein reinen Schmuck. Eine Beschreibung es sollte mindestens eine Beschreibung (Attribut alt) vorhanden sein.

Video

• Blinde können damit kaum etwas anfangen.
• Tauben werden nicht hören (Untertiteln vorsehen).

Audio

• Für Tauben Menschen nicht gerade sinnvoll. Ein Transkript muss erreichbar sein.

Screenreader

Visuelle Beinträchtigung

• Windows: Narrator, NVDA, JAWS
• Linux: Orca
• macOS, iOS: VoiceOver
• Android: TalkBack

Tastatur Maus Emulation

Motorische Beeinträchtigung

• Betriebssystem Unterstützung
  • Windows: ja, Nummernblock notwendig
  • Linux: ja, Nummernblock notwendig.
  • MacOS: ja, muss ein- aus-geschaltet werden damit Tastatureingaben oder Mauseingaben möglich sind.

Tastatur Maus Layout

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.

Weitere Maus Emulation

• Kopfbewegung Windows: proprietäre Lösung, auch eviacam (siehe Linux)
• Kopfbewegung MacOS: vorhanden, nicht getestet
• Kopfbewegung Linux: eviacam
• Ios, Android: Kopfsteuerung vorhanden, nachrüstbar
• Ios, Android: Schaltersteuerung

Sprachsteuerung

• Windows: propriätere Lösungen.
• MacOS: vorhanden, nicht getestet.
• Linux: noComprendo leider nur auf englisch und französisch.
• Mobile Geräte: vorgesehen, geht nicht immer

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.

Beispiel für ein Formular

<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.