Checkliste für mobile Zugänglichkeit

Der Farbkontrast muss den WCAG 2.2 AA-Level-Anforderungen entsprechen:

• Kontrastverhältnis von 4.5:1 für normalen Text (weniger als 18 Punkt oder 14 Punkt fett).
• Kontrastverhältnis von 3:1 für großen Text (mindestens 18 Punkt oder 14 Punkt fett).

Informationen, die über Farbe vermittelt werden, müssen auch auf andere Weise verfügbar sein (unterstrichener Text für Links, etc.).

• Verwenden Sie das hidden-Attribut oder die visibility- oder display-Stileigenschaften.
• Sofern nicht absolut unvermeidbar, sollte das aria-hidden-Attribut nicht verwendet werden.

Alle aktivierbaren Elemente müssen fokussierbar sein:

• Standardkontrollen wie Links, Buttons und Formularfelder sind standardmäßig fokussierbar.
• Nicht-Standardkontrollen müssen eine geeignete ARIA Role zugewiesen bekommen, wie button, link oder checkbox.

Der Fokus sollte in einer logischen Reihenfolge und konsistent gehandhabt werden.

Für jedes nicht strikt präsentative nicht-textuelle Element innerhalb der App muss ein Textersatz bereitgestellt werden.

• Verwenden Sie alt und title, wo angemessen (lesen Sie Steve Faulkners Beitrag über die Verwendung des HTML title-Attributs für einen guten Leitfaden).
• Wenn die obigen Attribute nicht anwendbar sind, verwenden Sie geeignete ARIA-Zustände und -Eigenschaften wie aria-label, aria-labelledby oder aria-describedby.

Bilder von Text sollten vermieden werden.

Alle Benutzeroberflächenkomponenten mit sichtbarem Text (oder einem Bild von Text) als Beschriftungen müssen denselben Text im programmatischen Namen der Komponente verfügbar haben. WCAG 2.1: Bezeichnung im Namen.

Alle Formularelemente müssen Labels (<label>-Elemente) haben, um Benutzer von Bildschirmlesegeräten zu unterstützen.

• Beispiele für den zwingenden Einsatz einer Ausrichtung sind eine Klavieranwendung oder ein Bankscheck.

Ein App-Titel muss bereitgestellt werden.

Überschriften dürfen die hierarchische Struktur nicht unterbrechen

<h1>Top level heading</h1>
<h2>Secondary heading</h2>
<h2>Another secondary heading</h2>
<h3>Low level heading</h3>

ARIA-Landmark-Rollen sollten verwendet werden, um eine App- oder Dokumentstruktur zu beschreiben, wie banner, complementary, contentinfo, main, navigation, search.

Für Touch-Ereignisse stellen Sie sicher Folgendes (WCAG 2.1: Zeigerabbruch):

• Das Down-Event sollte nicht verwendet werden, um irgendeinen Teil der Funktion auszuführen;
• Falls das obige nicht befolgt wird, sollte der Abschluss der Funktion auf dem Up-Event erfolgen, und ein Mechanismus sollte verfügbar sein, um die Aktion vor ihrem Abschluss abzubrechen oder die Aktion nach ihrem Abschluss rückgängig zu machen;
• Falls das obige nicht befolgt wird, sollte das Up-Event in der Lage sein, jede Aktion rückgängig zu machen, die auf einem Down-Event ausgelöst wurde;
• Alle oben genannten Punkte dürfen verletzt werden, wenn es wesentlich ist, die Aktion beim Down-Event auszulösen, normalerweise um reale Erfahrungen zu simulieren oder um Echtzeit-Feedback zu bieten. Zum Beispiel Spielsteuerungen, Klaviaturen oder virtuelle Tastaturen.

Berührungsziele müssen groß genug sein, damit der Benutzer interagieren kann (siehe die BBC Mobile Accessibility Guidelines für nützliche Leitlinien zur Größe von Berührungszielen).