Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

Zobrazují se příspěvky se štítkemfirefox. Zobrazit všechny příspěvky
Zobrazují se příspěvky se štítkemfirefox. Zobrazit všechny příspěvky

sobota 16. února 2013

Praktické příklady implementace WAI-ARIA

Pravidelným čtenářům mého blogu jistě není metodika WAI-ARIA neznámá.

Ve čtvrtek jsem na konferenci ULD 2013 měl o přístupnosti HTML5 a WAI-ARIA workshop (ještě o něm napíšu), na které mně jeden z účastníků doporučil stránku s praktickými příklady, kterou jsem doposud neznal. Stránka se jmenuje velmi jednoduše - ARIA Examples - a je na ní spousta příkladů, ke kterým jsou k dispozici i zdrojové kódy. U některých příkladů je také možné měnit jednotlivé hodnoty a sledovat, jak se změny projeví na výsledku.

Pokud byste si je chtěli vyzkoušet v praxi, tak je třeba použít prohlížeč a screen reader, které specifikaci WAI-ARIA podporují. Osobně doporučuji kombinaci Mozilla Firefox a screen reader JAWS.

úterý 22. května 2012

Jak změřit velikost písma na webové stránce

Metodika WCAG 2.0 i česká Pravidla přístupnosti používají pro měření dostatečného vzájemného kontrastu barev algoritmus světelnosti, u kterého kromě použitých barev hraje roli i velikost písma. Minimální kontrastní poměr pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů je 4,5:1, pro běžné písmo nad 18 bodů nebo tučné písmo nad 14 bodů je minimální kontrastní poměr 3:1.

Což všechno zní logicky a na první pohled bezproblémově. Obzvlášť v případě, kdy pracujeme s textem, který má definovánu velikost v bodech. Spustíme například Colour Contrast Analyzer, změříme hodnoty, a je to. Jak ale postupovat, pokud pro definování velikosti písma zvolíme jiné jednotky - em, px, procenta...? Kdy má takový text velikost 18 či 14 bodů (u tučného písma), abychom mohli určit, která hodnota kontrastního poměru je pro něj relevantní?

Jisté - ale v praxi ne úplně jednoduše použitelné - řešení nabízí vysvětlení termínu large scale (text) z metodiky WCAG 2.0. Zde se píše:

For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use.

Tento odstavec nám dává odpověď na otázku, jak to je s těmi velikostmi písma. Stále ale nevíme, jak velikost textu, jehož kontrast chceme otestovat, jednoduše změřit.

Řešení, které používám já, kombinuje add-on Context Font pro Firefox a převodní tabulku Convert em,px,pt and % in css. Protože Context Font měří velikosti v pixelech, je potřeba si mezní hodnoty 14 a 18 bodů převést na pixely. Pak:

Minimální kontrastní poměr pro běžné písmo do velikosti 24 pixelů (18 bodů, 1.5em, 150%) nebo tučné písmo do velikosti 19 pixelů (14 bodů, 1.2em, 120%) je 4,5:1, pro běžné písmo nad 24 pixelů nebo tučné písmo nad 19 bodů je minimální kontrastní poměr 3:1.

Jsem si vědom toho, že hodnoty při převodech jsou zaokrouhleny, ale na základě vlastních zkušeností se nedomnívám, že by zaokrouhlení hodnot mělo nějaký zásadní vliv na výslednou přístupnost měřeného textu.

Související odkazy

úterý 9. února 2010

Přístupnost ovládacích prvků webových aplikací

Čím víc jsou populárnější weby využívající Javascript pro zobrazování nového obsahu ve stránce, tím víc se množí dotazy, jaká řešení volit, aby nevznikaly závažné bariéry v přístupnosti. Bohužel se jedná o tak dynamicky se rozvíjející oblast, v níž odečítače drží krok s nemalými obtížemi, že jasná odpověď neexistuje. Jak upozornit na nový obsah víceméně úspěšně řeší specifikace WAI-ARIA, ovšem přístupný návrh klikatelných oblastí stránky pro mnoho tvůrců webových aplikací zůstává otazníkem. Pokusíme se najít způsob, který zaručí, že uživatel bude moci obslužný skript v Javascriptu aktivovat i při ovládání z klávesnice za využití odečítače obrazovky.

Vyjdeme z testovací stránky http://lab.cjneti.net/focus-click.html, která nám poslouží k otestování s níže uvedenými kombinacemi odečítačů a prohlížečů. Prvním krokem k přístupnosti je schopnost prvku získat v prohlížeči fokus, druhým pak schopnost odečítače zjistit, že na prvek lze kliknout.

Pro otestování chování jednotlivých případů byly použity dvě konfigurace - jedna konzervativnější bez oficiálně deklarované podpory ARIA (Windows Internet Explorer 7.0 + JAWS 9.0) a jedna zaměřená na současnou implementaci ARIA (Mozilla Firefox 3.6 + NVDA 2009.1). Byly vybrány sice konkrétní verze, ovšem interpretace elementů na stránce je záležitost především odečítače, tudíž např. JAWS 11.0 s Firefoxem 3.6 vykazuje na testovací stránce prakticky stejné výsledky jako testovaná kombinace s Internet Explorerem.

Máme tedy šest následujících případů:

1. případ

Element <a> s vyplněnými atributy href a onclick:
<a href="#" onclick="return test()">

Ideální řešení - element je dosažitelný přes tab order (tj. získává fokus), je hlášený jako "odkaz" a samozřejmě i bez problému aktivovatelný. Za pozornost stojí konstrukce "return test()" v atributu onclick, jenž tím, že bude vracet false, zabrání přejití na originální adresu odkazu, což s výhodou lze využít ve chvíli, kdy při nefunkčnosti javascriptu se při aktivaci odkazu načte alternativní stránka.

2. případ

Element <a> pouze s vyplněným atributem onclick:
<a onclick="test()">

Stále je hlášen odkaz, u NVDA navíc s informací, že je klikatelný, nezíská v prohlížeči však nikdy fokus. Skript lze aktivovat po přesunutí virtuálního kurzoru odečítače na text elementu a stisku mezerníku nebo klávesy Enter.

3. případ

Element <a> s přivěšenou událostí onclick pomocí skriptu:
<a class="click">

Fokus opět nelze získat, z čehož plyne, že oba prohlížeče jako odkaz interpretují pouze element <a> s vyplněným atributem href. NVDA hlásí klikatelný odkaz, zatímco JAWS nesděluje žádnou sémantickou informaci, ani informaci o možnosti kliknutí na element. Na testované stránce událost onclick se u tohoto elementu bez problému vyvolá postupem uvedeným v předchozím případě.

4. případ

Element <span> s vyplněnými atributy tabindex a onclick:
<span tabindex="0" onclick="test()">


Podle specifikace WAI-ARIA je možné atribut tabindex aplikovat na jakýkoli element, který má mít možnost získat fokus, což oba prohlížeče dodržují. Rovněž oba odečítače oznamují, že element je klikatelný,a tak skript lze jednoduše aktivovat.

5. případ

Element <span> pouze s vyplněným atributem onclick:
<span onclick="test()">

Element je hlášen oběma odečítači jako klikatelný a tudíž pro jeho aktivaci je možno použít postup uvedený v případě č. 2. <span> se chápe jako anonymní inline element, a proto není implicitně zahrnut do tab order.

6. případ

Element <span> s přivěšenou událostí onclick pomocí skriptu:
<span class="click">

O fokusu nemůže být řeči, jak bylo zmíněno v předchozím případě, a rovněž s korektním oznámením klikatelnosti to není příliš pozitivní. NVDA klikatelnost hlásí a skript vyvolat lze. JAWS se chová jako v případě č. 3, tj. při čtení stránky takový element bere za obyčejný text bez hlubšího významu. Skript sice pomocí JAWS vyvolat lze, je zde však důvodné podezření, že uživatel nemusí být tak úspěšný vždy, což potvrzují ovládací prvky vytvořené tímto způsobem v online aplikacích Googlu, na nichž stisk mezerníku, ani Enteru, nemusí událost vyvolat.Tento problém se týká ve většině případů kombinace s prohlížečem Mozilla Firefox.

Závěr

Nejlepším řešením se jeví případ č. 1 umožňující poskytnout
alternativní ovládání pro variantu nefunkčního Javascriptu,
, popř. případ č. 4, který ale neumožňuje alternativní ovládání.

Za nejméně vhodné pak můžeme prohlásit případy č. 3 a 6, s nimiž má JAWS problém bez ohledu na jeho verzi, což se projevuje absencí hlášení o klikatelnosti a nemožnosti událost v některých případech vyvolat.

Autorem článku je Roman Kabelka.

úterý 22. září 2009

TidyRead - pohodlné čtení článků na webu

Čtení obsahu webových stránek nemusí být vždy příjemnou záležitostí. Hlavní obsah stránky je často utopen mezi spoustou dalších informací (reklam, widgetů, navigačních částí, upoutávek), které čtenáře v danou chvíli nezajímají a odvádí jeho pozornost. Mnohdy je také čitelnost ztížena použitím příliš malého či nekontrastního písma.

TidyRead může pomoci všechny tyto problémy vyřešit. Na webové stránce se pokusí najít hlavní obsah stránky (nutno podotknout, že poměrně úspěšně) a zobrazí jej ve vlastním prostředí v upravené podobě. TidyRead nabízí i možnost úpravy zobrazení - je možné změnit například barevné schéma, použitý typ písma či jeho velikost.

V současné době je k dispozici pro většinu používaných prohlížečů jako doplněk či bookmarklet. Já sám jej bezproblémově používám s Firefoxem.

Pokud máte potíže se čtením textů na webových stránkách, doporučuji TidyRead minimálně vyzkoušet. Na webu TidyRead.com je k dispozici i ukázkové video či možnost vyzkoušet si TidyRead i bez instalace.

úterý 16. prosince 2008

Fire Vox - hlasová čtečka pro Firefox

Fire Vox je open source hlasová čtečka pro Firefox. Protože program může být pro určitou skupinu uživatelů užitečný, rádi bychom vás seznámili s některými zajímavými funkcemi, které tento doplněk Firefoxu nabízí.

Instalace

Po stažení instalačního balíku probíhá instalace rychle a jednoduše, jak je obvyklé u všech XPI rozšíření Mozilly. Kromě samotného odečítacího rozšíření FireVox se nainstalují knihovní funkce v rozšíření CLC-Utilities a adaptér rozhraní pro komunikaci se sAPI 5 a dalšími text to speech službami (v grafickém prostředí Linuxu např. Orca) v rozšíření CLC-4-TTS.

Ozvučení prostředí prohlížeče

Pohyb v v aplikačním menu Firefoxu a v kontextovém menu je ozvučen, dialogy vyvolávané z menu však již ozvučeny nejsou - výjimkou je dialog pro nastavení Fire Voxu, nacházející se v nabídce Nástroje. Je poskytnuta též odezva klávesnice po znacích při vpisování do formulářových polí či při vpisování adresy do adresního řádku. Tím však ozvučení editačních funkcí končí - o pohybu kurzoru ani mazaných znacích ve formulářových polích a v adresním řádku uživatel hlasem informován není. Vyhledávací pole prohlížeče není ozvučeno vůbec (chybí i odezva klávesnice) a totéž platí pro seznam záložek s otevřenými stránkami.

Čtení a pohyb po stránce

Při čtení a při procházení stránkou se pohybuje zároveň i kurzor a aktuální položka je zvýrazněna, takže vidící uživatel může snadno zjístit, obsah kterého elementu je právě čten. Díky jednoduchosti ovládání zde odpadá přepínání mezi čtecím a formulářovým režimem, jak je zvykem u moderních odečítačů. Pro čtení je možno použít následující příkazy:

  • Přečti aktuální element stránky.
  • Přejdi na další element na stránce a přečti jej.
  • Přejdi na předchozí element na stránce a přečti jej.
  • Přejdi na následující element na stránce a spusť plynulé čtení od něj až do konce stránky.
  • Zastav čtení (lze použít kromě klávesové zkratky FireVoxu též běžnou klávesu CTRL).

Příkazy pro přesun na začátek a konec stránky bohužel chybí.

Pod pojmem element stránky se rozumějí běžné blokové HTML elementy (titulek stránky, nadpisy 1-6, odstavec, obrázek, odrážka seznamu, buňka tabulky či nejrůznější formulářové prvky).

Pro pohyb ve stránce lze využít následující příkazy

  • Přejdi o odkaz či formulářový prvek vpřed/vzad a přečti jej (tab order prohlížeče, není záležitostí Fire Voxu).
  • Zobraz seznam nadpisů ve stránce - vyvolá menu se šesti podmenu, při čemž každé podmenu po rozbalení obsahuje nadpisy příslušné úrovně 1-6. Po aktivaci položky se kurzor ve stránce přesune na zvolený nadpis a je přečten.
  • Zobraz seznam elementů ve stránce - vyvolá menu s podmenu (nadpisy, odkazy, obrázky, formulářové prvky, klávesové zkratky, rámy), při čemž každé podmenu po rozbalení obsahuje elementy příslušného typu. Po aktivaci položky se kurzor ve stránce přesune na zvolený element a je přečten.

Vyčítání doplňkových informací

Ke každému elementu stránky lze vyčíst bližší informace následujícími příkazy

  • Přečti detail elementu - podle typu elementu přečte jeho detail (u odkazu adresu odkazu, popř. titulek, u buňky tabulky název sloupce a řádku). Při opakovaném stisku přečte informace o stránce (sekce body - počet nadpisů a odkazů) či titulek stránky.
  • Přečti rodičovský element - přečte obsah elementu, který je nadřazen aktuálnímu - např. odstavec, do něhož patří aktuální odkaz, který může mít nízkou vypovídací hodnotu (z jeho textu není jasné, k čemu slouží).

Vyčítání formulářů

Čten je obsah editačních polí, aktuální položka v seznamu, aktuálně vybraná položka přepínače a stav zaškrtnutí u zaškrtávacích políček. Jak bylo zmíněno výše je čtena pouze odezva klávesnice, ne editace obsahu prvku.

Podpora aplikací založených na AJAXu

Fire Vox jako jeden z prvních odečítačů podporuje veřejný návrh W3C standardu WAI-ARIA (Accessible Rich Internet Applications) pro identifikaci oblastí stránek, které se mohou proměňovat. Podle nastavení může FireVox tyto oblasti číst na základě značkování podle ARIA, hledat potencionální oblasti, které mohou být měněny (obnova obsahu podobně, jak ji nyní dělají běžné odečítače) či může veškeré změny ignorovat. Běžné odečítače obrazovky umí tímto způsobem oznamovat pouze obnovený obsah rámu ve stránce - nikoli v implicitní součásti stránky.

Shrnutí

Na první dojem Fire Vox působí dojmem, že nejde o experiment a že jeho tvůrci to s jeho realizací myslí vážně. Přestože nevidomý uživatel by byl schopen stránky tímto způsobem číst, nejde o práci dvakrát pohodlnou a minimalistický seznam čtecích a navigačních příkazů by měl být přeci jen rozšířen a měla by být doplněna podpora chybějících funkcí pro čtení při editaci, čtení seznamu záložek atd. Potom by tato minimalistická koncepce mohla některým nenáročným uživatelům práci s Internetem ulehčit. Mocný nástroj, interaktivní dokument stránky a přítomnost dvou režimů (čtecí a formulářový), jak je zvykem u běžných odečítačů, vyžadují vyšší formu abstrakce, zatímco lineární průchod Fire Voxu po elementech jasně definuje jednotlivé součásti stránky (jeden element je odstavec, druhý odkaz apod.) již implicitně udává meze, co s právě čteným elementem lze podniknout - dokumentové zobrazení ve standardních odečítačích primárně nechává uživatele, aby věděl, v jakém kontextu stránky se právě čtený text nachází (byla oznámena odrážka a pokud nenarazím na oznam další odrážky nebo na oznam konce seznamu, patří tento stále do oznámené odrážky).

Fire Vox by mohl obstát také jako nástroj pro testování přístupnosti pro vývojáře, kteří si nemohou dovolit investovat do nákladného speciálního odečítacího software, který by nikdy nevyužili v plném rozsahu. Fire Vox se specializuje na prostředí webového prohlížeče Firefox, je zdarma a dovede odhalit největší prohřešky proti přístupnosti - zobrazí-li v menu elementů v podmenu obrázků místo popisku název souboru, jde nejspíše o absenci atributu alt, máme-li dlouhou stránku a v seznamu nadpisů není ani jeden, je též něco v nepořádku apod.

K většímu rozšíření zbývá dořešit otázku snadno dostupné české hlasové syntézy pro hlasový výstup a lokalizaci Fire Voxu do češtiny. Uspokojivé freewarové řešení pro Windows neexistuje (freewarová česká syntéza spektraVox je pouze pro SAPI 4), v Linuxu lze alespoň využít Epos navázaný na Orcu.

Tento článek jsme připravili spolu s kolegou Romanem Kabelkou, kterému děkuji za spolupráci při jeho přípravě.