Налаштування тексту спеціальних можливостей у Swift на основі напрямку фокусу

Покращення доступності VoiceOver для динамічних елементів інтерфейсу користувача

Створюючи інклюзивну програму для iOS, розробники часто стикаються з унікальними проблемами з функцією VoiceOver. Поширене запитання полягає в тому, чи можна текст спеціальних можливостей UIView динамічно адаптувати залежно від напрямку переміщення фокуса. 🧭

Уявіть собі макет із Верхньою міткою, переглядом колекції, що діє як сітка комірок, і Нижньою міткою. Кожна комірка в поданні колекції доступна незалежно, що забезпечує спрощений досвід для користувачів програм зчитування з екрана. Але іноді стандартна поведінка доступності не повністю відповідає потребам користувача.

Наприклад, коли користувач переходить від Верхньої мітки до першої комірки в перегляді колекції, може бути корисним надати додатковий контекст, як-от «Таблиця з n рядків і стовпців». Це покращує ясність і зручність використання, особливо для сіток або складних структур даних.

З іншого боку, під час навігації у зворотному напрямку, від Нижньої мітки назад до останньої клітинки, налаштування тексту може зробити взаємодію більш інтуїтивно зрозумілою та плавною. Давайте зануримося в те, як це динамічне коригування можна досягти в Swift, використовуючи реальні приклади. 🚀

Оптимізація міток доступності за допомогою динамічного фокусу

У першому прикладі сценарію ми використовуємо метод `didUpdateFocusIn` з протоколу UICollectionViewDelegate, щоб відстежувати, коли фокус VoiceOver переміщується між елементами. Цей метод дозволяє розробникам виявляти як попередньо сфокусований перегляд, так і наступний, що робить його ідеальним для коригування з урахуванням контексту. Перевіряючи, чи є наступний вид у фокусі UICollectionViewCell, сценарій динамічно оновлює властивість accessibilityLabel з відповідним контекстом. Наприклад, під час переміщення фокуса з верхньої мітки до комірки колекції ми додаємо таку інформацію, як "таблиця з n рядків і стовпців", надаючи додаткову ясність для користувачів, які покладаються на допоміжні технології. 🧑‍💻

Другий сценарій використовує ширший підхід, використовуючи NotificationCenter, прослуховуючи `UIAccessibility.elementFocusedNotification`. Це сповіщення транслює зміни у фокусі VoiceOver у програмі. Обробляючи це сповіщення, сценарій динамічно визначає, який елемент має фокус, і відповідно оновлює його accessibilityLabel. Цей підхід особливо корисний, коли кілька компонентів у складному інтерфейсі користувача потребують однакових оновлень з урахуванням фокусу. Наприклад, уявіть сітку інтерактивних карток, де кожна картка змінює свій опис залежно від напрямку фокусу — це ефективно обробляється за допомогою сповіщень.

Обидва підходи є модульними та багаторазовими. Перший сценарій тісно інтегрований з UICollectionView, що робить його ідеальним рішенням для інтерфейсів користувача, які значною мірою базуються на представленнях колекції. З іншого боку, сценарій на основі сповіщень є більш гнучким і добре працює в різних макетах, таких як сітки в поєднанні з мітками та кнопками. Використання настроюваних властивостей, таких як `customAccessibilityLabel`, гарантує, що оновлення тексту спеціальних можливостей не заважатимуть базовій функціональності елементів інтерфейсу користувача. Наприклад, у додатку для подорожей, коли фокус переміщується на картку призначення, деталі картки можуть динамічно включати, чи є вона частиною рекомендованого списку чи рекомендацій, збагачуючи взаємодію з користувачем. ✈️

Ключем до цих реалізацій є те, що accessibilityLabel є лаконічним, але описовим. Додавання спрямованого контексту під час зміщення фокусу може запобігти плутанині для користувачів, які переміщуються складними інтерфейсами. Наприклад, якщо вказати «Верхня мітка до комірки 1, таблиця», користувачі зможуть зрозуміти як свою позицію в інтерфейсі користувача, так і структуру, з якою вони взаємодіють. Ця продумана інтеграція функцій доступності не тільки відповідає вимогам WCAG, але й створює інтуїтивно зрозумілий, орієнтований на користувача досвід. Обидва рішення гарантують, що доступність залишається першокласним громадянином у розробці додатків для 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
    }
}

Створення динамічної та контекстної доступності

Доступність є наріжним каменем розробки сучасних додатків, особливо для таких платформ, як iOS, де такі допоміжні інструменти, як VoiceOver, відіграють ключову роль. Додатковий, але часто забутий аспект — це здатність надавати динамічний контекст на основі напрямку фокусу навігації. Впроваджуючи логіку, яка відстежує, чи переміщується фокус зверху вниз чи навпаки, розробники можуть додавати важливі деталі до тексту спеціальних можливостей елементів, збагачуючи взаємодію з користувачем. Наприклад, у додатку галереї на основі сітки клітинки можуть описувати своє розташування та контекст, коли фокус переміщується з заголовка на сітку, допомагаючи користувачам зрозуміти їх місце в структурі. 🔍

Іншим важливим моментом є те, що це динамічне налаштування не обмежується UICollectionView. Він також може бути застосований до інших елементів, таких як UITableView, стеки або власні перегляди. Наприклад, якщо користувач переміщується таблицею з кількома розділами, заголовки можуть додати контекст про рядки під ними, коли фокус входить у розділ або виходить із нього. Це гарантує, що користувачі, які переміщуються за допомогою VoiceOver, можуть отримати просторову та ієрархічну обізнаність про інтерфейс без додаткових зусиль, сприяючи зручності використання та відповідності стандартам WCAG. 🎯

Окрім базових випадків використання, ця техніка також підтримує розширені моделі взаємодії. Наприклад, в освітній програмі, коли запитання вікторини стає фокусом, воно може повідомляти такі деталі, як номер запитання, загальна кількість запитань, що залишилися, або навіть підказки щодо теми. Такі деталі посилюють залучення та зменшують когнітивне навантаження для користувачів, які покладаються на допоміжні технології. Розробники повинні визначити пріоритети цих динамічних покращень, щоб гарантувати, що їхні додатки обслуговують різноманітну аудиторію ефективно та інклюзивно. 🌍