Archiv rubriky: Přístupnost webu

Proč nemá atribut title z hlediska přístupnosti prakticky žádný přínos

Pokud jste si mysleli, že pečlivým přidáváním atributu title k odkazům a jiným prvkům na webové stránce zlepšujete její přístupnost, tak vás dnes bohužel zklamu. Atribut title a jeho použití je – až na několik výjimek popsaných níže – často spíše ku škodě věci, než že by přístupnost nějak zlepšoval. Obzvlášť v případě, kdy jsou do atributu title umisťovány důležité informace, k nimž se uživatel nemá možnost dostat jiným způsobem.

Hlavní nevýhody použití atributu title osobně vidím v následujících věcech:

  • jeho obsah je přístupný pouze uživatelům, kteří k práci s webem používají myš,
  • jeho obsah není přístupný uživatelům mobilních zařízení při ovládání dotykem,
  • jeho obsah není přístupný uživatelům, kteří k práci s webem používají výhradně klávesnici.

Spoléhat se tedy na to, že se s informací umístěnou v atributu title budou moci uživatelé bez problémů seznámit, je mylné, protože uživatelé, kteří pracují s webem pouze pomocí klávesnice nebo používají dotykové ovládání, se k obsahu atributu title vůbec nedostanou. Což nemusí vadit v případě, kdy atribut title obsahuje pouze doplňkovou informaci k hlavnímu sdělení. Problematické to ovšem může být v případě, kdy je atribut title jediným nositelem dané informace a uživatel nemá jinou možnost, jak se k ní dostat.

V jistých situacích může dávat smysl atribut title pro sdělení doplňkové informace použít, i když i zde se zpravidla dají najít lepší cesty, jak uživateli požadovanou informaci poskytnout.

  • Prvním příkladem mohou být nápovědné popisky pro formulářové prvky. V takovém případě jsou k dispozici uživatelům odečítačů obrazovky (ty jim je přečtou společně s popisky formulářových prvků) a současně jsou i zobrazeny ve chvíli, kdy si na prvek uživatel najede myší. Stále nám ale zůstávají uživatelé, pro které tyto informace zůstávají skryté. Nápověda se může hodit i uživatelům, kteří vyplňují formulář přes dotykový mobilní telefon a nebo jej ovládají výhradně z klávesnice. Proto je lepší tyto nápovědné texty umístit na stránku v podobě, v níž se s nimi budou moci bezproblémově seznámit i tyto skupiny uživatelů.
  • Druhým příkladem mohou být popisky ikon a dalších grafických prvků. Zde může obsah atributu title uživateli pomoci zjistit (obzvlášť, pokud význam ikony nemusí být na první pohled zřejmý), k čemu ikona slouží a co se po kliknutí na ni stane. Současně ale platí, že takový grafický prvek by měl mít definovánu textovou alternativu pomocí atributu alt a ideální samozřejmě je, když už samotná ikona je dostatečně návodná a žádná nápověda tedy není vůbec potřeba.

Rada závěrem tedy zní – až budete někdy chtít umístit nějakou informaci do atributu title, zamyslete se, zda náhodou neexistuje lepší způsob, jak ji uživatelům prezentovat. Mám za to, že v celé řadě případů jej najdete 🙂

Související odkazy

Jak co nejlépe zpřístupnit web z klávesnice

Přístupnost webu z klávesnice je jeden ze základních kamenů moderního (i historického 😉 pojetí přístupnosti. David Sloan a Sarah Horton napsali pěkný článek o tom, jak uživatelům, kteří při práci s webem používají jen klávesnici, neházet zbytečně klacky pod nohy, ale naopak jim připravit co nejlepší zážitek. Článek sice po obsahové stránce nepřináší nic nového, ale přehledně shrnuje vše, na co je dobré při zpřístupňování webu z klávesnice nezapomenout.

  • Všechny prvky na stránce, které mohou získat focus, jsou přístupné a ovladatelné z klávesnice.
  • Prvky na stránce lze z klávesnice procházet v logickém pořadí.
  • Právě aktivní prvek (tedy prvek, který má focus) je vizuálně zvýrazněn.

Detailní informace k jednotlivým bodům najdete v případě zájmu v již zmiňovaném článku Designing Better Keyboard Experiences.

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.