Rýchle prispôsobenie textu zjednodušenia ovládania podľa smeru zaostrenia

Zlepšenie dostupnosti funkcie VoiceOver pre dynamické prvky používateľského rozhrania

Pri vytváraní inkluzívnej aplikácie pre iOS vývojári často čelia jedinečným výzvam s funkciou VoiceOver. Bežnou otázkou je, či sa text prístupnosti UIView dokáže dynamicky prispôsobiť na základe smeru pohybu zaostrenia. 🧭

Predstavte si rozloženie s Horným štítkom, zobrazením kolekcie fungujúcim ako mriežka buniek a Spodným štítkom. Každá bunka v zobrazení kolekcie je nezávisle prístupná a poskytuje používateľom čítačky obrazovky zjednodušené prostredie. Niekedy však predvolené správanie prístupnosti úplne nespĺňa potreby používateľa.

Napríklad, keď používateľ prejde z Top Label do prvej bunky v zobrazení kolekcie, môže byť užitočné poskytnúť ďalší kontext, ako napríklad „Tabuľka s n riadkami a stĺpcami“. To zvyšuje prehľadnosť a použiteľnosť, najmä pre mriežky alebo zložité dátové štruktúry.

Na druhej strane, pri spätnej navigácii, od dolného označenia späť po poslednú bunku, môže prispôsobenie textu spôsobiť, že interakcie budú intuitívnejšie a bezproblémovejšie. Poďme sa ponoriť do toho, ako možno túto dynamickú úpravu dosiahnuť v Swift na príkladoch z reálneho sveta. 🚀

Optimalizácia štítkov dostupnosti s dynamickým zameraním

V prvom príklade skriptu používame metódu `didUpdateFocusIn` z protokolu UICollectionViewDelegate na sledovanie pohybu zamerania VoiceOver medzi prvkami. Táto metóda umožňuje vývojárom rozpoznať predchádzajúce aj nasledujúce zobrazenie, vďaka čomu je ideálna pre kontextové úpravy. Kontrolou, či je ďalšie aktívne zobrazenie UICollectionViewCell, skript dynamicky aktualizuje vlastnosť accessibilityLabel s relevantným kontextom. Napríklad pri presúvaní zamerania z horného štítka na bunku kolekcie pripájame informácie ako „tabuľka s n riadkami a stĺpcami,“ poskytuje dodatočnú prehľadnosť pre používateľov, ktorí sa spoliehajú na asistenčné technológie. 🧑‍💻

Druhý skript využíva širší prístup pomocou NotificationCenter, pričom počúva „UIAccessibility.elementFocusedNotification“. Toto upozornenie vysiela zmeny zamerania VoiceOver v celej aplikácii. Spracovaním tohto upozornenia skript dynamicky určí, ktorý prvok je zameraný, a podľa toho aktualizuje svoj označenie dostupnosti. Tento prístup je užitočný najmä vtedy, keď viaceré komponenty v zložitom používateľskom rozhraní potrebujú podobné aktualizácie s ohľadom na zameranie. Predstavte si napríklad mriežku interaktívnych kariet, kde každá karta mení svoj popis na základe smeru zaostrenia – toto sa efektívne rieši pomocou upozornení.

Oba prístupy sú modulárne a opakovane použiteľné. Prvý skript je úzko integrovaný s UICollectionView, vďaka čomu je ideálnym riešením pre používateľské rozhrania výrazne založené na zobrazeniach kolekcie. Na druhej strane je skript založený na upozorneniach flexibilnejší a funguje dobre v rôznych rozloženiach, ako sú mriežky kombinované s menovkami a tlačidlami. Použitie vlastných vlastností, ako je `customAccessibilityLabel` zaisťuje, že aktualizácie textu prístupnosti nezasahujú do základnej funkčnosti prvkov používateľského rozhrania. Napríklad v cestovnej aplikácii, keď sa zameranie presunie na cieľovú kartu, podrobnosti o karte môžu dynamicky zahŕňať, či je súčasťou zoznamu odporúčaní alebo odporúčaní, čím sa obohatí používateľská skúsenosť. ✈️

Kľúčom k týmto implementáciám je zabezpečiť, aby bol accessibilityLabel stručný a zároveň popisný. Pridanie smerového kontextu pri posune zamerania môže zabrániť zmätku používateľov, ktorí sa pohybujú v zložitých rozhraniach. Napríklad zadaním položky „Top Label to Cell 1, table“ môžu používatelia pochopiť svoju pozíciu v používateľskom rozhraní a štruktúru, s ktorou interagujú. Táto premyslená integrácia funkcií dostupnosti nielenže spĺňa pokyny WCAG, ale vytvára aj intuitívny zážitok zameraný na používateľa. Obe riešenia zaisťujú, že dostupnosť zostane prvotriednym občanom pri vývoji aplikácií pre iOS.

// 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
    }
}

Vytváranie dynamických a kontextových skúseností s prístupnosťou

Dostupnosť je základným kameňom moderného vývoja aplikácií, najmä pre platformy ako iOS, kde pomocné nástroje ako VoiceOver zohrávajú kľúčovú úlohu. Odlišným, no často prehliadaným aspektom je schopnosť poskytnúť dynamický kontext založený na smere zaostrenia navigácie. Implementáciou logiky, ktorá sleduje, či sa zameranie presúva zhora nadol alebo naopak, môžu vývojári pridať zmysluplné detaily do textu prístupnosti prvkov, čím obohatia používateľskú skúsenosť. Napríklad v aplikácii galérie založenej na mriežke môžu bunky opísať svoju polohu a kontext, keď sa zameranie presunie z nadpisu do mriežky, čo používateľom pomôže pochopiť ich miesto v štruktúre. 🔍

Ďalším dôležitým bodom je, že táto dynamická úprava nie je obmedzená na UICollectionView. Dá sa použiť aj na iné prvky, ako je UITableView, zásobníky alebo vlastné zobrazenia. Ak napríklad používateľ prechádza v tabuľke s viacerými sekciami, hlavičky môžu pridať kontext o riadkoch pod nimi, keď zameranie vstúpi do sekcie alebo ju opustí. To zaisťuje, že používatelia navigujúci pomocou VoiceOver môžu získať priestorové a hierarchické povedomie o rozhraní bez ďalšieho úsilia, čím sa podporuje použiteľnosť a súlad so štandardmi WCAG. 🎯

Okrem základných prípadov použitia táto technika podporuje aj pokročilé vzorce interakcie. Napríklad vo vzdelávacej aplikácii, keď kvízová otázka získa zameranie, môže oznámiť podrobnosti, ako je číslo otázky, celkový počet zostávajúcich otázok alebo dokonca tipy na tému. Takéto detaily zvyšujú zapojenie a znižujú kognitívnu záťaž pre používateľov, ktorí sa spoliehajú na asistenčné technológie. Vývojári musia uprednostniť tieto dynamické vylepšenia, aby zabezpečili, že ich aplikácie budú efektívne a inkluzívne slúžiť rôznym publikám. 🌍