VoiceOver: що це, жести керування та можливості на iOS

Що таке VoiceOver?

VoiceOver — це екранний диктор (screen reader), вбудований в операційні системи Apple. Він призначений для незрячих та слабозорих користувачів і забезпечує повноцінну взаємодію з пристроєм без візуального контакту. VoiceOver озвучує всі елементи інтерфейсу: кнопки, посилання, текст, зображення, сповіщення та системні елементи.

Технологію було вперше представлено в 2005 році для macOS, а на iOS вона з'явилася разом з iPhone 3GS у 2009 році. З тих пір VoiceOver став невід'ємною частиною екосистеми Apple та одним із головних аргументів на користь доступності платформи. VoiceOver вбудовано на системному рівні — це означає, що він працює в будь-якому додатку без додаткової інтеграції з боку розробника, хоча якість озвучення безпосередньо залежить від того, наскільки добре додаток використовує API доступності iOS.

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

Як працює VoiceOver?

VoiceOver перехоплює події дотику та інтерпретує їх інакше, ніж стандартне введення iOS. Коли користувач торкається екрана, VoiceOver не активує елемент під пальцем, а спочатку озвучує його. Тільки після подвійного дотику елемент активується. Це ключова відмінність, яка дозволяє незрячим користувачам досліджувати інтерфейс без ризику випадкового натискання.

Порядок читання та навігація

VoiceOver читає елементи інтерфейсу в логічному порядку: зліва направо, зверху вниз. Порядок читання успадковується з ієрархії представлень iOS, але розробник може змінити його через властивість accessibilityElements для складних макетів. Користувач може переміщуватися між елементами свайпом вправо (наступний) та вліво (попередній), а також торкатися конкретного елемента для його озвучення.

При кожному переміщенні VoiceOver вимовляє тип елемента (кнопка, посилання, заголовок), його назву (accessibilityLabel), стан (вибрано, вимкнено) та підказку (accessibilityHint). Якщо елемент містить значення — наприклад, повзунок гучності — VoiceOver озвучує і його. Accessibility Traits (UIAccessibilityTraits) додатково повідомляють користувачеві про поведінку елемента: чи є він кнопкою, перемикачем, пошуком або клавішею клавіатури.

Ротор VoiceOver

Ротор — це віртуальна ручка налаштування, яка перемикає режим навігації VoiceOver. Користувач обертає ротор двома пальцями (як ручку гучності) та вибирає режим: слова, символи, заголовки, посилання, точки входу, рядки таблиці та інші. Режим заголовків дозволяє швидко перемикатися між H1-H6 на веб-сторінках та в додатках, а режим символів — вимовляти текст по літерах, що корисно при заповненні форм або введенні кодів підтвердження.

Розробник може додавати власні режими в ротор через API UIAccessibilityCustomRotor. Наприклад, у додатку для нотаток можна додати ротор «Улюблені нотатки» або «Останні зміни». Користувальницькі ротори значно прискорюють навігацію в специфічних додатках і вважаються найкращою практикою accessibility на iOS.

Жести керування VoiceOver

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

Жест подвійний дотик є основним способом активації елементів у VoiceOver. Якщо елемент потребує спеціальної дії (наприклад, перетягування), VoiceOver використовує послідовність «дотик — подвійний дотик і утримання» для входу в режим переміщення. Це дозволяє виконувати складні жести, такі як drag-and-drop, не бачачи екран. VoiceOver також підтримує жест «подвійний дотик двома пальцями» для скасування дії та «потрійний дотик» для вмикання/вимикання екранної шторки (Screen Curtain).

VoiceOver у мобільній розробці

Розробник iOS-додатку може значно покращити взаємодію з VoiceOver через API UIAccessibility. Базові налаштування доступності додаються в Interface Builder (Identity Inspector → Accessibility), але для складних інтерфейсів потрібне програмне налаштування в коді.

Accessibility Label та Traits

Властивість accessibilityLabel задає текст, який VoiceOver вимовляє для елемента. Якщо label не задано, VoiceOver використовує текст кнопки або заповнювач текстового поля. Для елементів без тексту (іконок, кастомних view) label обов'язковий. Властивість accessibilityTraits визначає тип елемента: кнопка, заголовок, перемикач, пошук, клавіша клавіатури, значення змінюється, посилання та інші.

let profileButton = UIButton(type: .custom)
profileButton.setImage(UIImage(named: "avatar"), for: .normal)
profileButton.isAccessibilityElement = true
profileButton.accessibilityLabel = "Профіль користувача"
profileButton.accessibilityTraits = .button
profileButton.accessibilityHint = "Відкриває екран налаштувань профілю"

Прапорець isAccessibilityElement вмикає підтримку VoiceOver для кастомних view — за замовчуванням він дорівнює true лише для стандартних елементів (UIButton, UILabel, UITextField). Параметр accessibilityHint додає підказку: VoiceOver вимовляє її після паузи, якщо користувач затримується на елементі. Hint має описувати результат дії, а не інструкцію: «Відкриває екран налаштувань» замість «Натисніть, щоб відкрити».

Групування та порядок елементів

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

let productCard = UIView()
let productImage = UIImageView()
let productName = UILabel()
let productPrice = UILabel()
let addToCartButton = UIButton()

productCard.accessibilityElements = [
    productImage, productName, productPrice, addToCartButton
]

Для об'єднання кількох елементів в один доступний елемент використовується UIAccessibilityContainer або accessibilityFrame для перевизначення області дотику. Це корисно, коли комірка таблиці містить кілька UI-компонентів, але логічно представляє один елемент — VoiceOver має озвучити всю комірку цілком, а не перебирати її вміст окремо.

Налаштування доступності для VoiceOver

Коректне налаштування доступності для VoiceOver потребує уваги до кількох аспектів: семантична розмітка, динамічні оновлення, обробка користувацьких елементів і тестування з реальним screen reader'ом.

Семантична розмітка в SwiftUI

У SwiftUI доступність налаштовується через модифікатори .accessibilityLabel(), .accessibilityValue(), .accessibilityHint() та .accessibilityAddTraits(). SwiftUI автоматично успадковує доступність зі стандартних елементів, але для кастомних компонентів потрібне явне налаштування. Наприклад, кастомний повзунок має повідомляти VoiceOver своє значення та формат зміни.

Slider(value: $volume, in: 0...100)
    .accessibilityLabel("Гучність звуку")
    .accessibilityValue(
        Text("\(Int(volume)) відсотків")
    )
    .accessibilityAddTraits(.adjustsAudioForAccessibility)
    .accessibilityAdjustableAction { direction in
        switch direction {
        case .increment: volume = min(volume + 5, 100)
        case .decrement: volume = max(volume - 5, 0)
        }
    }

Модифікатор accessibilityAdjustableAction додає можливість зміни значення жестами VoiceOver: свайп вгору — збільшити, свайп вниз — зменшити. Без цього модифікатора повзунок залишиться недоступним для керування через screen reader. Аналогічне налаштування потрібне для кастомних stepper'ів, picker'ів та інших елементів, що змінюють своє значення.

Динамічні оновлення та сповіщення

Коли контент на екрані змінюється динамічно (з'явилося сповіщення, оновився статус завантаження, змінилася ціна), VoiceOver має отримати сповіщення через UIAccessibility.post. Без цього виклику screen reader не дізнається про зміни та користувач пропустить важливу інформацію. Для SwiftUI використовується модифікатор .accessibilityAnnouncement().

UIAccessibility.post(
    notification: .announcement,
    argument: "Ціну знижено на 20 відсотків"
)

// SwiftUI
Text("Ціну оновлено")
    .accessibilityAnnouncement(Text("Знижка 20%"))

Сповіщення VoiceOver слід використовувати осмислено: надмірні оголошення дратують користувача, а їх відсутність робить додаток недоступним. Оптимальна стратегія — оголошувати лише ті зміни, які впливають на поточний робочий процес користувача: оновлення кошика, статус завантаження, помилка валідації форми, сповіщення чату. Фонові зміни (час на панелі, курс валют) не потребують оголошення — користувач сам перевірить їх за необхідності.

Тестування VoiceOver виконується через фізичний пристрій з увімкненим screen reader'ом або симулятор iOS з опцією Accessibility Inspector. Важливо перевірити сценарії повного використання: без зорового контролю пройти реєстрацію, оформити замовлення, знайти товар за пошуком. Якщо маршрут прохідний без візуального зворотного зв'язку — VoiceOver налаштовано коректно.