Radek Pavlíček s Romanem Kabelkou vedli v předvečer letošního WebExpa hodně zajímavý workshop Přístupnost pro kodéry. Za mě prima přiležitost k aktualizaci znalostí od odborníků na slovo vzatých. Teď se vám pokusím předat pár informací, které ve mě utkvěly nejvíc. Protože – jak hezky Radek podotkl – právě frontendisti mohou s přístupností webů pomoci nejvíce.

Aktualizace: O WAI-ARIA už mám článek i na Vzhůru dolů. Včetně demonstračního videa.

2) Více navigací na stránce. Žádný problém. Mohu je pro odlišení pojmenovat návěštím (aria-label="…") nebo se ještě lépe odkázat na existující nadpis (aria-labelledby="…"). Někteří znáte ze zdrojáků Bootstrapu.

<div role="navigation" aria-labelledby="uzivatelske-funkce">
  <h3 id="uzivatelske-funkce">Uživatelské funkce</h3>
  <ul> … </ul>
</div>

<div role="navigation" aria-labelledby="prihlaseni-k-newsletteru">
  <h3 id="prihlaseni-k-newsletteru">Přihlášení k newsletteru</h3>
  <ul> … </ul>
</div>    

3) title & alt & longdesc, tři mušketýři. title="" na přístupnost nemá zásadní vliv. Je problematický nepříliš velkou podporou odečítačů, jinak též řečeno slepeckých čteček. Dobrý pomocník hlavně pro lidi co mají myš, u slepců víceméně jen jako dodatečný popisek ve formulářových prvcích. alt="" je naopak důležitý velmi. Prázdný alt="" znamená, že se element bude ignorovat. Obrázek bez atributu alt je nepřístupný. (A nevalidní.) Atribut longdesc umožňuje delší popis u obrázku, pokud by alt překročil 80 znaků.

4) Dva režimy čtečky. Nevěděl jsem, že čtečky umožňují oba módy – pasivně–sekvenční procházení pomocí nadpisové osnovy dokumentu nebo strukturované procházení pomocí WAI ARIA oblastí (role=""). Ten druhý způsob zrakově postižení zatím využívají méně, je ovšem velmi dobře podporovaný a výborně použitelný, takže na WAI ARIA rozhodně nezapomínejte! U aplikací je strukturovaný režim samozřejmě ještě důležitější.

5) U složitějších webů a aplikací nezpomínejte na klávesové zkratky. Je sice blbé, že pro ně neexistuje standard, jejich přítomnost je nicméně vždy vítána. Ideální je vložit skrytý odkaz na ně hned na začátek stránky. Velké české weby se shodly na jakémsi průniku a odkazují na tuto stránku. Najdete třeba v kódu Novinky.cz.

6) A zase – aplikace a prezentační weby jako naprosto odlišné světy. I v přístupnosti. Zatímco u prezentačních webů stačí pro obstojnou přístupnost dodržet dobrou nadpisovou osnovu, nezapomínat na alt="" obsah a přidat WAI ARIA oblasti. Tedy něco co dobře vycvičenému kodérovi nezabere prakticky žádný čás navíc. U aplikací to tak není – dobrá přístupnost si tam vezme dost energie při výrobě.

Teď pozor! Poslední bod vám udělá radost.

7) Ani table pro layout nemusí být prasárna. Pokud ji používáte jen pro formátovací účely, z pohledu přístupnosti může být v pohodě. Stačí přidat kouzelný WAI ARIA atribut presentation.

<table role="presentation">
…
</table>

Dozvěděli jste se něco nového? Mám radost. Využijte to hned na aktuálním projektu. Pár minut vaší kóderské práce znamená velký přínos pro znevýhodněné uživatele.

Chcete vědět více? Rád vás odkážu na blog Radka Pavlíčka nebo jeho texty na Zdrojáku:

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii HTML.

Picture, nová značka pro vkládání obrázků

21. 6. 2017 v příručce

Aktualiace textu o novém tagu, umožňujícím definování variant obrázku pro různé stavy v responzivním webdesignu.

BEM: Pojmenovávací konvence pro třídy v CSS

5. 6. 2017 v příručce

Block, Element, Modifier. Nově přepsaný článek o metodice pro pojmenovávání tříd v komponentách.

Veřejná školení

Dnešní webová kodéřina

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Příští termín: 27. září.

14. září Mistrovský vývoj webů na WordPressu
5. října Optimalizace rychlosti načítání
19. října SVG
16. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Vydal jsem nový e-book: „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací