Content Description: nədir, prinsipləri və accessibility üçün necə təyin edilməli

Accessibility’də Content Description nədir

Content Description — vizual məzmunun mətn təmsilini köməkçi texnologiyalara ötürən interfeys elementinin sətir xüsusiyyətidir. Screen reader (iOS’da VoiceOver, Android’də TalkBack) elementi vizual tanımağa çalışmaq əvəzinə təsviri oxuyur. Təsvir mətn təbəqəsi olmayan şəkillərə, ikonalara, qrafiklərə, fərdi idarəetmələrə və istənilən qeyri-mətn elementlərinə tətbiq olunur.

Google Material Design, 2024 məlumatlarına görə, contentDescription olmayan elementlər WCAG 1.1.1 (Qeyri-mətn Məzmun) qaydasını pozur. Accessibility Scanner yoxlaması göstərir ki, mağaza tətbiqlərində ikonaların 40%-ə qədəri təsvirə malik deyil. VoiceOver istifadəçisi dəqiqləşdirmə olmadan sadəcə „şəkil” və ya „düymə” eşidir — belə interfeys naviqasiya üçün yararsız olur.

Content Description elementin görünən mətnini əvəz etmir. Əgər düymə „Göndər” mətn etiketini ehtiva edirsə, əlavə təsvir verməyə ehtiyac yoxdur — screen reader mətni oxuyacaq. Şəkillər, ikonalar və giriş sahələri üçün təsvir məcburidir.

Accessibility Scanner (Android) və Xcode Accessibility Inspector (iOS) alətləri təsvirlərin mövcudluğunu avtomatik yoxlayır. Buraxılışdan əvvəl hər ekranda bu yoxlamaların aparılması tövsiyə olunur.

Content Description nəyə lazımdır: istifadəçi ssenariləri

Görmə qüsuru olan istifadəçi interfeysi başa düşmək üçün VoiceOver’a etibar edir. Əgər səbət ikonasının təsviri yoxdursa, o, yalnız „düymə” eşidir. Düymənin nə etdiyini öyrənmək üçün onu kor-koranə basmalı olur — geri dönməz əməliyyat riski. „Məhsulu səbətdən sil” təsviri bu problemi bir saniyəyə həll edir.

Müvəqqəti məhdudiyyətləri olan istifadəçi (küçədə parlaq günəş, sınıq ekran) da VoiceOver istifadə edir. Apple Accessibility Report, 2023 məlumatlarına görə, VoiceOver istifadəçilərinin təxminən 20%-nin daimi görmə qüsuru yoxdur — onlar bu funksiyanı situasiyaya görə yandırırlar.

WCAG 1.1.1: Qeyri-mətn Məzmun

WCAG 1.1.1 (səviyyə A) meyarı tələb edir ki, istənilən qeyri-mətn məzmunun mətn alternativi olsun. İstisna: dekorativ olan, yalnız vizual tərtibat üçün istifadə edilən və ya məlumat daşımayan məzmun. Dekorativlik testi: elementi silmək səhifənin mənasını dəyişdirirmi? Yoxsa — screen reader’dan gizlədilə bilər.

Content Description Label’dan nə ilə fərqlənir

Accessibility Label (iOS’da accessibilityLabel) — fokus zamanı screen reader tərəfindən tələffüz olunan elementin adıdır. Content Description (iOS’da accessibilityHint) — addan sonra səsləndirilən və əməliyyatın nəticəsi barədə məlumat verən əlavə izahdır.

Fərq „Səbət” düyməsi nümunəsində aydın görünür. Label: „Səbət”. Description: „Sifarişin verilməsi ekranını açacaq”. VoiceOver deyir: „Səbət. Sifarişin verilməsi ekranını açacaq”. Yalnız Label qoyularsa, istifadəçi basdıqdan sonra nə olacağını bilməyəcək.

Cədvəl: Label’a qarşı Description

Qayda: Label „Bu nədir?” sualına cavab verir, Description — „Nə olacaq?” sualına. Android’də contentDescription hər iki rolu yerinə yetirə bilər, lakin praktikada ayırmaq daha yaxşıdır: „[ad], [izah]” konyuqasiyasından istifadə edin.

Description nə zaman Label’dan üstündür

Mürəkkəb hərəkətlər (silinmək üçün sürüşdürmə, kontekst menyusu üçün uzun basma) üçün accessibilityHint məcburidir. VoiceOver istifadəçisi təsvir olunmayan gizli hərəkətlər haqqında bilmir. Elementin hintində göstərin: „Silinmək üçün sola sürüşdürün”.

iOS: accessibilityHint atributu

iOS platformasında accessibilityHint UIView və ya NSObject-in eyniadlı xüsusiyyəti vasitəsilə təyin edilir. Dəyər — 80 simvola qədər sətir. VoiceOver hinti label-dan sonra oxuyur, əgər təfərrüatlı təsvirlər rejimi aktivdirsə (VoiceOver parametrlərində — „Verbosity”).

Fərdi düymə üçün hint təyini nümunəsi:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Seçilmişlərə əlavə et"
        self.accessibilityHint = "Məhsulu seçilmişlər siyahısına yadda saxlayacaq"
    }
}

Mətn məzmunu olmayan UIImageView üçün isAccessibilityElement = true və accessibilityHint mütləq təyin edilməlidir:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Son rübdə satış qrafiki"

VoiceOver oxuyur: „Son rübdə satış qrafiki”. Hint boşdursa — yalnız „şəkil”. Apple HIG, 2024 hintdə „basın” və ya „toxunun” kimi fellərin istifadəsini tövsiyə etmir — VoiceOver avtomatik olaraq jest təlimatı əlavə edir.

SwiftUI: accessibilityHint modifikatoru

SwiftUI’də hint chain modifikator vasitəsilə təyin edilir:

Image(systemName: "trash")
    .accessibilityLabel("Sil")
    .accessibilityHint("Seçilmiş elementi geri qaytarılmaz şəkildə siləcək")

SwiftUI mürəkkəb view-lər üçün modifikatorları avtomatik birləşdirir. Əgər Image Button daxilindədirsə, SwiftUI düymənin label-nı əsas accessibilityLabel kimi istifadə edir.

Android: contentDescription xüsusiyyəti

Android’də contentDescription ya XML işaretləməsində, ya da proqram vasitəsilə setContentDescription() metodu ilə təyin edilir. TalkBack elementi fokusladıqda təsviri səsləndirir.

XML-də nümunə:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Məhsulların axtarışı" />

Dinamik elementlər üçün proqram vasitəsilə təyinetmə:

binding.iconSearch.contentDescription =
    "Axtarış. Filtrlərlə axtarış ekranını açacaq"

Dekorativ şəkillər (ayırıcılar, fonlar, dekorativ ikonalar) üçün contentDescription = "@null" və ya setContentDescription(null) təyin edin — TalkBack belə elementi keçəcək. XML-də: android:contentDescription="@null". Boş sətir "" işləmir — TalkBack yenə də „şəkil” deyəcək.

Android: ImageButton və CheckBox üçün vacib detallar

ImageButton üçün həmişə contentDescription təyin edin — TalkBack şəkildəki mətni görmür. CheckBox üçün təsvir dinamik dəyişməlidir: „Seçilib” / „Seçilməyib” statik təsvir əvəzinə. Vəziyyət dinləyicisində setContentDescription istifadə edin.

Təsvirlərin yazılması qaydaları

Məlumatlandırıcılıq — təsvir mənanı çatdırmalı, xarici görünüşü yox. „Çəngəlli mavi ikona” yox, „Məhsul səbətə əlavə edildi”. Screen reader rənglərlə maraqlanmır — o, nəticə ilə maraqlanır.

Qısalıq — optimal uzunluq 2–4 söz (80 simvola qədər). Uzun təsvirlər naviqasiyanı ləngidir: VoiceOver ardıcıl oxuyur, hər söz istifadəçinin bir saniyəsidir. Apple WWDC 2023, „Accessibility by Design” məlumatlarına görə, 5 saniyədən uzun oxunan ifadə idrak axınını kəsir.

Unikallıq — bir ekranda eyni təsvirə malik iki element olmamalıdır. İstifadəçi birinci və ikinci elementə fokuslanmanın hansı nəticəyə gətirəcəyini fərqləndirə bilməyəcək. Bir neçə „Al” düyməsi varsa — identifikator əlavə edin: „iPhone 15 al”, „iPhone 15 Pro al”.

Lokallaşdırma — Content Description tətbiqin dəstəklədiyi bütün dillərə tərcümə olunur. Təsvirin lokallaşdırılması səhvi App Store’da Accessibility Review-dən keçə bilməməyin tez-tez səbəblərindən biridir.

Təsvirin uzunluğu: tədqiqatlar

Nielsen Norman Group, 2024 tədqiqatı göstərdi ki, screen reader üçün optimal təsvir uzunluğu 3–5 söz (50 simvola qədər) təşkil edir. Daha uzun təsvirlər naviqasiya süratini 30% azaldır, çünki istifadəçi növbəti addımdan əvvəl səsləndirmənin bitməsini gözləməlidir.

İstifadədə tipik səhvlər

Artıqlıq — təsvir görünən mətni təkrarlayır. Əgər düymə „Göndər” mətnini ehtiva edirsə, accessibilityHint = „Göndər düyməsi” təyin etməyin. VoiceOver mətni avtomatik oxuyacaq, hint isə lazımsız səs-küy əlavə edəcək.

Label ilə qarışdırma — mətn düymələri üçün label əvəzinə contentDescription istifadəsi. iOS’da accessibilityLabel düymənin mətni ilə üst-üstə düşməli (və ya mətn artıq görünürsə boş olmalı), hint isə yalnız əməliyyatı izah etməlidir. Google Testing Blog, 2024 məlumatlarına görə, Play Store’da yoxlanılan tətbiqlərin 23%-nin təkrarlanan təsvirləri var.

Dinamikanın nəzərdən qaçırılması — vəziyyət dəyişdikdə təsvir yenilənmir. Məsələn, „Wi-Fi” açarsının təsviri yandırıldıqdan sonra da „Wi-Fi-nı yandır” olaraq qalır. Düz: vəziyyəti müşahidə etməklə təsviri dinamik olaraq „Wi-Fi-nı söndür”ə dəyişmək.

Render dövrləri və reqressiyalar

Dizayn yenilənməsindən sonra (ikonaların dəyişməsi, elementlərin yenidən düzülməsi) Content Description tez-tez itir. Səbəb: dizayner şəkli dəyişir, tərtibatçı yeni aktivin çatışılanlıq xüsusiyyətlərini yoxlamır. Həll: çatışılanlıq yoxlamasını code review-un məcburi addımı etmək — „Content Description yeniləndi?” bəndi ilə yoxlama siyahısı əlavə edin.

Content Description necə yoxlanılır

• iOS’da: Xcode → Accessibility Inspector — elementi seçin, Label və Hint sahələrini yoxlayın
• Android’də: Play Store’dan Accessibility Scanner quraşdırın — ekranınızda işə salın
• Hər iki platformada: VoiceOver/TalkBack-i yandırın və bütün ekranı jestlərlə keçin
• Bütün ImageView-lər üçün contentDescription yoxlayan UI testi yazın

iOS üçün UI testi nümunəsi

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