Content Description: що це, принципи та як задавати для accessibility

Що таке Content Description у доступності

Content Description — це рядкова властивість елемента інтерфейсу, яка передає текстове представлення візуального контенту допоміжним технологіям. Screen reader (VoiceOver в iOS, TalkBack в Android) зачитує опис замість того, щоб намагатися розпізнати елемент візуально. Опис застосовується до зображень без текстового шару, іконок, графіків, кастомних контролів та будь-яких нетекстових елементів.

За даними Google Material Design, 2024, елементи без contentDescription порушують правило WCAG 1.1.1 (Non-text Content). Перевірка Accessibility Scanner показує, що до 40% іконок у магазинних застосунках не мають опису. Користувач VoiceOver чує «зображення» або «кнопка» без уточнення — такий інтерфейс стає непридатним для навігації.

Content Description не замінює видимий текст елемента. Якщо кнопка містить текстову мітку «Надіслати», задавати додатковий опис не потрібно — screen reader прочитає текст. Для зображень, іконок та полів введення опис обов'язковий.

Інструмент Accessibility Scanner (Android) та Xcode Accessibility Inspector (iOS) автоматично перевіряють наявність описів. Рекомендується прогоняти ці перевірки на кожному екрані перед релізом.

Навіщо потрібен Content Description: сценарії користувачів

Користувач з порушенням зору покладається на VoiceOver для розуміння інтерфейсу. Якщо іконка кошика не має опису, він чує лише «кнопка». Щоб дізнатися, що робить кнопка, йому доводиться натискати її наосліп — ризик незворотної дії. Опис «Видалити товар з кошика» вирішує цю проблему за одну секунду.

Користувач з тимчасовими обмеженнями (яскраве сонце на вулиці, зламаний екран) теж використовує VoiceOver. За даними Apple Accessibility Report, 2023, близько 20% користувачів VoiceOver не мають постійних порушень зору — вони вмикають функцію ситуативно.

WCAG 1.1.1: Non-text Content

Критерій WCAG 1.1.1 (рівень A) вимагає, щоб будь-який нетекстовий контент мав текстову альтернативу. Виняток: контент, який є декоративним, використовується лише для візуального оформлення або не несе інформації. Тест на декоративність: якщо видалити елемент, чи зміниться зміст сторінки? Якщо ні — можна приховати від screen reader.

Чим Content Description відрізняється від Label

Accessibility Label (accessibilityLabel в iOS) — це ім'я елемента, яке screenreader вимовляє при фокусі. Content Description (accessibilityHint в iOS) — додаткове пояснення, яке озвучується після імені та повідомляє результат дії.

Відмінність добре видно на прикладі кнопки «Кошик». Label: «Кошик». Description: «Відкриє екран оформлення замовлення». VoiceOver вимовляє: «Кошик. Відкриє екран оформлення замовлення». Якщо задати лише Label, користувач не дізнається, що відбудеться після натискання.

Таблиця: Label versus Description

Правило: Label відповідає на питання «Що це?», Description — «Що відбудеться?». В Android contentDescription може виконувати обидві ролі, але на практиці краще розділяти: використовувати конкатенацію «[ім'я], [пояснення]».

Коли Description важливіший за Label

Для складних жестів (змахування для видалення, довге натискання для контекстного меню) accessibilityHint обов'язковий. Користувач VoiceOver не знає про приховані жести, якщо вони не описані. Вказуйте: «Змахніть вліво для видалення» в hint елемента.

iOS: атрибут accessibilityHint

В iOS платформі accessibilityHint задається через однойменну властивість UIView або NSObject. Значення — рядок до 80 символів. VoiceOver зачитує hint після label, якщо включено режим докладних описів (в налаштуваннях VoiceOver — «Verbosity»).

Приклад завдання hint для кастомної кнопки:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Додати в обране"
        self.accessibilityHint = "Збереже товар у списку обраного"
    }
}

Для UIImageView без текстового контенту обов'язково задавати isAccessibilityElement = true та accessibilityHint:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Графік продажів за останній квартал"

VoiceOver читає: «Графік продажів за останній квартал». Якщо hint порожній — лише «зображення». Apple HIG, 2024 рекомендує не вживати в hint дієслова на кшталт «натисніть» або «торкніться» — VoiceOver автоматично додає інструкцію з жесту.

SwiftUI: модифікатор accessibilityHint

В SwiftUI hint задається через chain-модифікатор:

Image(systemName: "trash")
    .accessibilityLabel("Видалити")
    .accessibilityHint("Безповоротно видалить вибраний елемент")

SwiftUI автоматично об'єднує модифікатори для складених view. Якщо Image знаходиться всередині Button, SwiftUI використовує label кнопки як основний accessibilityLabel.

Android: властивість contentDescription

В Android contentDescription задається або в XML-розмітці, або програмно через setContentDescription(). TalkBack озвучує опис при фокусі на елементі.

Приклад в XML:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Пошук товарів" />

Програмне встановлення для динамічних елементів:

binding.iconSearch.contentDescription =
    "Пошук. Відкриє екран пошуку з фільтрами"

Для декоративних зображень (роздільники, фони, декоративні іконки) задавайте contentDescription = "@null" або setContentDescription(null) — TalkBack пропустить такий елемент. В XML: android:contentDescription="@null". Порожній рядок "" не працює — TalkBack все одно озвучить «зображення».

Android: важливі деталі для ImageButton та CheckBox

Для ImageButton завжди задавайте contentDescription — TalkBack не бачить текст на зображенні. Для CheckBox опис має динамічно змінюватися: «Вибрано» / «Не вибрано» замість статичного опису. Використовуйте setContentDescription в слухачі стану.

Правила написання описів

Інформативність — опис має передавати сенс, а не зовнішній вигляд. Не «Синя іконка з галочкою», а «Товар додано в кошик». Screen reader не цікавиться кольорами — він цікавиться результатом.

Короткість — оптимальна довжина 2–4 слова (до 80 символів). Довгі описи затримують навігацію: VoiceOver читає послідовно, кожне слово — секунда часу користувача. За даними Apple WWDC 2023, «Accessibility by Design», фраза довша за 5 секунд читання перериває когнітивний потік.

Унікальність — на одному екрані не повинно бути двох елементів з однаковим описом. Користувач не зможе розрізнити, який результат викличе фокус на першому та на другому елементі. Якщо кнопок «Купити» декілька — додайте ідентифікатор: «Купити iPhone 15», «Купити iPhone 15 Pro».

Локалізація — Content Description перекладається на всі мови, які підтримує застосунок. Помилка локалізації опису — одна з частих причин провалу Accessibility Review в App Store.

Довжина опису: дослідження

Дослідження Nielsen Norman Group, 2024 показало, що оптимальна довжина опису для screen reader — 3–5 слів (до 50 символів). Більш довгі описи знижують швидкість навігації на 30%, оскільки користувач змушений чекати закінчення озвучування перед наступним кроком.

Типові помилки при використанні

Надмірність — опис дублює видимий текст. Якщо кнопка містить текст «Надіслати», не задавайте accessibilityHint = «Кнопка надіслати». VoiceOver прочитає текст автоматично, а hint додасть зайвий шум.

Плутанина з Label — використання contentDescription замість label для текстових кнопок. В iOS accessibilityLabel має збігатися з текстом кнопки (або бути порожнім, якщо текст вже видно), а hint — лише пояснювати дію. За даними Google Testing Blog, 2024, 23% перевірених застосунків у Play Store мають дублюючі описи.

Ігнорування динаміки — опис не оновлюється при зміні стану. Наприклад, у перемикача «Wi-Fi» опис залишається «Увімкнути Wi-Fi» навіть після ввімкнення. Правильно: динамічно змінювати опис на «Вимкнути Wi-Fi» через спостереження за станом.

Render-цикли та регресії

Після оновлення дизайну (зміна іконок, перестановка елементів) Content Description часто губиться. Причина: дизайнер замінює зображення, розробник не перевіряє accessibility-властивості нового асета. Рішення: зробити перевірку accessibility обов'язковим кроком code review — додати чек-лист з пунктом «Content Description оновлено?».

Як перевірити Content Description

• В iOS: Xcode → Accessibility Inspector — виберіть елемент, перевірте поля Label та Hint
• В Android: встановіть Accessibility Scanner з Play Store — запустіть на своєму екрані
• В обох платформах: увімкніть VoiceOver/TalkBack та пройдіть весь екран жестами
• Напишіть UI-тест, який перевіряє contentDescription для всіх ImageView

Приклад UI-тесту для iOS

func testContentDescriptionExists() {
    let app = XCUIApplication()
    app.launch()
    let image = app.images["chart-sales"]
    XCTAssertNotNil(image.label)
    XCTAssertGreaterThan(image.label.count, 0)
}