Přístupný web podle Googlu

Přístupné HTML bohužel zajímá málo web developerů. Přitom většinou stačí držet se čistého HTML. Přečtete si pár bodů z přednášky o přístupném HTML. Přednášejícím byl Mike West, člen Google Chrome týmu. 

Nástroj pro testování přístupnosti

Přístupnost jakéhokoli webu můžete testovat s Chrome rozšířením ChromeVox. S ChromeVoxem si můžete vypnout obrazovku a zkusit se pohybovat po webu jen za pomoci této čtečky.

Obrázky

Tag <img href="http://.../sdf2s65f4s5d.jpg" /> musí vždy obsahovat alt parametr, tedy <img href="http://.../sdf2s65f4s5d.jpg" alt="roztomilé koťátko" />.

Pokud alt parametr neuvedete, čtečka přečte název obrázku. V našem případě sdf2s65f4s5d.jpg, což uživateli nic neřekne. Pokud máte na webu obrázek, který je jen součást grafiky, můžete využít prázdného parametru alt="". Pak čtečka nepřečte nic. To se může hodit, když jde o obrázek zakulaceného rohu nebo stínu v šabloně. Pokud má obrázek správně vyplněný alt="roztomilé koťátko", čtečka přečte toto. Ne název obrázku.

Berte alt parametr vážně i jako optimalizaci pro vyhledávače. Uživatelé mohou přijít na web i přes vyhledávání obrázků. Doporučoval bych ještě smazat složku /images/ ze souboru robots.txt. Jinak žádný vyhledávač nebude obrázky indexovat.

Modal boxy

Reader se pohybuje jen v DOM. Když vyběhne modalbox, musí se vybrat prvek, který je první v tomto modalboxu. Jinak reader nepozná kde má pokračovat ve čtení. Stejně pak když se modal box zavře, reader by neměl pokračovat od začátku, ale vybrat prvek následujíci po spoušti modal boxu.

Pohyb na stránce jen s pomocí klávesnice

S čtečkou se na stránce dá pohybovat jen pomocí klávesnice. Na odkazy a formulářové prvky se dostanete přes klávesu TAB. To by mělo pro většinu webů stačit. Můžete ale využít atribut tabindex="1". Číslo říká čtečce po kolikátém stalčení klávesy TAB se má na daný element najet.

Simulace tlačítka

Atribut <div role="button"></div> řekne čtečce, že tento div vykoná nějakou akci. Když mu ale přidám click event pomocí JavaScriptu, musím mu přidat i key event (malé opáčko: po webu se naviguje jen pomocí klávesnice). Jinak se k akci reader nedostane. Nejjednodušší je použít elemetn button, zde jsou obě akce automaticky.

Nástroj pro odhalení chyb v přístupnosti

Tento nástroj najdete rovnou v prohlížeči Google Chrome. Otevřete Chrom dev tool (CTRL + SHIFT + I), záložku Audits. Zde najdete upozornění na špatné použití kódu.

Nejnovější články

  • Teorie velikosti ňader

    2014-01-07

    Pravda, blog post o ňadrech se na tento web tématicky úplně nehodí, ale jelikož mám v hlavě myšlenku, která se mi zdá být (nebudu chodit kolem horké kaše) geniální a má drahá polovička se snaží...

  • První Český Joomla Day

    2013-12-26

    V sobotu1. března 2014 se v Praze uskuteční první Český Joomla Day. Pěkně shrnul dosavadní informace Svatopluk Vít z JoomlaPortal.cz, takže já vypíchnu jen několik bodů. Potvrzeným hostem je...

  • Jak snadno prodávat Joomla rozšíření

    2013-12-03

    Proč nemá Joomla App Store podobný jako mají Google či Apple? Vývojářům by to usnadnilo život. Nemuseli by trávit čas nad budováním svých repozitářů, platebních systémů, update serverů, aktualizací...

  • Jednoduchý eshop pro Joomlu s RSForm

    2013-04-23

    Nedávno jsem nasazoval jednoduché e-commerce řešení a byl jsem postaven před hotovou věc, že k tomu bude použit RSForm. Byl jsem trochu skeptický použít RSForm na platby, ale po nasazení musím...

  • Jaký webhosting vybrat pro Joomlu?

    2013-04-18

    Za nějakých 8 let, co se pohybuji kolem Joomly jsem prošel pěknou řádku poskytovatelů webhostingu. Ať už pro hostování mých webů, ale i klientů. Občas jsem opravdu překvapen za jaké služby je někdo...

Tip

EasyCalc

easycalcEasyCalc is component for creating realtime calculators of any type. For example if you need to explain your customers how many time / money / gray hairs atc. they save by using your product / service, let them count it for their situation.

Rich Snippets for VirtueMart

rich-snippets 207x207This awesome Joomla plugin adds structured data (also called Rich Snippets or meta information) about your VirtueMart products. It generates this automatically from the actual products. The best benefit is that Google can display some of these information right in the search results.