Доступність у мобільній розробці: що це, які стандарти та як реалізувати

Що таке доступність?

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

Інклюзивність — не лише етичний, але й юридичний обов'язок. У багатьох країнах діють закони про цифрову доступність: ADA (США), Section 508, European Accessibility Act (ЄС, з 2025 року — обов'язковий для застосунків). За даними Business Disability Forum, компанії, які інвестують у доступність, збільшують аудиторію на 15–20% та знижують юридичні ризики.

У IT Sectr ми перевіряємо доступність на кожному етапі розробки. Наш досвід показує: виправлення проблем доступності на етапі дизайну обходиться в 10 разів дешевше, ніж після релізу. Доступність — це не фіча, а базова вимога до сучасного застосунку.

iOS: VoiceOver, Accessibility Label, Trait

Екосистема Apple пропонує потужні інструменти доступності. VoiceOver — вбудований скринрідер, який озвучує все, що відбувається на екрані. Користувач керує пристроєм жестами: свайп вправо — наступний елемент, свайп вліво — попередній, подвійне натискання — активація.

Accessibility Label — це текст, який VoiceOver читає для елемента. За замовчуванням iOS використовує текст кнопки або label, але для іконок та графічних елементів потрібно задати label явно. Accessibility Trait — властивість, що описує тип елемента: button (кнопка), header (заголовок), link (посилання), image (зображення). Правильні traits допомагають користувачеві зрозуміти, як взаємодіяти з елементом.

VoiceOver та Accessibility Label

VoiceOver підтримує понад 40 мов і працює на всіх пристроях Apple. Для розробника головне — задати коректні accessibilityLabel та accessibilityTraits для кожного елемента інтерфейсу. Якщо елемент не повинен бути доступним (декоративне зображення), встановіть isAccessibilityElement = false.

// Swift — налаштування accessibility для кнопки
let shareButton = UIButton()
shareButton.setImage(UIImage(named: "share-icon"), for: .normal)
shareButton.accessibilityLabel = "Поділитися цією статтею"
shareButton.accessibilityHint = "Відкриває діалог вибору способу відправлення"
shareButton.accessibilityTraits = .button

// SwiftUI — ще простіше
struct ShareButtonView: View {
    var body: some View {
        Button(action: share) {
            Image(systemName: "square.and.arrow.up")
        }
        .accessibilityLabel("Поділитися")
        .accessibilityHint("Відкриває меню відправлення")
    }
}

Код показує налаштування accessibility для кнопки без тексту (тільки іконка). AccessibilityLabel — це те, що почує користувач. AccessibilityHint — додаткова підказка про результат дії. Не використовуйте в label фрази на кшталт «кнопка для» — Trait вже повідомляє, що це кнопка.

Android: TalkBack, Content Description

TalkBack — це скринрідер від Google для Android, що входить до пакету Android Accessibility Suite. Як і VoiceOver, він озвучує елементи інтерфейсу та керується жестами. TalkBack підтримує понад 100 мов і працює на всіх пристроях з Google Play Services.

Content Description — аналог accessibilityLabel на Android. Задається через атрибут android:contentDescription в XML або через метод setContentDescription() в коді. Для нефокусних елементів (декоративних ImageView) використовуйте importantForAccessibility="no".

TalkBack та Focus Order

Focus Order (порядок фокусу) — послідовність, в якій TalkBack переходить між елементами при свайпі. За замовчуванням Android використовує порядок розташування елементів в layout, але його можна змінити через атрибути accessibilityTraversalBefore та accessibilityTraversalAfter. Це важливо для складних екранів з кастомними компонентами.

У IT Sectr ми перевіряємо Focus Order на кожному екрані. Помилка порядку фокусу — одна з найчастіших проблем в accessibility. Наприклад, якщо після заголовка користувач переходить до коментарів, а не до тексту статті — це баг accessibility.

WCAG та стандарти

WCAG (Web Content Accessibility Guidelines) — міжнародний стандарт доступності, розроблений W3C. Поточна версія — WCAG 2.2 (2023). Стандарт ділиться на 4 принципи: Perceivable (сприйнятність), Operable (керованість), Understandable (зрозумілість), Robust (надійність) — абревіатура POUR.

Рівні WCAG: A (мінімальний), AA (середній, обов'язковий за законом в ЄС), AAA (максимальний). Для мобільних застосунків достатній рівень AA: контраст тексту не менше 4.5:1, підтримка скринрідерів, мінімальний розмір таргетів 44x44 пікселя, субтитри для відео.

Рівні WCAG

Рівень A — базові вимоги: текстові альтернативи для зображень, керування з клавіатури, контраст не менше 3:1. Рівень AA — середній: контраст 4.5:1, підтримка масштабування до 200%, правильні заголовки та label. Рівень AAA — високий: контраст 7:1, мова жестів для відео, повне керування голосом. На практиці більшість компаній цілиться на AA.

Таблиця 2. Порівняння iOS та Android API для доступності. Незважаючи на різні назви, концепції ідентичні: мітка, тип, порядок фокусу та підтримка адаптації тексту.

Тестування доступності

Тестування доступності — це перевірка застосунку на відповідність стандартам WCAG та коректну роботу зі скринрідерами. Мінімальний набір тестів: увімкнути VoiceOver/TalkBack і пройти по всіх екранах застосунку. На слух перевірте, що всі елементи озвучуються, порядок фокусу логічний, а неправильні елементи (декоративні) ігноруються.

Автоматизовані інструменти: Xcode Accessibility Inspector (аудит в Xcode для iOS), Android Accessibility Scanner (сканує екран і знаходить проблеми), Axe DevTools, WAVE. Ці інструменти перевіряють контрастність, розмір таргетів, наявність міток та інші параметри.

У IT Sectr ми проводимо accessibility-рев'ю перед кожним релізом. Процес включає: автоматичний аудит (Accessibility Inspector), ручне тестування з VoiceOver та TalkBack, перевірку контрастності та масштабування тексту. Ми фіксуємо проблеми в Jira і призначаємо їх на спринт. Це дозволяє підтримувати рівень AA WCAG на всіх проектах.