Archiv štítku: WAI ARIA

WAI-ARIA: Jak a kdy ji použít? (webinář IAAP Nordic)

Akce a přednášky, Aplikace, Asistivní software a hardware, Přístupnost aplikací, , , ,

Moderní webové aplikace obsahují spoustu panelů s dynamicky se měnícím obsahem a složitých prvků uživatelského rozhraní, jako jsou dialogová okna, ovládací prvky karet a vysouvací nabídky. Jazyk HTML byl ale navržen pro zobrazování statických stránek s omezenou sadou interaktivních komponent. Jak ale popsat různé typy komponent a jejich strukturu?

HTML stále funguje jako základ webových aplikací, ale pro popis názvů, stavů a změn různých komponent a struktury obsahu je zapotřebí další značení.

WAI-ARIA je soubor technik, které lze použít k poskytování těchto informací asistivním technologiím, jako jsou například čtečky obrazovky.

V technicky zaměřeném webináři WAI-ARIA: Jak a kdy ji použít? se můžete dozvědět, jak lze techniky z doporučení WAI-ARIA použít pro zpřístupnění konkrétních prvků v aplikaci, a to i prostřednictvím několika praktických příkladů. Webinář pořádala IAAP Nordic – skandinávská pobočka Mezinárodní asociace specialistů na přístupnost.

A protože (volně dostupných) materiálů v češtině je o WAI-ARIA stále poměrně málo, připravili jsme ve Středisku Teiresiás Masarykovy univerzity pod hlavičkou projektu Théseus k záznamu tohoto webináře české titulky.

WAI-ARIA: Jak a kdy ji použít? (YouTube)

HTML element <mark> & jeho přístupnost

Asistivní software a hardware, Návody, Přístupnost webu, ,

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

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

Akce a přednášky, ,

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