přístupnost html5 v kombinaci s wai-aria
DESCRIPTION
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.TRANSCRIPT
![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