Html5 accessibility

HTML5 and Accessibility John Slatin AccessU 2011 Virginia DeBolt, presenter www.webteacher.ws

Theory and Practice
Satisfy your curiosity about what HTML5 is and isn't
Learn HTML5 you can use now and what isn't ready yet
Frequent lab breaks to put HTML5 into practice

A Brief History of HTML5
W3C published HTML 4.01 in 1999
W3C next published XHTML 1.0 and XHTML 1.1
W3C started on XHTML 2
Opera, Mozilla, Apple wanted to head toward web apps instead
Arguments, disagreements, rejections, faceoffs . . . enter WHATWG
WHATWG, separate from W3C, worked on Web Forms and Web Apps which combined and grew into HTML5

A Brief History of HTML5, 2
W3C decided XHTML 2 was a bad idea, dumped it in 2009
W3C chartered new HTML Working Group, based on the work done in the WHATWG
While W3C is now working on HTML5, the WHATWG continues.
WHATWG creates specs
W3C reviews and seeks comments
It's messy, but it's working

A Brief History of HTML5, 3
HTML5 should become "candidate recommendation" in 2012 – it's now a working draft
HTML5 is not more accessible (yet)
We can start using it in small steps

Goals and Principles
Support existing content
Codify what works
Support users over authors
Keep it simple, eg.
DOCTYPE
Charset
Link
Script
Power to support web apps
Support web forms

Problematic Areas
It's a working draft under constant change
Not more accessible than previous specs – yet
There's some confusion over alt text
The heading structure for HTML5 is not useful in assistive devices - yet
Work is ongoing to make some elements such as canvas accessible, but is incomplete
Audio and video aren't accessible - yet

Alt text
The W3C suggests techniques for situations like buttons, charts, images of text, decorative images, images that contribute to a theme, icons, images of pictures, webcam images, CAPTCHA images, images in figures.

Try the Simplified Joy
<!DOCTYPE html>
<meta charset="UTF-8">
<script src="file.js></script>
<link rel="stylesheet" href="file.css">

Syntax
Uppercase, lowercase, camel case: check
Attributes quoted, attributes not quoted: check
Self-closing or not: check
No deprecated elements, only obsolete elements – don't use 'em, but they work: check

Oh, the Joy: Syntax
<IMG src="image.gif">
<img src=image.gif />
<img src="image.gif">
<img SRC=image.gif>

Reworked & Not Obsolete
<small> now means small print or legalese
<b> now means to be stylistically offset from normal prose without conveying any extra importance. <strong> still means importance
<i> now means an alternate voice or mood. <em> still means emphasis. <em> elements can be nested to indicate strong emphasis.
<cite> now means the title of a work but not a person's name

Restored or acknowledged
iframe targets are now restored
Value attributes in list items to indicate start number or item number are restored
Embed is acknowledged and understood

Try the Joy
<!DOCTYPE html>
<html lang="en">
<head>
<title>Try the Joy</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>

Try the Joy
<body>
<h3>Element changes in HTML5</h3> <small>this is small print - really</small><br> <b>this is stylistically offset</b><br> <i>this is in an alternate voice or mood</i><br> <cite>InterACT with Web Standards: A Holistic Approach to Web Design</cite>

New Rich Media Elements
<canvas>
<video>
<audio>

New Semantic Sectioning Elements are a Giant Step Forward
<section>
<header>
<hgroup>
<footer>
<aside>
<nav>
<article>

New Form Features
New attributes
placeholder
autofocus
required
autocomplete
New input types
search
email
website
phone
range
number
dates and times
color

Sectioning semantically
A typical web page layout
Previously done with divs
How would it be done with HTML5 semantic elements?

A high level look

header
articles, sections, footers and asides can have header elements
hgroup elements can be used when more than one heading element is needed
Every header on the page can have an h1
headers can contain nav elements
<header> <hgroup> <h1>Main Heading</h1> <h2>Secondary Heading</h2> </hgroup> <nav> <ul><li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li></ul> </nav>
</header>

The a element
In HTML5 you can wrap multiple elements in a single <a> element <a href="about.html"> <h2>About Us</h2> <p>Find out how to contact us.</p> </a>

Try the Joy
<header>
<nav> <ul><li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li></ul>
</nav>
<a href="trythejoy.html"><img src="logo.jpg" alt="try the joy"></a>
<hgroup> <h1>Try the Joy</h1> <h2>Coding a Page in HTML5</h2> </hgroup>
</header>

ARIA Roles
All browsers don't know HTML5, but ARIA can help
article
columnheader
definition
directory
document
group
heading
img
list
ARIA roles can describe document structure
listitem
math
note
presentation
region
row
rowheader
separator
toolbar

ARIA Roles
ARIA roles can be navigational landmarks
application
banner
complementary
contentinfo
form
main
navigation
search

Support for ARIA Roles
According to the Paciello Group ,
Landmark roles are currently supported In JAWS version 10 screen reader , NVDA 2010.1 and VoiceOver on iPhone IOS4.
The current version of Window Eyes screen reader has bugs related to the use of ARIA.
According to Jared Smith at WebAIM , "some things cannot be made accessible without ARIA."

Give a Listen with YouTube
How screen readers speak a simple HTML5 page when ARIA roles were added
http://www.youtube.com/watch?v=LP3zLrOjQSY&feature=player_embedded

Try the Joy
<header id="banner" role="banner" >
<nav id="globalnav" role="navigation" > <ul><li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li></ul> </nav>
<a href="trythejoy.html"><img src="logo.jpg" alt="try the joy"></a>
<hgroup role="heading"> <h1>Try the Joy</h1> <h2>Coding a Page in HTML5</h2> </hgroup>
</header>

Try the Joy
Some people are suggesting nested divs to create style hooks. Use a class name that matches the HTML5 semantic element, and style with the class name.
<nav role="navigation">
<div class="nav" > <ul><li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li></ul>
</div>
</nav>

Semantics and Roles
When HTML5 semantic elements such as nav and aside are widely meaningful to AT devices, the ARIA landmark roles can be dropped. ARIA does add meaningful help, however

Sections and Articles
Sections can contain articles
Articles can contain sections

Section
The section element groups related content. This might be a part or chapter in a book, a section in a chapter, or anything that had its own heading in HTML 4. Each section may include other new semantic elements such as article, header and footer, and well as various kinds of HTML elements such as images, paragraphs, list, etc.

Article
The article element is more a singular, discrete piece than can be lifted whole for syndication or use elsewhere.
Articles can contain header, footer, section, nav, aside and other elements.

Section

Section
<section> <article>First Article</article> <article>Second Article</article>
</section>

Section
<section id="maincontent" role="main" > <article>First Article</article> <article>Second Article</article>
</section>

Section
<section> <h3>Element changes in HTML5</h3> <small>this is small print - really</small><br> <b>this is stylistically offset</b><br> <i>this is in an alternate voice or mood</i><br> <cite>InterACT with Web Standards: A Holistic Approach to Web Design</cite>
</section>

Article Recap
Articles are meant to be complete units–something you can pick up and move around
Articles can contain header, hgroup, section, aside, footer and other elements

Article Joy
<article class="feature">
<header role="heading">
<h1>An Example Article</h1>
</header>
<p>Any content that would be needed can be used in an article. For example, illustrations, diagrams, photos, code listings, photos, videos, and other material can be put in a figure element with a figcaption.
</p>

Article Joy, 2
<figure><img src="cup_cat.jpg" alt="A tiny cat in a teacup"><br>
<figcaption>A tiny cat in a teacup</figcaption></figure>
<p>You can insert tables, video, links, lists, etc. Just add content as usual.</p>

Article Joy, 3
<footer class="featurefooter">
<p><a href="commentpage.html">Leave a comment.</a><br>
© copyright 2010. Published Date xxxx.</p>
<p class="vcard">Written by <a class="url fn" href="http://vdebolt.com">Virginia DeBolt</a></p>
</footer>
</article>

Add more
Copy and paste the first article to create another one or two that are similar.
Moving on to the aside:
The aside element is tangentially related content
It could be similar to the familiar 'sidebar', however it could also be a pull quote or any chunk of content that is separate from the main content.
Put one in the footer.

Try the joy: aside
<p class="vcard">Written by <a class="url fn" href="http://vdebolt.com">Virginia DeBolt</a></p>
<aside class="aboutauthor"> <h3>About the Author</h3>
<p>Virginia DeBolt is the author of blah and blah. She blogs at blah and is a big blah.</p>
</aside>
</footer>
</article>

Try the joy: aside
<aside class="aboutauthor" role="complementary" > <h3>About the Author</h3>
<p>Virginia DeBolt is the author of blah and blah. She blogs at blah and is a big blah.</p>
</aside>

The Aside as Sidebar

Try the joy
<aside id="sidebar">
Wrap that existing section about element changes in HTML5 in this aside.
</aside>

Try the joy
<aside id="sidebar" role="complementary" >
Wrap that existing section about element changes in HTML5 in this aside.
</aside>

Try the joy
<aside id="sidebar" role="complementary">
<section class="related">
<h3>Read related articles</h3>
<nav id="relatednav" role="navigation"> <ul> <li><a href="#">context link 1</a></li> <li><a href="#">context link 2</a></li> <li><a href="#">context link 3</a></li> <li><a href="#">context link 4</a></li> </ul>
</nav>
</section>
</aside>

Footer
Footers can be used with sections and articles
Footers can be used in the traditional sense to contain site information at the end of a page

Try the footer
<footer id="pagefoot" role="contentinfo">
Footer content goes here. Now's your chance to use small. The footer can contain sections, asides, navs and other relevant structures to describe the page.
</footer>

HTML5 shim
HTML5 shim is a JavaScript that helps IE versions before IE9 to recognize and style HTML5 elements.

HTML5 Forms
New Attributes
Placeholder
Autofocus
Required
Autocomplete
list
New Elements
Datalist
New Input Types
Search
Email
url
Tel
Range
Number
Date
Color

What to do with forms?
Look at some code examples
Wait for improvements in implementation and accessibility before using most of them

Attributes
<input id="fname" name="fname" type="text" placeholder ="First Name">
You can add:
<input id="fname" name="fname" type="text" placeholder="First Name" autofocus >
You can add:
<input id="fname" name="fname" type="text" placeholder="First Name" autofocus required >

The autocomplete attribute
Uses "on" or "off" values. "On" is the default.
<form action="runscript.php" autocomplete="off" >
<input id="fname" name="fname" type="text" placeholder="First Name" autocomplete="off" >

Datalist element
Using the list attribute, you can associate options with an input field.
<input type="text" name="writer" id="writer" list="writers">
< datalist id="writers">
<option value="Dr. Seuss">
<option value="Mickey Spillane">
<option value="Mother Goose">
<option value="Phillip Roth">
</ datalist >

Search input type
If the search input type is implemented in the browser, the input field will look like a search field.
<input id="query" name"query" type="search" >

More input types
<input type="email" name="email" id="email">
<input type="url" name="website" id="website">
<input type="tel" name="phone" id="phone">

More input types
Sliders
<input id="amount" name="amount" type="range" min="1" max="5">
Spinners
<input id="total" name="total" type="number" min="5" max="20">

Date and Time Input Types
date: year, month, day
datetime: year, month, day with hours, minutes, and seconds and timezone
datetime-local: no timezone
time: hours, minutes, seconds
month: year and month but no day

Date input types
<input id="dtstart" name="dtstart" type="date" >

Cross-browser forms
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

Current State of HTML5 Forms
wufoo.com/html5/

Links and Resources
HTML5 Document Outliner gsnedders.html5.org/outliner/
ARIA Roles 101 webteacher.ws/2010/10/14/aria-roles-101/
HTML5 Accessibility html5accessibility.com/
HTML5 Demos html5demos.com/
HTML5 validator validator.nu

More links and resources
HMTL5, ARIA roles, and screen readers in March 2011
www.accessibleculture.org/research/html5-aria-2011/
HTML5 Shortcomings rebuildingtheweb.com/en/html5-shortcomings/

This presentation
The web page: http://vdebolt.com/accessu/
The slides: http://www.slideshare.net/vdebolt

Html5 accessibility

by Virginia DeBolt

Accessibility

Categories

Upload Details

Usage Rights

Statistics