Novinka pre web programátorov v ponuke - Vue.JS

Čo je prístupnosť webových stránok?

html prístupnosť SEO web stránky
kategória: Blog pridané: 21. októbra 2017

Zamysleli ste sa niekedy nad tým, kto sú vaši zákazníci? Pre niekoho to môžu byť študenti, mamičky, muži nad 50 rokov, alebo mnoho iných cieľových skupín. Môžete mať nastavené super cielené kampane, reklamy, bannery, krásnu webstránku, ale stále je možné, že strácate až 20% zákazníkov. Ako je to možné?

 

Kurz: SEO II – pokročilá optimalizácia pre vyhľadávače

Lektor: Tibor Peták

 

O kurze som som písala v predošlých článkoch – SEO I. a SEO II.. Z týchto kurzov som bola nadšená, avšak čo mi naozaj utkvelo v pamäti je práve prístupnosť webstránok. Lektor Tibor nás zarazil práve faktom 20% stratených zákazníkov, na ktorých pri budovaní webstránky častokrát zabúdame. Tých 20% sú handicapovaní ľudia! Nevedomky im však znemožňujeme prístup k našim webovým stránkam, to by predsa v dnešnej dobe nemalo prichádzať do úvahy. Web by mal byť prístupní teda všetkým, handicapovaní používatelia môžu mať sluchové, zrakové, motorické, alebo iné postihnutie. Vďaka prístupnému webu bude mať každý možnosť dostať sa na váš web a prípadne sa stať vašim zákazníkom. Bonusom k tomu je, že sa vám zlepší viditeľnosť stránky vo vyhľadávačoch. Samozrejme, existuje mnoho možností, ako sprístupniť váš web všetkým, dnes si však spomenieme tie najzákladnejšie.

Čo je na obrázku?

Tibor Peták vysvetľuje SEO na kurze

Vidíte tento obrázok? Bohužial nie každý má túto možnosť, jedným zo základov prístupnosti sú práve textové alternatívy obrázkov. Textové alternatívy by mali zodpovedať tomu, čo vidíte na obrázku. Ako tento text dostať do obrázku? Na to potrebujete alt atribút.

 

Alt atribút by mal mať rovnakú informačnú hodnotu ako to čo vidíte na obrázku, v tomto prípade by som napísala: “Tibor Peták vysvetľuje SEO na kurze.” Ak používate WordPress, je to veľmi jednoduché.

Nastavenie: Wordpress Alt Atribút

Pridáte si obrázok do multimédií a do kolónky “ALT TEXT” napíšete textovú verziu obrázka. To je všetko! Je to naozaj jednoduché. Aj ja si teraz prerábam celý môj eshop nanovo, práve vďaka znalostiam z IT Learning kurzov (čoskoro očakávajte článok, čo všetko som pri tvorbe webu využila). Alt atribút bol pre mňa jedna z najdôležitejšich vecí pri nahadzovaní obrázkov, keď to urobíte hneď pri tvorbe webu, tak je to úplne jednoduché. Samozrejme, tí čo už web máte, nezaberie vám to veľa času. Otvoríte si galériu multimédií a postupne doplníte všetky alt atribúty. V príklade som použila fotku, ale keď budete opisovať produkty, bude to omnoho jednoduchšie a kratšie. Napríklad, kvetinárstvo ponúka rôzne druhy kvetov, tak fotka ruží môže mať alt atribút “kytica bielych ruží.” Textová alternatíva má byť stručná a hlavne vystihovať podstatu obrázku.

Ako vyzerá čítanie obrázkov?

Kto vlastne nemôže vidieť obrázky na web stránke? Sú to hlavne nevidiaci a slabozrakí ľudia, ktorý využívaju na browsovanie po internete čítačku. Čítačka im predčítava text na webstránke a všetky funkcie na nej. Keď sa teda užívateľ dostane na obrázok, čítačka mu povie, že sa jedná o grafický prvok a následne prečíta alt atribút obrázku, ak existuje. Takže nikto nebude ukrátený o obsah na vašom webe.

Alt atribút obrázkov však využívajú aj ľudia, ktorí majú slabý signál alebo majú vypnuté zobrazovanie obrázkov kvôli slabému pripojeniu na internet, alebo majú minutý dátový balíček. Tým sa zobrazí namiesto obrázku text, bude teda pre nich jednoduché si domyslieť čo obsahuje webstránka.

Dá sa to čítať?

Ak vám webstránku dizajnuje dobrý grafik, určite si dá pozor na dostatočný kontrast farieb písma a pozadia.

Kontrast písmo a pozadie

Na otestovanie vašej web stránky môžete využiť Colour Contrast Analyzer, ktorý nám odporučil Tibor. Tento program sa dá pridať aj priamo do Google Chrome, takže farby stránok a správne kontrasty si môžete hneď otestovať.

Printscreen Colour Contrast Analyzer

Nezmyselné odkazy

Vráťme sa späť k čítačkam, tie vedia “skákať” po odkazoch. Teda nevidiaci sa vedia na vašej web stránke pohybovať po H1 nadpisoch, ale aj po odkazoch a preskakovať tak text. Väčšina ľudí používa na odkazovanie slovo “TU.” Určite to poznáte aj vy, cenník našich služieb nájdete TU.  Vetu by ste mali napísať tak, aby ste mohli vložiť odkaz na slovo “Cenník.” Tak isto, neoznačujte tento text farebne, že je klikateľný, ale práve kvôli farboslepým ľuďom by mal byť odkaz podčiarknutý.

Prečo je prístupnosť stránky nutnosťou?

  • Vyššia prístupnosť = vyššia použiteľnosť
  • Nižšia doba načítania web stránky
  • Lepšie SEO – vyššie pozície vo vyhľadávačoch
  • Noví zákazníci
  • Budovanie si dobrého mena na trhu
  • Empatia voči všetkým ľuďom – toto je asi najdôležitejšia výhoda zavedenia lepšej prístupnosti webstránok. Verte tomu, že mnoho ľudí sa bude cítiť začlenených do spoločnosti a určite získate u týchto zákazníkov malé plus, keďže nie každý myslí na handicapovaných ľudí.
autorom článku je: Erika Žišková
Erika úspešne ukončila MBA štúdium na City University of Seattle a tak isto získala aj Magistra na Univerzite Komenského, Fakulta Managementu. Po štúdiu pracovala v Španielsku vo firme, ktorá sa zaoberá vývojom aplikácií. Technólogie a digitálny svet sú jej koníček a ako testerka kurzov Vám bude prinášať jej pohľad a recenzie. Hor sa do učenia! 🙂

Podeľte sa s nami o svoj názor:

Páči sa Vám článok alebo novinka?