How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities

Radek PAVLÍČEK, Teiresias Centre, Masaryk University, Brno

What is accessibility good for?

Availability – user must be able to get

on the web.

Controlability – user must be able to

operate the web.

Comprehensibility – user must understand

the web.

Orientation – user must be able to find the way

through the web.

Time – user must be able to fullfil his

or her task in reasonable time.

Who is accessibility good for?

Accessibility is often perceived as a matter of people with special needs only.

Accessibility brings benefits also to the elderly, geeks, children and very clever men.

Remember

Accessible web is beneficial to all users, not only to users with

impairement.

How can HTML5 with WAI-ARIA help to improve web accessibility? Which issues could be solved by them?

History

Text

Link

Picture

Simple form

Web pages were very simple and static in the past. Also assistive technologies were not so powerful as nowadays.

Present

But today, web is multimedia and interactive space and also assistive technologies are more powerfull.

Accessibilityisn‘t

black or whiteonly

In the past, there were two states only: 1 or 0. Is accessible, or isn‘t.

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.

What is HTML5?

SemanticsMarkupJS API

Offline applicationsDrawing

etc.

How AT make web accessible to

their users

User with assistive

technology

A11y APIoff screen

modelDOM

What is WAI-ARIA?

“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

WAI-ARIA was created to bridge the gap between rich applications and disabled users by introducing additional metadata.

WAI ARIA screenshot

WAI-ARIA is a part of HTML5.

WAI ARIA is simple markup

<div role=„navigation“>

Why WAI-ARIA?

Weaknesses in HTML

Dynamic content updates

Complex web applications

WAI-ARIA does not fix all accessibility issues

WAI-ARIA support

www.html5accessibility.com

HTML5 Support

What doesWAI-ARIA bring?

Keyboard navigationRoles and States„Live Regions“

Landmarks

and much more

Keyboard Navigation

HTML 4 focusable elements were only:

a, area, button, input, object, select a textarea.

WAI-ARIA

A possibility to make „focusable“ each element.

How to test it

Live Regions

http://youtu.be/jFB_zJE_pjY

Screen Reader & Javascript - AJAX updates with WAI-ARIA Live Regions - video

Forms (Roles and States)

New atributes for <input>• autocomplete• autofocus• form• formaction• formenctype• Formmethod• formnovalidate• formtarget

• height and width• list• min and max• multiple• pattern (regexp)• placeholder• required• step

<label>Color: <select name=color required aria-required="true"> <option value="">Choose color <option>Red<option>Green<option>Blue</select></label>

ARIA and HTML5

<label>Color: <select name=color required><option value="">Choose color<option>Red<option>Green<option>Blue</select></label>

HTML5

Regions,Landmarks,Structure

Headings

Landmarks

Demonstration of landmarks

<div id="menu"><h5>Menu</h5><ul>…</div>

„Standard“ solution

<div id=„menu“ role=„navigation"><h5>Menu</h5><ul>…</div>

WAI-ARIA improvement

<nav role="navigation"><h5>Menu</h5><ul>…</nav>

WAI-ARIA and HTML5

<nav><ul>…</nav>

HTML5 only

<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>

Distinguishing of menus

http://youtu.be/IhWMou12_Vk

How ARIA landmark roles help screen reader users - video

You can use Web Developer Toolbar…

…or Landmarks extension to check the presence of roles.

You can only make your content more accessible

by using ARIA

It works

When should not I use ARIA?

When native HTML will get the job done

Text alternatives of pictures

<img src=„picture.jpg“ alt=„Text alternative.“>

figure and figcaption

<figure><img src=”picture.jpg”><figcaption>Meaningful description.</figcaption></figure>

img and aria-describedby

<img src=”pictures.jpg” aria-describedby=”desc1”>…<p id=”desc1”>Meaningful description.</p>

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>

Where to get more information?

Pro HTML5 Accessibility

Contact info

pavlicek@teiresias.muni.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