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.

• About
• Latest Posts

Radek Pavlíček

Radek se přístupnosti a speciální ICT pro uživatele s těžkým postižením zraku věnuje od roku 1998.Blog POSLEPU založil v roce 2007 a protože práce je mu koníčkem, stále jej baví na něj psát a udržovat ho aktivní a aktuální.

Latest posts by Radek Pavlíček (see all)

• Accessibility: The Backbone of True Inclusion - 4. 12. 2024
• Zapojte se do průzkumu o přístupu k onkologické péči pro lidi se zdravotním postižením - 1. 12. 2024
• WebExpo 2025: Black Friday Deal ends Sunday! - 28. 11. 2024