Accessibility in Swift: iOS-Apps für alle zugänglich machen

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Warum Accessibility nicht nur ein Häkchen, sondern eine Superkraft für Ihre App ist

\n\n

Stellen Sie sich vor: Sie haben eine tolle App erstellt. Schöne Oberfläche, blitzschnelle Animationen, perfekter Swift-Code. Sie sind stolz darauf. Doch plötzlich stellt sich heraus, dass 15 % der Nutzer sie nicht verwenden können. Für sie sind die Schaltflächen zu klein, der Text verschwimmt mit dem Hintergrund und VoiceOver „liest“ ein Durcheinander statt des Menüs. Kommt Ihnen das bekannt vor?

\n\n

Accessibility (Barrierefreiheit) geht es nicht um „Pflicht“ oder „nur für das Häkchen“. Es geht um Inklusion, um Fürsorge und, nicht zuletzt, ums Geschäft. iOS bietet ein äußerst leistungsfähiges Framework, mit dem Sie Ihre App an die Bedürfnisse von Menschen mit Seh-, Hör-, motorischen und kognitiven Einschränkungen anpassen können. Und Swift gibt uns alle Werkzeuge, um dies elegant zu tun.

\n\n

In diesem Artikel halten wir keine langweiligen Vorträge. Wir besprechen konkrete Codebeispiele, die Sie sofort in Ihr Projekt integrieren können. Los geht's!

\n\n

VoiceOver: So „lehren“ Sie Ihre App, über sich selbst zu sprechen

\n\n

VoiceOver ist der in iOS integrierte Screenreader. Er „spricht“ alles, was auf dem Bildschirm passiert: Text, Schaltflächen, Gesten. Wenn der Entwickler die Oberfläche jedoch nicht vorbereitet hat, kann VoiceOver zum Chaos werden. Lassen Sie uns das beheben.

\n\n

Grundlegende Einrichtung: accessibilityLabel und accessibilityTraits

\n\n

Der einfachste Weg, VoiceOver zu helfen, besteht darin, Bezeichnungen und Typen für Elemente festzulegen. Sie haben zum Beispiel eine Schaltfläche mit einem Herzsymbol. Ohne Bezeichnung sagt VoiceOver einfach „Schaltfläche“, mit Bezeichnung sagt es „Zu Favoriten hinzufügen“.

\n\n
let favoriteButton = UIButton(type: .system)\nfavoriteButton.setImage(UIImage(systemName: "heart"), for: .normal)\nfavoriteButton.accessibilityLabel = "Zu Favoriten hinzufügen"\nfavoriteButton.accessibilityTraits = .button
\n\n

Beachten Sie accessibilityTraits. Dies ist ein Hinweis für VoiceOver, wie mit dem Element interagiert werden soll. Für eine Schaltfläche — .button, für ein Bild — .image, für eine Überschrift — .header. Verwenden Sie .selected, .notEnabled und andere, um den Zustand genau zu übermitteln.

\n\n

Gruppierung von Elementen: So verhindern Sie, dass VoiceOver den Nutzer „überredet“

\n\n

Manchmal ist es sinnvoll, mehrere Elemente zu einem sinnvollen Block zusammenzufassen. Zum Beispiel eine Produktkarte: Bild, Name, Preis. Wenn VoiceOver diese einzeln vorliest, wird der Nutzer müde. Die Lösung ist UIAccessibilityElement oder shouldGroupAccessibilityChildren.

\n\n
cardView.shouldGroupAccessibilityChildren = true\ncardView.accessibilityLabel = "Nike Air Sneaker, 12.990 Rubel"\ncardView.accessibilityTraits = .button
\n\n

Jetzt liest VoiceOver die gesamte Karte als ein Element. Kurz, prägnant, verständlich.

\n\n

Benutzerdefinierte Aktionen: Wenn mehr als nur ein „Tippen“ nötig ist

\n\n

Es gibt komplexe Elemente: Schieberegler, Schalter, Wischlisten. Für diese ist es wichtig, benutzerdefinierte Aktionen hinzuzufügen. Zum Beispiel für eine Zelle mit der Funktion „Löschen“ und „Bearbeiten“:

\n\n
let deleteAction = UIAccessibilityCustomAction(\n    name: "Löschen",\n    target: self,\n    selector: #selector(deleteItem)\n)\nlet editAction = UIAccessibilityCustomAction(\n    name: "Bearbeiten",\n    target: self,\n    selector: #selector(editItem)\n)\ncell.accessibilityCustomActions = [deleteAction, editAction]
\n\n

Der VoiceOver-Nutzer wischt nach unten oder oben, um eine Aktion auszuwählen. Das verbessert die Benutzererfahrung erheblich.

\n\n

Dynamic Type: Text, der sich jedem anpasst

\n\n

Menschen mit Sehschwäche vergrößern oft die Schriftart in den iOS-Einstellungen. Wenn Ihre App Dynamic Type nicht unterstützt, wird Text abgeschnitten, überlappt oder einfach unleserlich. Wie vermeidet man das?

\n\n

Verwendung dynamischer Schriftstile

\n\n

Verwenden Sie anstelle von festem UIFont.systemFont(ofSize: 16) die Methode UIFont.preferredFont(forTextStyle: .body).

\n\n
label.font = UIFont.preferredFont(forText                

Blogs

Buchempfehlungen