Content Description: ce este, principii și cum se setează pentru accessibility

Ce este Content Description în accessibility

Content Description — este o proprietate de șir a elementului de interfață care transmite reprezentarea textuală a conținutului vizual tehnologiilor asistive. Screen reader (VoiceOver în iOS, TalkBack în Android) citește descrierea în loc să încerce să recunoască vizual elementul. Descrierea se aplică imaginilor fără strat text, pictogramelor, graficelor, comenzilor personalizate și oricăror elemente non-textuale.

Conform datelor Google Material Design, 2024, elementele fără contentDescription încalcă regula WCAG 1.1.1 (Non-text Content). Verificarea Accessibility Scanner arată că până la 40% din pictogramele din aplicațiile magazin nu au descriere. Utilizatorul VoiceOver aude doar «imagine» sau «buton» fără precizare — o astfel de interfață devine inutilizabilă pentru navigare.

Content Description nu înlocuiește textul vizibil al elementului. Dacă butonul conține o etichetă text «Trimite», nu este necesară o descriere suplimentară — screen reader va citi textul. Pentru imagini, pictograme și câmpuri de intrare, descrierea este obligatorie.

Instrumentele Accessibility Scanner (Android) și Xcode Accessibility Inspector (iOS) verifică automat prezența descrierilor. Se recomandă efectuarea acestor verificări pe fiecare ecran înainte de lansare.

De ce este necesar Content Description: scenarii de utilizare

Utilizatorul cu deficiență de vedere se bazează pe VoiceOver pentru a înțelege interfața. Dacă pictograma coșului de cumpărături nu are descriere, el aude doar «buton». Pentru a afla ce face butonul, trebuie să îl apese orbește — risc de acțiune ireversibilă. Descrierea «Șterge produsul din coș» rezolvă această problemă într-o secundă.

Utilizatorul cu limitări temporare (soare puternic pe stradă, ecran spart) utilizează de asemenea VoiceOver. Conform datelor Apple Accessibility Report, 2023, aproximativ 20% din utilizatorii VoiceOver nu au deficiențe permanente de vedere — activează această funcție situațional.

WCAG 1.1.1: Non-text Content

Criteriul WCAG 1.1.1 (nivelul A) cere ca orice conținut non-textual să aibă o alternativă textuală. Excepție: conținutul care este decorativ, utilizat doar pentru design vizual sau nu poartă informații. Testul de decorativitate: dacă eliminăm elementul, se schimbă sensul paginii? Dacă nu — poate fi ascuns de screen reader.

Cu ce se deosebește Content Description de Label

Accessibility Label (accessibilityLabel în iOS) — este numele elementului pe care screen reader îl pronunță la focalizare. Content Description (accessibilityHint în iOS) — este o explicație suplimentară care este citită după nume și informează despre rezultatul acțiunii.

Diferența se vede bine pe exemplul butonului «Coș». Label: «Coș». Description: «Va deschide ecranul de comandă». VoiceOver spune: «Coș. Va deschide ecranul de comandă». Dacă se setează doar Label, utilizatorul nu va ști ce se întâmplă după apăsare.

Tabel: Label versus Description

Regula: Label răspunde la întrebarea «Ce este asta?», Description — «Ce se va întâmpla?». În Android, contentDescription poate îndeplini ambele roluri, dar în practică este mai bine să le separați: folosiți concatenarea «[nume], [explicație]».

Când Description este mai important decât Label

Pentru gesturi complexe(glisare pentru ștergere, apăsare lungă pentru meniul contextual) accessibilityHint este obligatoriu. Utilizatorul VoiceOver nu știe despre gesturile ascunse dacă nu sunt descrise. Indicați: «Glisați la stânga pentru ștergere» în hint-ul elementului.

iOS: atributul accessibilityHint

În platforma iOS, accessibilityHint se setează prin proprietatea omonimă a UIView sau NSObject. Valoarea — șir de până la 80 de caractere. VoiceOver citește hint după label dacă este activat modul de descrieri detaliate (în setările VoiceOver — «Verbosity»).

Exemplu de setare a hint pentru un buton personalizat:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Adaugă la favorite"
        self.accessibilityHint = "Va salva produsul în lista de favorite"
    }
}

Pentru UIImageView fără conținut text este obligatoriu să se seteze isAccessibilityElement = true și accessibilityHint:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Graficul vânzărilor din ultimul trimestru"

VoiceOver citește: «Graficul vânzărilor din ultimul trimestru». Dacă hint este gol — doar «imagine». Apple HIG, 2024 recomandă să nu folosiți verbe precum «apăsați» sau «atingeți» în hint — VoiceOver adaugă automat instrucțiunea de gest.

SwiftUI: modificatorul accessibilityHint

În SwiftUI, hint se setează prin modificatorul chain:

Image(systemName: "trash")
    .accessibilityLabel("Șterge")
    .accessibilityHint("Va șterge ireversibil elementul selectat")

SwiftUI automat combină modificatorii pentru view-uri compuse. Dacă Image se află în interiorul Button, SwiftUI folosește label-ul butonului ca accessibilityLabel principal.

Android: proprietatea contentDescription

În Android, contentDescription se setează fie în marcajul XML, fie programatic prin setContentDescription(). TalkBack citește descrierea la focalizarea pe element.

Exemplu în XML:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Căutare produse" />

Setarea programatică pentru elemente dinamice:

binding.iconSearch.contentDescription =
    "Căutare. Va deschide ecranul de căutare cu filtre"

Pentru imagini decorative(separatoare, fundaluri, pictograme decorative) setați contentDescription = "@null" sau setContentDescription(null) — TalkBack va sări peste un astfel de element. În XML: android:contentDescription="@null". Șirul gol "" nu funcționează — TalkBack va spune tot «imagine».

Android: detalii importante pentru ImageButton și CheckBox

Pentru ImageButton setați întotdeauna contentDescription — TalkBack nu vede textul pe imagine. Pentru CheckBox, descrierea trebuie să se schimbe dinamic: «Selectat» / «Neselectat» în loc de o descriere statică. Folosiți setContentDescription în ascultătorul de stare.

Reguli de scriere a descrierilor

Informativitate — descrierea trebuie să transmită sensul, nu aspectul exterior. Nu «Pictogramă albastră cu bifă», ci «Produs adăugat în coș». Screen reader nu se interesează de culori — se interesează de rezultat.

Concizie — lungimea optimă 2–4 cuvinte (până la 80 de caractere). Descrierile lungi încetinesc navigarea: VoiceOver citește secvențial, fiecare cuvânt este o secundă din timpul utilizatorului. Conform datelor Apple WWDC 2023, «Accessibility by Design», o frază mai lungă de 5 secunde de citire întrerupe fluxul cognitiv.

Unicitate — pe același ecran nu trebuie să existe două elemente cu aceeași descriere. Utilizatorul nu va putea diferenția ce rezultat va produce focalizarea pe primul și pe al doilea element. Dacă există mai multe butoane «Cumpără» — adăugați un identificator: «Cumpără iPhone 15», «Cumpără iPhone 15 Pro».

Localizare — Content Description se traduce în toate limbile pe care le suportă aplicația. Eroarea de localizare a descrierii este una dintre cauzele frecvente ale eșecului Accessibility Review în App Store.

Lungimea descrierii: cercetări

Cercetarea Nielsen Norman Group, 2024 a arătat că lungimea optimă a descrierii pentru screen reader este de 3–5 cuvinte (până la 50 de caractere). Descrierile mai lungi reduc viteza de navigare cu 30%, deoarece utilizatorul trebuie să aștepte terminarea citirii înainte de pasul următor.

Erori tipice la utilizare

Redundanță — descrierea dublează textul vizibil. Dacă butonul conține textul «Trimite», nu setați accessibilityHint = «Buton trimite». VoiceOver va citi textul automat, iar hint va adăuga zgomot inutil.

Confuzia cu Label — utilizarea contentDescription în loc de label pentru butoanele text. În iOS, accessibilityLabel trebuie să coincidă cu textul butonului (sau să fie gol dacă textul este deja vizibil), iar hint doar explică acțiunea. Conform datelor Google Testing Blog, 2024, 23% din aplicațiile verificate în Play Store au descrieri duplicate.

Ignorarea dinamicii — descrierea nu se actualizează la schimbarea stării. De exemplu, la comutatorul «Wi-Fi» descrierea rămâne «Activează Wi-Fi» chiar și după activare. Corect: schimbați dinamic descrierea în «Dezactivează Wi-Fi» prin observarea stării.

Cicluri de randare și regresii

După actualizarea designului (schimbarea pictogramelor, rearanjarea elementelor), Content Description adesea se pierde. Motivul: designerul înlocuiește imaginea, dezvoltatorul nu verifică proprietățile de accesibilitate ale noului asset. Soluția: faceți verificarea accesibilității un pas obligatoriu în code review — adăugați o listă de verificare cu punctul «Content Description actualizat?».

Cum se verifică Content Description

• În iOS: Xcode → Accessibility Inspector — selectați elementul, verificați câmpurile Label și Hint
• În Android: instalați Accessibility Scanner din Play Store — rulați pe ecranul dvs.
• Pe ambele platforme: activați VoiceOver/TalkBack și parcurgeți întregul ecran cu gesturi
• Scrieți un test UI care verifică contentDescription pentru toate ImageView

Exemplu de test UI pentru iOS

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