Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

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

čtvrtek 29. listopadu 2012

Zdroje informací o přístupnosti HTML5

Při přípravě prezentace na letošní DevFest a článku na Zdroják jsem kromě vlastního testování nastudoval i spoustu již publikovaných informací. V poznámkách z přípravy mi tak zůstalo docela dost odkazů a o ty nejzajímavější by určitě byla škoda se nepodělit.

Pro HTML5 Accessibility
V současnosti asi nejlepší kniha zabývající se touto tématikou. Verze pro Kindle stojí 25 dolarů a z vlastní zkušenosti mohu říci, že je to opravdu dobrá investice.
Book Review: Pro HTML5 Accessibility
Podrobná recenze knihy Pro HTML5 Accessibility. Pokud byste náhodou byli na vážkách, zda si ji koupit, tak tato recenze Vás určitě přesvědčí.

Pro HTML5 Accessibility na Amazon.com

HTML5 - A vocabulary and associated APIs for HTML and XHTML
Aktuální verze návrhu specifikace HTML5 od W3C z 11. listopadu 2012, momentálně ve stádiu Editor's Draft.
Accessible Rich Internet Applications (WAI-ARIA) 1.0
Aktuální verze specifikace WAI-ARIA, která už je i součástí HTML5. V současné době je k dispozici jako W3C Candidate Recommendation.
WAI-ARIA 1.0 Authoring Practices
Dokument z dílny W3C o tom, jak rozumět požadavkům z WAI-ARIA a jak je implementovat.
HTML5
Podtitul "vše co potřebujete vědět o HTML5" je myslím dostatečně výstižný ;-)
JAWS, IE and Headings in HTML5
Praktický test toho, jak si screen reader JAWS poradí s různými způsoby strukturování stránky pomocí nadpisů.
ARIA Gone Wild (pdf; 13,4 MB)
Jared Smith prezentoval tématiku WAI-ARIA na Accessibility Summitu. Slajdy k jeho prezentaci jsou informačně bohaté i bez doprovodného mluveného slova.
Using ARIA to Enhance Web Application Accessibility
A Jared Smith ještě jednou. Praktická a interaktivní HTML prezentace plná konkrétních příkladů toho, jak pomocí WAI-ARIA zlepšit přístupnost HTML.
Using ARIA in HTML
Neoficiální draft dokumentu, který má sloužit webdeveloperům jako praktický rádce při implementaci ARIA do HTML. Autorem je Steve Faulkner.

A na závěr dvě videa.

Making Your Web Apps Accessible Using HTML5 and ChromeVox

John Foliot - HTML5 Accessibility

pondělí 12. listopadu 2012

DevFest Praha 2012 se vydařil

DevFest 2012

Výborná atmosféra, skvělí lidé, networking, zajímavé prezentace a tak vůbec. Pro mě velmi příjemná tečka za letošními konferenčními a jinými akcemi, kterou jsem opouštěl maximálně spokojený.

Přístupnost

Když mě na konci září oslovil Pavel Vybíral s nabídkou zúčastnit se DevFestu jako přednášející a seznámit účastníky s tématikou přístupnosti, byl jsem opravdu potěšen. Docela rychle jsme se domluvili na tématu, kterým bylo letos ještě mnou nikde neprezentované téma přístupnosti HTML5 a WAI-ARIA. Jedná se o téma široké, které nebylo možné v 45 minutách detailně projít, takže jsem je pojal jako úvod do této tématiky s ukázkami některých konkrétních věcí, které už dnes fungují a je možné je používat a motivovat účastníky k jejich používání při běžné praxi. Snad se mi to povedlo - soudě aspoň podle množství dotazů, na které jsem odpovídal ještě půl hodiny po přednášce v předsálí.

Slajdy k mé prezentaci HTML5 v kombinaci s WAI-ARIA

Accessibility CodeLab, který jsme měli společně s Pavlem Ondrou, šéfem GDG Accessibility Brno, nebyl nakonec stánek, ale prostor pro hodinový workshop v samostatné místnosti. Toto řešení se nakonec ukázalo jako velmi dobré a s Pavlem jsme celou dobu diskutovali s účastníky o všem možném kolem přístupnosti a nebýt toho, že jsme museli v 13:20 skončit, abychom všichni stihli oběd, povídali bychom si tam určitě mnohem déle.

Hodně mě potěšil velký zájem o přístupnost - byl jsem velmi mile překvapen tím, kolik účastníků přišlo na prezentaci, Accessibility CodeLab či si o přístupnosti jen tak popovídat. Díky za zájem!

Organizace

Organizační tým byl skvěle sehraný (aspoň co jsem měl možnost sledovat v místnosti se zázemím pro přednášející ;-) a organizace celé akce šlapala na výbornou. Rád bych organizátorům poděkoval za to, jaký prostor přístupnosti na DevFestu věnovali.

Prezentace

Protože s našimi aktivitami kolem přístupnosti jsme skončili v půl druhé a pak šli s Pavlem na oběd, stihli jsme až odpolední prezentace. Z nich mě nejvíce zaujalo povídání Víta Vrby o jeho failech a úspěších - prezentace formou "cesty tam a zase zpátky" byla super - a Kuby Čížka (asi se dám na mapování Wi-Fi sítí v Bystrci ;)

A celkový dojem?

Z Prahy jsem odjížděl odjížděl unavený, ale spokojený. Ve vlaku jsem ještě doplnil textový komentář ke slajdům, lehce poladil jejich vzhled na základě zpětné vazby od Jeanne Trojan (díky!) a protože jsem to zvládl docela rychle, tak jsem si stihl i 30 minut zdřímnout ;-)

Tož tak.

Na DevFestu 2013 ahoj.

P.S. Pokud pořádáte nějakou podobnou akci a měli byste zájem o prezentaci tématiky přístupnosti, dejte vědět. Určitě se domluvíme. Jo a kdybyste mě chtěli odměnit tričkem, mám velikost XXL ;-)

Související odkazy

úterý 6. listopadu 2012

HTML5 a WAI-ARIA na DevFest Praha 2012

DevFest 2012

Letošní koncertní - totiž prezentační, pardon - šňůru zakončím na vývojářském festivalu DevFest Praha 2012. Organizátoři mě požádali, abych přispěl do programu tématikou přístupnosti a z mnou nabídnutých možností si vybrali právě přístupnost HTML5 v kombinaci s WAI-ARIA. Musím přiznat, že to od nich byla dobrá volba, protože na toto téma jsem ještě letos nepřednášel, takže prezentace bude nová, neokoukaná a neoposlouchaná ;) A ještě z toho bude článek pro Zdroják ;-)

Pro koho to bude?

Pro všechny, kdo používají - či se chystají používat - HTML5 a rádi by při tvorbě webů a aplikací brali na zřetel i přístupnost.

O čem to bude a co si z přednášky odnesete?

Na několika praktických příkladech si ukážeme, jak jednoduše můžeme pomocí WAI-ARIA zlepšit přístupnost HTML kódu. Ukážeme si, jak lépe strukturovat obsah, vytvořit přístupné formuláře a ošetřit dynamické změny obsahu.

Nedělám si ambice účastníky přednášky za 45 minut naučit HTML5 (na to vám mohu doporučit třeba Martina Michálka), ale chtěl bych vám poskytnout praktické rady a doporučit, jaké techniky pro zpřístupnění můžete už dnes bez obav používat.

Accessibility CodeLab

Kromě prezentace budeme mít s Pavlem Ondrou i Accessibility CodeLab - pokud Vás tématika přístupnosti zajímá, přijďte si o ní popovídat či si nechat otestovat nějaké své řešení. Těšíme se na vás.

Jestli zvažujete, zda se přístupností zabývat, a nejste si úplně jisti, zda je pro vás přístupnost atraktivní, projděte si slajdy k mé prezentaci Přístupnost není charita z letošního WebExpa. Obsahuje několik příkladů ze života a také případových studiích o tom, jak je přístupnost velmi úzce provázána s dalšími oblastmi webu a jak pomáhá skutečně všem uživatelům.

pondělí 6. února 2012

Praktická implementace WAI-ARIA v Nahlížení do katastru nemovitostí

Specifikace WAI-ARIA může výrazným způsobem zlepšit přístupnost webových stránek a aplikací pro uživatele s handicapem. Před časem jsem se tomuto tématu věnoval na Zdrojáku v seriálu Přístupnost dynamických webových aplikací. V té době se jednalo o věc nepříliš rozšířenou. Dnes už je situace jiná, podpora na straně prohlížečů i asistivních technologií je více než dobrá, takže implementaci prvků z WAI-ARIA nic nebrání.

Jedním z průkopníků v ČR je Český úřad zeměměřický a katastrální, který ve své aplikaci Nahlížení do katastru nemovitostí použil landmarky (oblasti stránky) právě z této specifikace k tomu, aby ještě více zlepšil přístupnost této aplikace.

Jen připomenu, že landmark/oblast stránky slouží k vyznačení určité části webové stránky a přiřazení konkrétní role této části stránky. WAI-ARIA definuje například role main (hlavní obsah stránky), navigation (část s menu/navigací) či search (vyhledávání). Velkou výhodou oproti stávajícímu způsobu, kdy jsou pro vyznačování jednotlivých částí stránek používány skryté nadpisy, je to, že pomocí oblasti stránky mohu vyznačit opravdu oblast (pracuji tedy ve 2D), zatímco nadpisem vyznačím pouze bod na stránce.

Praktická výhoda použití oblastí stránek tedy spočívá v tom, že uživatel je pak při procházení stránky lépe informován o tom, kde daná oblast začíná a končí. Pokud při procházení stránky odspodu nahoru narazí na nějakou oblast stránky, tak je na ni upozorněn. Při vyznačení pomocí nadpisu je určen pouze začátek oblasti, a ne její konec. Pokud nejsou nadpisy použity důsledně, může se pak stát, že uživatel bude například za součást menu považovat i něco, co už jeho součástí není.

V Nahlížení do katastru nemovitostí najdeme 6 oblastí stránek, které mohou uživatelům pomoci při orientaci na stránce a snadnému přesunu na jednotlivé oblasti.

Z důvodu zpětné kompatibility (pokud by na web přišel například někdo se screenreaderem, který ještě oblasti stránky nepodporuje), jsou na webu Nahlížení do katastru nemovitostí použity i (skryté) nadpisy pro vyznačení začátku jednotlivých částí stránky.

Finální řešení tedy může vypadat takto:

<div role="navigation">
<h4>Hlavní navigace</h4>
Obsah navigační sekce
</div>

Českému úřadu zaměměřickému a katastrálnímu gratuluji k tomuto kroku a těším se na další české weby, které se WAI-ARIA nebudou bát a začnou ji používat ;-) Věřím, že ČÚZK bude inspirací i pro další webdevelopery nejen ve státní správě a samosprávě.

Související odkazy

úterý 16. srpna 2011

Přístupnost Google+ prakticky

Google+ logoO nové sociální síti Googlu bylo za dobu od jejího spuštění napsáno mnoho, a proto si tento článek neklade za cíl vysvětlovat základní pojmy či funkce. K tomu můžeme doporučit například článek Google Plus v kostce: manuál nového uživatele. My se zaměříme na praktickou přístupnost pomocí odečítačů obrazovky pro nevidomé uživatele.

Google na stránce Using Google products: How to use accessibility features deklaruje přístupnost svých produktů, jejíž implementace není bez účinku a jsou tak dosažitelné všechny důležité funkce aplikací. Na druhou stranu je nutno říci, že pro běžného nevidomého uživatele není ovládání řady z nich zcela intuitivní a vyžaduje jistý zácvik s uživatelským rozhraním dané Google aplikace. Pokročilí uživatelé se sice s rozhraním naučí pracovat sami, ale musí často použít podpůrné funkce odečítačů, které jdou nad rámec standardního ovládání webových stránek, jako např. webspoty ve VoiceOveru, značky pozic v JAWSu či simulace myši. Vycházíme více jak z dvouletých zkušeností používání Google Apps v TyfloCentru, jejichž používání by se dalo vystihnout lidovým a trefným přirovnáním "jde to, ale dře to."

Tak to jen tak na úvod a nyní již k testu Google+, který je tak trochu náhledem do naší testerské kuchyně, neboť podobně vypadají výstupy testování, které s kolegy provádíme, byť zde je vše naservírováno čtivěji a populárnější formou.

Uvítací stránka

Po přihlášení do Google+ se zobrazí uvítací stránka "Vítá vás Google+". Lze ji rozdělit na tři části, z nichž se nejméně zajímavá může zdát patička, která se objevuje na všech stránkách. Není od okolních sekcí nijak oddělena, ať už ARIA rolí status či skrytým nadpisem, a tak její nejsnažší nalezení spočívá v přesunu na samotný konec stránky. Své sémantické zviditelnění by si však zasloužila a to hned ze dvou důvodů:

  • Nachází se zde tlačítko "Odeslat zpětnou vazbu", po jehož aktivaci je možno vyplnit formulář, do něhož se hodí např. uvést, jaké bariéry či obtíže v přístupnosti stránka poskytuje. Obzvláště nyní, kdy je Google+ v beta verzi, je čas pro podávání takových podnětů vhodný, aby Google do otevření ostré verze přístupnost ještě vylepšil.
  • Objevuje se zde obsah dialogů, které umožňují upravovat různé údaje od informací v profilu až po uživatele v kruzích nebo chatovat s ostatními uživateli. Tj. pokud aktivace odkazu či tlačítka nevyvolá akci, na níž by odečítač při pohybu nějak zareagoval, je dobré překontrolovat právě konec stránky.

Druhou oblastí společnou napříč všemi stránkami je hlavní navigace, skládající se z často zmiňované tmavé lišty s odkazy na služby Googlu a s rychlými odkazy pro sdílení a oznámení v síti Google+. Jedná se o sekci od počátku stránky až po nadpis úrovně 1 "Google". Obě skupiny odkazů jsou správně uzavřeny do nečíslovaných seznamů, tudíž sémanticky je vše v pořádku. Pokud je aktivován odkaz indikující počet oznámení, je mezi druhým seznamem a nadpisem "Google" vložen rámec umožňující prohlížet oznámení. Stejnou polohu má i dialog, jenž se objevuje po aktivaci odkazu "Sdílet...". Další navigační sekce následují ihned za nadpisem "Google", kde si lze vybrat mezi Streamem, fotkami, vlastním profilem a editorem kruhů. Tyto odkazy již nejsou uzavřeny do seznamu, což v tomto případě tolik nevadí, a rovněž prozatím nejsou z pohledu odečítače lokalizovány do češtiny, neboť součástí odkazů jsou bubliny ignorované odečítači. Společnou navigační oblast uzavírá vyhledávací pole pro hledání lidí, jenž je šikovně uvozeno skrytým nadpisem úrovně 2 "Search" a navíc označeno příslušnými ARIA atributy pomáhajícími odečítači vyčítat navrhované výsledky a povyšující standardní editační pole na plně funkční kombobox přístupný z klávesnice.

Za vyhledávacím polem následuje třetí část, o níž ještě nebyla řeč, a tou je hlavní obsah stránky. Ten s výjimkou stránky streamu není uvozen řádným nadpisem, tudíž na většině stránek, včetně té uvítací, je za záchytný bod nutné nelogicky zvolit právě nadpis uvozující vyhledávací pole. Bohužel ani v dalším obsahu uvítací stránky není sémantika vyvedena tak, aby odpovídala vizuálnímu vjemu uživatele, jenž nemusí používat odečítač. Nachází se zde několik nadpisů – „Vítejte!“, „Kruhy“, „Setkání“, „Témata“, „Důležitá poznámka k testovací verzi“, „Dokončete svůj profil“ a „Přidejte si lidi do kruhů“, z toho ani jeden není vyznačen jako korektní nadpis příslušnými HTML elementy. Vzhledem k povaze sdělení pro všechny kromě prvního z nich nejde o fatální absenci, pro lepší čtivost skrze odečítače by však nadpisy měly být přítomny. To, že nadpis „Vítejte!“ není korektně vyznačen je možné považovat již za vážnější překážku, neboť mezi navigací a tímto hlavním nadpisem obsahu stránky je ještě vložen rámec s chatem, jímž je nutno projít pro dosažení příslušného obsahu.

Pro uvítací stránku a Stream jsou společné další sekce stránky. První z nich je navigace ovládající stream a umožňující přepínat mezi uvítací stránkou, celým streamem, streamy jednotlivých kruhů, oznámeními a tématy. Tato navigace je příhodně uvozena skrytým nadpisem „Navigation“, takže na ni lze pomocí odečítače snadno přeskočit, není tu však opět soulad mezi grafickým znázorněním a sémantikou důležitou pro odečítače. Vše vypadá jako víceúrovňový seznam, avšak ten není v kódu řádně vyznačen, tj. nevidomý uživatel tento seznam vnímá jako neuspořádanou sérii odkazů. Ideální stav by měl být tedy takový, že odkaz Stream bude odrážkou seznamu obsahující ještě podseznam se souvisejícími položkami, jimiž v tomto případě jsou filtrovací odkazy streamu s jednotlivými kruhy.

Za streamem, resp. Hlavním obsahem uvítací stránky, jsou další sekce, z nichž ani jedna opět není řádně uvozena nadpisem, tudíž na ně nelze jednoduše přeskočit v rámci seznamu nadpisů, jenž je nejpoužívanější orientační pomůckou nevidomých uživatelů na webových stránkách. Jedná se o sekce nazvané "Ve vašich kruzích", "Návrhy", "Setkání", "Buďte mobilní" a "Poslat pozvánky".

To je pro dnešek vše, ve zkoumání přístupnosti Google+ budeme pokračovat ;-)

Autorem článku je Roman Kabelka.

úterý 16. června 2009

WAI-ARIA v praxi

Je potěšující, že podpora přístupnosti RIA se dostává z roviny teoretické stále více do roviny praktické. Podpora už je nejen na straně prohlížečů a asistivních techologií, ale začíná přibývat i webů, které některé prvky z WAI-ARIA začínají implementovat. O tom, že se dají tyto prvky použít i mimo oblast RIA, svědčí následující dva příklady.

WordPress 2.8

Poslední verze oblíbeného blogovacího nástroje WordPress přináší ve výchozím tématu podporu landmarků, konkrétně rolí search, navigation, main, contentinfo, complementary, banner. Tedy každý, kdo používá Wordpress 2.8 a toto výchozí téma, má lépe zpřístupněný svůj blog, aniž o tom třeba ví ;-) V praxi je toto řešení k vidění například na blogu Marca Zehe.

ukázka landmarků na blogu Marca Zehe

Yahoo! News

Landmark Roles od minulého týdne používá také server Yahoo! News. Jeho čtenáři se tak mohou snáze zorientovat ve velkém množství informací a rychle najít tu, kterou hledají. Yahoo! News má definovány stejné Landmark Roles jako nový WordPress, což má pro uživatele i tu výhodu, že na obou webech ke stejným částem stránky přistupuje stejným způsobem a nemusí pátrat, zda část s vyhledáváním je na jednom webu uvozena nadpisem Hledání a na druhém Vyhledávání.

WAI-ARIA na Zdrojáku

Pokud vás tato tématika zajímá a hledáte více informací v češtině, pak zavítejte na Zdroják, pro který píšu na toto téma několik článků. Ten další, který mám rozpracován, se bude týkat podpory dynamických změn obsahu a tzv. živých oblastí.

U nás si sice na aktivní používání těchto novinek uživateli ještě chvíli počkáme (na lokalizaci JAWS 10 se teprve pracuje), ale myslím, že není na škodu o těchto věcech vědět a při úpravách stávajích či tvorbě nových webů už s nimi počítat a případně je implementovat.

čtvrtek 5. března 2009

Zapojte se do připomínkování specifikace WAI-ARIA

Nástup a rozvoj RIA (Rich Internet Applications) s sebou přinesl mimo jiné i nové problémy a výzvy v oblasti přístupnosti. Je potěšující, že na tuto situaci reaguje i konsorcium W3C a od února 2008 připravuje specifikaci WAI-ARIA (Accessible Rich Internet Applications). Specifikace je zaměřena na zpřístupnění dynamicky měněného obsahu a ovládání webu pomocí AJAXu, JavaScriptu a podobných technologií, s nimiž si stávající asistivní technologie neumí poradit. Pozitivní je, že příprava specifikace probíhá velmi rychle (v porovnání třeba s dlouhým vývojem WCAG 2.0), 24. února byla zveřejněna poslední výzva k jejímu připomínkování. Komentáře k návrhu specifikace je možné posílat do 24. března 2009.

Podpora ze strany odečítačů obrazovky atributů WAI-ARIA není prozatím nijak široká, ale vzhledem k slibné perspektivě standardu a začlenění do HTML 5 je dost pravděpodobná jeho postupná implementace do všech běžných odečítačů obrazovky. V současné době je k dispozici rozšíření FireVox pro Mozilla FireFox, předčítající informace z oblastí vyznačených atributem aria-live. Podobně nabízí podporu ARIA Live oblastí JAWS ve verzi 10, ten ale u nás bude k dispozici - vzhledem k pozdějšímu vydávání lokalizovaných verzí - až za několik měsíců.

Pak už jen stačí, aby specifikaci začali používat i tvůrci webů a další část webu se otevře i handicapovaným návštěvníkům ;-)