Nestandardně vytvořené formulářové prvky jsou z hlediska přístupnosti velký problém

Dnešní článek nebude o nedostatečném barevném kontrastu, titěrném písmu či nedostatečném odlišení odkazů od okolního textu (byť i to jsou témata, která by si zasloužila samostatné příspěvky). Rád bych se dnes podíval na věc, která se pomalu a plíživě šíří českým i zahraničních webem a znepříjemňuje život řadě uživatelů. O čem je řeč? O formulářových prvcích, které nejsou přístupné z klávesnice a/nebo pro uživatele asistivních technologií.

V čem je problém?

V nahrazení (či lépe řečeno překrytí) standardních formulářových prvků (například zaškrtávacích políček či přepínačů) prvky, které sice vizuálně vypadají jako zaškrtávátko či přepínač, ale na úrovni kódu tomu tak není a nejsou buď ovladatelné z klávesnice, nebo je jako formulářové prvky „nevidí“ asistivní technologie. Jedno z pravidel přístupnosti a použitelnosti přitom říká, že veškeré prvky na stránce musí být přístupné a ovladatelné z klávesnice. Bohužel tomu tak ale často není.

Ano, už jsem se setkal i s názorem „hlavně to musí být hezké, aby to lidi chtěli používat“. Já osobně (a věřím, že nejsem sám) to ale vidím jinak – když nebude web použitelný a přístupný, tak ho pěkná grafika nezachrání. Samozřejmě po nikom nechci, aby měl kvůli přístupnosti nepěkný web (to, že jde přístupnost a pěkný design skloubit dohromady a že pěkný design může přístupnosti pomoci, je obecně známý fakt), ale povyšování designu nad funkčnost, přístupnost a uživatelskou přívětivost mi začíná čím dál tím víc vadit.

Jak z toho ven

Řešení je přitom velmi jednoduché. První cestou je respektovat standardy, nevymýšlet znovu kolo a používat standardní formulářové prvky. Možná nejsou tak cool jako ty nakreslené grafikem, ale zaručeně budou fungovat napříč systémy a všem uživatelům. A třeba u takové platební brány jsou nepřístupné rozbalovací seznamy „megafail“. K čemu je uživateli, že jsou hezké, když mu brání v zaplacení? Tento příklad je navíc živou a reálnou ukázkou toho, jak se nepřístupným webem připravit o peníze.

Druhou cestou je pak použít techniky z WAI ARIA, které jsou přesně pro tyto účely určeny.

Jak si může pomoci uživatel

Protože přesvědčit autory webu o potřebných úpravách je dost často běh na dlouhou trať, samozřejmě hledáme cesty, jak situaci operativně vyřešit na straně klienta a nabídnout nějaké okamžité řešení. S kolegy v GALOPu jsme proto připravili bookmarklet, který danou situaci jednoduše řeší. Pokud jej chcete používat, pak si stačí standardním způsobem vytvořit v prohlížeči novou záložku, pojmenovat ji například Zobrazit skryté prvky formuláře

a do pole Adresa URL v dialogovém okně pro vytvoření záložky zkopírovat následující kód:

javascript:(function(){var formElements;var i;formElements = $("select[style]");for(i=0;i<formElements.length;i++){formElements[i].setAttribute("style","");}formElements = $("input[type='checkbox'][style]");for(i=0;i<formElements.length;i++){formElements[i].setAttribute("style","");} })();

Od této chvíle pokaždé, když narazíte na problém s nepřístupnými formulářovými poli kvůli jejich skrytí, si stačí na dané stránce zobrazit Oblíbené položky, najít a potvrdit záložku Zobrazit skryté prvky formuláře a pak už pro váš odečítač budou skryté prvky přístupné a vy s nimi můžete standardním způsobem pracovat.

Bookmarklet si můžete vyzkoušet například na stránce s formulářem pro nastavení newsletteru dTestu.

Ukázka formuláře na stránce dtest.cz

Související odkazy

Děkuji Michalu Jelínkovi za otestování řešení v praxi a zpětnou vazbu.

Radek Pavlíček

4 komentáře u „Nestandardně vytvořené formulářové prvky jsou z hlediska přístupnosti velký problém

  1. Zdravím – měl bych dotaz:

    Čtečky nepřečtou pole, která jsou skrytá (hidden)? To tam většinou dává nějaký JS a když bych na webu vypnul JS, případně i CSS, tak bych měl mít formulářové ovládací prvky k dispozici (samozřejmě řešení je hodně), ne? Ale tipuji, že mi něco uniká:)

    Díky, FK

    1. To je také možnost, ale je u ní to riziko, že se zakázáním CSS/JS může narušit funkčnost dané stránky, což třeba v případě internetového bankovnictví (jedna z konkrétních situací, pro kterou jsme tento bookmarklet použili) není úplně žádoucí.

  2. Ten bookmarklet bohužel nebude moc fungovat. Jednak je závislý na tom, že web používá nějakou knihovnu typu jQuery.

    A nakonec zviditelní jen prvky, které jsou skryty HTML atributem style, což bude nejspíš menšina. Většina prvků bude skryta pravděpodobně externím CSS nebo JavaScriptem. A ani jedno bookmarklet nevyřeší.

    Šel bych na to spíš nějak takto, i když ani takový postup nebude vždy 100%, ale problémy zde uvedeného řešení netrpí.

    1. Bookmarklet nám zatím tam, kde jsme na tento problém narazili a potřebovali jej na straně uživatele vyřešit, fungoval 😉 ale vylepšení se samozřejmě nebráníme. Díky za něj.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..