Archiv štítku: WAI ARIA

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)

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>.

Workshop o přístupnosti pro kodéry na DevFestu 2014

Po kladné zpětné vazbě na workshop o přístupnosti na WebExpo 2014 jsem se rozhodl nabídnout jej i účastníkům letošního DevFestu. Workshop se opět jmenuje Přístupnost pro kodéry a jeho hlavní náplní bude praktické seznámení se s pokročilejšími technikami z oblasti přístupnosti z Doporučení W3C Accessible Rich Internet Applications (WAI-ARIA) 1.0. Na workshopu si společně ukážeme, jak

  • lépe strukturovat obsah webové stránky pomocí tzn. oblastí stránek a nabídnout tak uživatelům snadný prostředek pro lepší orientaci na stránce,
  • zajistit bezproblémovou přístupnost webu z klávesnice,
  • zlepšit přístupnost formulářů například vytvořením přístupných tooltipů nebo vyznačením povinných položek,
  • ošetřit přístupnost modálních oken
  • či dynamických změn oblastí stránky.

Workshop proběhne v sobotu 22. listopadu 2014 od 9:30 do 11:00 v místnosti nazvané Compact Workshop na Fakultě stavební ČVUT v Praze.

Pokud se na letošní DeveFst chystáte a zajímá vás přístupnost, přijďte. Jste srdečně zváni.

Související odkazy

Tři články o WAI-ARIA včetně praktických příkladů

Doporučení WAI ARIA se stále více dostává do popředí zájmu tvůrců webu. Což je dobře, protože možnosti, které pro zpřístupnění webového obsahu nabízí, jsou více než skvělé a řadu z nich lze nasadit do praxe s poměrně malým úsilím.

Pokud je pro vás WAI ARIA nové téma, určitě doporučuji k přečtení článek Marca Zehe What is WAI-ARIA, what does it do for me, and what not? Marco velmi čtivou a srozumitelnou formou představuje toto doporučení, výhody, které přináší a upozorňuje i na situace, kdy je lepší techniky z tohoto doporučení nepoužít. Článek je sice trochu delší, ale rozhodně stojí za přečtení.

Pokud vás zajímají spíše praktické příklady, pak je přesně pro vás určen druhý článek. Heydon Pickering připravil sadu praktických příkladů, ukazujících možnosti, které WAI ARIA přináší. Pokud chcete vytvořit přístupné tooltipy pro formulářové prvky, přístupný výstražný dialog či třeba záložky (karty) s informacemi, na stránce ARIA Examples najdete vše potřebné včetně ukázek kódu.

O tom, že WAI ARIA je už dnes běžně nasazena i na velkých a často navštěvovaných webech, píše Marco ve svém druhém článku, nazvaném WAI-ARIA for screen reader users: An overview of things you can find in some mainstream web apps today. Na příkladech Twitteru, Facebooku či online služeb od Microsoftu ukazuje, jak konkrétně může WAI ARIA pomoci k jejich lepší přístupnosti. U Twitteru je to například ošetření editačního pole pro psaní tweetů, kdy je díky WAI ARIA uživatel při psaní automaticky upozorněn na to, že se s počtem možných znaků blíží k nule, při zadávání Twitter jména (@něco) nebo hashtagu (#něco) je mu automaticky zpřístupněn rozbalovací seznam s výběrem možností či zpřístupnění nabídky More u jednotlivých tweetů.

Související odkazy