5 Tipps zur Barrierefreiheit für mobile Erlebnisse

5 Accessibility Tips for Mobile Experiences

Die Barrierefreiheit auf Geräten mit kleinem Bildschirm bringt ihre eigenen einzigartigen Herausforderungen mit sich, z. B. wie Menschen mit Inhalten interagieren und die Benutzerfreundlichkeit beim Zugriff auf Inhalte mit einem mobilen Screenreader.

Die gute Nachricht ist, dass alle Änderungen, die für eine Desktop-/Tastatur-/Mausumgebung vorgenommen werden, bei der Zugänglichkeit eines Touch-Geräts helfen.

Sehen wir uns einige Best Practices an, wenn es um mobile Benutzer geht.

1. Stellen Sie große Berührungsziele bereit

Wie viele von uns waren schon einmal in einer Situation, in der wir versucht haben, ein Element auf unseren Telefonen zu berühren/klicken, aber es ist einfach zu klein! Oder noch schlimmer, wir tippen versehentlich auf etwas anderes, auf das wir nicht klicken wollten, was dazu führt, dass wir die Zurück-Schaltfläche im mobilen Browser finden müssen, um es erneut zu versuchen. Frustrierend, oder?

Worüber wir hier speziell sprechen, sind Komponenten der Benutzeroberfläche wie Hamburger-Menüsteuerungen, Symbole für soziale Medien, Formulareingaben; im Grunde alles, was ein eigenständiges Element auf einer Seite ist, dh kein eingebetteter Link innerhalb des Hauptinhalts.

Zielgröße berühren

Wenn es darum geht, die Benutzerfreundlichkeit und Zugänglichkeit von Touch-Zielen sicherzustellen, kommt die Größe ins Spiel. Bei der Größe gibt es ein paar Dinge zu beachten, einschließlich der Verfügbarkeit und der physischen Größe des Elements und des Abstands zwischen den Elementen, um zu vermeiden, dass versehentlich etwas Unbeabsichtigtes aktiviert wird.

Hier sind ein paar Regeln, die von anderen Organisationen zu beachten sind:

Was hier wichtig ist, ist, wenn es um das Design geht, dass es nicht erforderlich ist, das eigentliche Symbol zu vergrößern, um diese Empfehlungen zu erfüllen. Durch die Verwendung der CSS-Eigenschaft padding können wir den physischen Berührungsbereich vergrößern, ohne das Design oder Layout des Inhalts zu beeinträchtigen.

Beispiel für ein Berührungsziel

Sehen Sie sich das folgende Codebeispiel an:

In dem Beispiel haben wir die Icon-Links, die durch die margin Eigenschaft beabstandet sind. Dadurch werden die Links visuell getrennt, aber die Berührungsziele bleiben bei einer Größe von 24 x 24 Pixel. Dies ist nicht ideal für die Benutzerfreundlichkeit.

Um den zusätzlichen Abstand hinzuzufügen, der erforderlich ist, um die Benutzerfreundlichkeit zu erhöhen und das beabsichtigte Design beizubehalten, können wir stattdessen die Eigenschaft padding verwenden. Durch das Austauschen der 10 Pixel vom margin zum padding haben wir unsere Bedenken hinsichtlich der Barrierefreiheit und die Designanforderungen erfüllt.

WCAG-Erfolgskriterien

Dies kommt auf 2.5.5 Zielgröße zurück, wo es heißt:

"Die Größe des Ziels für Zeigereingaben beträgt mindestens 44 x 44 CSS-Pixel."

2. Fügen Sie viel Leerraum hinzu

Die Verwendung von Weißraum, also dem leeren, leeren Bereich zwischen interaktiven Komponenten, ist eigentlich ziemlich kritisch beim Entwerfen und Erstellen brauchbarer Benutzeroberflächen. Leerraum hilft auf vielfältige Weise, nicht nur als visuelles Trennzeichen, sondern auch für die Navigation.

Beispielsweise ist es nicht ungewöhnlich, auf eine Gruppe von Links zu stoßen, die sich als Callout-Aktionen verhalten sollen. Oft bestehen diese aus drei oder mehr Links in einem Raster und enthalten möglicherweise keine Leerzeichen dazwischen. Dies mag einen gewissen ästhetischen Reiz bieten, aber wenn es um jemanden mit einer motorischen Beeinträchtigung geht, wie z. B. Handzittern, bei dem er die Bewegungen seiner eigenen Hände nicht kontrollieren kann, wird die Benutzerfreundlichkeit des Navigierens an diesen Callout-Links problematisch.

Schauen wir uns das folgende Videobeispiel an:

Wie wir in diesem Video gesehen haben, hatte die Person große Schwierigkeiten beim Versuch, an den großen Berührungszielen vorbei zu navigieren, und aktivierte versehentlich wiederholt Links oder Kontextmenüs. Aus diesem Grund ist es ideal, mindestens 8 bis 10 Pixel Leerraum zwischen interaktiven Elementen zu platzieren.

Ohne Leerzeichen könnten Benutzerfreundlichkeit und Navigation zu einer frustrierenden Benutzererfahrung führen.

WCAG-Erfolgskriterien

Dies kommt auf 2.4.1 Bypass Blocks zurück, wo es heißt:

"Ein Mechanismus ist verfügbar, um Inhaltsblöcke zu umgehen, die auf mehreren Webseiten wiederholt werden."

3. Vermeiden Sie 2D-Scrolling

Wenn in der Vergangenheit jemand mit Sehbehinderung sein Browserfenster zoomen musste, um Inhalte zu lesen, führte dies traditionell zu einer schlechten Erfahrung mit zweidimensionalem (2D) Scrollen; sowohl horizontal als auch vertikal scrollen müssen, um Inhalte zu konsumieren.

Das 2D-Scrollen ist nicht nur für die meisten Menschen irritierend, es führt auch zu einer neuen Schwierigkeitsstufe für jeden mit einer motorischen Beeinträchtigung oder für jemanden, der sich zum Navigieren allein auf die Tastatur verlässt; Dies erfordert einen Wechsel von der Verwendung der Tab / Space zum vertikalen Lesen von Inhalten zu den Pfeiltasten zum horizontalen Lesen und wieder zurück.

Da das Konzept des responsiven Designs die Standardmethode des Layouts ist, werden heutzutage, wenn jemand seinen Browser zoomt, um den Inhalt zu vergrößern, die in CSS definierten Layout- und Stilregeln geladen, wenn die Zoomstufe zunimmt. Mit anderen Worten, wenn der Inhalt gezoomt wird, erlebt die Person auf der anderen Seite des Bildschirms das "mobile" Layout, wodurch das horizontale Scrollen entfällt, was zu einer viel positiveren Benutzererfahrung führt.

Das Viewport-Meta-Tag + Medienabfragen

Dies liegt an der Einbeziehung des HTML - meta -Tags für den Ansichtsbereich und der CSS-Medienabfragen :

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Dies weist den Browser an, die Breite des Inhalts auf die Breite des Geräts selbst einzustellen und diesen Inhalt beim Laden auf 1 zu skalieren.

Zusammen mit dem Viewport- meta -Tag arbeiten CSS-Medienabfragen. Diese CSS-Blöcke werden ausgeführt, wenn die Abfrageanforderungen erfüllt sind, und ordnen den Inhalt normalerweise neu an, damit er besser für die Größe des Bildschirms geeignet ist.

 .grid__item { width: 100%; }​ @media (min-width: 500px) { .grid__item { display: inline-block; width: 50%; } }

In diesem Beispiel hat der grid__item eine Breite von 100% und füllt den gesamten Teil des Bildschirms aus. Wenn der Benutzer die Bildschirmausrichtung vom Hochformat ins Querformat ändern würde oder dies ein Tablet oder ein größerer Bildschirm wäre, der größer als der durch den Abfrageparameter min-width festgelegte Wert von grid__item 500px 50% der Bildschirmbreite festgelegt.

Die wichtigste Erkenntnis hier ist: Wenn das Website-Layout mit Best Practices für responsives Design entwickelt wurde, würde dies ausreichen, um jegliches 2D-Scrollen zu entfernen, um den Inhalt bequem zu konsumieren.

WCAG-Erfolgskriterien

Dies kommt auf 1.4.10 Reflow zurück, in dem es heißt:

„Inhalte können ohne Informations- oder Funktionsverlust und ohne Scrollen in zwei Dimensionen dargestellt werden.“

4. Lassen Sie jede Orientierung zu

Das Konzept hinter Responsive Design besteht darin, ein geräteunabhängiges Erlebnis zu schaffen. Das bedeutet, dass Inhalte umfließen und sich an jedes Gerät anpassen können, das in jeder Ausrichtung verwendet wird; Hoch- oder Querformat.

Warum ist das für die Barrierefreiheit wichtig? Es geht darum, Entscheidungen zu treffen und keine Annahmen zu treffen. Ermöglichen Sie dem Endbenutzer, Ihre Inhalte auf jede Art und Weise zu konsumieren, die er bevorzugt oder von seiner jeweiligen Computerumgebung benötigt wird.

Beispielsweise kann ein Rollstuhlfahrer, der möglicherweise auch eine motorische Beeinträchtigung hat, es vorziehen, sein mobiles Gerät in einer bestimmten Ausrichtung zu montieren, die für ihn bequem ist. Jemanden zu zwingen, die Ausrichtung anzupassen, weil der Inhalt nicht umfließen darf, schafft eine Zugänglichkeitsbarriere. Diese scheinbar einfache Aufgabe des Anpassens der Ausrichtung kann zu Schmerzen oder Frustration führen, die vermeidbar gewesen wäre.

WCAG-Erfolgskriterien

Dies kommt auf 1.3.4 Orientierung zurück, wo es heißt:

"Der Inhalt schränkt seine Ansicht und Bedienung nicht auf eine einzige Display-Ausrichtung ein, wie Hoch- oder Querformat, es sei denn, eine bestimmte Display-Ausrichtung ist wesentlich."

5. Testen Sie mit dem Screenreader

Neben herkömmlichen Desktop-Computern verfügen auch mobile Geräte über eine integrierte Screenreader-Software. Die beliebtesten davon sind laut den Ergebnissen der WebAIM-Umfrage VoiceOver gepaart mit Safari auf iOS und Talkback gepaart mit Chrome auf Android .

Lassen Sie uns die Grundlagen zum Starten der einzelnen Gesten und einige Gesten überprüfen, um mit dem Testen mit jeder Plattform zu beginnen.

iOS

Inbetriebnahme

Navigieren Sie zum Starten von VoiceOver auf einem iOS-Gerät zu:

  1. Einstellungen
  2. Allgemein
  3. Barrierefreiheit
  4. Voice-over
  5. Aktivieren Sie den "VoiceOver"-Schalter

Sobald Sie VoiceOver zum Laufen gebracht haben, wird die Navigation etwas anders sein, als Sie es wahrscheinlich gewohnt sind. Um ein Element zu aktivieren, muss das Element grundsätzlich zuerst „im Fokus“ sein und dann doppeltippen, um das Element zu aktivieren.

Sehen wir uns die gängigen Gesten bei der Interaktion mit einer Webseite an, wenn VoiceOver aktiviert ist:

Geste Aktion
Berühren/einmaliges Antippen Wählen Sie das Element aus und lesen Sie es
Doppeltippen Aktivieren Sie das ausgewählte Element
Wische nach rechts Wechseln Sie zum nächsten Element
Nach links wischen Zum vorherigen Element wechseln
Tippen mit zwei Fingern Lesen unterbrechen/fortsetzen
Wischen Sie mit drei Fingern nach oben/unten Bildschirm nach oben/unten scrollen

Stilllegen

Navigieren Sie zum Deaktivieren von Voiceover zum oben beschriebenen Startbildschirm, tippen Sie auf die Schaltersteuerung „VoiceOver“, um den Fokus zu aktivieren, und tippen Sie dann doppelt, um es zu deaktivieren.

Android

Aufstarten

Navigieren Sie zum Starten von TalkBack auf einem Android-Gerät zu:

  1. Einstellungen
  2. Barrierefreiheit
  3. TalkBack
  4. Aktivieren Sie den Schalter "Dienst verwenden".
  5. OK klicken"

Sobald Sie TalkBack eingerichtet und ausgeführt haben, wird die Navigation etwas anders sein, als Sie es wahrscheinlich gewohnt sind. Um ein Element zu aktivieren, muss das Element grundsätzlich zuerst „im Fokus“ sein und dann doppeltippen, um das Element zu aktivieren.

Sehen wir uns die üblichen Gesten bei der Interaktion mit einer Webseite an, wenn TalkBack aktiviert ist:

Geste Aktion
Berühren/einmaliges Antippen Wählen Sie das Element aus und lesen Sie es
Doppeltippen Aktivieren Sie das ausgewählte Element
Wische nach rechts Wechseln Sie zum nächsten Element
Nach links wischen Zum vorherigen Element wechseln
Wischen Sie mit zwei Fingern nach oben/unten Bildschirm nach oben/unten scrollen

Stilllegen

Navigieren Sie zum Deaktivieren von TalkBack zum oben beschriebenen Startbildschirm, tippen Sie auf die Schaltersteuerung „TalkBack“, um den Fokus zu aktivieren, tippen Sie doppelt, um sie zu aktivieren, und aktivieren Sie die Steuerung „Ok“, um sie zu deaktivieren.

Ressourcen:

Zurück zum Blog