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.

Jak definovat strukturu v HTML a proč jsem začal mít rád HTML5 tagy

2. 3. 2017 v příručce

Sekční tagy a role atributy umožňují lépe strukturovat stránku. Užitečné jsou hlavně ve slepeckých čtečkách. A myslím, že je čas se s nimi skamarádit.

NN Group: Jak vylepšit formulářové prvky pro vložení datumu?

9. 2. 2017 na blogu

Stručné shrnutí článku. Jak vylepšit input type=date z pohledu uživatelského.

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: 26. září.

20. dubna Bootstrap pro pokročilé
11. května Principy Javascriptu
5. října Optimalizace rychlosti načítání
19. října SVG

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.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč