Přístupnost HTML5 v kombinaci s WAI-ARIA
Upcoming SlideShare
Loading in...5
×
 

Přístupnost HTML5 v kombinaci s WAI-ARIA

on

  • 2,833 views

Lehký úvod do přístupnosti HTML5 a WAI-ARIA. Přístupnost v současnosti stojí na pěti základních kamenech - dostupnosti, ovladatelnosti, srozumitelnosti, zorientování se a času.

Lehký úvod do přístupnosti HTML5 a WAI-ARIA. Přístupnost v současnosti stojí na pěti základních kamenech - dostupnosti, ovladatelnosti, srozumitelnosti, zorientování se a času.

Web je dnes multimediální prostor a na tuto situaci musí asistivní technologie reagovat. HTML5 a WAI-ARIA přináší celou řadu technik, jak lépe tvořit web tak, aby byl přístupný opravdu pro každého.

To, jak ošetřit dynamické změny obsahu, lépe strukturovat stránky či zlepšit přístupnost formulářů, se dozvíte v této prezentaci.

Statistics

Views

Total Views
2,833
Views on SlideShare
1,677
Embed Views
1,156

Actions

Likes
0
Downloads
2
Comments
0

11 Embeds 1,156

http://poslepu.blogspot.cz 720
http://blindfriendly.cz 259
https://twitter.com 70
http://poslepu.blogspot.com 44
http://poslepu.blogspot.sk 34
http://poslepu.blogspot.ru 12
http://www.poslepu.blogspot.cz 9
https://si0.twimg.com 3
http://poslepu.blogspot.dk 2
http://poslepu.blogspot.co.at 2
http://poslepu.blogspot.no 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Přístupnost HTML5 v kombinaci s WAI-ARIA Přístupnost HTML5 v kombinaci s WAI-ARIA Presentation Transcript

    • Přístupnost HTML5 v kombinaci s WAI-ARIA Radek PAVLÍČEK
    • Jak může HTML5 s WAI-ARIA pomoci zlepšitpřístupnost webu? Jaké problémy řeší?
    • Přístupnost
    • Dostupnost Uživatel se musí být schopen k informacím dostat.
    • Ovladatelnost Pokud se uživatel na web dostane, musí být schopen jej ovládat.
    • SrozumitelnostPrezentovaný obsahmusí být srozumitelnýpro uživatele.
    • OrientaceUživatel se musí býtschopen dostattam, kam potřebuje.
    • ČasToto všechno musí býtschopen udělatv rozumném čase.
    • Přístupnost pomáhá lidem s nejrůznějším zdravotnímpostižením: lidem nevidomým, slabozrakým, tělesně čisluchově postiženým, lidem s kognitivními poruchami čiporuchami učení.
    • Přístupnost není jen pro handicapované
    • Pro přístup k webu slouží uživatelům nejrůznějšítechologie či zařízení.
    • Například notebook se screen readerem a softwarovou lupou.
    • Hmatový displej (braillský řádek).
    • Stolní počítač se softwarovou lupou.
    • VÝZNAM POMŮCEK PRO ZAČLENĚNÍ DO SPOLEČNOSTIČi ozvučený mobilní telefon.
    • Obrázek Text Jednoduchý Odkaz formulářKdysi web byl velmi „strohé“ prostředí a jeho zpřístupnění bylo relativněnenáročné. I asistivní technologie měly funkce poplatné době.
    • Web je multimediální prostor, v němž můžeme narazit na jakýkoliv typobsahu. Asistivní technologie nabízí svým uživatelům spoustu funkcí.
    • V přístupnosti už dávno nerozlišujeme pouze dva stavy – je anení přístupný.
    • Přístupnost je dnes „šedá zóna“, v níž existuje více způsobů nahlíženína (ne)přístupnost konkrétních technik a současně více než jednamožnost řešení daného problému.
    • Co je HTML5?
    • Sémantika Markup JS APIOffline fungování aplikací Kreslení v prohlížeči atd.
    • Jak AT zpřístupňuje uživateli webovou stránku
    • Uživatel s asistivní technologií A11y APIDOM off screen model
    • Co je WAI-ARIA?
    • “WAI-ARIA is a specification thatprovides a means ofdescribing roles, states, andproperties for customwidgets so that they are recognisableand usable byassistive technology users.”Gez Lemon, Introduction to WAI-ARIA
    • WAI-ARIA je dnessoučástí HTML5.
    • WAI-ARIA přemosťuje nedostatky v přístupnosti vzniklé skriptovánímči takové, nelze řešit pouze pomocí HTML.
    • Proč WAI-ARIA?
    • Slabá místa v HTMLDynamické změny obsahuRozsáhlé webové aplikace
    • WAI-ARIA neřeší všeJsou situace, kdy WAI-ARIA nepomůže. Ale to není důvod jinepoužívat, protože pokud ji na svém webu použijete, tak tím chybuneuděláte a vaši uživatelé mohou z WAI-ARIA jen získat.
    • Podpora WAI-ARIAWAI-ARIA má dnes širokou podporu na straně prohlížečů, asistivníchtechnologií i některých Javascriptových knihoven.
    • Podpora HTML5 www.html5accessibility.com
    • Co přinášíWAI-ARIA?
    • Navigaci z klávesnice Role a stavy „Živé oblasti“ Oblasti stránkya spoustu dalších věcí
    • Navigace z klávesnice
    • V HTML 4 mohly získatfocus z klávesnice pouzea, area, button, input, obj ect, select a textarea.
    • WAI-ARIAMožnost přiřadit tabindex jakémukoliv prvku.
    • Jak si to otestovat?
    • Živé oblasti
    • Asistivní technologie neumí upozornit uživatele na dynamické změnyobsahu na stránce. I toto ale lze jednoduše ošetřit pomocí WAI-ARIA.
    • Screen Reader & Javascript - AJAX updates with WAI-ARIA Live Regions - video http://youtu.be/jFB_zJE_pjY
    • Formuláře (role a stavy)
    • Nové atributy pro <input>• autocomplete • height and width• autofocus • list• form • min and max• formaction • multiple• formenctype • pattern (regexp)• Formmethod • placeholder• formnovalidate • required• formtarget • step
    • WAI-ARIA a HTML5<label>Barva: <select name=colorrequired aria-required="true"> <optionvalue="">Vyberte barvu<option>Červená<option>Zelená<option>Modrá</select></label>
    • HTML5<label>Barva: <select name=colorrequired><option value="">Vyberte barvu<option>Červená<option>Zelená<option>Modrá</select></label>
    • Oblasti stránky, strukturování
    • NadpisyJako hlavní nástroj pro strukturování stránek se dnes stále používajínadpisy – ať už ty viditelné, nebo vhodně skryté. Tato technika je dnesnepsaným standardem.
    • Nevýhodou tohoto řešení je to, že nadpisem jsme schopni vyznačitpouze začátek konkrétní oblasti, ale už ne její konec.
    • Osnova stránky, vytvořená z jednotlivých nadpisů, tedy může vypadatnapříklad takto.
    • To, jak bude osnova stránky vypadat, si můžeme ověřit napříkladpomocí plug-inu Web Developer Toolbar pro Mozilla Firefox.
    • Stejně dobře nám ve stejném prohlížeči poslouží rozšířeníHeadingsMap.
    • Mohu strukturování nějak zlepšit?
    • Řešením jsou oblasti stránky (landmarks) ze specifikace WAI-ARIA.
    • Dnes nejpoužívanější řešení<div id="menu"><h5>Menu</h5><ul>…</div>
    • Vylepšení přes WAI-ARIA<div id=„menu“role=„navigation"><h5>Menu</h5><ul>…</div>
    • WAI-ARIA a HTML5<nav role="navigation"><h5>Menu</h5><ul>…</nav>
    • Jen HTML5<nav><ul>…</nav>
    • Jak odlišit dvě menu<div role=„navigation„ aria-label=„Hlavnímenu“><h5>Hlavní menu</h5><ul> … </div><div role=„navigation„ aria-label=„Menusekce“><h5>Menu sekce</h5><ul>… </div>
    • How ARIA landmark roles help screen reader usersvideo ukázka http://youtu.be/IhWMou12_Vk
    • Pro zobrazení jednotlivých rolí prvků na stránce mohu opět použít WebDeveloper Toolbar.
    • Nebo rozšíření Landmarks.
    • Zapamatujte si
    • Už dnes lze používat oblasti stránkya další techniky z ARIA.
    • Funguje to
    • Kde lze použít standardníHTML prvky, použijte je.
    • Kdy WAI-ARIA nepoužít?Když stejně dobře poslouží „starédobré“ HTML.
    • Dívejme se dopředu…
    • …ale buďme nohama na zemi. Zpětná kompatibilita je důležitá.
    • Jak vám může pomoci projektBlind Friendly Web
    • Osvěta
    • Školení
    • Testování
    • Rady, tipy, know-how
    • V současnosti nejlepší kniha o přístupnosti HTML5. Dalšíinformace najdete i v mých článcích na www.zdrojak.cz.
    • Kontaktní informace pavlicek@blindfriendly.cz @radlicek
    • Photo credits• http://www.flickr.com/photos/nationaalarchief/4025536029/• http://www.flickr.com/photos/cornelluniversitylibrary/3678984206/• http://www.flickr.com/photos/30795657@N00/434222764/• http://www.flickr.com/photos/30072283@N00/4782154855/• http://www.flickr.com/photos/_sk/4042566406/sizes/o/in/photostream/• http://www.flickr.com/photos/51035702460@N01/19245594/• http://www.flickr.com/photos/jasonpearce/136206624/sizes/l/in/photostream/• http://www.pooh.cz/upload/img/1000/trattoria-laura-facebook-faux-pas-2.png• http://lorenc.info/3MA381/tabulatory.htm• http://www.bibri.net/wp-content/uploads/2009/11/Ubuntu-910-obsah1.jpg• http://4.bp.blogspot.com/__1B7eTIn3jM/SoMylQ_RqWI/AAAAAAAAAAw/F8u_jtyp3IA/s400/Learn-Hiragana.jpg• http://www.mariezabranska.com/pict/textil/16.jpg• http://www.stanford.edu/group/accessibility/cgi-bin/presentations/html5_a11y/images/HTML5_braille.png• http://pulllava360.saturn.netdna-cdn.com/wp-content/uploads/2011/08/html5_code.jpg• http://www.flickr.com/photos/national_library_of_australia_commons/6173531979/• http://www.flickr.com/photos/bibliothequedetoulouse/7942246450/• http://www.ixibo.com/wp-content/uploads/2010/12/web-browsers.jpg• http://blogs.telerik.com//Libraries/Carl_Bergenhem_s_Library/waiaria_001.sflb• http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Nasa_earth.jpg/800px-Nasa_earth.jpg• http://tapetky.kx.cz/files/hokej3.jpg