Доступність — основи, VoiceOver та TalkBack для незрячих користувачів

Що таке Доступність (a11y) у мобільних додатках?

Accessibility (скорочено a11y — 11 літер між «a» та «y») — практика розробки додатків, доступних для людей з порушеннями зору, слуху, моторики та когнітивними особливостями. У мобільній розробці доступність охоплює чотири основні сценарії: незрячі користувачі (екранні диктори), слабозорі (масштабування, контраст), глухі та слабочуючі (субтитри, візуальні альтернативи звуку), користувачі з обмеженою моторикою (голосове керування, Switch Control, великі області дотику).

Правові вимоги — у багатьох країнах доступність обов'язкова за законом. США: Section 508 та ADA. ЄС: European Accessibility Act (2025). Великобританія: Equality Act 2010. Без підтримки доступності додаток може стати об'єктом судового позову — у США за 2023 рік подано понад 4000 позовів про недоступність цифрових продуктів. Apple та Google перевіряють доступність під час модерації додатків: App Store Review Guidelines (4.2) та Google Play Store вимагають мінімальної підтримки доступності.

Бізнес-аргумент — доступність збільшує аудиторію. За даними Return on Disability (2021), люди з інвалідністю контролюють $13 трлн наявного доходу на рік. Доступні додатки також краще ранжуються в пошуку (семантичний HTML, альт-тексти), мають вищий рейтинг користувачів і менше відгуків про проблеми з UX. В IT Sectr ми включаємо доступність у definition of done всіх проектів — це стандарт якості, а не опціональне покращення.

Доступність в iOS: VoiceOver та UIAccessibility

VoiceOver — екранний диктор Apple, вбудований в iOS, iPadOS та macOS. Користувач проводить пальцем по екрану, VoiceOver читає назву елемента під пальцем. Подвійне торкання активує елемент. VoiceOver підтримує понад 40 жестів: три пальці свайп (гортання), два пальці подвійне торкання (стоп), Z-жест (повернення). Розробник керує тим, що і як читає VoiceOver, через протокол UIAccessibility та властивості accessibilityLabel, accessibilityTraits, accessibilityHint.

class CustomButton: UIButton {

    override var isAccessibilityElement: Bool {
        get { return true }
        set {}
    }

    // перевизначити accessibilityLabel
    override var accessibilityLabel: String? {
        get { return "Кнопка надсилання форми" }
        set {}
    }

    // перевизначити accessibilityHint
    override var accessibilityHint: String? {
        get { return "Двічі торкніться, щоб надіслати дані" }
        set {}
    }

    // перевизначити accessibilityTraits
    override var accessibilityTraits: UIAccessibilityTraits {
        get { return .button }
        set {}
    }
}

// Dynamic Type — масштабування тексту
titleLabel.font = UIFontMetrics.default.scaledFont(
    for: UIFont.systemFont(ofSize: 16)
)
titleLabel.adjustsFontForContentSizeCategory = true

Динамічна типографіка — Dynamic Type в iOS дозволяє користувачеві вибрати розмір тексту (від XS до XXXL). Розробник використовує UIFontMetrics.scaledFont для автоматичного масштабування. Текст повинен коректно відображатися на всіх розмірах: рядки не повинні обрізатися, кнопки повинні рости пропорційно тексту. UITableView автоматично оновлює висоту комірок при зміні розміру тексту. Проігнорувати Dynamic Type — означає зробити додаток недоступним для слабозорих користувачів.

Доступність в SwiftUI

SwiftUI надає модифікатори доступності: .accessibilityLabel(), .accessibilityHint(), .accessibilityAddTraits(), .accessibilitySortPriority(). За замовчуванням всі стандартні елементи SwiftUI (Text, Button, Image) вже є accessibility-елементами з автоматичними label. Для кастомних View використовуйте .accessibilityElement(children: .combine) для об'єднання дочірніх елементів в один. SwiftUI автоматично підтримує Dynamic Type та VoiceOver.

VStack {
    Image(systemName: "trash")
        .accessibilityLabel(Text("Видалити елемент"))
    Text("Кошик")
        .font(.body)
}
.accessibilityElement(children: .combine)
.accessibilityAddTraits(.isButton)
.accessibilityHint(Text("Видаляє вибраний елемент без можливості відновлення"))

Доступність в Android: TalkBack та contentDescription

TalkBack — екранний диктор Google, встановлений на більшості Android-пристроїв (доступний в Google Play для всіх версій Android 5+). TalkBack використовує ті ж жести, що й VoiceOver: свайп для навігації, подвійне торкання для активації. Розробник задає опис елементів через атрибут android:contentDescription в XML або через setContentDescription() в коді. Для ImageView contentDescription обов'язковий — без нього TalkBack повідомить «не марковано» або прочитає ім'я файлу.

// XML: contentDescription для ImageView
<ImageView
    android:id="@+id/iconDelete"
    android:src="@drawable/ic_delete"
    android:contentDescription="@string/delete_button_desc"
    android:focusable="true"
    android:clickable="true" />

// Kotlin: програмне завдання
iconDelete.contentDescription = getString(R.string.delete_button_desc)

// Accessibility Delegate (кастомний)
iconDelete.accessibilityDelegate = object : View.AccessibilityDelegate() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View, info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.text = "Кнопка видалення"
        info.contentDescription = "Видалити вибраний елемент"
        info.className = Button::class.java.name
    }
}

// Live Regions для динамічних оновлень
textView.accessibilityLiveRegion = View.ACCESSIBILITY_LIVE_REGION_POLITE

Live Regions — механізм Android для сповіщення TalkBack про зміну вмісту без фокусу. Атрибут android:accessibilityLiveRegion приймає три значення: none (немає сповіщень), polite (оголосити після поточного), assertive (оголосити негайно). Використовуйте polite для оновлення статусу завантаження, assertive — для критичних помилок. Зловживання assertive призведе до хаосу для користувача — TalkBack буде постійно переривати поточну дію.

Accessibility Scanner

Accessibility Scanner — безкоштовний додаток від Google для тестування доступності Android-додатків без доступу до вихідного коду. Сканер перевіряє: контраст тексту, розмір сенсорних областей (мінімум 48×48dp згідно з Android Accessibility Guidelines), contentDescription для ImageView, коректність ієрархії елементів. Для автоматичних тестів використовуйте AccessibilityChecks з Espresso — вони інтегруються в CI/CD та перевіряють доступність при кожній збірці.

WCAG 2.1: контраст, розмір та сенсорні області

WCAG 2.1 (Web Content Accessibility Guidelines) — міжнародний стандарт доступності, розроблений W3C. Версія 2.1 (2018) включає 13 додаткових критеріїв для мобільних додатків. Рівні відповідності: A (мінімальний), AA (обов'язковий для більшості організацій), AAA (максимальний). Apple та Google рекомендують рівень AA як мінімальний для публікації додатків. WCAG 2.2 вийшов у 2023 році з уточненнями для фокусу та введення.

Ключові критерії для мобільної розробки: контраст тексту не менше 4.5:1 (AA) або 7:1 (AAA), розмір сенсорних областей мінімум 44×44pt (iOS) або 48×48dp (Android), підтримка альбомної та портретної орієнтації без втрати функціональності, можливість відключення анімації (prefers-reduced-motion), наявність підписів до мультимедіа, сумісність з голосовим керуванням (Voice Control на iOS, Voice Access на Android).

Інструменти перевірки контрасту — Colour Contrast Analyser (TPGI), WebAIM Contrast Checker, Stark (Figma), Accessibility Inspector (Xcode). В IT Sectr ми перевіряємо контраст на етапі дизайну (Figma + Stark) та повторно на етапі розробки (Accessibility Inspector / Accessibility Scanner). Мінімальна вимога — 4.5:1 для всього тексту менше 18pt (14pt bold). Для логотипів та декоративних елементів контраст не потрібен.

Тестування доступності: інструменти та чеклист

Тестування iOS — Accessibility Inspector в Xcode (Xcode → Open Developer Tool → Accessibility Inspector) перевіряє label, traits, hint для кожного елемента. VoiceOver можна ввімкнути в налаштуваннях або через Accessibility Shortcut (потрійне натискання кнопки). Для автоматичних тестів використовуйте XCUITest з XCTAssertTrue(app.staticTexts["label"].isAccessibilityElement). Apple рекомендує протестувати всі екрани додатку з увімкненим VoiceOver.

Тестування Android — Accessibility Scanner (Play Store) перевіряє контраст, розмір сенсорних областей, contentDescription. Для автоматизації: Espresso AccessibilityChecks (імпорт: androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1'). Google рекомендує чеклист: кожен ImageView має contentDescription, сенсорні області не менше 48×48dp, текст масштабується до 200% без обрізання, всі елементи досяжні свайпом TalkBack.

Чеклист IT Sectr — перед релізом ми перевіряємо: (1) VoiceOver/TalkBack коректно читає всі елементи, (2) текст масштабується до максимального розміру без втрати функціональності, (3) всі ImageView мають contentDescription, (4) контраст тексту ≥4.5:1 у всіх темах, (5) сенсорні області ≥44pt/48dp, (6) немає контекстного меню, доступного тільки по довгому натисканню, (7) підтримка Reduce Motion / Remove Animations в системних налаштуваннях. Цей чеклист входить у definition of done кожного спринту.