Odstraňování bariér: Jak zpřístupnit aplikaci všem

Přístupnost není jen formální požadavek - je to způsob myšlení, který zajišťuje, aby aplikace mohli používat všichni bez ohledu na zrakové 👁️, motorické 👏🏽, sluchové 👂🏽 nebo kognitivní 🧠 postižení. ✨ V tomto článku si ukážeme konkrétní příklad, na kterém porovnáme nepřístupnou a přístupnou obrazovku mobilní aplikace.

🔍 Co si ukážeme?

✔️ Co dělá aplikaci nepřístupnou a jaké překážky vytváří 🚧

✔️ Jak by mohla vypadat upravená, přístupná verze 💡

✔️ Praktické tipy, které můžete uplatnit ve svých projektech 🛠️

Ať už jste designér, vývojář nebo produktový manažer, pochopení těchto zásad vám pomůže vytvářet aplikace, které neseparují, ale propojují. Jdeme na to! 🚀

V čem je problém?

Podívejme se na čísla:

• Ztráta uživatelů: Přibližně 70 % uživatelů, kteří se setkají s problémy s přístupností online, webovou stránku opustí. ¹
• Přístupnost a zákaznická zkušenost: 79 % organizací souhlasí s tím, že přístupné technologie zlepšují zákaznickou zkušenost. ¹
• Globální dopad: Každý šestý člověk na světě žije se zdravotním postižením, takže přístupnost je pro velkou část populace zásadní. ^{2 4}
• Nejčastější nedostatky v přístupnosti: Mezi nejčastější nedostatky podle WCAG (Web Content Accessibility Guidelines) patří nízký kontrast textu (84 %), chybějící alternativní text u obrázků (58 %), prázdné odkazy (50 %) a chybějící tlačítka na formulářích (46 %). ⁴

Proč je to důležité pro hospodářskou činnost?

• Věrnost značce: 96 % zákazníků uvádí, že zákaznická podpora je pro jejich věrnost značce důležitá, přičemž přístupnost je její důležitou součástí. ¹
• Zvýšení míry udržení zákazníků: Zvýšení míry udržení zákazníků o pouhých 5 % může zvýšit zisky o 25 % až 95 %. ¹
• Věrnost značce: 96 % zákazníků tvrdí, že zákaznická podpora je pro jejich věrnost značce důležitá, přičemž její nedílnou součástí je přístupnost.  ¹
• Digitální přístupnost v organizacích: 72 % organizací má politiku digitální přístupnosti a 85 % ji považuje za konkurenční výhodu. ⁵
• Přístupnost a nákupní rozhodnutí: 38,6 % zaměstnanců uvedlo, že zákazníci zmínili přístupnost produktu jako důvod pro svůj nákup. ³
• Růst trhu: Očekává se, že celosvětový trh s nástroji pro přístupnost webu dosáhne do roku 2031 hodnoty 893,7 milionu USD. ⁵
• Dopad nedostatečného povědomí o přístupnosti: 75 % osob se zdravotním postižením a jejich rodinných příslušníků přestalo využívat služby společnosti z důvodu nedostatečného povědomí o přístupnosti.  ¹

Vstup na obrazovku

Nejprve se podívejme, jak to vypadá při prvním vstupu.

Nepřístupný flow (vlevo)

Na obrázku vlevo je první problém vidět hned na začátku. Nepřístupná obrazovka při zadávání fotografie nejprve vyskočí a přečte přístupný nadpis, který v tomto případě chybí, takže čtečka obrazovky čte pouze „Foto, Space“. Protože se jedná o fotografii z adresy URL, není možné přejít do aktiv a pojmenovat fotografii přímo tam. (Pokud by se fotografie jmenovala jablko.jpg, použil by nespecifikovaný přístupný název název souboru). Pak po načtení skočí přímo na tlačítko se srdíčkem pod obrázkem jablka a píše „Líbí se mi, Tlačítko “.

Tento přístup má několik nedostatků:

1. Tlačítko „Přidat do košíku“, které se zřejmě nachází před tlačítkem „To se mi líbí“, čtečka obrazovky zcela vynechala. Pokud se však vrátím o jednu položku zpět, již ji přečte. To uživatele v lepším případě mate, protože při procházení prvků na obrazovce není zachována žádná logická posloupnost, a v horším případě uživatel nebude moci položku do košíku vůbec přidat, protože ho nenapadne se po jejím zadání vrátit o krok zpět.
2. Obsah obrazovky nežádoucím způsobem přeskakuje bez jakékoliv interakce uživatele.
3. Samotný popis fotografie nepřináší uživateli žádnou přidanou hodnotu, tento prvek měl být buď popsán v rámci čtečky obrazovky, nebo zcela ignorován.

Přístupný flow (vpravo)

Vpravo si můžete všimnout, že po zadání položky „jablko“ přejdu k primární akci této položky, a tou je její přidání do košíku. Čtečka obrazovky čte: „Přidat do košíku produkt Jablko“. Toto tlačítko dává uživateli plný kontext a přesně ví, co má po stisknutí tlačítka očekávat. Toho jsme dosáhli ignorováním obrázku v obsahu a dynamickým přidáváním popisů jednotlivých komponent podle obsahu.

// Modifikátor použitý na komponentě obrázku.
.accessibilityHidden(true)
               
// Modifikátor použitý na komponentě tlačítka přidat do košíku.
.accessibilityLabel("Pridať do košíka produkt \(productName)")

Čtení obsahu

Podívejme se, jak to vypadá s informacemi zapsanými v tabulce.

Nepřístupný flow (vlevo)

Jakmile si chci přečíst obsah tabulky, velmi rychle zjistím, že i když tabulka vizuálně funguje, když začnu procházet prvky, nejprve se zobrazí „Hmotnosť“ a hned poté „Farba“, a teprve poté přejdu na další řádek, kde se zobrazí „125g“ a „Červená“.

Grid {
    GridRow {
        VStack {
            Text("Hmotnosť")
            Text("125 g")
        }

        VStack {
            Text("Farba")
            Text("Červená")
        }
    }

    GridRow {
        VStack {
            Text("Krajina pôvodu")
            Text("Slovensko")
        }

        VStack {
            Text("Nutričné hodnoty")
            Text("52 kcal")
        }
    }
}

Uživatel musí být při procházení této obrazovky opět nesmírně zmatený.

Přístupný flow (vpravo)

Vpravo jsme zpřístupnili čtení obsahu tím, že jsme název a hodnotu v tabulce spojili do jedné skupiny přístupnosti. Výsledkem je, že čtečka obrazovky automaticky přečte „Hmotnosť: 125 g“.

Grid {
    GridRow {
        VStack {
            Text("Hmotnosť")
            Text("125 g")
        }
        .accessibilityElement(children: .combine)

        VStack {
            Text("Farba")
            Text("Červená")
        }
        .accessibilityElement(children: .combine)
    }

    GridRow {
        VStack {
            Text("Krajina pôvodu")
            Text("Slovensko")
        }
        .accessibilityElement(children: .combine)


        VStack {
            Text("Nutričné hodnoty")
            Text("52 kcal")
        }
        .accessibilityElement(children: .combine)
    }
}

Integrita těchto informací umožní uživateli zcela jiný zážitek z aplikace.

Hodnocení 

Dále se podíváme na jednoduchou složku hodnocení produktu.

Nepřístupný flow (vlevo)

Když se přesunu v nepřístupném flowu na komponentu hodnocení, automaticky mě to přesune na první hvězdičku jako první akční tlačítko z komponenty a hlášení čtečky: „Přidat k oblíbeným, Tlačítko“.

Když začnu procházet zleva doprava, hlásí u každé hvězdičky totéž. Pro nevidomého je velmi obtížné až nemožné zjistit, co se na obrazovce děje.

@State var rating: Int = 1

var body: some View {
    HStack {
        ForEach(1..<6) { index in
            Button(action: { rating = index }) {
                Image(systemName: index <= rating ? "star.fill" : "star")
            }
        }
    }
}

Uživatel je opět zmatený, protože neví, co tlačítka dělají. V horším případě si bude myslet, že dělají to, co čtečka řekla: přidávají do oblíbených, zatímco on si bude myslet, že si produkt přidává do oblíbených, ale ve skutečnosti bude posílat hodnocení, které neodráží jeho skutečný názor.

Přístupný flow (vpravo)

Hodnotící komponentu jsme seskupili do přístupného flowu a přidali příznak „nastavitelný“.

Jakmile přejdeme k hodnocení v přístupném flowe, čtečka řekne: „Hodnocení výrobku jablko 1 z 5, nastavitelné“. To uživateli naznačuje, že:

• hodnocení se vztahuje na produkt jablko,
• aktuální hodnota je 1 z 5,
• může změnit svou nastavitelnou hodnotu jednoduchým gestem nad komponentem.

@State var rating: Int = 1

var body: some View {
    HStack {
        ForEach(1..<6) { index in
            Button(action: { rating = index }) {
                Image(systemName: index <= rating ? "star.fill" : "star")
            }
        }
    }
    .accessibilityElement()
    .accessibilityLabel(Text("Hodnotenie"))
    .accessibilityValue(Text(String(rating) + " z 5"))
    .accessibilityAdjustableAction { direction in
        switch direction {
        case .increment:
            guard rating < 5 else { break }
            rating += 1
        case .decrement:
            guard rating > 1 else { break }
            rating -= 1
        @unknown default:
            break
        }
    }
}

Jako vývojáři máme velký vliv na to, zda bude aplikace použitelná pro všechny, nebo zda bude pro některé uživatele jednoduše nedostupná. Jak jsme si ukázali na příkladech, často stačí jen pár úprav v kódu - správně nastavené atributy, promyšlená navigace nebo vhodná správa stavu prvků - a aplikace se stane mnohem srozumitelnější pro ty, kteří jsou závislí na asistenčních technologiích. 🛠️📱

Při vývoji je důležité myslet na:

✔️ Logickou navigaci - prvky je třeba číst ve smysluplném pořadí

✔️ Správné označení komponent - čtečka obrazovky potřebuje jasné popisy

✔️ Interaktivní prvky - tlačítka, tabulky a formuláře musí mít jasnou funkčnost

✔️ Seskupování prvků - příslušné informace by měly být propojeny tak, aby dávaly smysl i bez vizuálního kontextu

Přístupnost není jen „nice-to-have“ - v mnoha případech se jedná o legislativní požadavek a v neposlední řadě o kvalitní softwarové inženýrství. Dobře napsaný kód znamená lepší škálovatelnost, udržitelnost a lepší použitelnost pro všechny.

Až budete příště implementovat novou funkci, zeptejte se sami sebe:

➡️ „Bude to fungovat i pro někoho, kdo nevidí na obrazovku?“

➡️ „Pochopí tuto funkci uživatel, který používá pouze čtečku obrazovky?“

➡️ „Dávají navigace a interakce smysl i bez vizuálního uspořádání?“.

Pokud ne, možná je čas přidat několik oprav přístupnosti. Malé změny v kódu často znamenají obrovský rozdíl v uživatelském komfortu. 🔥

💡 Zdrojový kód naleznete na GitHub.