Accessibility ist Teil des UX-Prozesses

Webformulare – Bessere Accessibility für alle!
Kommentare

Im World Wide Web sind Formulare mit die wichtigsten Elemente für Conversion. Deshalb ist es von höchster Bedeutung, dass Webdesigner eine gute User Experience für diese kreieren und sie zugleich für alle Nutzer bedienbar gestalten. Wie aber lassen sich eine gute UX und Accessibility für User beim Ausfüllen von Formularen schaffen? Die folgenden Tipps sollen diese Frage beantworten.

Von Web Accessibility, sprich barrierefreiem Internet, ist die Rede, wenn Websites von allen Usern und von allen Devices aus zugänglich sind – egal, ob mit technischen Hilfsmitteln, vom Smartphone oder Desktop-PC aus. Besonders Formularfelder sind in der Interaktion zwischen Websites und deren Besuchern von großer Bedeutung. Selbst die einfachsten Seiten haben ein Suchfeld oder ein Kontaktformular. Aus Zugänglichkeitssicht ist es allerdings sehr leicht möglich, mit dieser Funktion die Seiteninteraktion zu erschweren bzw. für eingeschränkte User gleich ganz unmöglich zu machen. Wie man eine bessere Usability beim Erstellen von Formularen schaffen kann, hat Amanda Cheung im Artikel „Styling Forms Accessibly“ zusammengefasst.

Accessibility is for everyone!

Nicht selten hört man die Auffassung, dass Accessibility nur einen kleinen Prozentsatz von Menschen betrifft. Dabei besitzen Produkte, die vermeintlich nur für eine bestimmte Personengruppe designt wurden, oftmals auch einen Wert für andere. So wurden optional zuschaltbare Untertitel ursprünglich für Hörgeschädigte entwickelt. Mittlerweile hat sich dieses Feature aber im Alltag etabliert: Dank ihm lässt sich die Lieblingsserie in der Originalsprache anschauen und bei Verständnisproblemen der entsprechende Untertitel zuschalten. Hieran zeigt sich, dass ein Produkt mit durchdachtem Design nicht nur Beeinträchtigungen verringern kann, sondern für das Gesamtpublikum nutzbar wird.

Dieses Konzept ist auch aufs Web übertragbar: Es geht darum, wie Websites und Applikationen gestaltet und implementiert werden. Die Mindestanforderung: Sites so sollten designt werden, dass sie für User mit Behinderung nutzbar sind. Von einem einfach zugänglichen Design profitieren alle Nutzer, denn Websites werden so flexibler und benutzerfreundlicher.

Accessibility ist Teil des UX-Prozesses

Denkt man an User Experience, fallen einem Schlagworte wie Information Architecture, Internal Consistency und Visual Aesthetics ein. An Implementierung denkt man vermutlich eher seltener, dennoch ist sie ein sehr wichtiger Bestandteil des Webdesigns. Entwickler müssen die Balance zwischen Aufrechterhaltung der Accessibility-Standards und Implementierung von Visual Design halten. Die drei besten Methoden, um dies zu erreichen, sind laut Cheung die folgenden:

1.

An Semantic-HTML halten

HTML genau zu implementieren, führt dazu, dass sich Websites so verhalten, wie man es erwartet – und das auf allen Devices und Plattformen. Semantic-HTML unterliegt zwar auch Beschränkungen – so ist es zum Teil nicht möglich, manche Elemente nach Bedarf anzupassen – aber die Vorteile überwiegen. Der ausschlaggebende Grund für Semantic-HTML ist, dass Browser über „native ways“ verfügen, um Elemente zu implementieren. Um dem Rechnung zu tragen, bestimmen Accessibility- und Usability-Spezifikationen, wie Elemente dargestellt werden und sorgen gleichzeitig dafür, dass jeder mit der Website interagieren kann. Was soll man aber tun, wenn der Browser die Native Styles nicht durch CSS überschreiben lässt? Entwickler sollten den Sibling Sector nutzen und so individualisierbare Elemente erstellen.

2.

Vorsicht beim „Verstecken“ von Text

Oftmals verbirgt der Webdesigner beim UX-Design aus ästhetischen Gründen Text und vertraut auf Placeholder. Selbst wenn man dabei Semantic-HTML verwendet, besteht die Gefahr so die Site zu zerstören. Nutzt man beispielsweise das Label ‚display : none‘, wird der Screenreader das als ‚edit text blank‘ verstehen. Im Artikel „Hiding Content for Accessibility“ finden sich viele Beispiele, wie man Content verbirgt, aber trotzdem die Accessibility nicht leidet. Nicht vergessen: Alles immer vorab per Screenreader testen!

3.

Vorgegebene Focus States ersetzen

Manche UX-Designer mögen Einwände gegen die Verwendung von festgelegten Focus States haben, aber für den User ist es wichtig zu wissen, wo auf der Seite er sich befindet. Eine Möglichkeit für ansprechendere Optik ist die Ersetzung durch individualisierbare Focus Styles. Focus State komplett zu entfernen, schadet der Usability.

 

Bestandteile von Webformularen

Auf den ersten Blick sieht ein „accessible“ Webformular nicht besonders außergwöhnlich aus. Testet man dieses aber auf verschiedenen Devices, Browsern und Screenreadern, zeigt sich, wie nutzbar ein Webformular tatsächlich ist. Einige Elemente, die der Usability zuträglich sind, sollen nun vorgestellt werden. Als Beispiel dient das Formularfeld, das hier als Screenshot abgebildet ist:

webformular

Accesible Webformular. Screenshot: Software & Support Media

1.

Verbundene Labels und Eingabefelder

Sind Label und Eingabefeld in HTML verbunden, kann der User auf ein Label klicken und erhält den richtigen Text-Input. Durch die Verknüpfung der beiden Funktionen ist es möglich, mit einem größeren Zielbereich zu interagieren. Das ist vor allem für motorisch eingeschränkte Nutzer und User mit Touch-Devices hilfreich.

2.

Tastatur-Shortcuts

Tastatur-Shortcuts erlauben es dem Benutzer, nur durch Tastaturnutzung durch ein Formular zu navigieren. In unserem Beispiel kann man das Formular ausfüllen, indem man die Tab-Taste nutzt. Das spart vor allem Smartphone-Nutzern Zeit und Nerven. Für blinde User entscheiden Tastatur-Kommandos darüber, ob sie ein Formular nutzen oder nicht. Denn für Blinde sind Websites ohne Tastatur-Unterstützung schlichtweg nicht nutzbar.

3.

Technische Hilfsmittel

Screenreader sollten dazu in der Lage sein, dem User alles vorzulesen, was dieser wissen muss, um ein Formular auszufüllen. Ist das nicht der Fall, ist es für Sehbehinderte nicht möglich, das Formular auszufüllen. Beim Programmieren sollten alle Möglichkeiten der Seitennavigation über technische Hilfsmittel berücksichtigt werden.

Nutzerfreundlich denken!

Um das Nutzererlebnis noch besser, einfacher und leichter zu gestalten, gibt es sicherlich noch mehr Tipps. Die hier vorgestellten sollen eine erste Orientierung bieten. Speziell auf Formulare bezogen, gibt Amanda Cheung den Ratschlag, auch einmal mit neuen Input-Types zu experimentieren: ‚type = „number“‚ ermöglicht zum Beispiel Desktop-Usern eine stufenweise Vergrößerung der Site; auf dem Smartphone erscheint automatisch ein Ziffernpad. Allgemein gesehen sollte man beim Entwickeln darauf achten, alle Rollen zu bedenken – vom Mobile-User bis zum Nutzer, der auf Hilfsmittel angewiesen ist. Sind die genutzten Formulare für alle zugänglich und benutzerfreundlich? Lautet die Antwort Nein, heißt es von vorn anfangen und bitte nutzerfreundlich denken!

 

Aufmacherbild: Computer keyboard and wheelchair von Shutterstock/Urheberrecht: Tatiana Popova

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -