engineering-design-and-analysis
Design für Zugänglichkeit: Voiceover und Dynamischer Typ in Ios
Table of Contents
Design für Barrierefreiheit ist unerlässlich, um integrative digitale Erlebnisse für alle Benutzer zu schaffen. In iOS spielen Funktionen wie VoiceOver und Dynamic Type eine entscheidende Rolle bei der Verbesserung der Benutzerfreundlichkeit für Menschen mit Sehbehinderungen, Sehschwäche und anderen Barrierefreiheitsanforderungen. Durch die durchdachte Integration dieser Tools können Entwickler und Designer sicherstellen, dass ihre Apps von einem breiteren Publikum genutzt werden können, einschließlich derjenigen, die auf unterstützende Technologien angewiesen sind. Barrierefreiheit ist kein nachträglicher Gedanke - es ist ein Kernaspekt des Qualitätssoftwaredesigns, von dem jeder Benutzer profitiert, egal ob er auf einem kleinen Bildschirm bei hellem Sonnenlicht liest oder eine App navigiert, ohne auf das Display zu schauen.
VoiceOver verstehen
VoiceOver ist ein eingebauter Bildschirmleser in iOS, der alles, was auf dem Bildschirm erscheint, laut vorliest – Tasten, Beschriftungen, Bilder, Schieberegler und sogar Textänderungen. Es ermöglicht Benutzern mit Sehbehinderungen, Apps und Websites mit einer reichen Reihe von Gesten und gesprochenem Feedback zu navigieren. Wenn ein Benutzer einen Finger über den Bildschirm berührt oder zieht, beschreibt VoiceOver das Element unter dem Finger. Doppeltippen an einem beliebigen Ort auf einem ausgewählten Element aktiviert es, während Drei-Finger-Scroll-Inhalte schwenken. Dieses gestenbasierte Interaktionsmodell ist leistungsstark, aber es stellt eine große Belastung für Entwickler dar, genaue und vollständige Zugänglichkeitsmetadaten bereitzustellen.
VoiceOver setzt auf die Accessibility API (UIAccessibility), um Informationen über On-Screen-Elemente zu extrahieren. Jedes UIKit-Steuerelement , , und benutzerdefinierte Ansichten können Accessibility-Etiketten, Merkmale, Hinweise und benutzerdefinierte Aktionen freilegen. Wenn diese fehlen oder schlecht gestaltet sind, wird der Bildschirmleser das Element entweder ignorieren oder auf verwirrende Weise präsentieren, wodurch Teile Ihrer App unbrauchbar werden.
Bei der Gestaltung für VoiceOver sollten Entwickler sicherstellen, dass alle interaktiven Elemente ordnungsgemäß gekennzeichnet und über die Accessibility-APIs zugänglich sind. Dazu gehören nicht nur native Bedienelemente, sondern auch benutzerdefinierte Schnittstellen, Gestenerkennungsgeräte und dynamische Inhalte. Ein häufiger Fehler besteht darin, dass Standard-Labels aus Textinhalten ausreichen. VoiceOver kann den zugrunde liegenden Steuerelementtyp oder eine Rohkennung lesen, was selten hilfreich ist. Geben Sie immer explizite, vom Menschen lesbare Etiketten an.
Wichtige Zugänglichkeitsmerkmale
iOS bietet eine Reihe von Zugänglichkeitsmerkmalen (), die VoiceOver über das Verhalten eines Elements informieren.
- Button – zeigt an, dass das Element gedrückt werden kann, um eine Aktion auszuführen.
- Header – markiert eine Abschnittsüberschrift, die es Benutzern ermöglicht, schnell zwischen den Überschriften zu springen.
- StaticText – sagt VoiceOver, dass das Element nur Text ist.
- Einstellbar – für Steuerungen wie Schieberegler oder Stepper, die Inkrement-/Dekrementgesten ermöglichen.
- Ausgewählt – zeigt an, dass sich das Element in einem ausgewählten Zustand befindet (z. B. eine Registerkarte).
- Link – für URL-ähnliche Elemente, die eine Webadresse öffnen.
Die korrekte Eigenschaft zu verwenden, verbessert nicht nur die gesprochene Ausgabe, sondern verändert auch die Geste, die dem Benutzer zur Verfügung steht. Zum Beispiel erlaubt ein Element mit der Einstellbaren Eigenschaft dem Benutzer, nach oben oder unten zu wischen, um seinen Wert zu ändern.
Accessibility-Tipps und Custom Actions
Manchmal reichen ein Label und eine Eigenschaft nicht aus. Zugänglichkeitshinweise können zusätzlichen Kontext zum Ergebnis einer Aktion liefern, wie z.B. "Öffnet das Einstellungsfeld" oder "Löscht das aktuelle Element". Hinweise werden nur nach kurzer Verzögerung gesprochen, wenn der Benutzer an einem Element verweilt, sollten also sparsam verwendet werden - nur wenn das Verhalten nicht allein am Label offensichtlich ist.
Für Elemente, die mehrere Aktionen unterstützen (z. B. eine Tabellenzelle, die geklaut werden kann, um Lösch-, Freigabe- und Ausblenden-Tasten anzuzeigen), verwenden Sie benutzerdefinierte Aktionen. VoiceOver gibt die Anzahl der verfügbaren Aktionen bekannt und lässt sie den Benutzer durch Auf- oder Abwischen in einem dedizierten Rotor ausführen.
Implementierung von VoiceOver Support
Um VoiceOver effektiv zu unterstützen, sollten Sie die folgenden Best Practices berücksichtigen: Dies sind nicht nur Richtlinien, sondern sie sind notwendig, um Zugänglichkeitsaudits zu bestehen und ein gerechtes Erlebnis zu schaffen.
- Verwenden Sie beschreibende Beschriftungen für Schaltflächen, Links und Steuerelemente. Eine Schaltfläche mit der Aufschrift "Speichern" ist akzeptabel; besser ist "Dokument speichern" oder "Entwurf speichern". Vermeiden Sie generische Beschriftungen wie "Button" oder "Item 1". Stellen Sie für Symbole ohne sichtbaren Text das Beschriftungsetikett für die Zugänglichkeit ein, um die Aktion zu beschreiben, z. B. "Neuen Kontakt hinzufügen" für ein Plus-Symbol.
- Stellen Sie sicher, dass alle Bilder einen sinnvollen Alt-Text haben. Dekorative Bilder, die keine Informationen vermitteln, sollten als markiert werden, damit VoiceOver sie ignoriert. Informative Bilder, wie ein Diagramm oder ein Produktfoto, benötigen eine kurze Beschreibung. Vergessen Sie nicht, die Bilder in und zu aktualisieren.
- Testen Sie die Navigation mit VoiceOver-Gesten, um mögliche Probleme zu identifizieren. Aktivieren Sie VoiceOver in Einstellungen → Zugänglichkeit → VoiceOver und versuchen Sie, alle Kernaufgaben in Ihrer App zu erledigen, ohne auf den Bildschirm zu schauen. Achten Sie auf Elemente, die übersprungen, falsch gelesen oder nicht erreichbar sind.
- Verwende Zugänglichkeitsmerkmale, um den Zweck von UI-Elementen zu definieren, z. B. setze auf Abschnittstitel und auf tappbare Elemente.
- Gruppenbezogene Elemente mit Containeransichten mit und einem kombinierten Label.
- Bereitstellungsbenachrichtigungen posten, wenn sich der Inhalt dynamisch ändert.
- Vermeiden Sie es, sich ausschließlich auf Farb- oder visuelle Hinweise zu verlassen, um den Zustand zu vermitteln. VoiceOver-Benutzer können rote Fehlergrenzen nicht sehen. Kombinieren Sie visuelle Indikatoren immer mit Text, Symbolen oder Merkmalen wie .
- Unterstützt die Barrierefreiheits-Rotor-Operationen, wenn dies angemessen ist. Wenn Ihre App beispielsweise einen Schieberegler für die Lautstärke enthält, implementieren Sie die Einstellbare-Eigenschaft und zeigen Sie Inkrement- und Dekrement-Aktionen über den Rotor auf.
Common VoiceOver Fallstricke
Selbst erfahrene Entwickler können subtile Probleme übersehen.
- Überverschachtelte zugängliche Elemente: Wenn eine Elternansicht zugänglich ist und ihre Kinder ebenfalls zugänglich sind, wird VoiceOver die Eltern und dann jedes Kind ankündigen, was Redundanz und Verwirrung verursacht.
- Unsachgemäß gehandhabte Scrollansichten: VoiceOver hängt von der Inhaltsgröße der Scrollansicht ab. Wenn die Inhaltsgröße nicht korrekt eingestellt ist, scrollt VoiceOver möglicherweise nicht durch alle Elemente.
- Missing accessibility identifiers: Während die accessibility identifier () in erster Linie für automatisierte Tests bestimmt ist, sollte sie nicht als Label für VoiceOver verwendet werden.
- Keyboard-Befehle ignorieren: Einige Benutzer kombinieren VoiceOver mit einer externen Tastatur. Stellen Sie sicher, dass Ihre App auf gängige Tastenkombinationen (z. B. Cmd + S für Speichern) reagiert und dass diese Aktionen über den Barrierefreiheitsrotor erkennbar sind.
Dynamischer Typ verstehen
Dynamic Type ermöglicht es Benutzern, die Textgröße systemweit über iOS-Apps anzupassen, wodurch die Lesbarkeit und der Komfort für Personen mit Sehschwäche, Alterssichtigkeit oder einfach für diejenigen, die größeren Text bevorzugen, verbessert werden. Wenn ein Benutzer die Textgröße in Einstellungen → Display & Helligkeit → Textgröße anpasst oder die Accessibility Shortcut verwendet, wird jede App, die Dynamic Type unterstützt, ihren Text automatisch skalieren. Dies ist nicht nur eine Frage der Verwendung einer anderen Schriftgröße; Es erfordert ein flexibles Layout, das Zeilenhöhenänderungen, Abkürzungen und sogar unterschiedliche Schriftgewichte bei extremen Größen aufnehmen kann.
Dynamischer Typ basiert auf dem Konzept von Textstilen, die durch definiert werden. iOS bietet eine Reihe vordefinierter Stile: , , , , , , , und mehr. Jeder Stil wird einer bestimmten Schriftgröße und -gewichtung zugeordnet, aber kritisch skaliert er relativ zur bevorzugten Kategorie der Inhaltsgröße des Benutzers (von extra klein bis extra groß plus Zugänglichkeitsgrößen). Wenn Sie diese Textstile verwenden, übernimmt das System automatisch die Skalierung. Mit hart codierten Schriftgrößen wird dieses System durchbrochen und kann Text unlesbar machen oder Layout-Clips für Benutzer verursachen, die einen größeren Typ benötigen.
Beim Entwerfen für Dynamic Type sollten Entwickler sicherstellen, dass Text skalierbar ist und dass sich das Layout anpasst, ohne Inhalte auf unerwünschte Weise zu zerbrechen, zu überlappen oder zu kürzen. Dies geht über den Text selbst hinaus: Ränder, Padding, Schaltflächenbreiten und sogar Bildgrößen müssen möglicherweise angepasst werden, um einen harmonischen Blick auf jede Größe zu erhalten.
Die Inhaltsgrößenkategorien
iOS definiert mehrere Ebenen der Textgröße, von XS (extra klein) bis XXXL (extra extra extra groß). Die Kategorien der Zugänglichkeitsgrößen (größer als AX1) sind speziell für Benutzer mit Sehbehinderungen konzipiert und können sehr großen Text erzeugen – manchmal mehr als 50 Punkte für Körpertext. Bei diesen extremen Größen können selbst sorgfältig gestaltete Layouts kaputt gehen, wenn sie nicht getestet werden. Xcodes Accessibility Inspector enthält einen Dynamic Type Simulator, mit dem Sie Ihre App in jeder Größenkategorie anzeigen können, ohne Ihre Geräteeinstellungen zu ändern.
Nicht jeder Text muss gleich groß sein. Normalerweise wächst der Text am meisten, während kleine Beschriftungen oder Buttontitel weniger aggressiv skalieren können. Die Klasse gibt Ihnen eine feine Kontrolle über das Skalierungsverhalten für benutzerdefinierte Schriftarten, die nicht an einen Textstil gebunden sind.
Implementierung von Dynamischem Typ
Um Dynamic Type effektiv zu unterstützen, sollten Sie diese Praktiken befolgen, die sicherstellen, dass Ihre App die Präferenzen der Benutzer respektiert und sich über den gesamten Bereich der Textgrößen vorhersehbar verhält.
- Verwenden Sie Textstile, die sich automatisch an die Benutzereinstellungen anpassen, wie , , etc. Im Interface Builder können Sie die Schriftart auf einen Textstil im Attributes-Inspektor einstellen.
- Vermeiden Sie feste Schriftgrößen; verlassen Sie sich stattdessen auf skalierbare Schriftarten.
- Testen Sie Ihre App mit verschiedenen Einstellungen für Textgrößen in den Accessibility-Optionen. Gehen Sie zu Einstellungen → Accessibility → Display & Text Size → Larger Text, um Accessibility-Größen zu aktivieren. Navigieren Sie dann durch jeden Bildschirm in Ihrer App und achten Sie besonders auf die beschnittenen Schaltflächen, Bilder überlappen und Textabrundungen.
- Stellen Sie sicher, dass Ihr Layout bei allen Größen flexibel und lesbar bleibt. Verwenden Sie Auto-Layout-Einschränkungen, die sich an die Inhaltsgröße und nicht an feste Breiten anpassen. Zum Beispiel sollte ein Label führende und nachlaufende Einschränkungen für seine Superview haben, keine feste Breite, damit es wachsen und umschließen kann. Verwenden Sie , um mehrzeiligen Text zu ermöglichen.
- Zeilenhöhe und Absatzabstand dynamisch anpassen. Die Standard-Zeilenhöhe für Textstile ist angemessen, aber wenn Sie zugewiesene Zeichenfolgen verwenden, stellen Sie sicher, dass Sie relativ zur Schriftgröße einstellen.
- Verwenden Sie für benutzerdefinierte Schriftarten: stellt sicher, dass Ihre Schriftskalen identisch mit der System-Body-Schriftart sind.
- Für Bilder oder Symbole, die Text begleiten, sollten Sie mehrere Auflösungen bereitstellen oder SVG verwenden, damit sie ohne Pixelierung skaliert werden. Ein Symbol, das neben einem Label sitzt, muss möglicherweise wachsen, wenn der Text wächst. Sie können Asset-Kataloge mit größenspezifischen Bildern oder skaliert Bilder mit mit Textstil-Skalierung verwenden.
- Aktualisieren Sie Layouts, wenn sich Dynamic Type zur Laufzeit ändert. Registrieren Sie sich für die -Benachrichtigung, um Ihr Layout zu ungültig zu machen und die Größen neu zu berechnen. Wenn Sie verwenden, ruft das System automatisch das Update der Merkmalssammlung auf; benutzerdefinierte Ansichten müssen jedoch möglicherweise explizit bearbeitet werden.
Umgang mit Dynamischem Typ in Tabellenansichten und Sammlungsansichten
Dynamischer Typ kann Listenansichten erschweren, wenn die Zellenhöhen festgelegt sind. Die Lösung besteht darin, selbstformatige Zellen zu verwenden, die ihre intrinsische Höhe basierend auf dem Inhalt berechnen. Legen Sie die geschätzte Zeilenhöhe fest und erlauben Sie Auto Layout, Zellen zu erweitern. Für setzen und bieten Sie eine angemessene . Verwenden Sie für kompositorische Layouts oder Größen, die zu Berechnungen passen. Stellen Sie immer sicher, dass Etiketten innerhalb von Zellen führende, nachlaufende, obere und untere Einschränkungen haben, die an die Zellenränder gebunden sind.
Zugänglichkeitsgrößen und Leistung
Bei Zugänglichkeitsgrößen kann Text sehr groß werden und eine einzelne Zelle kann nur wenige Wörter enthalten. In Chat-Apps oder News-Feeds ist dies akzeptabel und erwartet. In datenintensiven Rastern (z. B. einer Kalendermonatsansicht) kann die Textskalierung jedoch das Layout unterbrechen. In solchen Fällen können Sie sich dafür entscheiden, die maximale Textgröße für diese bestimmte Ansicht zu begrenzen oder ein alternatives kompaktes Layout bereitzustellen. Seien Sie transparent: Wenn Sie die Skalierung absichtlich einschränken, dokumentieren Sie, dass es sich um eine pragmatische Designentscheidung handelt, aber versuchen Sie, sie zu vermeiden, wenn möglich. Das Ziel ist, die Präferenz des Benutzers zu respektieren, nicht zu überschreiben.
Eine weitere Leistungsüberlegung: Skalierung von Bildern zur Laufzeit kann teuer sein. Wenn Sie unterschiedliche Bildgrößen für verschiedene Kategorien von Inhaltsgrößen bereitstellen, laden Sie nur die erforderliche Auflösung. Verwenden Sie , um das entsprechende Asset zum Zeitpunkt des Renderns auszuwählen.
Zugänglichkeit jenseits von VoiceOver und Dynamik
VoiceOver und Dynamic Type sind zwar zwei der wirkungsvollsten Barrierefreiheitsfunktionen in iOS, aber sie sind nicht die einzigen.
- Switch Control – für Benutzer mit eingeschränkter Motorsteuerung.
- AssistiveTouch – virtuelle Tasten und Gesten für Benutzer, die bestimmte physische Bewegungen nicht ausführen können.
- Voice Control – vollständige sprachbasierte Navigation (anders als VoiceOver).
- Reduce Motion – für Benutzer, die empfindlich auf Animationen reagieren.
- Erhöhen Sie den Kontrast und Knopfformen – für eine bessere visuelle Klarheit.
- Closed Captions und Audio Descriptions – für Medieninhalte.
Jede dieser Funktionen interagiert mit Ihrer App auf spezifische Weise. Zum Beispiel funktionieren Elemente, die benutzerdefinierte Aktionen in VoiceOver unterstützen, auch mit Switch Control. Sicherzustellen, dass jedes interaktive Element ein Touch-Ziel in voller Größe ist (mindestens 44x44 Punkte), kommt allen Benutzern zugute, insbesondere denen mit motorischen Beeinträchtigungen. Wenn Sie von Anfang an barrierefrei gestalten, funktioniert Ihre App gut mit all diesen unterstützenden Technologien, nicht nur VoiceOver und Dynamic Type.
Schlussfolgerung
Design mit Barrierefreiheit im Auge nicht nur Vorteile für Benutzer mit Beeinträchtigungen, sondern verbessert auch die allgemeine Benutzererfahrung für alle. Funktionen wie VoiceOver und Dynamic Type sind ausgereift, gut dokumentiert und relativ einfach zu implementieren, sobald Sie die grundlegenden APIs verstehen. Durch die Integration von VoiceOver-Unterstützung mit den richtigen Labels, Merkmalen und benutzerdefinierten Aktionen und durch die Annahme von Dynamic Type durch skalierbare Schriftarten und flexible Layouts können Entwickler integrativere und anpassbare iOS-Anwendungen erstellen, die ein breiteres Publikum erreichen. Zugänglichkeit ist kein Feature-Toggle - es ist eine Designphilosophie, die die menschliche Vielfalt respektiert. Jede App, die sie umarmt, wird zu einem befähigenden Werkzeug für alle Benutzer, unabhängig von ihren Fähigkeiten.
Für weitere Informationen lesen Sie die Apple Human Interface Guidelines on Accessibility, die Dynamic Type Documentation, die VoiceOver Developer Resources und die W3C Web Content Accessibility Guidelines (WCAG) 2.2 für Basisstandards, die auch für mobile Apps gelten.