Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems
Html5 accessibility
66
HTML5 and Accessibility John Slatin AccessU 2011 Virginia DeBolt, presenter www.webteacher.ws
-
Upload
virginia-debolt -
Category
Technology
-
view
123 -
download
1
description
A presentation for John Slatin AccessU in May 2011 in Austin, TX.
Transcript of Html5 accessibility
HTML5 and Accessibility
John Slatin AccessU 2011Virginia 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 RolesAll 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 JoySome 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.
• <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
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 attributeUses "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 elementUsing 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 typeIf 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 typesSliders<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 101webteacher.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 Shortcomingsrebuildingtheweb.com/en/html5-shortcomings/
This presentation
• The web page:http://vdebolt.com/accessu/
• The slides:http://www.slideshare.net/vdebolt
![HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]](https://static.fdocuments.in/doc/165x107/54c70c8c4a79593f288b465a/html5-semantics-accessibility-forms-carsonified-html5-online-conference.jpg)
