Technologie / Programování / Webové stránky

Přístupný internet zrakově postiženým & SEO optimalizace

Ali
thumbnail

SEO optimalizace nejen jako hodnocení webových stránek. 

Pokud jste si mysleli, že SEO optimalizace slouží pouze k zhodnocení webu nebo usnadnění vyhledávání různých prohlížečů, jste na omylu. SEO optimalizace také usnadňuje a umožňuje nevidomým lidem vyhledávání na internetu. 

Je důležité přizpůsobit webové stránky například osobám s horším zrakem nebo i osobám které nevidí vůbec. Pokud není web přizpůsoben i pro takové případy, tak se neřídí podle aktuálních standardů.

Spousta webových vývojářů a UX designérů, se tímto tématem nezabývá. Někdo na toto téma ještě ani nenarazil, všichni se ale zajímají o SEO (Search Engine Optimalization) praktiky. 


Jsou praktiky kterými vyřešíte 2 věci najednou. Zároveň přizpůsobí váš web osobám se zrakovými problémy a navíc tím zvýšíte váš celkový SEO rank. Sami zvažte které z nich se vyplatí používat. 


Samozřejmě spousta z těchto praktik je, nebo by měla být obecně známá a masově používaná. Určitě stojí za to, připomenout si pár hlavních bodů.


Alternativní text obrázku

 Alternativní text obrázku je nedílnou součástí jak optimalizace SEO, tak optimalizace webu. Pokud si web prohlíží nevidomý člověk a není u obrázku žádný alternativní text, tak nemá možnost zjistit co na obrázku je. Na stejném principu fungují i webové vyhledávače, které prochází weby podobně jako nevidomý člověk s čtečkou textu. Vyhledávače také nevidí co na obrázku je, můžou si jen dohledat alternativní text obrázku a podle toho zjistit(hádat) o čem obrázek je. Čím lepší alternativní text obrázku napíšete, tím lépe vyhledávače pochopí obsah obrázku, což vám může zvýšit SEO rank webu. V dnešní době už umí vyhledávače automaticky rozpoznat co je na obrázku a sami si to doplnit, otázka ale je jak bude ve vašem případě rozpoznání přesné, a jestli se na výsledek spoléhat.

TIP: Je lepší přidat obrázku prázdný alternativní text než ho vynechat úplně. Obzvlášť pro čtečky textu, pokud chybí značka “alt” úplně, tak čtečka čte celý odkaz obrázku (každý znak), což může být pro uživatele velice nepříjemné.



Sémantické HTML značky

Pokud se podíváte na Wikipedii a vyhledáte co je “Sémantika”, tak první co se vám ukáže je, že Sémantika je nauka o významu výrazů a slov. Co tedy potom znamená “Sémantické HTML značky”? 


Dalo by se to přeložit jako “HTML značky, které mají význam”. Pro člověka, který si klasicky prohlíží web nemusí mít tyto značky vůbec žádný význam, protože je nevidí. Ale ti co využívají čtečku textu, tak jim tyto značky mohou pomoci najít systém v tom, jak je web strukturovaný, a jak se v něm orientovat.

Například <div> se na webu používá skoro všude, ale samotná značka žádný význam nemá. Vlastně je to zkratka z anglického division(oddíl), ale to moc významu nepřidává. Představte si, že máte web který má hlavičku s navigací, pod tím nějaký obsah se články a na konci patičku. Taková klasická struktura blogu. Vsadím se, že u většiny z nás by to mohlo vypadat například nějak takto.

Z hlediska funkčnosti na tom není nic špatného, ale z hlediska dostupnosti pro nevidomého člověka je to katastrofa. Jelikož čtečka textu, která stránku zpracovala nepozná který prvek co znamená, a tak nemůže člověku napovědět kde je navigace nebo hlavní část. 

Když se tento příklad přepíše do Sémantické podoby tak vše bude dávat větší smysl, i pro vyhledávače které web procházejí.

Samozřejmě jsem v tomto příkladu vybral značky, které jdou přepsat lehce a jsou případy, kdy nelze najít sémantickou podobu nějakého elementu, sami vyberte co dává smysl přepsat.

Seznam všech sémantických HTML značek, které můžete použít najdete zde

Sémantiky HTML lze také dosáhnout pomocí ARIA specifikace, která umí přidat elementům sémantický význam i bez přepisování, role a vztahy mezi elementy. Jedná se primárně o přizpůsobení webu například pro čtečku textu.


Tabindex

Spousta tlačítek na webu se běžně dělá například pomocí divů, které se pak patřičně nastylují. Nicméně <div> narozdíl od značek jako <input>, <button>, <form>, <textarea> sám o sobě není element, který jde označit tabulátorem. Pokud stránku prochází například jen uživatel s klávesnicí tak tyto elementy (<div>) přeskočí, a proto je dobrá praktika přidat jim tabindex.

Pro čtečky je také ideální přidat roli (button, input, textarea apod.).

Můžete si sami na vlastní stránce vyzkoušet jaké elementy jsou dostupné jen přes klávesnici pomocí tabulátoru, a co nebude v pořádku, opravit pomocí atributů “role” a “tabindex”.


Barevný kontrast

Barevný kontrast textu s barvou pozadí je důležitý pro viditelnost textu a to nejen pro osoby se zrakovou vadou. 

Praktiky WCAG 2.0 stanovují 3 úrovně kontrastu mezi pozadím a barvou textu a jsou to A, AA, AAA. První úroveň je základní, a na tu by měl dosáhnout veškerý obsah stránky. Pokud je kontrast pod úroveň A, tak je prakticky nečitelný i pro člověka bez zrakového problému.

 


Úroveň AA (kontrast 4.5:1 nebo 3.0:1 pro velké texty) je minimálním standardem pro základní čitelnost textu. Text s takovým kontrastem by měl přečíst každý člověk s relativně dobrým zrakem. Třetí úroveň AAA(kontrast 7.1:1) je nejlepší volbou, hlavně pro hlavní a dlouhý text.

Jsou různé pomůcky, které pomáhají zjistit jaký kontrast text s pozadím má, a dokáží i doporučit jaké barvy použít pro optimální čitelnost. 



 Použití nadpisů

Ohledně nadpisů není moc standardů podle kterých se řídit. Jediné co by se mělo dodržet, je že na stránce by měl být jeden <h1> nadpis, který vyhledávače berou jako hlavní(unikátní) nadpis stránky, a poté například pár <h2> pro rozlišení jednotlivých sekcí. 

Záleží jak máte web strukturovaný, ale ve většině případů budou stačit jen dvě, maximálně tři úrovně nadpisů.


Výše uvedené body nejdou povinné, ale dokáží zvýšit hodnocení vašeho webu v očích uživatelů i vyhledávačů, a významně pomoci nevidomým lidem při vyhledávání na internetu.



Další zajímavé články
Benefity tmavého designu nad světlým aneb. proč je tak oblíbený? Jak vám může chatbot pomoci ve vašem podnikání?
Komentáře (0)
Štítky
back to top button