Odstránenie bariér: Ako sprístupniť vašu aplikáciu pre každého

Prístupnosť nie je len formálna požiadavka – je to spôsob myslenia, ktorý zaručuje, že aplikácie sú použiteľné pre všetkých bez ohľadu na zrakové 👁️, motorické 👏🏽, sluchové 👂🏽 či kognitívne 🧠 znevýhodnenia. ✨ V tomto článku si ukážeme konkrétny príklad, kde porovnáme neprístupnú a prístupnú obrazovku mobilnej aplikácie.

🔍 Čo si ukážeme?

✔️ Čo robí aplikáciu neprístupnou a aké prekážky vytvára 🚧

✔️ Ako môže vyzerať vyladená, prístupná verzia 💡

✔️ Praktické tipy, ktoré môžete aplikovať vo svojich projektov 🛠️

Či už ste dizajnér, vývojár alebo produktový manažér, pochopenie týchto princípov vám pomôže tvoriť aplikácie, ktoré nesegregujú, ale spájajú. Poďme na to! 🚀

Aký je problém?

Pozrime sa na čísla:

• Strata používateľov: Približne 70 % používateľov, ktorí narazia na problémy s prístupnosťou online, opustí webovú stránku. ¹
• Prístupnosť a zákaznícka skúsenosť: 79 % organizácií súhlasí s tým, že prístupné technológie zlepšujú zákaznícku skúsenosť. ¹
• Globálny dopad: Každý šiesty človek na svete žije so zdravotným znevýhodnením, čo robí prístupnosť nevyhnutnou pre veľkú časť populácie. ^{2 4}
• Najčastejšie chyby v prístupnosti: Najčastejšie nedostatky podľa WCAG (Web Content Accessibility Guidelines) zahŕňajú nízky kontrast textu (84 %), chýbajúci alternatívny text pri obrázkoch (58 %), prázdne odkazy (50 %) a chýbajúce tlačidlá vo formulároch (46 %). ⁴

Prečo je to pre dôležite pre hospodársku činnosť?

• Lojalita k značke: 96 % zákazníkov tvrdí, že zákaznícka podpora je dôležitá pre ich lojalitu k značke, pričom prístupnosť je jej významnou súčasťou. ¹
• Zvýšenie udržania zákazníkov: Zvýšenie miery udržania zákazníkov len o 5 % môže zvýšiť zisky o 25 % až 95 %. ¹
• Lojalita k značke: 96 % zákazníkov uvádza, že zákaznícka podpora je dôležitá pre ich lojalitu k značke, pričom prístupnosť je jej neoddeliteľnou súčasťou. ¹
• Digitálna prístupnosť v organizáciách: 72 % organizácií má politiku digitálnej prístupnosti a 85 % ju považuje za konkurenčnú výhodu. ⁵
• Prístupnosť a nákupné rozhodnutia: 38,6 % zamestnancov uviedlo, že zákazníci spomenuli prístupnosť produktu ako dôvod svojho nákupu. ³
• Rast trhu: Očakáva sa, že globálny trh s webovými nástrojmi pre prístupnosť dosiahne do roku 2031 hodnotu 893,7 milióna dolárov. ⁵
• Dopad nedostatočného povedomia o prístupnosti: 75 % ľudí so zdravotným znevýhodnením a ich rodín prestalo využívať služby firmy kvôli nedostatku povedomia o prístupnosti. ¹

Vstup do obrazovky

V prvom rade si ukážeme ako to vyzerá pri prvom vstupe.

Neprístupný flow (vľavo)

Na obrázku vľavo je hneď na úvod vidno prvý problém. Neprístupná obrazovka skočí ako prvé pri vstupe na fotku a prečita pristupný názov, ktorý v tomto prípade chýba, takže Screen Reader prečíta len „Fotka, Space”. Keďže ide o fotku z URL adresy, nie je možné ísť do assetov a pomenovať fotku priamo tam. (Ak by bola fotka pomenovaná jablko.jpg, tak pri nešpecifikovanom prístupnom názve sa použije názov súboru.) Následne po prečítaní skočí hneď na tlačilo srdca pod obrázkom jablka a prečíta „Páči sa mi, Tlačidlo”.

Tento prístup má viacero nedostatkov:

1. Screen Reader úplne preskočil tlačidlo „Pridať do košíka”, ktoré je očividne pred tlačidlom „Páči sa mi”. Ak sa však vrátim o jeden element späť, už ho prečíta. Tento krok používateľa prinajlepšom zmätie, pretože navigácia cez elementy na obrazovke nezachováva žiadny logický sled, a pri najhoršom používateľ vôbec nebude vedieť pridať položku do košíka, pretože ho nenapadne ísť o krok späť po vstupe.
2. Obsah obrazovky skáče nechceným spôsobom bez akejkoľvek interakcie používateľa.
3. Samotný popis fotky nepridal používateľovi žiadnu pridanú hodnotu, tento prvok mal byť v rámci Screen Readera buď popísaný, alebo úplne ignorovaný.

Prístupný flow (vpravo)

Vpravo si všimnete, že akonáhle som vstúpil do položky „jablko”, prechádzam na primárnu akciu položky, a to je pridanie do košíka. Screen Reader číta: „Pridať do košíka produkt Jablko”. Toto tlačidlo dáva používateľovi plný kontext a presne vie, čo má od tlačidla očakávať pri jeho stlačení. Toto sme dosiahli ignorovaním obrázka v obsahu a pridaním popisov jednotlivých komponentov dynamicky podľa obsahu.

// Modifikátor použitý na komponent obrázka.
.accessibilityHidden(true)
               
// Modifikátor použitý na komponent tlačidla pridania do košíka.
.accessibilityLabel("Pridať do košíka produkt \(productName)")

Čítanie obsahu

Pozrime sa, ako to vyzerá s informáciami, ktoré sú zapísané v tabuľke.

Neprístupný flow (vľavo)

Akonáhle chcem prečítať obsah tabuľky, veľmi rýchlo zistím, že aj keď vizuálne tabuľka funguje, keď začnem cyklovať cez elementy, čítam najskôr „Hmotnosť” a hneď nato „Farba”, a až potom prechádzam na ďalší riadok, kde číta „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")
        }
    }
}

Opäť, zmätenie používateľa prechádzajúceho touto obrazovkou musí byť obrovské.

Prístupný flow (Vpravo)

Vpravo sme sprístupnili čítanie obsahu tak, že sme spojili do jednej accessibility skupiny názov a hodnotu v tabuľke. Toto má za následok, že Screen Reader automaticky číta: „Hmotnosť: 125g”.

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)
    }
}

Celistvosť tejto informácie spôsobí pre používateľa úplne iný zážitok z aplikácie.

Hodnotenie 

Následne sa pozrieme na jednoduchý komponet hodnotenia produktu.

Neprístupný flow (vľavo)

Keď sa presuniem v neprístupnom flowe na komponent hodnotenia, automaticky ma posunie na prvú hviezdičku ako prvé akčné tlačidlo z komponentu a čítačka zahlási: „Pridať medzi obľúbené, Tlačidlo”.

Keď začnem prechádzať zľava doprava, hlási to isté na každej hviezdičke. Pre nevidiaceho je veľmi ťažké až nemožné domyslieť si, čo sa deje na obrazovke.

@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")
            }
        }
    }
}

Používateľ je opäť zmätený, pretože nevie, čo tlačidlá robia. V horšom prípade si myslí, že robia to, čo povedala čítačka: pridávajú medzi obľúbené, pričom on si bude myslieť, že pridáva produkt do obľúbených, ale v skutočnosti bude odosielať hodnotenie, ktoré neodzrkadľuje jeho skutočný názor.

Prístupný flow (Vpravo)

V prístupnom flowe sme komponent hodnotenia zoskupili a pridali sme mu príznak „nastaviteľný” (adjustable).

Akonáhle sa v prístupnom flowe presunieme na hodnotenie, čítačka povie: „Hodnotenie produktu jablko 1 z 5, nastaviteľné”. Toto používateľovi naznačuje, že:

• hodnotenie sa týka produktu jablko,
• aktuálna hodnota je 1 z 5,
• vie jednoduchým gestom nad komponentom meniť jeho nastaviteľnú hodnotu.

@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
        }
    }
}

Ako vývojári máme obrovský vplyv na to, či bude aplikácia použiteľná pre všetkých, alebo či bude pre časť používateľov jednoducho neprístupná. Ako sme videli v príkladoch, často stačí pár úprav kódu – správne nastavené atribúty, premyslená navigácia či vhodná správa stavu prvkov – a aplikácia sa stáva oveľa zrozumiteľnejšou pre tých, ktorí sa spoliehajú na asistívne technológie. 🛠️📱

Pri vývoji je dôležité myslieť na:

✔️ Logickú navigáciu – prvky musia byť čítané v zmysluplnom poradí

✔️ Správne označenie komponentov – čítačka obrazovky potrebuje jasné popisy

✔️ Interaktívne prvky – tlačidlá, tabuľky a formuláre musia mať zrozumiteľnú funkcionalitu

✔️ Skupinovanie prvkov – relevantné informácie by mali byť prepojené, aby dávali zmysel aj bez vizuálneho kontextu

Prístupnosť nie je len „nice-to-have“ – v mnohých prípadoch je legislatívnou požiadavkou a v neposlednom rade aj kvalitným softvérovým inžinierstvom. Dobre napísaný kód znamená lepšiu škálovateľnosť, udržateľnosť a lepšiu použiteľnosť pre všetkých.

Takže keď budete nabudúce implementovať novú funkcionalitu, opýtajte sa sami seba:

➡️ „Bude to fungovať aj pre niekoho, kto nevidí obrazovku?“

➡️ „Vie používateľ pochopiť funkcionalitu len pomocou čítačky obrazovky?“

➡️ „Navigácia a interakcie dávajú logiku aj bez vizuálneho usporiadania?“

Ak nie, možno je čas pridať pár accessibility fixov. Malé zmeny v kóde neraz znamenajú obrovský rozdiel v používateľskej skúsenosti. 🔥​

💡 Zdrojový kód nájdete na GitHub.