Archiv štítku: HTML

HTML element <mark> & jeho přístupnost

Před časem jsem dostal následující dotaz:

Existuje HTML 5 tag <mark>, který nové browsery plně podporují (a myslel jsem, že i čtečky). MARK barevně zvýrazní rozdílný text. Čtečky tento tag zdá se ale naprosto ignorují a nevidomí tudíž nemají tušení, kde v textu se rozdíly nacházejí. V případě barvoslepých, kteří čtečku nepoužívají, je tu další problém. Pokud podbarvení a tudíž pouhé odlišení barvou není řešením, jaké jiné řešení je tedy vhodné?

Jak se to tedy má s jeho přístupností pro uživatele se zrakovým postižením?

HTML element <mark> slouží ke zvýraznění textu na stránce (v podporovaných prohlížečích při výchozím stylu text žlutě podbarví) a používá se nějak takto:

<p>
  Element <mark> slouží ke zvýraznění textu na stránce.
</p>

Při použití elementu mark tedy není informace odlišena barvou, ale podbarvením, a i barvoslepým uživatelům je tato informace zprostředkována. (Problém by mohl nastat ve chvíli, kdy by se na stránce používaly pro podbarvení různé barvy, ale to asi není v praxi příliš běžné.)

Pro nevidomé uživatele přicházejí v úvahu dvě možnosti, jak situaci vyřešit:

  • na straně uživatele: zapnout ve čtečce obrazovky ohlašování změn atributů písma;
  • na straně provozovatele: doplnit na začátek a konec textu vyznačeného elementem mark vhodně skrytou informaci o tom, že se jedná o zvýrazněný text (například „začátek zvýraznění“ a „konec zvýraznění“).

Koncepčním řešením by samozřejmě bylo, kdyby čtečky obrazovky (a asistivní technologie obecně) tento element braly v potaz a uživatele o podbarvení textu informovaly. To se bohužel neděje a nějaká vhodná/odpovídající role z WAI ARIA bohužel neexistuje 🙁

Shodou okolností jsem minulý týden narazil na článek Steva Faulknera, který se zabývá stejnou tématikou a potvrzuje to, co píši výše. Zájemci v něm najdou i praktickou ukázku, jak pomocí CSS a pseudo elementů :before a :after tuto situaci na stránce ošetřit a element <mark> zpřístupnit.

Short note on making your mark (more accessible)

https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/

Tweaking Text Level Styles

V článku Tweaking Text Level Styles téma detailněji rozpracoval Adrian Roselli i pro elementy <del>, <ins> a <s>.

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