Mais conteúdo relacionado Semelhante a How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities (20) Mais de Radek Pavlíček (20) How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities1. How HTML5 and WAI-ARIA Can
Improve Virtual Space of Universities
Radek PAVLÍČEK, Teiresias Centre, Masaryk University, Brno
7. Time – user must
be able to fullfil his
or her task in
reasonable time.
12. How can HTML5 with WAI-ARIA help to improve web
accessibility? Which issues could be solved by them?
14. Picture
Text
Link Simple form
Web pages were very simple and static in the past. Also
assistive technologies were not so powerful as nowadays.
16. But today, web is multimedia and interactive space and also
assistive technologies are more powerfull.
18. In the past, there were two states only: 1
or 0. Is accessible, or isn‘t.
19. But now, accessibility is perceived as grey gradient, because
very often it is not easy to say whether something is or is not
accessible. This much better describes reality.
21. Semantics
Markup
JS API
Offline applications
Drawing
etc.
23. User with
assistive
technology
A11y API
DOM off screen
model
25. “WAI-ARIA is a specification that
provides a means of
describing roles, states, and
properties for custom
widgets so that they are
recognisable and usable by
assistive technology users.”
Gez Lemon, Introduction to WAI-ARIA
26. WAI-ARIA was created to bridge the gap between rich
applications and disabled users by introducing
additional metadata.
38. HTML 4 focusable elements
were only:
a, area, button, input, object,
select a textarea.
39. WAI-ARIA
A possibility to make
„focusable“ each element.
43. Screen Reader & Javascript - AJAX updates with WAI-
ARIA Live Regions - video
http://youtu.be/jFB_zJE_pjY
45. New atributes for <input>
• autocomplete • height and width
• autofocus • list
• form • min and max
• formaction • multiple
• formenctype • pattern (regexp)
• Formmethod • placeholder
• formnovalidate • required
• formtarget • step
46. ARIA and HTML5
<label>Color: <select name=color
required aria-required="true"> <option
value="">Choose color
<option>Red
<option>Green
<option>Blue
</select>
</label>
61. Distinguishing of menus
<div role=„navigation„ aria-label=„Main
menu“>
<h5>Main menu</h5>
<ul> … </div>
<div role=„navigation„ aria-label=„Section
Menu“>
<h5>Section menu</h5>
<ul>… </div>
62. How ARIA landmark roles help screen reader users -
video
http://youtu.be/IhWMou12_Vk
65. You can only make your
content more accessible
by using ARIA
71. figure and figcaption
<figure>
<img src=”picture.jpg”>
<figcaption>Meaningful
description.</figcaption>
</figure>
72. img and aria-describedby
<img src=”pictures.jpg” aria-
describedby=”desc1”>
…
<p id=”desc1”>Meaningful
description.</p>
73. versatile solution
<figure>
<img src=”picture.jpg” alt=”Brief description.”
aria-describedby=”desc1”>
<figcaption>Image title</figcaption>
</figure>
…
<p id=”desc1”>More detailed description.</p>
77. 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