Toegankelijkheidstekst aanpassen in Swift op basis van focusrichting

Verbetering van de VoiceOver-toegankelijkheid voor dynamische UI-elementen

Bij het maken van een inclusieve iOS-app worden ontwikkelaars vaak geconfronteerd met unieke uitdagingen met de VoiceOver-functionaliteit. Een veel voorkomende vraag is of de toegankelijkheidstekst van een UIView dynamisch kan worden aangepast op basis van de richting van de focusbeweging. 🧭

Stel je een lay-out voor met een Toplabel, een collectieweergave die fungeert als een raster van cellen en een Onderlabel. Elke cel in de collectieweergave is afzonderlijk toegankelijk, wat een gestroomlijnde ervaring biedt voor gebruikers van schermlezers. Maar soms voldoet het standaardtoegankelijkheidsgedrag niet volledig aan de behoeften van de gebruiker.

Wanneer een gebruiker bijvoorbeeld van Toplabel naar de eerste cel in de collectieweergave navigeert, kan het handig zijn om extra context te bieden, zoals 'Tabel met n rijen en kolommen'. Dit vergroot de duidelijkheid en bruikbaarheid, vooral voor rasters of complexe datastructuren.

Aan de andere kant, als u in omgekeerde richting navigeert, van het Onderlabel terug naar de laatste cel, kan het aanpassen van de tekst ervoor zorgen dat interacties intuïtiever en naadloos aanvoelen. Laten we eens kijken hoe deze dynamische aanpassing in Swift kan worden bereikt met behulp van voorbeelden uit de praktijk. 🚀

Toegankelijkheidslabels optimaliseren met dynamische focus

In het eerste scriptvoorbeeld gebruiken we de `didUpdateFocusIn`-methode van het UICollectionViewDelegate-protocol om bij te houden wanneer de VoiceOver-focus tussen elementen beweegt. Met deze methode kunnen ontwikkelaars zowel de eerder gerichte weergave als de volgende detecteren, waardoor deze ideaal is voor contextbewuste aanpassingen. Door te controleren of de volgende gerichte weergave een UICollectionViewCell is, werkt het script de eigenschap accessibilityLabel dynamisch bij met relevante context. Wanneer we bijvoorbeeld de focus van het bovenste label naar een verzamelcel verplaatsen, voegen we informatie toe zoals 'tabel met n rijen en kolommen”, wat extra duidelijkheid biedt voor gebruikers die afhankelijk zijn van ondersteunende technologieën. 🧑‍💻

Het tweede script hanteert een bredere aanpak en gebruikt NotificationCenter, waarbij wordt geluisterd naar de `UIAccessibility.elementFocusedNotification`. Deze melding zendt wijzigingen in de focus van VoiceOver door de hele app uit. Door deze melding af te handelen, bepaalt het script dynamisch welk element focus heeft en wordt het accessibilityLabel dienovereenkomstig bijgewerkt. Deze aanpak is met name handig wanneer meerdere componenten in een complexe gebruikersinterface soortgelijke focusbewuste updates nodig hebben. Stel je bijvoorbeeld een raster van interactieve kaarten voor waarbij elke kaart zijn beschrijving verandert op basis van de focusrichting. Dit wordt efficiënt afgehandeld met behulp van meldingen.

Beide benaderingen zijn modulair en herbruikbaar. Het eerste script is nauw geïntegreerd met UICollectionView, waardoor het een ideale oplossing is voor UI's die sterk gebaseerd zijn op collectieweergaven. Aan de andere kant is het op meldingen gebaseerde script flexibeler en werkt het goed in verschillende lay-outs, zoals rasters gecombineerd met labels en knoppen. Het gebruik van aangepaste eigenschappen zoals `customAccessibilityLabel` zorgt ervoor dat updates van toegankelijkheidstekst de basisfunctionaliteit van UI-elementen niet verstoren. Wanneer in een reisapp de focus bijvoorbeeld verschuift naar een bestemmingskaart, kunnen de details van de kaart dynamisch aangeven of deze deel uitmaakt van een uitgelichte lijst of van aanbevelingen, waardoor de gebruikerservaring wordt verrijkt. ✈️

De sleutel tot deze implementaties is ervoor te zorgen dat het accessibilityLabel beknopt en toch beschrijvend is. Het toevoegen van directionele context wanneer de focus verschuift, kan verwarring voorkomen bij gebruikers die door complexe interfaces navigeren. Door bijvoorbeeld 'Toplabel voor cel 1, tabel' op te geven, kunnen gebruikers zowel hun positie in de gebruikersinterface als de structuur waarmee ze communiceren begrijpen. Deze doordachte integratie van toegankelijkheidsfuncties voldoet niet alleen aan de WCAG-richtlijnen, maar creëert ook een intuïtieve, gebruikersgerichte ervaring. Beide oplossingen zorgen ervoor dat toegankelijkheid een eersteklas burger blijft bij de ontwikkeling van iOS-apps.

// Approach 1: Using Accessibility Focus Delegates
import UIKit
class AccessibleCollectionViewCell: UICollectionViewCell {
    override var accessibilityLabel: String? {
        get {
            return customAccessibilityLabel
        }
        set {
            customAccessibilityLabel = newValue
        }
    }
    private var customAccessibilityLabel: String?
}
class ViewController: UIViewController, UICollectionViewDelegate {
    @IBOutlet weak var topLabel: UILabel!
    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var bottomLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
    }
    func collectionView(_ collectionView: UICollectionView,
                        didUpdateFocusIn context: UICollectionViewFocusUpdateContext,
                        with coordinator: UIFocusAnimationCoordinator) {
        if let nextFocusedCell = context.nextFocusedView as? AccessibleCollectionViewCell {
            let direction = context.previouslyFocusedView is UILabel ? "table with n Rows, n Columns" : ""
            nextFocusedCell.accessibilityLabel = "\(nextFocusedCell.customAccessibilityLabel ?? ""), \(direction)"
        }
    }
}

// Approach 2: Using Notification Center
import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!
    private var lastFocusedElement: UIView?
    override func viewDidLoad() {
        super.viewDidLoad()
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(handleFocusChange),
                                               name: UIAccessibility.elementFocusedNotification,
                                               object: nil)
    }
    @objc private func handleFocusChange(notification: Notification) {
        guard let userInfo = notification.userInfo,
              let focusedElement = userInfo[UIAccessibility.focusedElementUserInfoKey] as? UIView else { return }
        if let cell = focusedElement as? UICollectionViewCell,
           lastFocusedElement is UILabel {
            cell.accessibilityLabel = "\(cell.accessibilityLabel ?? ""), table with n Rows, n Columns"
        }
        lastFocusedElement = focusedElement
    }
}

Dynamische en contextuele toegankelijkheidservaringen creëren

Toegankelijkheid is een hoeksteen van de moderne app-ontwikkeling, vooral voor platforms zoals iOS, waar ondersteunende tools zoals VoiceOver een centrale rol spelen. Een genuanceerd maar vaak over het hoofd gezien aspect is de mogelijkheid om dynamische context te bieden op basis van de focusrichting van navigatie. Door logica te implementeren die bijhoudt of de focus van boven naar beneden verschuift of andersom, kunnen ontwikkelaars betekenisvolle details toevoegen aan de toegankelijkheidstekst van elementen, waardoor de gebruikerservaring wordt verrijkt. In een op rasters gebaseerde galerij-app kunnen cellen bijvoorbeeld hun locatie en context beschrijven wanneer de focus verschuift van een kop naar het raster, waardoor gebruikers hun plaats binnen de structuur kunnen begrijpen. 🔍

Een ander cruciaal punt is dat deze dynamische aanpassing niet beperkt is tot UICollectionView. Het kan ook worden toegepast op andere elementen zoals UITableView, stapels of aangepaste weergaven. Als een gebruiker bijvoorbeeld door een tabel met meerdere secties navigeert, kunnen kopteksten context toevoegen over de rijen eronder wanneer de focus de sectie binnenkomt of verlaat. Dit zorgt ervoor dat gebruikers die met VoiceOver navigeren zonder extra inspanning ruimtelijk en hiërarchisch inzicht in de interface kunnen krijgen, waardoor de bruikbaarheid en naleving van WCAG-standaarden worden bevorderd. 🎯

Naast basisgebruiksscenario's ondersteunt deze techniek ook geavanceerde interactiepatronen. Wanneer een quizvraag in een educatieve app bijvoorbeeld meer aandacht krijgt, kan deze details zoals het vraagnummer, het totale aantal resterende vragen of zelfs hints over het onderwerp aankondigen. Dergelijke details vergroten de betrokkenheid en verminderen de cognitieve belasting voor gebruikers die afhankelijk zijn van ondersteunende technologieën. Ontwikkelaars moeten prioriteit geven aan deze dynamische verbeteringen om ervoor te zorgen dat hun apps een divers publiek effectief en inclusief kunnen bedienen. 🌍