Menu
Aj mimozemšťan musí byť schopný prečítať web, autorka: Lucia Lukáčová

Ako spolu súvisí prístupnosť a použiteľnosť?

Ak na webe návštevníci ľahko nájdu informáciu, ktorú hľadajú, vedia bez problémov odoslať kontaktný formulár alebo si objednať produkt, tak web má dobrú použiteľnosť. Zlepšením použiteľnosti dokážete napr. zvýšiť predaj na webe – stránky budú ľudí menej frustrovať a oni neodídu ku konkurencii.

A ako vyzerá váš web na malej obrazovke v staršom mobile? Vedia ho prečítať aj ľudia so slabším zrakom? A čo nevidiaci (áno, aj oni sú na internete!)? To všetko spadá pod prístupnosť. A prístupný web nevylučuje žiadnu skupinu návštevníkov, naopak poskytuje svoj obsah tak, aby sa k nemu dokázal dostať každý.

Dnes už veľa ľudí nad použiteľnosťou svojho webu rozmýšľa, na prístupnosť však stále mnohí zabúdajú. Preto sa dnes pozrieme na to, ako zlepšením prístupnosti zároveň pomôžete aj použiteľnosti stránok.

1. Responzívnosť

Dobre urobený prístupný web je zvyčajne aj responzívny a to vám garantuje, že užívatelia budú mať dobrú skúsenosť s webom nielen na desktope či notebooku, ale aj na tablete alebo niekoľkoročnom mobile. Ak by sme to dotiahli do extrému, prístupný web si prečítate aj v historicky prvom prehliadači webu na svete z roku 1992!

2. Rýchlosť

Prístupný web je aj rýchly, pretože eliminuje nepotrebné prvky a poskytuje alternatívu (programátorovi môžete spomenúť „CSS media queries„) k náročným médiám ako veľké obrázky, videá a pod. Základom dobrej použiteľnosti je práve rýchlosť a indikácia odozvy a to dokáže prístupný web automaticky ponúknuť. Mimochodom – za rýchlosť získate veľké plus aj vo vyhľadávači Google, ktorý hodnotí rýchlosť načítavania vašich stránok.

Aj mimozemšťan musí byť schopný prečítať web

Aj mimozemšťan musí byť schopný prečítať web

3. Kontrast

Výrazné kontrasty sú potrebné pre ľudí so slabším zrakom alebo inou zrakovou poruchou. Aj keď môžete namietať, že takí ľudia váš web nepoužívajú, zahrnúť sem môžeme aj seniorov a navyše bude dochádzať k zmenám v zraku stále u väčšej časti populácie (všetci trávime za obrazovkami viac času a našim očiam často nedoprajeme dostatočný oddych).

Prístupný web vám umožní získať verných zákazníkov aj medzi týmito ľuďmi, lebo vaša konkurencia na nich (zatiaľ) nemyslí. Takíto užívatelia si budú vedieť web prečítať a vykonať na ňom požadovanú akciu. Zároveň výrazné kontrasty pomáhajú v oblasti použiteľnosti – prvky ako výzvy na akciu (tlačítka) majú priťahovať pozornosť a byť rýchlo rozoznateľné.

4. Štruktúra stránky

Nadpisy, odstavce, zoznamy, obsah rozdelený do častí. Použiteľný web vzhľadovo rozlišuje jednotlivé elementy (a necháva im dostatok prázdneho priestoru okolo – tzv. whitespace) pre dobrú čitateľnosť. Mnoho ľudí na webe texty očami najprv v rýchlosti „preskenuje“. Ak sa budú vaše stránky zlievať do jedného dlhého a neprehľadného obsahu, návštevníci budú odchádzať. Ak im naopak poskytnete silné záchytné body – nadpisy veľké podľa úrovne (hlavný nadpis, podnadpis atď.), prehľadné zoznamy – na stránke strávia viac času.

Dobré štrukturovanie stránok tiež pomáha ľuďom s čítačkami, pre ktorých by inak váš web bol nedostupný (odborne „neprístupný“). Títo ľudia si nemôžu váš web len tak prečítať, ale musia využiť čítačku, ktorá im ho nahlas prečíta. Zároveň im umožňuje sa webom pohybovať, pretože pomáha rozlíšiť navigáciu od bežného textu a umožňuje na interaktívne prvky ako napr. odkazy „kliknúť“.

5. Alternatívne texty

Ukážka ALT / Title pri prechode myši nad obrázkom

Ukážka ALT / Title pri prechode myši nad obrázkom

Nie všetci návštevníci uvidia vaše obrázky. Niektorí z dôvodu šetrenia predplatených dát, iní zas (napr. nevidiaci alebo osoby so slabým zrakom) používajú čítačku stránok. Čítačka stránok je software, ktorý nahlas číta texty na webe. Obrázky samozrejme prečítať nejdú. Aj týmto užívateľom však môžete vyjsť v ústrety a to tak, že všetkým obrázkom priradíte alternatívny text (atribút alt). A keď už robíte prvý krok, urobte aj ten druhý – doplňte k obrázkom popisky (atribút title, prípadne aj longdesc).

Tie pomôžu použiteľnosti – návštevník prejdením myšou nad obrázkom bude vedie viac o tom, kam sa dostane po kliknutí na obrázkový odkaz.

6. Mapa stránok

Mapa stránok sa už dnes berie ako štandard, ale objavujú sa aj pokusy z webu ju odstrániť. Ak človek na webe nenájde, čo hľadá, má dve možnosti – vyhľadávanie alebo mapu stránok. Vyhľadávanie je fajn, ak funguje – čo však platí o minime webov (a užívatelia dnes požadujú vyhľadávanie na úrovni Google, nie komplikované inštrukcie, kde dávať spojky OR či AND).

Druhá možnosť je poskytnúť hierarchický zoznam stránok na webe – teda mapu stránok. Mapa by mala obsahovať len hlavné kategórie, nie je potrebné ísť až na úroveň napr. článkov či produktov. Berte ju ako poslednú záchranu pre strateného návštevníka a nezabudnite na ňu odkazovať z pätičky webu. Zároveň je to rýchly prehľad všetkých (dôležitých) stránok na jednom mieste napr. pre ľudí so spomínanými čítačkami – tí sa inak budú musieť pomaly predierať vaším webom.

7. Použitie klávesnice

Klávesnica bola ešte nedávno hlavné zariadenie na interakciu s počítačom. Dnes jej úlohu vo veľkej časti nahrádza myš, ale pri akomkoľvek zadávaní textu sa k nej vraciame. Prístupný web umožňuje plnohodnotne používať klávesnicu aj v prípade, ak nemáme myš. Preto by vaša navigácia a formuláre mali reagovať aj na posun tabulátorom, stlačenie klávesy Enter či skrolovanie šípkami.

Okrem ľudí so zníženou pohyblivosťou alebo svalovými poruchami možnosť použiť klávesnicu ocenia aj tzv. power useri, t.j. ľudia, ktorí za internetom trávia hodiny času a sú vďačnou cieľovou skupinou zákazníkov. Fungovanie klávesnice by malo byť samozrejme aj pri posune obrázkov v galérii (napr. lightbox efekt) či v dlhých formulárových zoznamoch (element select).

Na zvýšenie prístupnosti môžete naviazať niektorú z nepoužívaných kláves v prehliadačoch (zvyčajne čísla, resp. vytvorenie klávesovej skratky ALT+číslo) aj na preskočenie navigácie pre ľudí s čítačkami, ktorí si inak musia na každej stránke vypočuť vaše celé menu.

8. Formuláre

Prístupné a použiteľné formuláre majú jednu spoločnú vlastnosť – prepojenie popisu (prvok label) s textovými a inými poliami (prvky input, textarea, select atď.). Z hľadiska prístupnosti je dôležité významovo priradiť popis ku formulárovému poľu (opäť napr. pri spracovaní čítačkou). A pre dobrú použiteľnosť je vhodné zväčšiť plochu, na ktorú môže používateľ kliknúť. Klasický príklad sú zaškrtávacie polia (checkbox) alebo okrúhle tzv. radio buttony.

Ukážka plochy, na ktorú sa dá kliknúť pri použití prvku label.

Ukážka plochy, na ktorú sa dá kliknúť bez prvku label (vľavo) a pri použití prvku label (vpravo). Napravo sa triafa ľahšie.

Tieto dva prvky sú zvyčajne veľmi malé a neumožňujú jednoducho kliknúť (trafiť) správnu možnosť. Ak však doplníte popis prepojený na políčko, zrazu sa plocha na kliknutie rozrastá o text, ktorý sa už trafia myšou ľahko.

9. Odkazy do nových okien

Odkazy vynucujúce si otváranie nových okien by mali byť na vašom webe minulosťou. Okrem toho, že užívateľ môže byť často zmätený stratou kontextu, znemožňujete mu aj použitie tlačidla späť. Mnohí užívatelia sa nebudú vedie vrátiť na váš web a ten vynútený odkaz na externý web do nového okna je tak nanajvýš kontraproduktívny.

Moderné prehliadače našťastie dávajú užívateľom kontrolu nad takýmito prehreškami a zvyčajne odkaz otvoria iba v novom tabe. To však tiež môže niektorých návštevníkov zmiasť. Navyše z hľadiska prístupnosti je strata kontextu katastrofálna. Špecificky v sotfvéri, ktorý nemusí podporovať prezeranie viacerých webov či neposkytuje prehľad o celej stránke naraz (opäť nielen spomínané čítačky).

10. A čo váš web?

Ak váš web nefunguje dobre v mobiloch alebo nespĺňa iné požiadavky prístupnosti, máte možnosť to zmeniť a získať tak nových návštevníkov. Ozvite sa nám a dohodnite si konzultáciu. Ak chcete úplne nový web, ten od Pizza SEO je automaticky vyladený nielen pre prístupnosť a použiteľnosť, ale tiež pre dobré umiestnenie vo vyhľadávačoch.

Páčil sa Vám článok?

Nenechajte si újsť raz mesačne naše najdôležitejšie novinky!
  • Toto pole je pre validačné účely a mal by zostať nezmenený.