M² Blog

Content Strategie und andere Rätsel

Mobiles Web für alle!

Das letzte Jahr wurde oft von der Barrierefreiheit im Web gesprochen. Farbkontrast, Navigierbarkeit durch die Tastatur und weitere Themen standen an der Tagesordnung. Was jedoch oft nicht zur Sprache kam war die Mobile Accessibility“. Marcy Sutton erklärt in ihrem Vortrag auf der Konferenz „beyond tellerrand 2015“ in Berlin was hier zu beachten ist.

Damit Mobile Accessibility erfüllt wird, muss sichergestellt sein, dass jeder Nutzer – egal ob mit Beeinträchtigung oder ohne – mobile Geräte zu jeder Zeit erfolgreich nutzen kann.
Da die Anzahl der User, die sich nur über ein mobiles Gerät mit dem Internet verbinden mittlerweile höher ist als Desktop spielt dies eine entscheidende Rolle im Webdesign und -development.
-20
Im folgenden Absatz möchte ich euch einen groben Überblick geben welche Möglichkeiten auf iOS und Android zur barrierefreien Nutzung bestehen. Danach gehe ich gezielter auf die Verbesserung von mobilen Webseiten ein.

Native Accessibility

iOS

  • VoiceOver (Screen Reader)
  • Diktieren
  • Zoom
  • Farbumkehrung / Graustufen
  • Switch Control

Android

  • TalkBack (Screen Reader)
  • Blindenschrift wird unterstützt
  • Vergrößern / Zoom
  • Hohe Kontraste
  • Switch Access

Grundsätzlich ist es leichter die mobile Bedienbarkeit über native Plattformen oder Systeme zu verbessern. Allerdings ist das Ziel das mobile Web allgemein zu optimieren und eine Lösung zu bieten.

Optimierung mobiles Web

Zugriffs-Barrieren

Gesperrter Zoom & vorgegebenes Scrollverhalten
Hier tauchen Probleme auf, wenn die Schrift für die Nutzer zu klein ist, da sie nur über den komplizierten Weg (Geräteeinstellungen) die Größe verändern können.
Mögliche Lösungen: Button zum Vergrößern der Schrift oder kleine Texte allgemein größer gestalten

Visuelle Unordnung
Durch eine chaotische Anordnung von beispielsweise Bildern verlieren viele Menschen den Überblick. Bitte vermeiden.

Missverständliche Icons
Oft werden Icons verwendet, bei denen für die Designer die Funktionalität dahinter logisch nachvollziehbar ist. Allerdings verstehen mittlerweile andere vielleicht unter einem Disketten-Icon nicht mehr die Funktion „ Speichern“.
Empfehlung: Verwendet Text-Labels

Bedienung mit Gesten
Dies kann bei der Verwendung von Screen Readern zu Problemen führen, da diese mit dieser Steuerung nicht umgehen können.
Lösung: Alternative Bedienung anbieten (z.B. Button)

UI Patterns

Das einzige“ was wir selbst beeinflussen können ist das Interface welches wir zur Verfügung stellen.
Damit Webseiten optimal für's mobile Web optimiert sind sollten folgende Tipps beachtet werden:

  • Wirf einen Blick auf die BBC Mobile Accessibility Guidelines
  • Verwende Buttons und andere semantische Elemente in Verbindung mit dem Attribut aria-label“. Diese werden von Screen Readern wahrgenommen im Gegensatz zu divs.
  • Verwende Schaltflächen, die groß genug sind (auch für dicke Finger ;-))

Tools

iOS Safari

  • Accessibility Node Inspector
  • Accessibility Auswertung mit webKit Bugzilla

Firefox

  • aXe audit in den Firefox Developer Tools
  • WebIDE

Chrome für Android

  • Chrome Device Inspect

Fazit

Ein entscheidender Aspekt für eine erfolgreiche Webseitenoptimierung hinsichtlich mobile Accessibility ist die Verwendung von semantischen Elementen. Somit wird sichergestellt, dass auch Screen Reader den Aufbau und die Struktur einer Webseite richtig und vollständig interpretieren. Außerdem kristallisiert sich im Vortrag von Marcy Sutton auch klar heraus, dass der Bezug zum Nutzer wesentlich ist. Also auch hier wieder unbedingt die tatsächliche Zielgruppe in den Entwicklungsprozess miteinbeziehen.

Referenzen

Sutton, M. (2015). Marcy Sutton - How to Win at Mobile Accessibility - btconfBER2015. Abgerufen unter https://vimeo.com/144596949

Weiter Beitrag

Zurück Beitrag

Antworten

© 2019 M² Blog

Thema von Anders Norén