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.
Související odkazy
- Bookmarklet – co to je a jak to používat
- Pod bičem designéra, aneb uživatel až na posledním místě
- ARIA examples
Děkuji Michalu Jelínkovi za otestování řešení v praxi a zpětnou vazbu.