Content Description: mi ez, elvek és hogyan kell beállítani az accessibility számára

Mi az a Content Description az accessibility-ben

Content Description — a felületi elem egy string tulajdonsága, amely a vizuális tartalom szöveges reprezentációját továbbítja a segédtechnológiáknak. A screen reader (iOS-ben VoiceOver, Android-ban TalkBack) a leírást olvassa fel ahelyett, hogy megpróbálná vizuálisan felismerni az elemet. A leírás a szövegréteg nélküli képekre, ikonokra, grafikonokra, egyéni vezérlőkre és bármely nem szöveges elemre alkalmazandó.

A Google Material Design, 2024 adatai szerint a contentDescription nélküli elemek megsértik a WCAG 1.1.1 (Non-text Content) szabályt. Az Accessibility Scanner ellenőrzése azt mutatja, hogy az üzletalkalmazásokban az ikonok akár 40%-ának nincs leírása. A VoiceOver felhasználó csak „kép” vagy „gomb” szavakat hall pontosítás nélkül — az ilyen felület navigációra alkalmatlanná válik.

A Content Description nem helyettesíti az elem látható szövegét. Ha a gomb „Küldés” szöveges címkét tartalmaz, nincs szükség további leírásra — a screen reader felolvassa a szöveget. Képek, ikonok és beviteli mezők esetén a leírás kötelező.

Az Accessibility Scanner (Android) és Xcode Accessibility Inspector (iOS) eszközök automatikusan ellenőrzik a leírások meglétét. Ajánlott ezeket az ellenőrzéseket minden képernyőn elvégezni a kiadás előtt.

Miért van szükség a Content Description-re: felhasználói forgatókönyvek

A látássérült felhasználó a VoiceOver-re támaszkodik a felület megértéséhez. Ha a kosár ikonnak nincs leírása, csak „gomb” szót hall. Ahhoz, hogy megtudja, mit csinál a gomb, vakon kell megnyomnia — visszafordíthatatlan művelet kockázata. A „Termék eltávolítása a kosárból” leírás egy másodperc alatt megoldja ezt a problémát.

Az ideiglenes korlátozásokkal rendelkező felhasználó (erős napsütés az utcán, tört képernyő) szintén használja a VoiceOver-t. Az Apple Accessibility Report, 2023 szerint a VoiceOver felhasználók körülbelül 20%-ának nincs állandó látássérülése — helyzetfüggően kapcsolják be ezt a funkciót.

WCAG 1.1.1: Non-text Content

A WCAG 1.1.1 kritérium (A szint) megköveteli, hogy minden nem szöveges tartalomnak legyen szöveges alternatívája. Kivétel: dekoratív tartalom, amely csak vizuális megjelenítésre szolgál, vagy nem hordoz információt. Dekorativitási teszt: ha eltávolítjuk az elemet, megváltozik-e az oldal értelme? Ha nem — elrejthető a screen reader elől.

Miben különbözik a Content Description a Label-től

Accessibility Label (accessibilityLabel iOS-ben) — az elem neve, amelyet a screen reader fókuszáláskor kiejt. A Content Description (accessibilityHint iOS-ben) — kiegészítő magyarázat, amely a név után hangzik el és jelenti a művelet eredményét.

A különbség jól látható a „Kosár” gomb példáján. Label: „Kosár”. Description: „Megnyitja a rendelési képernyőt”. VoiceOver: „Kosár. Megnyitja a rendelési képernyőt”. Ha csak Label van beállítva, a felhasználó nem tudja, mi történik a megnyomás után.

Táblázat: Label versus Description

Szabály: A Label válaszol a „Mi ez?” kérdésre, a Description — „Mi történik?”. Android-ban a contentDescription mindkét szerepet betöltheti, de a gyakorlatban jobb szétválasztani: használja a „[név], [magyarázat]” konkatenációt.

Amikor a Description fontosabb, mint a Label

Összetett mozdulatok (sweep törléshez, hosszú nyomás a helyi menühöz) esetén az accessibilityHint kötelező. A VoiceOver felhasználó nem tud a rejtett mozdulatokról, ha azok nincsenek leírva. Adja meg: „Sópörjön balra a törléshez” az elem hint-jében.

iOS: az accessibilityHint attribútum

Az iOS platformon az accessibilityHint a UIView vagy NSObject azonos nevű tulajdonságán keresztül állítható be. Érték — akár 80 karakter hosszúságú string. A VoiceOver a hint-et a label után olvassa fel, ha a részletes leírások módja be van kapcsolva (a VoiceOver beállításokban — „Verbosity”).

Példa a hint beállítására egy egyéni gombhoz:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Hozzáadás a kedvencekhez"
        self.accessibilityHint = "Elmenti a terméket a kedvencek listájába"
    }
}

UIImageView számára szöveges tartalom nélkül kötelező az isAccessibilityElement = true és az accessibilityHint beállítása:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Az elmúlt negyedév értékesítési grafikonja"

VoiceOver felolvassa: „Az elmúlt negyedév értékesítési grafikonja”. Ha a hint üres — csak „kép”. Az Apple HIG, 2024 azt javasolja, hogy ne használjunk olyan igéket a hint-ben, mint „nyomja meg” vagy „érintse meg” — a VoiceOver automatikusan hozzáadja a mozdulati utasítást.

SwiftUI: accessibilityHint módosító

A SwiftUI-ban a hint lánc módosítón keresztül állítható be:

Image(systemName: "trash")
    .accessibilityLabel("Törlés")
    .accessibilityHint("Visszavonhatatlanul eltávolítja a kiválasztott elemet")

A SwiftUI automatikusan egyesíti a módosítókat az összetett view-k számára. Ha az Image a Button-on belül található, a SwiftUI a gomb label-jét használja fő accessibilityLabel-ként.

Android: a contentDescription tulajdonság

Android-ban a contentDescription vagy az XML jelölésben, vagy programozottan a setContentDescription()-n keresztül állítható be. A TalkBack az elemre fókuszáláskor olvassa fel a leírást.

Példa XML-ben:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Termékek keresése" />

Programozott beállítás dinamikus elemekhez:

binding.iconSearch.contentDescription =
    "Keresés. Megnyitja a keresőképernyőt szűrőkkel"

Dekoratív képek (elválasztók, hátterek, dekoratív ikonok) esetén állítsa be a contentDescription = "@null" vagy setContentDescription(null) értéket — a TalkBack átugrik az ilyen elemen. XML-ben: android:contentDescription="@null". Az üres string "" nem működik — a TalkBack továbbra is „kép” szót mondja.

Android: fontos részletek az ImageButton és CheckBox számára

ImageButton esetén mindig állítsa be a contentDescription-t — a TalkBack nem látja a szöveget a képen. CheckBox esetén a leírásnak dinamikusan kell változnia: „Kiválasztva” / „Nincs kiválasztva” a statikus leírás helyett. Használja a setContentDescription-t az állapotfigyelőben.

A leírások írásának szabályai

Informatívság — a leírásnak a jelentést kell közvetítenie, nem a külső megjelenést. Ne „Kék ikon pipával”, hanem „Termék hozzáadva a kosárhoz”. A screen readert nem érdeklik a színek — az eredmény érdekli.

Tömörség — optimális hossz 2–4 szó (legfeljebb 80 karakter). A hosszú leírások lassítják a navigációt: a VoiceOver egymás után olvas, minden szó a felhasználó idejének egy másodperce. Az Apple WWDC 2023, „Accessibility by Design” szerint az 5 másodperc nál hosszabb olvasási idejű kifejezés megszakítja a kognitív áramlást.

Egyediség — egy képernyőn nem lehet két elem azonos leírással. A felhasználó nem tudja megkülönböztetni, hogy az első és a második elem fókuszálása milyen eredményt hoz. Ha több „Vásárlás” gomb van — adjon hozzá azonosítót: „iPhone 15 vásárlása”, „iPhone 15 Pro vásárlása”.

Lokalizáció — a Content Description az alkalmazás által támogatott összes nyelvre lefordításra kerül. A leírás lokalizációs hibája az App Store-beli Accessibility Review sikertelenségének gyakori oka.

A leírás hossza: kutatások

A Nielsen Norman Group, 2024 kutatása kimutatta, hogy a screen reader számára optimális leíráshossz 3–5 szó (legfeljebb 50 karakter). A hosszabb leírások 30%-kal csökkentik a navigáció sebességét, mert a felhasználónak meg kell várnia a felolvasás befejeződését a következő lépés előtt.

Tipikus hibák a használat során

Feleslegesség — a leírás megkettőzi a látható szöveget. Ha a gomb „Küldés” szöveget tartalmaz, ne állítsa be az accessibilityHint = „Küldés gomb” értéket. A VoiceOver automatikusan felolvassa a szöveget, a hint pedig szükségtelen zajt ad hozzá.

Összetévesztés a Label-lel — contentDescription használata label helyett szöveges gombok esetén. iOS-ben az accessibilityLabel-nek egyeznie kell a gomb szövegével (vagy üresnek kell lennie, ha a szöveg már látható), a hint pedig csak a műveletet magyarázza. A Google Testing Blog, 2024 szerint a Play Store-ban ellenőrzött alkalmazások 23%-a rendelkezik duplikált leírásokkal.

Dinamika figyelmen kívül hagyása — a leírás nem frissül az állapot változásakor. Például a „Wi-Fi” kapcsoló leírása „Wi-Fi bekapcsolása” marad a bekapcsolás után is. Helyesen: dinamikusan változtassa a leírást „Wi-Fi kikapcsolása” értékre az állapot megfigyelésével.

Renderelési ciklusok és regressziók

Design frissítés (ikonok cseréje, elemek átrendezése) után a Content Description gyakran elvész. Ok: a designer lecseréli a képet, a fejlesztő nem ellenőrzi az új eszköz akadálymentesítési tulajdonságait. Megoldás: tegye az akadálymentesítési ellenőrzést a code review kötelező lépésévé — adjon hozzá egy ellenőrző listát a „Content Description frissítve?” ponttal.

Hogyan ellenőrizze a Content Description-t

• iOS-ben: Xcode → Accessibility Inspector — válassza ki az elemet, ellenőrizze a Label és Hint mezőket
• Android-ban: telepítse az Accessibility Scanner-t a Play Store-ból — futtassa a képernyőjén
• Mindkét platformon: kapcsolja be a VoiceOver/TalkBack funkciót és járja be a teljes képernyőt mozdulatokkal
• Írjon egy UI tesztet, amely ellenőrzi a contentDescription-t az összes ImageView számára

Példa UI teszt iOS-re

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