iOS Barrierefreiheit: Erste Schritte

Menschen aller Gesellschaftsschichten, jeden Alters und mit unterschiedlichem Hintergrund nutzen Smartphone-Apps, auch Menschen mit Behinderungen. Wenn Sie Ihre Apps barrierefrei gestalten, können sie von allen genutzt werden, auch von Menschen mit Seh-, Bewegungs-, Lern- oder Hörbehinderungen.

In diesem iOS-Tutorial zur Barrierefreiheit werden Sie eine vorhandene App so umgestalten, dass sie für Menschen mit Sehbehinderungen besser zugänglich ist. Dabei lernen Sie, wie Sie:

• VoiceOver verwenden.
• Ihre App mit dem Accessibility Inspector überprüfen.
• Mit UIKit barrierefreie Elemente implementieren.
• Eine bessere Benutzererfahrung für Menschen mit Behinderungen schaffen.

Dieses Tutorial erfordert Xcode 11.3 und Swift 5.1. Es wird vorausgesetzt, dass Sie die Grundlagen der Swift-Entwicklung bereits kennen. Wenn Sie neu in Swift sind, sollten Sie sich zunächst unser Buch Swift Apprentice ansehen.

Einstieg

In diesem Lernprogramm arbeiten Sie mit einer bereits fertiggestellten App namens Recipe, die eine Liste von Rezepten und deren Schwierigkeitsgrad enthält. Außerdem können Sie die Qualität der zubereiteten Gerichte bewerten.

Lade dir alles herunter, was du für die ersten Schritte brauchst, indem du auf die Schaltfläche „Materialien herunterladen“ oben oder unten im Lernprogramm klickst. Öffnen Sie Recipe.xcodeproj im Anfangsordner.

Bevor Sie die Anwendung auf einem Gerät ausführen können, müssen Sie die Signierung konfigurieren.

Klicken Sie dazu im Navigator auf das Recipe-Projekt und wählen Sie dann das gleichnamige Ziel aus. Wählen Sie die Registerkarte „Signing & Capabilities“ und stellen Sie sicher, dass Sie oben „Debug“ ausgewählt haben. Wählen Sie schließlich Ihr Team aus der Dropdown-Liste aus.

Die Recipe-App kennenlernen

Bauen Sie nun die App und führen Sie sie aus, um sich mit ihren Funktionen vertraut zu machen.

Der Root-Controller ist eine tabellarische Ansicht der Rezepte mit Bild, Beschreibung und Schwierigkeitsgrad. Klicken Sie auf ein Rezept, um ein größeres Bild mit den Zutaten und Anweisungen des Rezepts zu sehen.

Um die Sache noch spannender zu machen, können Sie auch die Punkte auf der Liste abhaken, um sicherzustellen, dass Sie alle notwendigen Zutaten haben. Wenn du das, was du gekocht hast, magst oder nicht magst, kannst du das „Gefällt mir“- bzw. „Gefällt mir nicht“-Emoji umschalten.

Hinter den Kulissen der Rezept-App

Verbringe ein paar Minuten damit, dich mit dem Code im begin-Projekt vertraut zu machen. Hier sind einige Highlights:

• Main.storyboard enthält alle Storyboard-Szenen für die App. Sie werden feststellen, dass alle UI-Komponenten standardmäßige UIKit-Steuerelemente und Ansichten sind. Sie sind bereits zugänglich, was Ihnen die Arbeit erleichtert.
• RecipeListViewController.swift verwaltet die Stammtabellenansicht, die die Liste aller verfügbaren Rezepte anzeigt. Er verwendet ein Array von Recipe Objekten als Datenquelle.
• Recipe.swift ist das Modellobjekt, das ein Rezept darstellt. Es enthält Dienstprogrammmethoden zum Laden eines Arrays von Rezepten, die Sie in der gesamten App verwenden werden.
• RecipeCell.swift ist die Zelle für die Rezeptliste des Root-Controllers. Sie zeigt den Schwierigkeitsgrad, den Namen und das Foto des Rezepts auf der Grundlage des übergebenen RecipeModellobjekts an.
• RecipeInstructionViewController.swift enthält den Controller-Code für die Detailansicht, die ein großes Bild des Gerichts zusammen mit seinen Zutaten und Kochanweisungen anzeigt. Es enthält ein UISegmentedControl zum Umschalten zwischen Zutaten und Anweisungen in der Tabellenansicht, die InstructionViewModel verwendet.
• InstructionViewModel.swift dient als Datenquelle für RecipeInstructionsViewController. Es enthält Beschreibungen für Zutaten und Anweisungen sowie Statusinformationen für die Kontrollkästchen.
• InstructionCell.swift definiert eine Zelle, die eine Beschriftung und ein Kontrollkästchen zur Verwendung in Anweisungen und Zutatenlisten enthält. Wenn Sie das Kästchen ankreuzen, wird der Text durchgestrichen.

Nachdem Sie nun verstanden haben, wie die App funktioniert, ist es an der Zeit zu überlegen, wie man sie zugänglicher machen kann.

Warum Barrierefreiheit?

Bevor Sie mit dem Code beginnen, ist es wichtig, die Vorteile der Barrierefreiheit zu verstehen.

• Wenn Sie Ihre Anwendung barrierefrei gestalten, können Sie leichter funktionale Tests schreiben, unabhängig davon, ob Sie das KIF-Framework oder UI Testing in Xcode verwenden.
• Sie erweitern außerdem Ihren Markt und Ihre Nutzerbasis, indem Sie Ihre Anwendung für eine größere Gruppe nutzbar machen.
• Wenn Sie für eine Behörde arbeiten, sind Sie verpflichtet, die 508-Konformität zu implementieren, die besagt, dass jede Software oder Technologie für alle Benutzer zugänglich sein muss.
• Die Implementierung von Barrierefreiheit in Ihrer App zeigt, dass Sie bereit sind, für jeden Benutzer die Extrameile zu gehen, und das ist eine gute Sache.
• Es ist ein gutes Gefühl zu wissen, dass Sie einen kleinen, aber spürbaren Unterschied im Leben eines Menschen machen! :]

Überzeugt? Dann ist es an der Zeit, VoiceOver kennenzulernen, ein barrierefreies Tool für Menschen mit Sehbehinderungen.

VoiceOver aktivieren

iOS wird mit dem Bildschirmleseprogramm VoiceOver ausgeliefert, das Benutzern hilft, mit Software zu interagieren, ohne den Bildschirm sehen zu müssen. Es wurde speziell für Menschen mit Sehproblemen entwickelt.

VoiceOver ermöglicht es sehbehinderten Nutzern zu hören und mit dem zu interagieren, was auf dem Bildschirm zu sehen ist. VoiceOver reagiert auf Gesten und teilt dem Benutzer hörbar mit, was auf dem Bildschirm zu sehen ist oder was er auswählt. Im Wesentlichen ist VoiceOver das Bindeglied zwischen der Benutzeroberfläche und der Berührungseingabe des Benutzers.

Am schnellsten kannst du VoiceOver verwenden, indem du die App „Einstellungen“ auf deinem iOS-Gerät öffnest, „Eingabehilfen“ ▸ „Eingabehilfen-Verknüpfung“ auswählst und dann „VoiceOver“.

Damit wird eine Verknüpfung erstellt, mit der du auf einem physischen Gerät dreimal auf die Home-Taste – oder bei neueren Handys auf die Seitentaste – tippen kannst, um VoiceOver ein- und auszuschalten.

Nachdem du VoiceOver aktiviert hast, ist es an der Zeit, es auszuprobieren.

Wie verwende ich VoiceOver

VoiceOver wird mit einigen praktischen Gestenvoreinstellungen geliefert, die das Navigieren in einer App erleichtern. Hier sind einige der häufigsten Gesten, die du mit VoiceOver in einer App verwenden kannst:

• Tippe einfach irgendwo auf den Bildschirm und VoiceOver liest die Informationen aus den Zugänglichkeitsattributen des Elements laut vor.
• Wenn du nach links oder rechts wischst, wählt VoiceOver das nächste sichtbare barrierefreie Element aus und liest es laut vor. Eine Wischbewegung nach rechts führt nach vorne und unten, eine Wischbewegung nach links in die entgegengesetzte Richtung.
• Eine Wischbewegung nach unten buchstabiert das fokussierte Element buchstabenweise.
• Doppeltippen wählt das fokussierte Element aus.
• Eine Wischbewegung mit drei Fingern nach links oder rechts navigiert in einer Seitenansicht vorwärts oder rückwärts.

Die vollständige Liste der VoiceOver-Gesten findest du in Apples Broschüre „VoiceOver-Gesten auf dem iPhone lernen“. Jetzt weißt du also, wie VoiceOver funktioniert – aber wie funktioniert deine App damit? Im nächsten Schritt wirst du sie testen.

VoiceOver mit der Rezept-App ausprobieren

Erstelle und führe sie auf einem physischen Gerät aus und klicke dreimal auf die Home-Taste, um VoiceOver einzuschalten. Wische nach links und rechts, um durch die Rezeptliste zu navigieren. VoiceOver liest die Elemente von oben links nach unten rechts. Es beginnt mit dem Namen der Überschrift, gefolgt vom Namen des jeweiligen Rezepts und dem Namen des zugehörigen Bildes.

Es gibt jedoch einige Probleme mit der VoiceOver-Erfahrung:

1. Das Bild ist keine hilfreiche Beschreibung der Bildansichten in jeder Zelle. Man weiß zwar, dass ein Bild vorhanden ist, aber nicht, was es ist.
2. VoiceOver sagt nichts über den Schwierigkeitsgrad jedes Rezepts, was diese Funktion für Menschen mit Sehbehinderungen unbrauchbar macht.

Nachdem Sie nun die Problembereiche identifiziert haben, möchten Sie sich vielleicht gleich daran machen, sie zu lösen. Aber bevor du das tust, musst du ein wenig über die Funktionsweise von Eingabehilfen wissen.

Eingabehilfen-Attribute

Eingabehilfen-Attribute sind die Kernkomponenten, die du zur Unterstützung der Eingabehilfen implementieren musst. Diese Attribute versorgen VoiceOver mit Informationen über Elemente in deiner Anwendung, damit VoiceOver diese Informationen deinen Benutzern vorlesen kann. Wenn diese Attribute nicht richtig konfiguriert sind, kann VoiceOver die erforderlichen Informationen über deine Anwendung nicht bereitstellen.

Ein Zugänglichkeitsattribut hat fünf Eigenschaften:

1. Bezeichnung: Eine prägnante Art und Weise, um das Steuerelement oder die Ansicht zu identifizieren. Einige Beispiele sind Zurück-Schaltfläche und Rezeptbild.
2. Eigenschaften: Diese beschreiben den Zustand, das Verhalten oder die Verwendung des Elements. Eine Schaltflächeneigenschaft könnte z.B. ausgewählt sein.
3. Hinweis: Beschreibt die Aktion, die ein Element ausführt. Zum Beispiel: Zeigt das Rezeptdetail an.
4. Rahmen: Der Rahmen des Elements innerhalb des Bildschirms, im Format eines CGRect. VoiceOver spricht den Inhalt des CGRect.
5. Wert: Der Wert eines Elements. Bei einem Fortschrittsbalken oder einem Schieberegler könnte der aktuelle Wert beispielsweise lauten: 5 von 100.

Die meisten UIKit-Komponenten geben diese Attribute für dich vor; du musst lediglich die Details angeben, um die Benutzerfreundlichkeit zu verbessern. Wenn Sie benutzerdefinierte Steuerelemente erstellen, müssen Sie die meisten Attribute selbst bereitstellen.

Da du nun weißt, woher VoiceOver die Informationen erhält, die es den Benutzern zur Verfügung stellt, ist es an der Zeit, ein neues Werkzeug kennenzulernen, das dir dabei hilft, Schwachstellen in deiner App zu finden und zu beheben: den Inspektor für Barrierefreiheit.

Benutzung des Inspektors für Barrierefreiheit

Wenn du eine App nachrüstest, um sie zugänglicher zu machen, ist es zeitaufwändig und fehleranfällig, Schwachstellen zu finden. Zum Glück gibt es ein Hilfsmittel namens Accessibility Inspector, das Folgendes leistet:

• Läuft durch Ihre Anwendung und findet häufige Probleme mit der Barrierefreiheit.
• Ermöglicht die Überprüfung der Barrierefreiheitsattribute von UI-Elementen im Inspektionsmodus.
• Bietet eine Live-Vorschau der barrierefreien Elemente, ohne dass Sie Ihre App verlassen müssen.
• Unterstützt alle Plattformen, einschließlich macOS, iOS, watchOS und tvOS.

Bevor Sie den Accessibility Inspector auf Recipes verwenden, sollten Sie einen Blick auf das Tool werfen. Öffnen Sie es zunächst im Xcode-Menü, indem Sie zu Xcode ▸ Entwicklertool öffnen ▸ Eingabehilfen-Inspektor navigieren.

Der Inspektor sollte in etwa so aussehen:

In der Zielauswahl können Sie auswählen, welches Gerät Sie inspizieren möchten. Dies kann Ihr MacBook Pro, ein iOS-Gerät oder Ihr Simulator sein.

Mit der Live-Vorschau von Barrierefreiheitselementen können Sie direkt im Simulator testen. Da Live-Vorschauen schneller sind als das Abhören von VoiceOver, werden Sie den Großteil Ihrer Arbeit in diesem iOS-Tutorial zur Barrierefreiheit hier erledigen.

Erstellen Sie das Programm und führen Sie es in einem Simulator aus, und ändern Sie das Ziel des Inspektors für Barrierefreiheit auf Ihren Simulator:

Nachdem Sie das Tool geöffnet haben, können Sie sich einige seiner hilfreichsten Funktionen ansehen.

Verwenden des Inspektionszeigers

Das Auswählen des Inspektionszeigers, der wie ein Fadenkreuz in der Inspektor-Benutzeroberfläche aussieht, ähnelt der Aktivierung von VoiceOver auf Ihrem Gerät. Wenn Sie den Zeiger aktivieren, können Sie den Mauszeiger über ein beliebiges UI-Element bewegen, um dessen Attribute zu überprüfen. Wenn Sie direkt mit dem Simulator über Tastendruck interagieren, wird der Inspektionszeiger deaktiviert.

Das Detailfenster der Inspektion enthält alles, was Sie brauchen, um die Zugänglichkeitsattribute in Ihrer Anwendung zu überprüfen und mit ihnen zu interagieren:

• Basis: Zeigt die Attributeigenschaften für das aktuell hervorgehobene Element an.
• Aktionen: Ermöglicht die Durchführung von Aktionen wie das Tippen auf eine Schaltfläche oder das Scrollen der Ansicht. Wenn Sie in diesem Bereich auf die Schaltfläche „Ausführen“ klicken, wird die Aktion für Ihr Ziel ausgeführt.
• Element: Zeigt die Klasse, die Adresse und den Controller des aktuellen Elements an. Zum jetzigen Zeitpunkt funktioniert es nicht einheitlich.
• Hierarchie: Zeigt die Ansichtshierarchie für das Element an, um das Verständnis komplexer Ansichten zu erleichtern.

Using Quicklook to Check Audio in Xcode

Xcode 11 verfügt über eine neue Funktion im Inspektionsdetailbereich im Abschnitt Quicklook am oberen Rand, mit der Sie in Xcode den Ton simulieren können, den Sie auf Ihrem Gerät hören würden. Das bedeutet, dass Sie überprüfen können, was Ihre Nutzer hören, wenn sie Ihre App verwenden, ohne ein echtes Gerät zu benötigen.

Drücken Sie die Schaltfläche „Abspielen“, während die App in einem Simulator läuft, lassen Sie den Accessibility Inspector durch die App laufen und hören Sie zu, wie er jedes Element laut beschreibt.

Wenn Sie es vorziehen, manuell durch jedes Element zu gehen, können Sie entweder die Schaltfläche „Pause“ oder die Schaltfläche „Audio“ im Abschnitt „Quicklook“ drücken. Drücken Sie die Schaltflächen „Vor“ oder „Zurück“, um in Ihrem eigenen Tempo durch die einzelnen Komponenten zu gehen.

Diese Funktion ist schneller als die Ausführung Ihrer App auf einem Gerät und die Verwendung von VoiceOver, insbesondere während der Entwicklung. Wie immer sollten Sie Ihre App mit all ihren Zugänglichkeitsfunktionen auch auf echten Geräten testen.

Probleme mit dem Inspector Audit aufzeigen

Eine der nützlichsten Funktionen des Inspector Audits ist die Audit-Funktion, die Sie auf Probleme mit der Zugänglichkeit Ihrer App hinweist. Um diese Funktion auszuprobieren, stellen Sie sicher, dass der Simulator noch läuft und Sie sich in der Rezeptliste befinden. Klicken Sie im Inspektor auf das Symbol Audit und dann auf Audit ausführen.

Sie werden sehen, dass der Inspektor mehrere Warnungen ausgibt, darunter auch, dass einigen Ihrer Elemente eine Beschreibung fehlt.

Wenn Sie auf eine Warnung klicken, hebt Xcode das betreffende Element sowohl im Simulator als auch am unteren Rand des Inspektor-Audit-Bildschirms hervor.

In diesem Fall haben die mit den Zellen verbundenen Bildansichten keine Beschreibung. Das bedeutet, dass VoiceOver nicht in der Lage ist, sie für Ihre Leser zu beschreiben.

Klicken Sie bei einer der Warnungen auf das Symbol „Behebung vorschlagen“, das wie ein Fragezeichen in einem Kreis aussieht, und der Inspektor wird Ihnen Vorschläge zur Behebung des Problems machen. Sie können diese Vorschläge später umsetzen.

Klicken Sie auf das Augen-Symbol, um einen Schnappschuss der Anwendung zu machen. Dies ist für jeden in der Qualitätssicherung nützlich, der genaue Fehlerberichte erstellen muss.

Es gibt noch einige weitere nützliche Zugänglichkeitseinstellungen, die Sie im Inspektor finden können. Als Nächstes werden Sie einen kurzen Blick auf diese Funktionen werfen.

Zusätzliche Einstellungen im Inspektor

Auch wenn sie den Rahmen dieses Tutorials sprengen, ist es gut zu wissen, dass Sie mit dem Eingabehilfen-Inspektor auch die folgenden Eingabehilfen-Einstellungen testen können:

1. Farben invertieren
2. Kontrast erhöhen
3. Transparenz reduzieren
4. Bewegung reduzieren
5. Schriftgröße ändern

Um diese Funktionen zu aktivieren, müssen Sie nicht mehr die Einstellungen-App verwenden. Der Eingabehilfen-Inspektor bietet derzeit nur diese fünf Optionen, aber Apple plant, in Zukunft weitere hinzuzufügen.

Der Eingabehilfen-Inspektor spart Zeit beim Testen Ihrer Anwendung. Denken Sie jedoch daran, dass Sie VoiceOver trotzdem manuell testen sollten, um das tatsächliche Benutzererlebnis auszuprobieren. Dieser letzte Schritt hilft dir, Probleme zu erkennen, die der Inspektor übersehen hat.

Nachdem du die Funktionen des Inspektors für Barrierefreiheit kennengelernt hast, ist es nun an der Zeit, mit deiner App zu arbeiten.

Rezept-App zugänglich machen

Als Sie Ihre App auf Ihrem Gerät mit VoiceOver getestet haben, haben Sie festgestellt, dass die Beschreibungen der Bilder nicht sehr nützlich waren. Das Audit-Tool hat dir den Grund dafür gezeigt: Die Bildansicht verfügte nicht über eine barrierefreie Beschriftung. Sie werden dies jetzt beheben.

Öffnen Sie in Xcode die Datei RecipeCell.swift und fügen Sie den folgenden Code am Ende der Datei hinzu:

// MARK: Accessibilityextension RecipeCell { func applyAccessibility(_ recipe: Recipe) { // 1 foodImageView.accessibilityTraits = .image // 2 foodImageView.accessibilityLabel = recipe.photoDescription }}

Dieser Code füllt die fehlenden Barrierefreiheitseigenschaften auf der Grundlage des Recipe-Objekts für die Zelle aus. So funktioniert es:

1. accessibilityTraits nimmt eine Maske von Eigenschaften, die das Barrierefreiheitselement charakterisieren. In diesem Fall zeigt .image an, dass es sich um ein Bild handelt.
2. Mit accessibilityLabel wird das Element in VoiceOver beschrieben. Hier ist es auf recipe.photoDescription gesetzt, eine Zeichenkette, die den Inhalt des Bildes beschreibt.

Nun willst du dies auch auf zukünftige Rezepte anwenden. Suchen Sie configureCell(_:) in der Klasse RecipeCell. Fügen Sie die folgende Zeile am Ende der Methode hinzu:

applyAccessibility(recipe)

Jedes Mal, wenn Sie eine Zelle erstellen, wendet dieser Code die Zugänglichkeitsattribute auf das Bild an, indem er Eigenschaften im Rezeptobjekt verwendet.

Erstellen und führen Sie das Programm auf Ihrem Gerät aus und aktivieren Sie VoiceOver mit dreimaligem Tippen auf die Home-Taste. Testen Sie die Rezeptliste, um zu sehen, ob die Bildbeschreibungen aussagekräftiger sind.

Viel besser! Anstatt nur „Bild“ zu hören, was keine spezifischen Details lieferte, hört man jetzt eine vollständige Beschreibung des Bildes. Der Benutzer kann sich nun das Essen vorstellen, anstatt frustriert zu sein, weil er nicht weiß, was das Bild ist.

Während die Anwendung noch im Simulator läuft, führen Sie den Inspektor für Barrierefreiheit erneut aus und navigieren Sie zur Rezeptliste. Stellen Sie sicher, dass Sie alle Warnungen im Inspektor löschen und tippen Sie auf Prüfung ausführen.

WOOt – keine Beschreibungswarnungen mehr! Nach dem erfolgreichen Hinzufügen von Beschreibungen zu den Bildern ist der Kern dieser Ansicht nun vollständig zugänglich.

Jetzt ist es an der Zeit, den Schwierigkeitsgrad eines Rezepts zugänglich zu machen.

Umformung der Schwierigkeitsbezeichnungen

Im Inspektor für Barrierefreiheit sehen Sie potenziell unzugängliche Textwarnungen, die Ihnen mitteilen, dass die Schwierigkeitsbezeichnungen für einen Benutzer mit Sehbehinderungen nicht sichtbar sind. Um dies zu beheben, müssen Sie die Beschriftungen zugänglich machen und ihre Eigenschaften mit einer aussagekräftigen Beschreibung aktualisieren.

Für Ihren nächsten Schritt gehen Sie zu RecipeCell.swift und fügen Sie das Folgende am Ende von applyAccessibility(_:) hinzu:

// 1difficultyLabel.isAccessibilityElement = true// 2difficultyLabel.accessibilityTraits = .none// 3difficultyLabel.accessibilityLabel = "Difficulty Level"// 4switch recipe.difficulty {case .unknown: difficultyLabel.accessibilityValue = "Unknown"case .rating(let value): difficultyLabel.accessibilityValue = "\(value)"}

Hier sind einige weitere Details darüber, was dieser Code tut:

1. isAccessibilityElement ist ein Flag, das das Element für Barrierefreiheitsfunktionen sichtbar macht, wenn true. Für die meisten UIKit-Klassen ist der Standard true, aber für UILabel ist es false.
2. accessibilityTraits hilft, das Element für Barrierefreiheit zu charakterisieren. Da du keine Interaktionen benötigst, legst du fest, dass es keine Eigenschaften hat.
3. Als Nächstes lässt du VoiceOver kurz und bündig den Zweck dieses Labels bestimmen. Difficulty Level lässt den Benutzer genau wissen, womit er es zu tun hat.
4. VoiceOver liest das accessibilityValue als Teil der Beschreibung des Etiketts. Wenn du hier den Schwierigkeitsgrad einstellst, wird dieses Element viel nützlicher.

Erstelle und führe deine App auf einem physischen Gerät aus, tippe dreimal auf die Home-Taste, um VoiceOver zu aktivieren, und wische durch die Rezeptliste.

Während du durch die verschiedenen barrierefreien Elemente blätterst, liest VoiceOver eine vollständige Beschreibung jeder Zelle vor, einschließlich des Schwierigkeitsgrads.

Prüfen auf Warnungen

Jedes Mal, wenn du ein neues Eingabehilfenelement aufdeckst, wie hier mit dem Schwierigkeitsgrad, solltest du die Prüfung erneut durchführen.

Starte den Eingabehilfeninspektor, falls er nicht bereits läuft. Führen Sie die App auf Ihrem Gerät oder im Simulator aus und setzen Sie das Inspektorziel entsprechend. Wählen Sie nun die Schaltfläche Audit und tippen Sie auf Audit ausführen.

Es sind weniger Warnungen erschienen! Die verbleibenden Warnungen beziehen sich darauf, dass die Etiketten keinen dynamischen Text unterstützen. Sie werden diese als Nächstes beheben.

Den Text dynamisch machen

Der Auditor warnt Sie, dass Sie einen wichtigen Schritt versäumen, um Ihre App für alle nutzbar zu machen: dynamischer Text. Dies ist eine wichtige Funktion für die Barrierefreiheit, die es Nutzern mit teilweiser Sehbehinderung ermöglicht, die Schriftgröße zu erhöhen, um die Lesbarkeit zu verbessern. Die nicht-dynamische Schriftart, die Ihre App derzeit verwendet, lässt dies nicht zu.

Klicken Sie auf das Symbol für Korrekturvorschläge, um zu sehen, was der Prüfer empfiehlt:

Er rät Ihnen, eine von UIfont bevorzugte Schriftart zu verwenden und adjustsFontForContentSizeCategory auf true zu setzen. Dies werden Sie jetzt tun.

In RecipeCell.swift fügen Sie den folgenden Code innerhalb von applyAccessibility(_:) ganz unten ein:

dishNameLabel.font = .preferredFont(forTextStyle: .body)dishNameLabel.adjustsFontForContentSizeCategory = truedifficultyLabel.font = .preferredFont(forTextStyle: .body)difficultyLabel.adjustsFontForContentSizeCategory = true

Dies setzt preferredFont auf einen body-Stil, was bedeutet, dass iOS den Text so formatiert, wie es den Textkörper eines Dokuments gestalten würde. Die Einzelheiten der Größe und Schriftart hängen von den Einstellungen für die Barrierefreiheit ab. adjustsFontForContentSizeCategory bedeutet, dass die Schriftart automatisch aktualisiert werden soll, wenn der Benutzer die Größe des Textinhalts ändert.

Mit dem Inspektor für Barrierefreiheit lässt sich leicht überprüfen, wie Ihre Anwendung die Größenänderung von Schriftarten handhabt.

Erstellen Sie die Rezeptanwendung und führen Sie sie zusammen mit dem Inspektor für Barrierefreiheit aus. Führen Sie die Prüfung erneut aus, und alle Warnungen sollten verschwunden sein.

Testen einiger anderer Optionen

Navigieren Sie zu den Einstellungen im Inspektor und experimentieren Sie mit einigen der Werkzeuge:

1. Farben umkehren, um eine Vorschau darauf zu erhalten, wie Ihre Oberfläche mit dieser Eingabehilfen-Funktion aussieht. Dies ist nützlich für Menschen mit Lichtempfindlichkeit, Sehschwäche und in manchen Fällen auch Farbenblindheit.
2. Sie können auch dynamische Schriftgrößenänderungen in Echtzeit für Benutzer testen, die größere Schriftgrößen bevorzugen.

Wenn Sie Ihre App testen, sieht sie wahrscheinlich in etwa so aus:

Der Inspektor macht das Testen von Zugänglichkeitsfällen einfach. Daran können Sie erkennen, dass die Rezeptliste für Benutzer mit Sehbehinderungen gut funktioniert.

Transformieren des Rezept-Detailbildschirms

Nachdem Sie sich um die Liste der Rezeptoptionen gekümmert haben, möchten Sie sehen, was passiert, wenn ein Benutzer auf eines der Rezepte klickt. Starte die App auf deinem Gerät, aktiviere VoiceOver und sieh dir die Detailansicht an. Das hört sich in etwa so an:

Es gibt einige Probleme mit der VoiceOver-Interaktion in der Detailansicht:

1. Die linke Pfeiltaste ist keine gute Beschreibung für die Navigation. Woher soll der Benutzer wissen, was die Taste bewirkt?
2. Die Emoji-Gesichtszustände sind: herzförmige Augen und verwirrtes Gesicht. Diese Erklärungen würden jeden Benutzer verwirren!
3. Wenn der Benutzer ein Kontrollkästchen auswählt, steht dort „Symbol leer“, was nicht viel erklärt.

In jedem dieser Fälle ist es wichtig zu erklären, was der Zustand des Steuerelements bedeutet, und nicht, wie es aussieht. Die Schaltfläche „Zurück“ ist deutlicher als die Schaltfläche „Linker Pfeil“. Like und Dislike erklären kurz und bündig die Emojis. Diese beiden Änderungen nehmen Sie als nächstes vor.

Um die Navigation zu ändern, öffnen Sie die Datei RecipeInstructionsViewController.swift und fügen Sie in viewDidLoad nach assert(recipe != nil) Folgendes hinzu:

backButton.accessibilityLabel = "back"backButton.accessibilityTraits = .button

Anstelle der Schaltfläche „Linker Pfeil“ sagt VoiceOver jetzt „Zurück“.

Nun zu den Emojis. Ersetze in derselben Datei den Inhalt von isLikedFood(_:) durch Folgendes:

if liked { likeButton.setTitle("😍", for: .normal) likeButton.accessibilityLabel = "Like" likeButton.accessibilityTraits = .button didLikeFood = true} else { likeButton.setTitle("😖", for: .normal) likeButton.accessibilityLabel = "Dislike" likeButton.accessibilityTraits = .button didLikeFood = false}

Für die Modi „Gefällt mir“ und „Gefällt mir nicht“ hast du ein accessibilityLabel hinzugefügt, aus dem klar hervorgeht, was die Schaltfläche bewirkt. Außerdem hast du accessibilityTraits gesetzt, um sie als Schaltfläche zu kennzeichnen, damit der Benutzer weiß, wie er mit ihr interagieren kann.

Erstelle und führe sie auf einem Gerät aus und aktiviere VoiceOver. Navigiere mit VoiceOver zum Detailbildschirm des Rezepts, um deine Änderungen an den Schaltflächen oben in der Ansicht zu testen.

Jetzt hat jede dieser Funktionen klare, kurze Beschreibungen, die dem Benutzer helfen, ihre Absicht zu verstehen. Viel besser!

Verbesserung der Kontrollkästchen

Das letzte Problem betrifft die Checkliste. Für jedes Kontrollkästchen sagt VoiceOver derzeit „Symbol leer“, gefolgt von der Rezeptanweisung. Das ist überhaupt nicht klar!

Um dies zu ändern, öffnen Sie InstructionCell.swift und suchen Sie nach shouldStrikeThroughText(_:). Ersetze die gesamte Anweisung if strikeThrough durch die folgende:

// 1checkmarkButton.isAccessibilityElement = falseif strikeThrough { // 2 descriptionLabel.accessibilityLabel = "Completed: \(text)" attributeString.addAttribute( NSAttributedString.Key.strikethroughStyle, value: 2, range: NSRange(text.startIndex..., in: text))} else { // 3 descriptionLabel.accessibilityLabel = "Uncompleted: \(text)"}

Dieser Code bewirkt Folgendes:

1. Schaltet die Barrierefreiheit für die Häkchen-Schaltfläche aus, damit VoiceOver sie als eine Einheit statt als zwei verschiedene Barrierefreiheits-Elemente liest.
2. Das accessibilityLabel für die Beschreibung verwendet jetzt die fest kodierte Zeichenfolge "Completed", gefolgt von dem Text. So erhalten Sie alle erforderlichen Informationen mit einem einzigen Besuch des Etiketts.
3. Wenn ein Benutzer ein Element als unvollständig markiert, fügen Sie wie beim vollständigen Code "Uncompleted" vor der Beschreibung des Etiketts hinzu.

Erstellen Sie die App und führen Sie sie erneut aus, um zu sehen, wie sie klingt. Es wird Musik in den Ohren deiner Benutzer sein. :]

Wie geht es weiter?

Die fertige Version des Projekts kannst du über die Schaltfläche „Materialien herunterladen“ oben oder unten in diesem Lernprogramm herunterladen.

In diesem iOS-Tutorial zur Barrierefreiheit hast du VoiceOver kennengelernt. Sie haben eine manuelle Prüfung durchgeführt, indem Sie durch alle zugänglichen Elemente geblättert und die Benutzerfreundlichkeit selbst getestet haben. Dann haben Sie den Eingabehilfeninspektor verwendet, um Prüfungen durchzuführen, Werte für barrierefreie Elemente zu prüfen und dynamische Änderungen vorzunehmen, um Farben zu invertieren oder die Schriftgröße zu ändern.

Jetzt haben Sie die nötigen Werkzeuge, um Ihre App barrierefreier zu gestalten. Die Gewissheit, dass Sie einen positiven Einfluss auf das Leben anderer Menschen haben werden, ist lohnend.

Es gibt eine Vielzahl von Möglichkeiten für barrierefreie Funktionen. Dieses Tutorial kratzt nur an der Oberfläche, um Ihnen den Einstieg zu erleichtern. Nachfolgend finden Sie weitere Ressourcen:

• Kategorien der Barrierefreiheit
• Ressourcen für die Entwicklung von Barrierefreiheit
• Anwendung von Barrierefreiheit auf benutzerdefinierte Ansichten
• Bieten Sie ein außergewöhnliches Barrierefreiheits-Erlebnis
• Barrierefreiheits-Inspektor

Wenn Sie Kommentare oder Fragen haben, beteiligen Sie sich bitte an der Diskussion unten!