Download - Přístupnost HTML5 v kombinaci s WAI-ARIA
![Page 1: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/1.jpg)
Přístupnost HTML5 v kombinacis WAI-ARIA
Radek PAVLÍČEK
![Page 2: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/2.jpg)
Jak může HTML5 s WAI-ARIA pomoci zlepšit přístupnost webu? Jaké problémy řeší?
![Page 3: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/3.jpg)
Přístupnost
![Page 4: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/4.jpg)
Dostupnost
Uživatel se musí být schopen k informacím dostat.
![Page 5: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/5.jpg)
Ovladatelnost
Pokud se uživatel na web dostane, musí být schopen jej ovládat.
![Page 6: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/6.jpg)
Srozumitelnost
Prezentovaný obsah musí být srozumitelný pro uživatele.
![Page 7: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/7.jpg)
Orientace
Uživatel se musí být schopen dostat tam, kam potřebuje.
![Page 8: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/8.jpg)
Čas
Toto všechno musí být schopen udělatv rozumném čase.
![Page 9: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/9.jpg)
Komupřístupnostpomáhá?
![Page 10: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/10.jpg)
Přístupnost pomáhá lidem s nejrůznějším zdravotním postižením: lidem nevidomým, slabozrakým, tělesně či sluchově postiženým, lidem s kognitivními poruchami či poruchami učení.
![Page 11: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/11.jpg)
Přístupnost není jen pro handicapované
![Page 12: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/12.jpg)
Pro přístup k webu slouží uživatelům nejrůznější techologie či zařízení.
![Page 13: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/13.jpg)
Například notebook se screen readerem a softwarovou lupou.
![Page 14: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/14.jpg)
Hmatový displej (braillský řádek).
![Page 15: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/15.jpg)
Stolní počítač se softwarovou lupou.
![Page 16: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/16.jpg)
VÝZNAM POMŮCEK PRO ZAČLENĚNÍ DO SPOLEČNOSTI
Či ozvučený mobilní telefon.
![Page 17: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/17.jpg)
Tenkrát…
![Page 18: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/18.jpg)
Text
Odkaz
Obrázek
Jednoduchý 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ě.
![Page 19: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/19.jpg)
…a dnes
![Page 20: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/20.jpg)
Web je multimediální prostor, v němž můžeme narazit na jakýkoliv typ obsahu. Asistivní technologie nabízí svým uživatelům spoustu funkcí.
![Page 21: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/21.jpg)
Přístupnostnení
černobílá
![Page 22: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/22.jpg)
V přístupnosti už dávno nerozlišujeme pouze dva stavy – je a není přístupný.
![Page 23: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/23.jpg)
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ž jedna možnost řešení daného problému.
![Page 24: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/24.jpg)
Co je HTML5?
![Page 25: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/25.jpg)
SémantikaMarkupJS API
Offline fungování aplikacíKreslení v prohlížeči
atd.
![Page 26: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/26.jpg)
Jak AT zpřístupňujeuživateli
webovou stránku
![Page 27: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/27.jpg)
Uživatels asistivní
technologií
A11y APIoff screen
modelDOM
![Page 28: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/28.jpg)
Co je WAI-ARIA?
![Page 29: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/29.jpg)
“WAI-ARIA is a specification that provides a means ofdescribing roles, states, and properties for customwidgets so that they are recognisable and usable byassistive technology users.”
Gez Lemon, Introduction to WAI-ARIA
![Page 30: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/30.jpg)
![Page 31: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/31.jpg)
WAI-ARIA je dnes součástí HTML5.
![Page 32: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/32.jpg)
WAI-ARIA přemosťuje nedostatky v přístupnosti vzniklé skriptováním či takové, nelze řešit pouze pomocí HTML.
![Page 33: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/33.jpg)
Proč WAI-ARIA?
![Page 34: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/34.jpg)
Slabá místa v HTML
Dynamické změny obsahu
Rozsáhlé webové aplikace
![Page 35: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/35.jpg)
WAI-ARIA neřeší vše
Jsou situace, kdy WAI-ARIA nepomůže. Ale to není důvod ji nepoužívat, protože pokud ji na svém webu použijete, tak tím chybu neuděláte a vaši uživatelé mohou z WAI-ARIA jen získat.
![Page 36: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/36.jpg)
Podpora WAI-ARIA
WAI-ARIA má dnes širokou podporu na straně prohlížečů, asistivních technologií i některých Javascriptových knihoven.
![Page 38: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/38.jpg)
Co přinášíWAI-ARIA?
![Page 39: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/39.jpg)
Navigaci z klávesniceRole a stavy
„Živé oblasti“Oblasti stránky
a spoustu dalších věcí
![Page 40: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/40.jpg)
Navigace z klávesnice
![Page 41: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/41.jpg)
V HTML 4 mohly získat focus z klávesnice pouze
a, area, button, input, object, select a textarea.
![Page 42: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/42.jpg)
WAI-ARIA
Možnost přiřadit tabindex jakémukoliv prvku.
![Page 43: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/43.jpg)
Jak si to otestovat?
![Page 44: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/44.jpg)
![Page 45: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/45.jpg)
Živé oblasti
![Page 46: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/46.jpg)
Asistivní technologie neumí upozornit uživatele na dynamické změny obsahu na stránce. I toto ale lze jednoduše ošetřit pomocí WAI-ARIA.
![Page 47: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/47.jpg)
Screen Reader & Javascript - AJAX updates with WAI-ARIA Live Regions - video
http://youtu.be/jFB_zJE_pjY
![Page 48: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/48.jpg)
Formuláře (role a stavy)
![Page 49: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/49.jpg)
Nové atributy pro <input>• autocomplete• autofocus• form• formaction• formenctype• Formmethod• formnovalidate• formtarget
• height and width• list• min and max• multiple• pattern (regexp)• placeholder• required• step
![Page 50: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/50.jpg)
<label>Barva: <select name=color required aria-required="true"> <option value="">Vyberte barvu <option>Červená<option>Zelená<option>Modrá</select></label>
WAI-ARIA a HTML5
![Page 51: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/51.jpg)
<label>Barva: <select name=color required><option value="">Vyberte barvu<option>Červená<option>Zelená<option>Modrá</select></label>
HTML5
![Page 52: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/52.jpg)
Oblasti stránky, strukturování
![Page 53: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/53.jpg)
Nadpisy
Jako 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 dnes nepsaným standardem.
![Page 54: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/54.jpg)
Nevýhodou tohoto řešení je to, že nadpisem jsme schopni vyznačit pouze začátek konkrétní oblasti, ale už ne její konec.
![Page 55: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/55.jpg)
Osnova stránky, vytvořená z jednotlivých nadpisů, tedy může vypadat například takto.
![Page 56: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/56.jpg)
To, jak bude osnova stránky vypadat, si můžeme ověřit například pomocí plug-inu Web Developer Toolbar pro Mozilla Firefox.
![Page 57: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/57.jpg)
Stejně dobře nám ve stejném prohlížeči poslouží rozšíření HeadingsMap.
![Page 58: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/58.jpg)
Mohu strukturování nějak zlepšit?
![Page 59: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/59.jpg)
Řešením jsou oblasti stránky (landmarks) ze specifikace WAI-ARIA.
![Page 60: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/60.jpg)
<div id="menu"><h5>Menu</h5><ul>…</div>
Dnes nejpoužívanější řešení
![Page 61: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/61.jpg)
<div id=„menu“ role=„navigation"><h5>Menu</h5><ul>…</div>
Vylepšení přes WAI-ARIA
![Page 62: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/62.jpg)
<nav role="navigation"><h5>Menu</h5><ul>…</nav>
WAI-ARIA a HTML5
![Page 63: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/63.jpg)
<nav><ul>…</nav>
Jen HTML5
![Page 64: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/64.jpg)
<div role=„navigation„ aria-label=„Hlavní menu“><h5>Hlavní menu</h5><ul> … </div>
<div role=„navigation„ aria-label=„Menu sekce“><h5>Menu sekce</h5><ul>… </div>
Jak odlišit dvě menu
![Page 65: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/65.jpg)
How ARIA landmark roles help screen reader usersvideo ukázka
http://youtu.be/IhWMou12_Vk
![Page 66: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/66.jpg)
Pro zobrazení jednotlivých rolí prvků na stránce mohu opět použít Web Developer Toolbar.
![Page 67: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/67.jpg)
Nebo rozšíření Landmarks.
![Page 68: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/68.jpg)
Zapamatujte si
![Page 69: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/69.jpg)
Už dneslze používat
oblasti stránkya další techniky z ARIA.
![Page 70: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/70.jpg)
Funguje to
![Page 71: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/71.jpg)
Kde lze použítstandardní
HTML prvky, použijte je.
![Page 72: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/72.jpg)
Kdy WAI-ARIA nepoužít?
Když stejně dobře poslouží „staré dobré“ HTML.
![Page 73: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/73.jpg)
Dívejme se dopředu…
![Page 74: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/74.jpg)
…ale buďme nohama na zemi.
Zpětná kompatibilita je důležitá.
![Page 75: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/75.jpg)
Jak vám může pomoci projektBlind Friendly Web
![Page 76: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/76.jpg)
Osvěta
![Page 77: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/77.jpg)
Školení
![Page 78: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/78.jpg)
Testování
![Page 79: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/79.jpg)
Rady, tipy, know-how
![Page 80: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/80.jpg)
V současnosti nejlepší kniha o přístupnosti HTML5. Další informace najdete i v mých článcích na www.zdrojak.cz.
![Page 82: Přístupnost HTML5 v kombinaci s WAI-ARIA](https://reader033.vdocuments.pub/reader033/viewer/2022061220/54bb91384a795988758b4576/html5/thumbnails/82.jpg)
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