Mobile Accessibility / Responsive barrierefreies Webdesign – Richtlinien

In diesem Blogartikel erkläre ich die Richtlinien für Barrierefreiheit bei Responsive Webdesign.

Inhalt

Barrierefreies Webdesign – Definition

Barrierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie für alle Menschen, auch für Menschen mit körperlichen Einschränkungen, bedienbar und wahrnehmbar ist.

Hier noch ein Youtube-Video zu barrierefreies Webdesign:

Responsive Webdesign – Definition

Unter einer responsiven Gestaltung einer Internetseite versteht man, dass das Layout der Seite für das Ausgabemedium angepasst wird. Ausgabemedium kann sein: Smartphone, iPhone, Tablet und iPad.

Laptop, Ipad und Smartphone zeigen dass Responsive Webdesign bedeutet, dass eine Webseite für mehrere Ausgabegeräte optimiert ist
Quelle: Rido – 287737622 / Shutterstock.com

Warum benötigt responsive Webdesign eigene Richtlinien?

Mobile Geräte weisen in Sachen Barrierefreiheitsprobleme auf, die sich von dem typischen Desktop/Laptop-Computer unterscheiden. In diesem Artikel wird erläutert, wie diese Probleme im Kontext von WCAG 2.0 in ihrer derzeitigen Form oder mit zusätzlichen bewährten Methoden behoben werden können. Alle Hinweise in diesem Artikel können auf mobile Websites, mobile Webanwendungen und hybride webbasierte Anwendungen angewendet werden.

Warum ist mobile Accessibility bei Internetseiten wichtig?

Auf der Webseite „Conversion-Junkies“ ist die Information zu lesen, dass die Webseitenzugriffe über Mobilgeräte im 1. Halbjahr 2018 bei 55% waren, während die Zugriffe über Desktop bei 33,70 % waren. Quelle: Mobil, Desktop oder Tablet? – Die Zahlen vom 1. Halbjahr 2018.
Das bedeutet, es gehen mehr Menschen über Smartphones oder Tablets ins Internet wie über Computer oder Laptop. Deswegen ist es wichtig, dass Webseiten auf einem mobilen Gerät barrierefrei optimiert sind.
Richtlinien werden hier veröffentlicht?
Die Richtlinien die ich hier veröffentliche sind von der W3C Web Accessibility Initiative (WAI) und stehen in englischer Sprache hier:

Tastatur mit Rollstuhlsymbol und Wort barrierefrei
Quelle: Robert Kneschke – 483201067 / Shutterstock.com

Mobile Zugänglichkeitsbetrachtungen, die sich hauptsächlich auf Prinzip 1 beziehen: Wahrnehmbar

Kleine Bildschirmgröße

Kleine Bildschirmgröße ist eine der häufigsten Eigenschaften von mobilen Geräten. Während die außergewöhnliche Auflösung dieser Bildschirme theoretisch ermöglicht, dass große Mengen an Informationen gerendert werden können, setzt die geringe Größe des Bildschirms praktische Grenzen dafür, wie viele Informationen tatsächlich gleichzeitig angezeigt werden können, insbesondere wenn die Vergrößerung von Menschen mit Sehbehinderung verwendet wird.
Einige Best Practices, um Benutzern zu helfen, das Beste aus kleinen Bildschirmen zu machen, sind:

  • Minimierung der Menge an Informationen, die auf jeder Seite im Vergleich zu Desktop / Laptop-Versionen bereitgestellt werden, durch Bereitstellung einer dedizierten mobilen Version oder eines responsiven Designs:
    • Eine dedizierte mobile Version enthält Inhalte, die für den mobilen Einsatz zugeschnitten sind. Zum Beispiel kann der Inhalt weniger Inhaltsmodule, weniger Bilder enthalten oder sich auf wichtige mobile Nutzungsszenarien konzentrieren.
    • Ein responsives Design enthält Inhalte, die gleich bleiben, aber CSS-Stylesheets werden verwendet, um sie abhängig von der Breite des Darstellungsbereichs unterschiedlich darzustellen. Auf schmalen Bildschirmen können die Navigationsmenüs beispielsweise verborgen sein, bis der Benutzer auf eine Menüschaltfläche klickt.
  • Bereitstellung einer angemessenen Standardgröße für Inhalts- und Berührungssteuerelemente (siehe „B.2 Zielgröße und Abstand berühren“), um das Ein- und Auszoomen für Benutzer mit geringer Sehschärfe zu minimieren.
  • Anpassen der Länge des Linktextes an die Breite des Darstellungsbereichs
  • Formularfelder unterhalb und nicht neben ihren Beschriftungen positionieren (im Hochformat)

Zoom / Vergrößerung

Mit einer Vielzahl von Methoden kann der Benutzer die Inhaltsgröße auf mobilen Geräten mit kleinen Bildschirmen steuern. Auf Browserebene sind diese Methoden allgemein verfügbar, um eine breite Benutzergruppe zu unterstützen. Auf der Plattform-Ebene sind diese Methoden als Barrierefreiheitsfunktionen für Menschen mit Sehbehinderungen oder kognitiven Behinderungen verfügbar.
Die Methoden umfassen Folgendes:

Das WCAG 2.0-Erfolgskriterium, das am meisten mit Zoom / Vergrößerung zusammenhängt, ist 1.4.4 Größe ändern (Level AA)

SC 1.4.4 erfordert, dass die Größe des Textes ohne Hilfstechnologie um bis zu 200 Prozent geändert werden kann. Um diese Anforderung zu erfüllen, darf der Inhalt die Vergrößerung des Textes durch den Benutzer nicht verhindern.

Die folgenden Methoden könnten verwendet werden:

  • Stellen Sie sicher, dass der Browser-Pinch-Zoom nicht vom Darstellungs-Meta-Element der Seite blockiert wird, damit die Seite auf 200% vergrößert werden kann. Restriktive Werte für vom Benutzer skalierbare und maximale Skalierungsattribute dieses Meta-Elements sollten vermieden werden. Hinweis: Wenn Sie sich auf das vollständige Zoomen im Ansichtsfenster verlassen (z. B. wenn Sie die Pinch-Zoomfunktion des Browsers nicht blockieren), muss der Benutzer sowohl horizontal als auch vertikal schwenken. Obwohl diese Technik die Erfolgskriterien erfüllt, ist sie weniger geeignet als die Unterstützung von Text-Größenänderungsfunktionen, die den Inhalt auf die vom Benutzer gewählte Ansichtsfenstergröße zurückfließen lassen. Es empfiehlt sich, Techniken zu verwenden, die die Größenänderung von Text ohne horizontales Verschieben unterstützen.
  • Unterstützung für Systemschriftarten, die den Benutzereinstellungen auf Plattformebene für die Textgröße folgen.
  • Stellen Sie On-Page-Steuerelemente zur Verfügung, um die Textgröße zu ändern.

Zugänglichkeitsmerkmale, die auf bestimmte Bevölkerungsgruppen mit Menschen mit Behinderungen zugeschnitten sind, fallen unter die Definition der assistiven Technologie, die von der WCAG übernommen wurde, und können daher nicht als Voraussetzung für die Erfüllung der Erfolgskriterien herangezogen werden. Beispielsweise wird eine Zoomfunktion auf Plattformebene, die den gesamten Plattforminhalt vergrößert und Funktionen zur Unterstützung von Personen mit geringer Sehschärfe bietet, wahrscheinlich als unterstützende Technologie betrachtet.

2.3 Kontrast

Mobile Geräte sind wahrscheinlicher als Desktop / Laptop-Geräte in verschiedenen Umgebungen einschließlich im Freien, wo die Blendung durch die Sonne oder andere starke Lichtquellen wahrscheinlicher ist. Dieses Szenario erhöht die Bedeutung der Verwendung von gutem Kontrast für alle Benutzer und kann die Herausforderungen, denen Benutzer mit geringer Sehschärfe auf Inhalte mit wenig Kontrast auf mobilen Geräten zugreifen, erhöhen.
Die WCAG 2.0-Erfolgskriterien für das Thema Kontrast sind:

  • 1.4.3 Kontrast (Minimum) (Stufe AA), der einen Kontrast von mindestens 4,5: 1 (oder 3: 1 für großformatigen Text) erfordert und
  • 1.4.6 Kontrast (erweitert) (Stufe AAA), der einen Kontrast von mindestens 7: 1 (oder 4,5: 1 für großformatigen Text) erfordert.

SC 1.4.3. ermöglicht unterschiedliche Kontrastverhältnisse für großen Text. Es ist nützlich, unterschiedliche Kontrastverhältnisse für größeren Text zuzulassen, da ein größerer Text mit breiteren Zeichenstrichen bei einem niedrigeren Kontrast leichter zu lesen ist. Dies ermöglicht Designern mehr Spielraum für den Kontrast von größerem Text, der für Inhalte wie Titel hilfreich ist. Das Verhältnis von 18-Punkt-Text oder 14-Punkt-Fetttext, beschrieben in SC 1.4.3, wurde als groß genug beurteilt, um ein niedrigeres Kontrastverhältnis für Webseiten zu ermöglichen, die auf einem 15-Zoll-Monitor mit einer Auflösung von 1024×768 mit 24 Zoll angezeigt wurden Betrachtungsabstand. Der Inhalt von Mobilgeräten wird auf kleineren Bildschirmen und unter verschiedenen Bedingungen angezeigt. Daher muss diese Einschränkung für den verringerten Kontrast bei großem Text für mobile Apps sorgfältig berücksichtigt werden.
Beispielsweise ist die Standardpunktgröße für mobile Plattformen möglicherweise größer als die standardmäßige Punktgröße für nicht mobile Geräte. Bei der Festlegung des zu befolgenden Kontrastverhältnisses sollten sich Entwickler darum bemühen, das verringerte Kontrastverhältnis nur dann anzuwenden, wenn der Text in etwa dem 1,2-fachen oder 1,5-fachen (120% fett oder 150%) der standardmäßigen Plattformgröße entspricht. Beachten Sie jedoch, dass die Verwendung von 1,5-fachem Text auf mobilen Plattformen nicht bedeutet, dass der Text von einer Person mit Sehbehinderung gelesen werden kann. Menschen mit Sehschwäche werden wahrscheinlich zusätzliche Barrierefreiheitsfunktionen auf Plattformebene und unterstützende Technologien wie erweiterte Textgröße und Zoomfunktionen für den Zugriff auf mobile Inhalte benötigen und verwenden.

3. Mobile Zugänglichkeitsbetrachtungen, die sich hauptsächlich auf Prinzip 2 beziehen: Operable

3.1 Tastatursteuerung für Touchscreen-Geräte

Das Design mobiler Geräte hat sich von integrierten physischen Tastaturen (z. B. feste, herausschiebbare) zu Geräten entwickelt, die den Touchscreen-Bereich maximieren und eine Bildschirmtastatur nur dann anzeigen, wenn der Benutzer ein Benutzeroberflächensteuerelement ausgewählt hat, das Texteingabe akzeptiert (z Textfeld).
Die Barrierefreiheit der Tastatur ist jedoch nach wie vor wichtig, und die meisten großen mobilen Betriebssysteme verfügen über Tastaturschnittstellen, so dass mobile Geräte über externe physische Tastaturen (z. B. über Bluetooth oder On-The-Go verbundene Tastaturen) oder alternative Bildschirmtastaturen bedient werden können (zB Scannen von Bildschirmtastaturen).
Die Unterstützung dieser Tastaturschnittstellen kommt mehreren Gruppen mit Behinderungen zugute:

  • Menschen mit Sehbehinderungen, die von einigen Eigenschaften physischer Tastaturen über Touchscreen-Tastaturen profitieren können (z. B. klar getrennte Tasten, Schlüsselspitzen und vorhersehbare Tastenlayouts).
  • Menschen mit Geschicklichkeits- oder Mobilitätsbehinderungen, die von Tastaturen profitieren können, die so optimiert sind, dass versehentliches Drücken minimiert wird (z. B. unterschiedlich geformte, beabstandete und geschützte Tasten) oder spezielle Eingabemethoden, die Tastatureingaben nachbilden.
  • Menschen, die durch die dynamische Natur der Bildschirmtastaturen verwirrt werden können und von der Konsistenz einer physischen Tastatur profitieren können.

Mehrere WCAG 2.0-Erfolgskriterien sind für eine effektive Tastatursteuerung relevant:

  • 2.1.1 Tastatur (Stufe A)
  • 2.1.2 Keine Tastaturfalle (Level A)
  • 2.4.3 Fokusreihenfolge (Level A)
  • 2.4.7 Fokus sichtbar (Stufe AA)

3.2 Zielgröße und -abstand antippen

Durch die hohe Auflösung mobiler Geräte können viele interaktive Elemente auf einem kleinen Bildschirm (engl. Screen ) zusammen dargestellt werden. Diese Elemente müssen jedoch groß genug sein und genügend Abstand zueinander haben, damit Benutzer sie sicher per Berührung anzielen können.
Zu den Best Practices für die Touch-Zielgröße gehören folgende:

  • Stellen Sie sicher, dass Touch-Ziele mindestens 9 mm hoch und 9 mm breit sind.
  • Stellen Sie sicher, dass Touch-Ziele nahe der Mindestgröße von wenig inaktiver Fläche umgeben sind.

Hinweis: Diese Größe hängt nicht von der Bildschirmgröße, dem Gerät oder der Auflösung ab. Die Bildschirmvergrößerung sollte nicht benötigt werden, um diese Größe zu erhalten, da die Vergrößerung des Bildschirms oft die Notwendigkeit einer horizontalen und vertikalen Schwebung mit sich bringt, was die Benutzerfreundlichkeit beeinträchtigen kann.

3.3 Touchscreen Gesten

Viele mobile Geräte sind so konzipiert, dass sie hauptsächlich über Gesten bedient werden, die auf einem Touchscreen gemacht werden. Diese Gesten können einfach sein, z. B. Tippen mit einem Finger, oder sehr komplex mit mehreren Fingern, mehreren Taps und gezeichneten Formen.
Einige (aber nicht alle) mobile Betriebssysteme bieten Work-Around-Funktionen, mit denen der Benutzer komplexe Gesten mit einfacheren über ein Bildschirmmenü simulieren kann.
Einige Best Practices bei der Entscheidung für Touchscreen-Gesten umfassen Folgendes:

  • Gesten in Apps sollten so einfach wie möglich ausgeführt werden. Dies ist besonders wichtig für Screenreader-Interaktionsmodi, die die direkte Berührungsmanipulation durch einen zweistufigen Prozess des Fokussierens und Aktivierens von Elementen ersetzen. Es ist auch eine Herausforderung für Benutzer mit motorischen oder geschlechtsspezifischen Beeinträchtigungen oder Menschen, die auf Kopfzeiger oder einen Stift angewiesen sind, bei denen Multi-Touch-Gesten schwierig oder unmöglich auszuführen sind. Schnittstellen-Designer haben oft verschiedene Möglichkeiten, eine Aktion zu implementieren. Widgets, die komplexe Gesten erfordern, können für Screenreader-Benutzer schwierig oder unmöglich zu verwenden sein. Normalerweise gibt es Design-Alternativen, um Änderungen an Einstellungen durch einfaches Antippen oder Wischen zu ermöglichen.
  • Elemente über das mouseup- oder touchend-Event aktivieren. Die Verwendung des mouseup- oder touchend-Ereignisses zum Auslösen von Aktionen hilft, unbeabsichtigte Aktionen während der Berührung und Mausinteraktion zu verhindern. Mausbenutzer, die auf umsetzbare Elemente klicken (Links, Schaltflächen, Eingaben übermitteln), sollten die Möglichkeit haben, den Cursor außerhalb des Elements zu platzieren, um zu verhindern, dass das Ereignis ausgelöst wird. Dies ermöglicht es den Benutzern, ihre Meinung zu ändern, ohne gezwungen zu werden, sich auf eine Aktion festzulegen. In gleicher Weise sollten Elemente, die über Touch-Interaktion aufgerufen werden, ein Ereignis (z. B. Navigation, Submit) nur dann auslösen, wenn das Touchend-Ereignis ausgelöst wird (dh wenn alle folgenden Bedingungen erfüllt sind: Der Benutzer hat den Finger vom Bildschirm genommen, der letzte Die Position des Fingers befindet sich innerhalb des verwertbaren Elements.

Ein weiteres Problem mit Touchscreen-Gesten ist, dass sie möglicherweise keine Bildschirm-Indikatoren haben, die die Benutzer daran erinnern, wie und wann sie verwendet werden. Zum Beispiel ist ein Wischen von der linken Seite der Bildschirmgeste zum Öffnen eines Menüs ohne einen Indikator oder Hinweis auf die Geste nicht erkennbar.

3.4 Gerätemanipulationsgesten

Neben Touchscreen-Gesten bieten viele mobile Betriebssysteme den Entwicklern Steuerungsmöglichkeiten, die durch die physische Manipulation des Geräts (z. B. Schütteln oder Kippen) ausgelöst werden. Während Manipulationsgesten des Geräts den Entwicklern helfen können, innovative Benutzeroberflächen zu erstellen, können sie auch eine Herausforderung für Personen darstellen, die Schwierigkeiten haben, ein mobiles Gerät zu halten oder nicht in der Lage zu halten.
Einige (aber nicht alle) mobile Betriebssysteme bieten Work-Around-Funktionen, mit denen der Benutzer Gerätetakes, Neigungen usw. aus einem Bildschirmmenü simulieren kann.
Daher sollten Entwickler auch dann, wenn Gerätemanipulationsgesten zur Verfügung gestellt werden, immer noch über Touch- und Tastaturbedienungen alternative Steueroptionen bereitstellen.

  • 2.1.1 Tastatur(Stufe A)

Ein weiteres Problem bei der Kontrolle über Geräte-Manipulationsgesten besteht darin, dass sie möglicherweise keine Bildschirmindikatoren aufweisen, die die Benutzer daran erinnern, wie und wann sie verwendet werden sollen.

3.5 Platzieren von Schaltflächen, wo sie leicht zugänglich sind

Mobile Websites und Anwendungen sollten interaktive Elemente so positionieren, dass sie leicht erreichbar sind, wenn das Gerät an verschiedenen Positionen gehalten wird.
Beim Entwickeln von mobilen Webinhalten und Anwendungen versuchen viele Entwickler, die Verwendung mit einer Hand zu optimieren. Dies kann für User von Nutzen sein, die möglicherweise nur eine Hand zur Verfügung haben. Entwickler sollten jedoch auch in Betracht ziehen, dass eine leicht zu bedienende Tastenplatzierung für andere Benutzer Schwierigkeiten bereiten kann (z. B. Links- oder Rechtshänder) Daumen Bewegungsbereich). Daher sollte eine flexible Nutzung einer App oder einer mobilen Seite immer das Ziel sein.
Einige (aber nicht alle) mobilen Betriebssysteme bieten Umgehungsfunktionen, mit denen der Benutzer die Anzeige vorübergehend nach unten oder seitwärts verschieben kann, um die Einhandbedienung zu ermöglichen.

4. Aspekte der mobilen Zugänglichkeit in erster Linie in Bezug auf Prinzip 3: Verständlich

4.1 Bildschirmausrichtung ändern (Hochformat / Querformat)

Einige mobile Anwendungen stellen den Bildschirm automatisch auf eine bestimmte Bildschirmausrichtung (Querformat oder Hochformat) ein und erwarten, dass Benutzer darauf reagieren, indem sie das mobile Gerät entsprechend drehen. Einige Benutzer haben jedoch ihre mobilen Geräte in einer festen Ausrichtung (z. B. am Arm eines Elektrorollstuhls).
Daher sollten Entwickler von mobilen Anwendungen versuchen, beide Ausrichtungen zu unterstützen. Wenn es nicht möglich ist, beide Ausrichtungen zu unterstützen, sollten Entwickler sicherstellen, dass es für alle Benutzer leicht ist, die Ausrichtung so zu ändern, dass sie zu einem Punkt zurückkehrt, an dem ihre Geräteausrichtung unterstützt wird.
Änderungen in der Ausrichtung müssen programmgesteuert verfügbar gemacht werden, um die Erkennung durch unterstützende Technologie wie Bildschirmleseprogramme zu gewährleisten. Wenn ein Bildschirmleserbenutzer beispielsweise nicht bemerkt, dass sich die Ausrichtung geändert hat, führt der Benutzer möglicherweise falsche Navigationsbefehle aus.

4.2 Konsistentes Layout

Komponenten, die sich über mehrere Seiten hinweg wiederholen, sollten in einem konsistenten Layout dargestellt werden. Im responsiven Webdesign, bei dem Komponenten basierend auf der Gerätegröße und Bildschirmausrichtung angeordnet werden, sollten Webseiten innerhalb einer bestimmten Ansicht (festgelegte Größe und Ausrichtung) konsistent hinsichtlich der Platzierung wiederholter Komponenten und Navigationskomponenten sein. Die Konsistenz zwischen den verschiedenen Bildschirmgrößen und Bildschirmausrichtungen ist unter WCAG 2.0 nicht erforderlich.

Zum Beispiel:

  • Eine Website hat oben auf jeder Seite ein Logo, einen Titel, ein Suchformular und eine Navigationsleiste. Diese erscheinen in der gleichen relativen Reihenfolge auf jeder Seite, wo sie wiederholt werden. Auf einer Seite fehlt das Suchformular, aber die anderen Elemente sind immer noch in der gleichen Reihenfolge. Wenn die Website im Hochformat auf einem kleinen Bildschirm angezeigt wird, wird die Navigationsleiste auf ein einzelnes Symbol reduziert, die Einträge in der Dropdownliste, die beim Aktivieren des Symbols angezeigt wird, befinden sich jedoch immer noch in derselben relativen Reihenfolge.
  • Auf einer Website, die auf den verschiedenen Bildschirmgrößen und in unterschiedlichen Ausrichtungen angezeigt wird, befinden sich einige Komponenten, die ausgeblendet sind oder in einer anderen Reihenfolge angezeigt werden. Die angezeigten Komponenten bleiben jedoch für jede Bildschirmgröße und -ausrichtung konsistent.

Die WCAG 2.0-Erfolgskriterien, die am meisten mit dem Problem der Konsistenz zusammenhängen, sind:

  •  3.2.3 Konsequente Navigation (Level AA)
    3.2.4 Konsequente Identifikation (Level AA)

 

4.3 Positionieren wichtiger Seitenelemente vor dem Blättern der Seite

Die kleine Bildschirmgröße auf vielen mobilen Geräten begrenzt die Menge an Inhalten, die ohne Scrollen angezeigt werden können.

Das Positionieren wichtiger Seiteninformationen, so dass sie ohne Scrollen sichtbar sind, kann Benutzern mit Sehschwäche und Benutzern mit kognitiven Beeinträchtigungen helfen.

Wenn ein Benutzer mit geringer Sehkraft den Bildschirm vergrößert hat, ist möglicherweise nur ein kleiner Teil der Seite zu einem bestimmten Zeitpunkt sichtbar. Platzieren wichtiger Elemente vor dem Blättern der Seite ermöglicht Benutzern, die Bildschirmlupen verwenden, um wichtige Informationen zu finden, ohne die Ansicht verschieben zu müssen, um den vergrößerten Bereich zu verschieben. Durch das Platzieren wichtiger Elemente vor dem Blättern können Sie Inhalte auch ohne Interaktion finden. Dies unterstützt Benutzer, die kognitive Beeinträchtigungen wie Kurzzeitgedächtnis Behinderungen haben. Durch das Platzieren wichtiger Elemente vor dem Seitenumbruch können Sie sicherstellen, dass Elemente an einem konsistenten Ort platziert werden. Eine konsistente und vorhersehbare Position von Elementen unterstützt Menschen mit kognitiven Beeinträchtigungen und Sehschwächen.

4.4 Gruppieren von funktionsfähigen Elementen, die dieselbe Aktion ausführen

Wenn mehrere Elemente die gleiche Aktion ausführen oder zum selben Ziel gehen (z. B. Verknüpfungssymbol mit Linktext), sollten diese Elemente in demselben umsetzbaren Element enthalten sein. Dies erhöht die Berührungszielgröße für alle Benutzer und kommt Menschen mit Geschicklichkeitsbeeinträchtigungen zugute. Es reduziert auch die Anzahl der redundanten Fokusziele, von denen die Benutzer mit Bildschirmlesern und Tastatur- / Schaltersteuerung profitieren.

Das WCAG 2.0-Erfolgskriterium, das am meisten mit der Gruppierung umsetzbarer Elemente zusammenhängt, ist:

2.4.4 Verknüpfungszweck (im Kontext) (Level A)
2.4.9 Link Zweck (nur Link) (Level AA)

4.5 Stellen Sie klar, dass Elemente umsetzbar sind

Elemente, die Änderungen auslösen, sollten ausreichend unterscheidbar sein, um eindeutig von nicht handlungsfähigen Elementen (Inhalt, Statusinformationen usw.) unterschieden zu werden. Ein eindeutiger Hinweis darauf, dass Elemente umsetzbar sind, ist für webbasierte und native mobile Anwendungen relevant, die über umsetzbare Elemente wie Schaltflächen oder Links verfügen, insbesondere in Interaktionsmodi, in denen umsetzbare Elemente normalerweise visuell erkannt werden (Berührung und Maus). Interaktive Elemente müssen auch von Benutzern erkannt werden können, die auf einen programmatisch festgelegten, barrierefreien Namen angewiesen sind (z. B. Benutzer von Bildschirmleseprogrammen).

Visuelle Benutzer, die mit Touch- oder visuellen Cursors (z. B. Mäusen, Touchpads, Joysticks) mit Inhalten interagieren, sollten in der Lage sein, durchführbare Elemente wie Links oder Schaltflächen klar zu unterscheiden. Bestehende Schnittstellen-Design-Konventionen sollen darauf hinweisen, dass diese visuellen Elemente umsetzbar sind. Das Prinzip der redundanten Codierung stellt sicher, dass Elemente als durch mehr als ein unterscheidendes visuelles Merkmal handhabbar angezeigt werden. Die Einhaltung dieser Konventionen kommt allen Anwendern zugute, insbesondere aber Sehbehinderten.

Zu den visuellen Funktionen, die ein umsetzbares Element unterscheiden können, gehören Form, Farbe, Stil, Positionierung, Beschriftung für eine Aktion und herkömmliche Ikonographie.

Beispiele für Unterscheidungsmerkmale:

Herkömmliche Form: Knopfform (abgerundete Ecken, Schlagschatten), Kontrollkästchen, Rechteck mit Pfeil nach unten auswählen
Ikonographie: konventionelle visuelle Symbole (Fragezeichen, Heimsymbol, Burger-Symbol für Menü, Diskette zum Speichern, Zurückpfeil usw.)
Farboffset: Form mit unterschiedlicher Hintergrundfarbe, um das Element vom Seitenhintergrund zu unterscheiden, unterschiedliche Textfarbe
Konventioneller Stil: Unterstrichener Text für Links, Farbe für Links
Herkömmliche Positionierung: Häufig verwendete Position, z. B. eine Position oben links für den Zurück-Button (iOS), Position von Menüpunkten in Links-Listen in Dropdown-Menüs für die Navigation
Die WCAG 2.0-Erfolgskriterien behandeln nicht direkt die Frage der eindeutigen visuellen Anzeige, dass Elemente umsetzbar sind, sondern mit den folgenden Erfolgskriterien in Zusammenhang stehen:

3.2.3 Konsequente Navigation (Level AA)
3.2.4 Konsequente Identifikation (Level AA)

4.6 Geben Sie Anweisungen für benutzerdefinierte Touchscreen- und Gerätemanipulationsgesten ein

Die Möglichkeit, die Steuerung über benutzerdefinierte Touchscreen- und Geräte-Manipulationsgesten zu steuern, kann Entwicklern helfen, effiziente neue Schnittstellen zu erstellen. Für viele Menschen können benutzerdefinierte Gesten jedoch eine Herausforderung sein, die Sie entdecken, ausführen und sich erinnern können.

Daher sollten Anweisungen (z. B. Overlays, Tooltips, Tutorials usw.) bereitgestellt werden, um zu erklären, welche Gesten zur Steuerung einer bestimmten Schnittstelle verwendet werden können und ob Alternativen vorhanden sind. Um effektiv zu sein, sollten die Anweisungen selbst leicht zu finden und zugänglich sein. Die Anweisungen sollten auch verfügbar sein, wann immer der Benutzer sie braucht, nicht nur bei der ersten Verwendung, obwohl sie bei der ersten Verwendung durch Hervorhebung oder einen anderen Mechanismus deutlicher gemacht werden können.

Diese WCAG 2.0-Erfolgskriterien sind relevant für die Bereitstellung von Anweisungen für Gesten:

    • 3.3.2 Etiketten oder Anweisungen(Level A)
    • 3.3.5 Hilfe(Stufe AAA)

5. Aspekte der mobilen Zugänglichkeit, die sich hauptsächlich auf Prinzip 4 beziehen: Robust

5.1 Stellen Sie die virtuelle Tastatur auf den Typ der erforderlichen Dateneingabe ein

Auf einigen Mobilgeräten kann die Standardtastatur in den Geräteeinstellungen angepasst werden und zusätzliche benutzerdefinierte Tastaturen können installiert werden. Einige mobile Geräte bieten je nach Art der Dateneingabe auch verschiedene virtuelle Tastaturen. Dies kann vom Benutzer eingestellt werden oder kann auf eine bestimmte Tastatur eingestellt werden. Wenn Sie beispielsweise die verschiedenen HTML5-Formularfeldsteuerelemente (siehe Methodeneditor-API ) auf einer Website verwenden, werden automatisch verschiedene Tastaturen angezeigt, wenn Benutzer Informationen in dieses Feld eingeben. Das Festlegen des Tastaturtyps hilft, Fehler zu vermeiden, und stellt sicher, dass Formate korrekt sind, kann jedoch für Benutzer, die einen Bildschirmleser verwenden, verwirrend sein, wenn sich die Tastatur geringfügig ändert.

5.2 Stellen Sie einfache Methoden für die Dateneingabe bereit

Benutzer können Informationen auf mobilen Geräten auf verschiedene Arten wie Bildschirmtastatur, Bluetooth-Tastatur, Berührung und Sprache eingeben. Texteingabe kann unter Umständen zeitaufwendig und schwierig sein. Reduzieren Sie den Umfang der erforderlichen Texteingabe, indem Sie Menüs, Optionsfelder, Kontrollkästchen oder die automatische Eingabe bekannter Informationen (z. B. Datum, Uhrzeit, Ort) auswählen.

5.3 Unterstützen Sie die charakteristischen Eigenschaften der Plattform

Mobile Geräte bieten viele Funktionen, mit denen Benutzer mit Behinderungen mit Inhalten interagieren können. Dazu gehören Plattformmerkmale wie Zoom, größere Schriftarten und Bildunterschriften. Die verfügbaren Funktionen und Funktionen hängen von der Version des Geräts und des Betriebssystems ab. Beispielsweise können die meisten Plattformen große Schriftarten festlegen, aber nicht alle Anwendungen berücksichtigen sie für alle Texte. Einige Anwendungen erhöhen möglicherweise die Schriftgröße, nicht jedoch den Text, wodurch horizontales Scrollen verursacht wird.

Schlussbemerkung

Immer mehr Internet-Nutzer gehen über iPhones, Smartphones, iPads und Tablets auf Internetseiten. Deswegen ist es wichtig, dass beim Entwickeln von mobilen Internetseiten ebenfalls die Barrierefreiheit umgesetzt wird. Wenn Sie Fragen haben rufen Sie mich an 07121/504458 oder schreiben Sie eine Mail info@marlem-software.de

Autor: Markus Lemcke

Barrierefreies Webdesign Barrierefreie Softwareentwicklung (Java + Microsoft.net) Barrierefreiheit bei Betriebssystemen(Windows, Android, IOS, Linux)

Schreibe einen Kommentar