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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

How HTML5 and WAI-ARIA Can
Improve Virtual Space of Universities
Radek PAVLÍČEK, Teiresias Centre, Masaryk University, B...

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.

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

Picture
Text

Link Simple form

Web pages were very simple and static in t...

Present

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

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

What is HTML5?

Semantics
Markup
JS API
Offline applications
Drawing
etc.

How AT make
web accessible to
their users

User with
assistive
technology

A11y API
DOM off screen
...

What is WAI-ARIA?

“WAI-ARIA is a specification that
provides a means of
describing roles, states, and
properties for custom
widgets so that ...

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

HTML5 Support

www.html5accessibility.com

What does
WAI-ARIA bring?

Keyboard navigation
Roles 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

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

http://youtu.be/jFB_zJE_p...

Forms (Roles and States)

New atributes for <input>
• autocomplete • height and width
• autofocus • list
• form • ...

ARIA and HTML5

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

HTML5

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

Regions,
Landmarks,
Structure

Headings

Landmarks

Demonstration of landmarks

„Standard“ solution

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

WAI-ARIA improvement

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

WAI-ARIA and HTML5

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

HTML5 only

<nav>
<ul>
…
</nav>

Distinguishing of menus
<div role=„navigation„ aria-label=„Main
menu“>
<h5>Main menu</h5>
<ul> … </div>

<div role=„naviga...

How ARIA landmark roles help screen reader users -
video

http://youtu.be/IhWMou12_Vk

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

versatile solution

<figure>
<img src=”picture.jpg” alt=”Brief description.”
aria-describedby=”desc1”>
<figcaption>Ima...

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/cornelluniver...

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Searching higher up the funnel by Jono Alderson 138850 views

View on Slideshare

1 of 77 Ad

View on Slideshare

1 of 77 Ad