Hallo zusammen! Im Video dieser Woche habe ich das „UI Adjustable“-Muster behandelt. Vor kurzem habe ich beim Bay Area Accessibility Camp von LinkedIn und Microsoft einen Vortrag über das „UI Adjustable“-Entwurfsmuster gehalten. Es war eine wirklich tolle Erfahrung, und ich konnte dieses coole Entwurfsmuster vorführen, hatte aber keine Gelegenheit, darauf einzugehen, wie und wann es implementiert werden sollte. Genau darauf werde ich im folgenden Video näher eingehen.
Wenn Sie möchten, können Sie hier meinem aufgezeichneten Walkthrough folgen:
So verwenden Sie den Barrierefreiheits-Inspektor zur Simulation von VoiceOver
Öffnen Sie zunächst den Barrierefreiheits-Inspektor und die App, die Sie vorführen möchten. In dieser Demo und diesem Beispiel können Sie einen grundlegenden, segmentierten Barrierefreiheitsschritt markieren, bei dem diese Schaltflächen zum Erhöhen und Verringern vorhanden sind. Nehmen wir zum Beispiel an, Sie möchten Tomaten kaufen und die Anzahl der Tomaten erhöhen oder verringern. Bevor Sie dieses Entwurfsmuster testen, ist es wichtig zu wissen, wie man den Barrierefreiheits-Inspektor verwendet. Wenn Sie den Inspektor öffnen, fällt Ihnen als Erstes das Zielsymbol auf dem Simulator auf.
Um dieses Symbol zu bedienen, können Sie Ihren Finger über den Bildschirm bewegen und Ziele antippen – dies wird in Ihrem Simulator widergespiegelt. Um die Berührungssteuerung zu deaktivieren und den Bildschirm zu erkunden, klicken Sie auf die entsprechende Schaltfläche. Im Grunde simulieren wir im Barrierefreiheits-Inspektor die VoiceOver-Funktion. Es ist wichtig zu beachten, dass ein VoiceOver-Nutzer – beispielsweise ein blinder VoiceOver-Nutzer – VoiceOver wahrscheinlich nicht auf diese Weise verwenden wird. Es ist zwar möglich, dass er gelegentlich den Fokus wieder auf den Bildschirm oder in die Mitte des Bildschirms setzt, aber in den meisten Fällen wird er diese Wischgesten nach rechts und nach links verwenden. Auch diese Wischgesten nach rechts und nach links lassen sich mit unseren Pfeilsymbolen simulieren. Klicken Sie dazu auf den Rechtspfeil.
Informationen im Barrierefreiheits-Inspektor erkennen
In diesem fiktiven Beispiel sollten Sie Ihre Simulator-Anwendung ausblenden und ausschließlich den Barrierefreiheits-Inspektor verwenden. Sie könnten zum einstellbaren Segmentfeld navigieren. Sie könnten nach rechts wischen oder auf die Rechtspfeiltaste klicken, um den Wert eines Elements zu verringern. Allerdings könnten Sie die aktuelle Zahl zu diesem Zeitpunkt nicht sehen, da die UI-Beschriftung lediglich den Text „Tomaten kaufen“ ansagt. Wenn Sie nach rechts oder links wischen, wird „Erhöhen“ oder „Verringern“ angesagt, nicht jedoch die tatsächliche Anzahl der Tomaten, die Sie haben. Was wäre, wenn Sie hundert Artikel auf Ihren Einkaufszettel setzen wollten? Als sehbehinderter oder blinder Nutzer müssten Sie sich beim Wischen merken, bei welcher Zahl Sie gerade sind. Das würde sehr schnell sehr frustrierend werden.
Anwendungen in der Praxis: Barrierefreiheit ist nicht gleichbedeutend mit einer positiven Benutzererfahrung
Das hier ist ein wirklich einfaches Layout. In der Praxis werden solche Layouts jedoch viel, viel komplizierter sein. Letztendlich ist dieses Layout barrierefrei. Dieses UI-Designmuster erfüllt in einer hypothetischen Welt die Kriterien der Web Content Accessibility Guidelines (WCAG). Man könnte es auch so erklären: Diese Benutzeroberfläche enthält zwei Informationen innerhalb dieses Steuerelements. Zum einen gibt es eine Reihe von Artikeln, die sich im Warenkorb befinden, und zum anderen die Tatsache, dass deren Anzahl erhöht oder verringert werden kann. Diese beiden Informationen werden getrennt voneinander gespeichert.
Die Lösung: UI-Beschriftungen umbrechen
Die Lösung für diese benutzerunfreundliche Erfahrung besteht darin, all diese Informationen zusammenzufassen. Wenn Sie Tomaten in Ihren Warenkorb legen würden, würde VoiceOver statt „eine Banane“ einfach „Banane“ vorlesen und die Anzahl erhöhen oder verringern. Das Tolle daran ist, dass diese Umstellung anpassbar ist und Sie die Schaltfläche zum Erhöhen nicht mehr benötigen würden. Darüber hinaus würde durch das Zusammenfassen der Beschriftungen der Fokus nicht mehr separat auf den Steuerelementen zum Erhöhen und Verringern liegen. Stattdessen bietet dieses Designmuster hier nun mehrere Aktionen. Sie können nicht nur die Menge erhöhen oder verringern, sondern diese Information wird auch für VoiceOver-Nutzer als Merkmal erkennbar sein. „Anpassbar“ bedeutet zudem, dass VoiceOver-Nutzer Zugriff auf diese Aktionen erhalten, bei denen sie auf einem Steuerelement nach oben und unten wischen können, anstatt zu den separaten Steuerelementen zum Erhöhen und Verringern wechseln zu müssen.
Eigenschaften von Design-Etiketten und -Anhängern
Indem wir all diese Informationen zusammenfassen, erhalten wir eine wirklich prägnante, umfassende Information. Das Layout wird in eine spezielle „Accessibility Stepper“-Klasse eingebettet. Zu den Eigenschaften dieser Klasse gehören eine primäre Beschriftung, eine sekundäre Beschriftung und das Tag des Steppers. In diesem Entwurf würden Sie diese Tags den einzelnen Ansichten zuweisen. Die einzelnen Ansichten „nameLabel“ und „hintLabel“ sind UI-Beschriftungen. Die Barrierefreiheitsbeschriftung wird aus der Kombination von „nameLabel“ und „hintLabel“ bestehen.
Nun ist es aus einem wichtigen Grund wichtig, diese Beschriftungen als „nameLabel“ und „hintLabel“ zu benennen. Das „nameLabel“ enthält die absolut wesentlichen Informationen, während das „hintLabel“ entweder mit der Barrierefreiheitsbeschriftung zusammengefasst werden kann oder einfach durch den Hinweis selbst dargestellt wird – je nachdem, wie wichtig die Informationen sind. Das übergeordnete Layout sollte ein Barrierefreiheitselement sein. Mit anderen Worten: Das gesamte Element wäre ein Barrierefreiheitselement, wodurch verhindert wird, dass die einzelnen Elemente den Fokus erhalten. Das ist bereits alles, was nötig ist, um eine barrierefreie Benutzeroberfläche zu entwerfen, die sich durch Bewegungen anpassen lässt. Allerdings sollte man nicht immer auf diese Weise vorgehen. Oftmals ist es jedoch hilfreich, eine sinnvolle Gruppierung der Informationen in den Designmustern vorzunehmen, an denen man arbeitet.
