Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

středa 20. února 2008

Screen readery a sémantika

Jedno z pravidel přístupnosti vyžaduje správné používání sémantických značek pro vyjádření významu daných prvků (nadpis, citace, atp.). Podívejme se na to, jaké značky umí dnešní screen readery zpracovat a zpřístupnit tak jejich význam i svým uživatelům.

Jako referenční si vezměme screen reader JAWS, který patří mezi nejrozšířenější screen readery na celém světě a je v této oblasti de facto nepsaným standardem.

Titulek stránky a nadpisy

JAWS je schopen vyčíst informaci o titulku stránky (značka <title>) a o nadpisech všech úrovní (značky <h1><h6>). JAWS je schopen podat informaci o úrovni nadpisu, umožňuje rychlý přesun na následující/předchozí nadpis (nezávisle na úrovni) a také na následující/předchozí nadpis určené úrovně v aktuální sekci.
Ukázka výpisu seznamu nadpisů titulní stránky Aktuálně.cz

Ukázka výpisu seznamu nadpisů titulní stránky Aktuálně.cz

Odstavce, odkazy, citace, zkratky, akronymy

JAWS umožňuje rychlý přesun mezi odstavci, pokud jsou vyznačeny značkou <p> - proto je nutné pro vyznačování odkazů použít právě značku <p> a ne například <div> či <br>< br>. JAWS umí pracovat s odkazy (<a href="cíl">) a uživatele informovat i o typu odkazu (standardní odkaz, poštovní odkaz, odkaz při přechodu myší, atp.). JAWS informuje také o citacích, které jsou vyznačeny značkou <blockquote>. Pokud si uživatel zapne funkci Rozvíjet zkratky/akronymy, budou mu čteny v rozvinuté formě zkratky a akronymy, vyznačené pomocí značek <abbr> a <acronym>.

Ukázka výpisu odkazů z titulní stránky Aktuálně.cz

Ukázka výpisu odkazů z titulní stránky Aktuálně.cz

Tabulky

JAWS ohlašuje informaci o tom, že následuje tabulka (značka <table>) spolu s informací o počtu řádků a sloupců. Automaticky také vyčítá informace z atributu summary, pokud je tento atribut přítomen. JAWS umí pracovat se záhlavím řádků/sloupců (značka <th>). Pokud značky <th> nejsou použity, považuje JAWS za záhlaví řádku/sloupce obsah první buňky řádku/sloupce. JAWS také podporuje atribut headers u značky td, který - obzvlášť u složitějších tabulek - umožňuje v kombinaci s id u značek <th> přiřadit konkrétní buňce tabulky odpovídající záhlaví.

Seznamy

JAWS při přemístění na seznam informuje o tom, že se jedná o seznam, kolik má položek a o případných vnořených seznamech (značky <ul>, <ol>, <li>). JAWS informuje také o definičním seznamu a jeho položkách (značky <dl>, <dt>, <dd>).

Grafika

Při přechodu na grafický prvek (značka <img>) informuje JAWS o této skutečnosti hláškou grafika. Pokud je u grafického prvku definován alternativní textový popisek (atribut alt), je tento popisek přečten.

Formuláře

U formulářů (značka form) umí JAWS informovat o následujících prvcích:
  • editační pole (značka <input type="text">),
  • textové pole (značka textarea>),
  • přepínač (značka <input type="radio">) včetně ohlášení stavu,
  • zaškrtávací políčko (značka <input type="checkbox">) včetně ohlášení stavu,
  • tlačítko (značky <input type="submit"> nebo <input type="image">),
  • rozbalovací seznam (značky <select>, <option>).
Každý formulářový prvek samozřejmě musí být svázán se svými relevantním popiskem pomocí značky <label> a vazebních atributů for a id. Pokud sdružíte formulářové prvky do logických celků pomocí značek <fieldset> a <legend>, JAWS před každým formulářovým prvkem v daném celku přečte informaci, definovanou značkou <legend>.

Rámce

Pokud jsou stránky vytvořeny pomocí rámců (značka <frame>), JAWS umí informovat o počtu rámců, umí vyčíst jejich název (atribut name), případně titulek (atribut title). JAWS ohlášuje přechod mezi jednotlivými rámy, tzn. uživatel ví, kdy opouští jeden rám a dostává se do dalšího.

Cílové místo (kotva na stránce)

JAWS také umí uživateli zpřístupnit seznam míst na stránce, které jsou definovány pomocí tzv. kotev (značka <a> s atributem name). Do seznamu cílových míst nejsou zahrnuta místa, která jsou definována pomocí id.

Tabulka s přehledem prvků stránky a odpovídajících značek

Prvek stránky Značka
Titulek stránky
<title>
Nadpis <h1> až <h6>
Odkaz <a href="cíl">
Odstavec <p>
Citace> <blockquote>
Zkratka, akronym <abbr>, <acronym>
Tabulka<table>, <th>, <td>, <caption>
Seznam <ul>, <ol>, <li>, <dl>, <dd>, <dt>
Grafika <img src="">
Textové pole
<textarea>
Editační pole <input type=“text“>
Přepínač <input type=“radiobutton“>
Zaškrtávací políčko <input type=“checkbox“>
Tlačítko <input type=“submit“>
<input type=“image“>
Rozbalovací seznam <select>, <option>
Rámec <frame>
Cílové místo (kotva) na stránce <a name=“nazev“>

Uživatelé JAWSu se mohou po jednotlivých prvcích pohybovat vpřed/zpět nejen pomocí horkých kláves, ale mohou si prvky nechat zpřístupnit i ve formě seznamu, který má následující výhody:

  • uživatel pracuje v jednu chvíli pouze s prvky vybraného typu (nadpisy, odkazy, přepínače, atp.),
  • pro rychlý pohyb mezi prvky může použít počáteční písmena,
  • v některých případech (například u nadpisů) si může výpis dále upravovat dle potřeby (například si nechat zobrazit jen nadpisy druhé úrovně).
Pokud by byl zájem, mohu některé pasáže rozpracovat více či je doplnit audio/video ukázkou. Případné požadavky pište do komentářů. Děkuji.

20 komentářů:

Pavel Kout řekl(a)...

Radku, jak je to s prezentací obsahu atributu title ve screenreaderech? Když jsem koncem minulého týdne četl na "há-jedničkovém" weblogu o nových pravidlech, narazil na označování navigačních bloků nějakou formou labelu. Protože však pro tento účel neexistuje relevantní element, bylo by nutné použít některý z dostupných blokových (Hn, P, DIV).

Probírali jsme to telefonicky s Davidem, a během našeho hovoru mě napadlo, že by tomuto úkolu mohlo vyhovět doplnění atributu title (např. title="Hlavní navigace") do nejvyššího zapouzdřujícího prvku dané navigace (např. UL). Uměla by čtečka podobnou informaci dostatečně zřetelně prezentovat?

Filosof řekl(a)...

Moc hezký článek. Mám dotaz.. tedy vlastně víc dotazů.. :-)

Liší se pro čtečku nějak značky B od STRONG a I od EM?

Když označuji nějaký prvek formuláře, jako povinný, mám použít title pro daný label, nebo raději hvězdičku za olabelovaným slovem, o které prohlásím před/za formulářem, že pole označené (*) jsou povinné. Nebo je příjemnější nějaký jiný způsob?

Používají nevidomí uživatelé přeskakovací odkazy?

Rozeznají čtečky input type="image"? [nevidím ho ve článku]

Radek Pavlíček řekl(a)...

Ad Filosof

Moc hezký článek.

Děkuji.

Liší se pro čtečku nějak značky B od STRONG a I od EM

Ne, ve výchozím nastavení JAWS nejsou tyto značky vůbec brány v potaz (= nevidomý se informaci o zdůraznění nedozví). Pokud si chci nechat hlásit tučné písmo a kurzívu (úmyslně nepíši zdůraznění), musím si upravit tzv. schéma řeči tak, aby mi JAWS četl atributy a informace o písmu.

...označuji nějaký prvek formuláře jako povinný...

Nejpříjemnější je uvést slovo povinné přímo k popisku formulářového prvku. Na počet slabik je to stejné jako slovo hvězdička a uživatel nemusí přemýšlet, co že to ta hvězdička znamená ;-)

Pokud z nějakého důvodu chcete použít hvězdičku, je vhodné umístit vysvětlivku hvězdička = povinná položka na začátek formuláře, aby uživatel věděl, jak s položkami s hvězdičkou naložit.

Používají nevidomí uživatelé přeskakovací odkazy?

Ty co znám, tak ano ;-) Pokud jsou ale jednotlivé části webu (menu/submenu/hlavní obsah/atp.) uvozeny (skrytými) nadpisy, preferují spíše pohyb po nadpisech.

Rozeznají čtečky input type="image"?

Ano, rozeznají. Díky za upozornění, doplněno i do článku.

Radek Pavlíček řekl(a)...

Ad Pavel

Podpora atributu title je - slušně řečeno - velmi nevypočitatelná. Proto se jí v článku ani moc nezabývám. JAWS - pokud už jej čte - většinou nebere obsah atributu title jako rozšíření sdělované informace, ale jako její plnohodnotnou náhradu. Takže třeba u odkazu si můžeš vybrat, zda uslyšíš viditelný text odkazu nebo title nebo ten delší z nich, ale hlášení nelze nastavit tak, aby četl postupně oboje. O něco lepší je to u formulářových prvků, tam lze nastavit, aby četl label a title, pokud se liší. Přečíst title u ul se mi JAWS přinutit nepodařilo.

Pro vyznačování jednotlivých částí stránky bych doporučoval používat (skryté) nadpisy, v praxi se nám to osvědčilo nejlépe. JAWS disponuje několika funkcemi, které lze pro efektivní pohyb po nadpisech použít a nevidomí jsou na tento způsob pohybu po jednotlivých částech stránky už docela zvyklí, resp. vyžadují ho.

kahi řekl(a)...

Fajn článek. V pasáži o labelu mi chybí informace o tom, jak se čtečky vypořádávají se spojením formulářového prvku s labelem pomocí vnoření prvku do labelu; díky!

Radek Pavlíček řekl(a)...

Ad kahi

Fajn článek.

Díky.

...jak se čtečky vypořádávají se spojením formulářového prvku s labelem pomocí vnoření prvku do labelu...

Starší verze JAWSu (do 6.20) mají s tímto zjednodušeným zápisem problémy a popisek nehlásí, tzn. uživatel se sice dozví o typu prvku, ale už ne o tom, co do něj má napsat. Popisek musí v takovém případě "hledat" okolo prvku a i když nějaký najde, nemá jistotu, že je to ten, který k tomu prvku patří.

Verze 7.10 a 8.0 už umí takto přiřazený popisek přečíst korektně, ale vzhledem k tomu, že ne každý uživatel má dneska alespoň tu 7.10, doporučuji ještě nějaký čas "vydržet" s label, for a id. Verzi 9.0 jsem nezkoušel, jelikož se u nás zatím nedistribuuje, ale předpokládám, že tato užitečná vlastnost v ní zůstane zachována ;-)

ASH721 řekl(a)...

Rozhodně užitečný článek. Dovolím si přidat pár postřehů + jeden dotaz.

1) Pohyb po stránce: Řekl bych, že slepí uživatelé nejsou často tolik zvyklí se pohybovat po nadpisech, jako po odkazech. A to ne proto, že by to bylo pohodlnější, ale proto, že jsou už nějak zvyklí, že "nadpisy" velmi často žádnou semantiku nemají. Možnost semantického pohybu po nadpisech sice vítají s otevřeonu náručí (Už proto, že odkazů jim to obvykle přečte ohromné množství, často velmi chaoticky), ale příliš ji neočekávají.

2) Title: zatím jsem se nesetkal s tím, že by nějaká čtečka v implicitním nastavení přečetla běžně použitý title, vyjma případů, kdy je title to jediné, co element obsahuje.

3) Kotvy: K odkazům na kotvy bych rád dodal, že existuje nějaký bug v IE, který občas způsobí, že čtečka skočí v obsahu "kamsi" ještě před kotvu, tudíž začne třeba číst od půlky předchozího (nesouvisejícího) odstavce. Dá se to vyřešit obalením kotvy do elementu s pevnou velikostí, ale věřím, že se najde nějaké elegantnější řešení.

4) JAWS9: V Jaws 9 jsem si všiml, že již podporuje alespoň css vlastnost speak: spell-out. (Nevím jak jiné verze, ale "šestka" to neumí.) Spell-out by se velmi hodilo pro zkratky typu SMS, RSS, CMS,..., ale v praxi je to zatím nepoužitelné, protože starší čtečky kašlou i na tento styl (resp. umožňují pouze "vyvolat" spelování uživatelem).

V Jaws9 jsem mimochodem kromě {speak: spell-out} nezjistil žádný další podporovaný aural styl.

5) Radek Pavlíček: Zmiňujete v komentáři použití "skrytých" nadpisů. Ty by byly v mnoha případech velmi užitečné, nicméně by to teoreticky mohlo mít i neblahé následky na viditelnost stránky např. ze strany Google, protože (přestože je to děláno v dobrém úmyslu), je to v přímém rozporu s jeho pravidly. Neznáte nějaký precedens nebo bližší info, ze kterého by se dalo odvodit, že s tím lze nakládat nez obav?

Plaváček řekl(a)...

Mám stejnou otázku, jako předchozí komentující k bodu 5) a to jsou skryté nadpisy. Pokud vím, a mám to z vlastní zkušenosti, nejen Google ale i Seznam.cz je ohledně toho, co je uživateli skryto a vyhledávače to vidí, poměrně hodně přísný a velmi rád penalizuje. Protože podobný problém teď řeším (trebihost.cz, víš), jsem taky zvědav na fundovanou odpověď.

BoB řekl(a)...

Ad ASH721 5) + Plaváček: Obávám se, že pořádný precedens neexistuje, avšak vzhledem k tomu, že Seznam sám používá skryté nadpisy a odkazy na svých stránkách a také vzhledem k tomu, že se dle mého názoru dá rozeznat, co je funkční skrytý nadpis a co nekalé SEO bych se moc nebál. A když by došlo na nejhorší, tedy penalizaci, tak se proti ní ohradil.

Filosof řekl(a)...

2bob: ohradit se vůči penalizaci? tj. web bude čekat mimo výsledky se zmrazeným příjmem třeba několik měsíců na rozhodnutí admina? To si může dovolit seznam, ale ne komerční prezentace.

Radek Pavlíček řekl(a)...

Skrývání nadpisů

Doposud nevím o případu, že by za skrývání nadpisů či odkazů pro přesun na konkrétní část stránky byl někdy někdo penalizován. Tuto techniku používá u svých webů/služeb i Seznam či Google, takže se dá předpokládat, že za to penalizovat nebudou. Nejedná se přeci o nějaké podvodné skrývání, ale o věc, která může významným způsobem usnadnit práci se stránkou určité skupině návštěvníků.

Pokusím se zajistit nějaké (nejlépe oficiální ;-) stanovisko od Seznamu/Googlu a dám vědět.

BoB řekl(a)...

2filosof: Seznam není komerční? ;o) Seženu oficální stanovisko.

Martin Šimko řekl(a)...

Dobrý den,
děkuji za pěkný článek. Rád bych se zeptat jak je to s tagem "address", zda ho čtečky nějak extra zohledňují a zda má vůbec smysl ho uvádět. Děkuji

Radek Pavlíček řekl(a)...

2martin šimko

Zkoušel jsem address s JAWS 8.0 CZ a WinMonitorem 1.9.3, ani jeden informaci o značce address neposkytuje.

Filosof řekl(a)...

2bob: ale samozřejmě.. ale diktuje pravidla :-)

Anonymní řekl(a)...

Dobrý den, z jakého programu jsou přiložené obrázky s počtem a úrovní nadpisů?
Děkuji
David Kubíček

Martin Šimko řekl(a)...

Jedná se o JAWS http://www.galop.cz/jaws

Viz začátek článku

Anonymní řekl(a)...

Aj mne sa tento článok veľmi páči.

Som slabozraký webový kóder a pracujem s JAWS-om veľmi sa mi páčia možnosti, ktoré umožňuje je to skvelá pomôcka hlavne keď si chcete čítať rozsiahlejší článok a potrebujete sa v texte článku zorientovať, správne použité nadpisy sú nepostrádateľnou pomôckou.

Ja osobne na skok na navigačné menu, alebo ak ho chcem preskočiť, používam aj klávesu "l" pre skok po zoznamoch, alebo "i" pre skok po jednotlivých položkách zoznamu. Je to skutočne super vec. Len ma trošku mrzí, že freeware Screen Readre neumožňujú taký komfort pri práci s PC ako platený JAWS, momentálne sa pokúšam skamarátiť s WindowEyes, ale akosi si nerozumieme.

Už sa teším na syntetizér "Lucka". To bude skutočný zážitok počúvať taký príjemný dievčenský hlas. :)

Uvítal by som aj nejaké podrobnejšie informácie o brailovskom riadku, alebo ako funguje brailovská tlačiareň pre počítač a ako tieto výstupy pracujú so sémantickým kódom web stránok.

S úctou Marián - www.fidelis.sk

Prístupnosť a flexibilita webového obsahu pre všetkých - Fidelis řekl(a)...

Dobry den!

Po roku sa opat vraciam k tomuto velmi poucnemu a hodnotnemu clanku a musim povedat, ze som sa vela naucil.

1. Nevidiaci pre pohyb po stranke pouzivaju prevazne nadpisy pomocou klavesy "H" (tuto moznost umoznuje aj NVDA volne siritelny citac obrazovky) Cize z toho vyplyva ze je treba najma nadpisom venovat velku pozornost.

2. Vyhladavace dnes uz vedia rozoznat "Black hat techniky" od snahy ulahcit "NonVisual Access" (mam namysly skryte nadpisy)
O mnoho rizikovejsie z hladiska penalizacie su tie tak velmi obluebene "vyblednute" spatne odkazy ktore su takmer necitalne beznymi navstevnikmi. Toto ma namysli Google.

3. Skip odkazy su uzitocne najma pre vidiacich tzv. "keyboard only users", ktori nemozu z akychkolvek dovodov pouzivat mys a pre pouzivatelov PDA-ciek a mobilov na surfovanie.

Zdravi fidelis

Aj Google pouziva metodu skryvania nadpisov řekl(a)...

Aj Google skryva nadpisy mimo obrazovku pomocou CSS tu je dokaz
http://forum.seochat.sk/aj-google-pouziva-metodu-skryvania-nadpisov-t410/