SlideShare a Scribd company logo
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=&quot;UTF-8&quot;> <script src=&quot;file.js></script> <link rel=&quot;stylesheet&quot; href=&quot;file.css&quot;>
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=&quot;image.gif&quot;> <img src=image.gif /> <img src=&quot;image.gif&quot;> <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=&quot;en&quot;> <head> <title>Try the Joy</title> <meta charset=&quot;UTF-8&quot;> </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=&quot;about.html&quot;> <h2>About Us</h2> <p>Find out how to  contact us.</p> </a>
Try the Joy <header> <nav>  <ul><li><a href=&quot;#&quot;>Link</a></li>  <li><a href=&quot;#&quot;>Link</a></li>  <li><a href=&quot;#&quot;>Link</a></li>  <li><a href=&quot;#&quot;>Link</a></li></ul> </nav> <a href=&quot;trythejoy.html&quot;><img src=&quot;logo.jpg&quot; alt=&quot;try the joy&quot;></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 , &quot;some things cannot be made accessible without ARIA.&quot;
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=&quot;banner&quot; role=&quot;banner&quot; > <nav  id=&quot;globalnav&quot; role=&quot;navigation&quot; >  <ul><li><a href=&quot;#&quot;>Link</a></li>  <li><a href=&quot;#&quot;>Link</a></li>  <li><a href=&quot;#&quot;>Link</a></li>  <li><a href=&quot;#&quot;>Link</a></li></ul> </nav>  <a href=&quot;trythejoy.html&quot;><img src=&quot;logo.jpg&quot; alt=&quot;try the joy&quot;></a> <hgroup  role=&quot;heading&quot;>              <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=&quot;navigation&quot;> <div  class=&quot;nav&quot; >  <ul><li><a href=&quot;#&quot;>Link</a></li>  <li><a href=&quot;#&quot;>Link</a></li>  <li><a href=&quot;#&quot;>Link</a></li>  <li><a href=&quot;#&quot;>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=&quot;maincontent&quot; role=&quot;main&quot; > <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=&quot;feature&quot;>  <header role=&quot;heading&quot;>  <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=&quot;cup_cat.jpg&quot; alt=&quot;A tiny cat in a teacup&quot;><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=&quot;featurefooter&quot;>  <p><a href=&quot;commentpage.html&quot;>Leave a comment.</a><br>  &copy; copyright 2010. Published Date xxxx.</p>  <p class=&quot;vcard&quot;>Written by <a class=&quot;url fn&quot; href=&quot;http://vdebolt.com&quot;>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=&quot;vcard&quot;>Written by <a class=&quot;url fn&quot; href=&quot;http://vdebolt.com&quot;>Virginia DeBolt</a></p> <aside class=&quot;aboutauthor&quot;> <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=&quot;aboutauthor&quot;  role=&quot;complementary&quot; > <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=&quot;sidebar&quot;> Wrap that existing section about element changes in HTML5 in this aside. </aside>
Try the joy <aside id=&quot;sidebar&quot;  role=&quot;complementary&quot; > Wrap that existing section about element changes in HTML5 in this aside. </aside>
Try the joy <aside id=&quot;sidebar&quot; role=&quot;complementary&quot;> <section class=&quot;related&quot;> <h3>Read related articles</h3> <nav id=&quot;relatednav&quot; role=&quot;navigation&quot;> <ul>  <li><a href=&quot;#&quot;>context link 1</a></li>  <li><a href=&quot;#&quot;>context link 2</a></li>  <li><a href=&quot;#&quot;>context link 3</a></li>  <li><a href=&quot;#&quot;>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=&quot;pagefoot&quot; role=&quot;contentinfo&quot;> 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=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;></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=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot;  placeholder =&quot;First Name&quot;> You can add: <input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot;  autofocus > You can add: <input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot; autofocus  required >
The autocomplete attribute Uses &quot;on&quot; or &quot;off&quot; values. &quot;On&quot; is the default. <form action=&quot;runscript.php&quot;  autocomplete=&quot;off&quot; > <input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot;  autocomplete=&quot;off&quot; >
Datalist element Using the list attribute, you can associate options with an input field. <input type=&quot;text&quot; name=&quot;writer&quot; id=&quot;writer&quot; list=&quot;writers&quot;> < datalist  id=&quot;writers&quot;> <option value=&quot;Dr. Seuss&quot;> <option value=&quot;Mickey Spillane&quot;> <option value=&quot;Mother Goose&quot;>  <option value=&quot;Phillip Roth&quot;> </ 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=&quot;query&quot; name&quot;query&quot;  type=&quot;search&quot; >
More input types <input  type=&quot;email&quot;  name=&quot;email&quot; id=&quot;email&quot;> <input  type=&quot;url&quot;  name=&quot;website&quot; id=&quot;website&quot;> <input  type=&quot;tel&quot;  name=&quot;phone&quot; id=&quot;phone&quot;>
More input types Sliders <input id=&quot;amount&quot; name=&quot;amount&quot;  type=&quot;range&quot;  min=&quot;1&quot; max=&quot;5&quot;> Spinners <input id=&quot;total&quot; name=&quot;total&quot;  type=&quot;number&quot;  min=&quot;5&quot; max=&quot;20&quot;>
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=&quot;dtstart&quot; name=&quot;dtstart&quot;  type=&quot;date&quot; >
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

More Related Content

What's hot

WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
Brendan Sera-Shriar
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
Bulldogs83
 
What's New on the Facebook Platform, May 2011
What's New on the Facebook Platform, May 2011What's New on the Facebook Platform, May 2011
What's New on the Facebook Platform, May 2011
Iskandar Najmuddin
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITP
yucefmerhi
 
Building A Website
Building A WebsiteBuilding A Website
Building A Website
marabeas
 
Introducing YUI
Introducing YUIIntroducing YUI
Introducing YUI
Christian Heilmann
 
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
Michaela Lehr
 
The 5 minute guide to RDFa...in only 6 minutes 40 seconds
The 5 minute guide to RDFa...in only 6 minutes 40 secondsThe 5 minute guide to RDFa...in only 6 minutes 40 seconds
The 5 minute guide to RDFa...in only 6 minutes 40 seconds
Mark Birbeck
 
Advanced SEO for Developers (Mix08)
Advanced SEO for Developers (Mix08)Advanced SEO for Developers (Mix08)
Advanced SEO for Developers (Mix08)
Nathan Buggia
 
Vanilla Forums Theme Guide
Vanilla Forums Theme GuideVanilla Forums Theme Guide
Vanilla Forums Theme Guide
Vanilla Forums
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examples
gopivthmk
 
The Frameless Opac
The Frameless OpacThe Frameless Opac
The Frameless Opac
Bill Drew
 
iGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your LibraryiGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your Library
Edward Metz
 
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesOptimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile Devices
Sugree Phatanapherom
 
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITPLecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
yucefmerhi
 
merb.intro
merb.intromerb.intro
merb.intro
pjb3
 

What's hot (16)

WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
What's New on the Facebook Platform, May 2011
What's New on the Facebook Platform, May 2011What's New on the Facebook Platform, May 2011
What's New on the Facebook Platform, May 2011
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITP
 
Building A Website
Building A WebsiteBuilding A Website
Building A Website
 
Introducing YUI
Introducing YUIIntroducing YUI
Introducing YUI
 
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
 
The 5 minute guide to RDFa...in only 6 minutes 40 seconds
The 5 minute guide to RDFa...in only 6 minutes 40 secondsThe 5 minute guide to RDFa...in only 6 minutes 40 seconds
The 5 minute guide to RDFa...in only 6 minutes 40 seconds
 
Advanced SEO for Developers (Mix08)
Advanced SEO for Developers (Mix08)Advanced SEO for Developers (Mix08)
Advanced SEO for Developers (Mix08)
 
Vanilla Forums Theme Guide
Vanilla Forums Theme GuideVanilla Forums Theme Guide
Vanilla Forums Theme Guide
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examples
 
The Frameless Opac
The Frameless OpacThe Frameless Opac
The Frameless Opac
 
iGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your LibraryiGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your Library
 
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesOptimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile Devices
 
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITPLecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
 
merb.intro
merb.intromerb.intro
merb.intro
 

Viewers also liked

Twitter For Writers
Twitter For WritersTwitter For Writers
Twitter For Writers
Virginia DeBolt
 
Southwest Conference on Disability 2011
Southwest Conference on Disability 2011Southwest Conference on Disability 2011
Southwest Conference on Disability 2011
Virginia DeBolt
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
Aaron Irizarry
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
Seth Familian
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
Drift
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
Leslie Samuel
 

Viewers also liked (6)

Twitter For Writers
Twitter For WritersTwitter For Writers
Twitter For Writers
 
Southwest Conference on Disability 2011
Southwest Conference on Disability 2011Southwest Conference on Disability 2011
Southwest Conference on Disability 2011
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Similar to Html5 accessibility

HTML5 - One spec to rule them all
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them all
Stu King
 
HTML 5
HTML 5HTML 5
HTML5
HTML5HTML5
HTML5
tanamania
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
pemaquid
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
Carlos Ramon
 
Html 5.0
Html 5.0Html 5.0
Html 5.0
Kristof Degrave
 
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: TagsARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
Gilbert Guerrero
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
Owen Williams
 
Html5
Html5 Html5
Wordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob LarsenWordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob Larsen
George Mamadashvili
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
coachhahn
 
Html5
Html5Html5
HTML5
HTML5HTML5
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 today
thebeebs
 
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My WebHow To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
sritikumar
 
Html 5
Html 5Html 5
Html 5
Ajay Ghosh
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Alfresco Software
 
HTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet Goldrush
Peter Lubbers
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
Ravi Raj
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
Bulldogs83
 

Similar to Html5 accessibility (20)

HTML5 - One spec to rule them all
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them all
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML5
HTML5HTML5
HTML5
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
 
Html 5.0
Html 5.0Html 5.0
Html 5.0
 
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: TagsARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Html5
Html5 Html5
Html5
 
Wordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob LarsenWordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob Larsen
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html5
Html5Html5
Html5
 
HTML5
HTML5HTML5
HTML5
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 today
 
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My WebHow To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
 
Html 5
Html 5Html 5
Html 5
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
 
HTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet Goldrush
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 

Recently uploaded

LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
SelfMade bd
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
KIRAN KV
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
siddu769252
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
ZachWylie3
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
janagijoythi
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
softsuave
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
DianaGray10
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
AmandaCheung15
 
Finetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and DefendingFinetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and Defending
Priyanka Aash
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
FIDO Alliance
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
alexjohnson7307
 
Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)
Debmalya Biswas
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 

Recently uploaded (20)

LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
 
Finetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and DefendingFinetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and Defending
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
 
Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 

Html5 accessibility

  • 1. HTML5 and Accessibility John Slatin AccessU 2011 Virginia DeBolt, presenter www.webteacher.ws
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. A Brief History of HTML5, 3 HTML5 should become &quot;candidate recommendation&quot; in 2012 – it's now a working draft HTML5 is not more accessible (yet) We can start using it in small steps
  • 6. 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
  • 7. 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
  • 8. 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.
  • 9. Try the Simplified Joy <!DOCTYPE html> <meta charset=&quot;UTF-8&quot;> <script src=&quot;file.js></script> <link rel=&quot;stylesheet&quot; href=&quot;file.css&quot;>
  • 10. 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
  • 11. Oh, the Joy: Syntax <IMG src=&quot;image.gif&quot;> <img src=image.gif /> <img src=&quot;image.gif&quot;> <img SRC=image.gif>
  • 12. 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
  • 13. 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
  • 14. Try the Joy <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <title>Try the Joy</title> <meta charset=&quot;UTF-8&quot;> </head> <body> </body> </html>
  • 15. 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>
  • 16. New Rich Media Elements <canvas> <video> <audio>
  • 17. New Semantic Sectioning Elements are a Giant Step Forward <section> <header> <hgroup> <footer> <aside> <nav> <article>
  • 18. New Form Features New attributes placeholder autofocus required autocomplete New input types search email website phone range number dates and times color
  • 19. Sectioning semantically A typical web page layout Previously done with divs How would it be done with HTML5 semantic elements?
  • 20. A high level look
  • 21. 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>
  • 22. The a element In HTML5 you can wrap multiple elements in a single <a> element <a href=&quot;about.html&quot;> <h2>About Us</h2> <p>Find out how to contact us.</p> </a>
  • 23. Try the Joy <header> <nav> <ul><li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li></ul> </nav> <a href=&quot;trythejoy.html&quot;><img src=&quot;logo.jpg&quot; alt=&quot;try the joy&quot;></a> <hgroup>            <h1>Try the Joy</h1> <h2>Coding a Page in HTML5</h2> </hgroup> </header>
  • 24. 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
  • 25. ARIA Roles ARIA roles can be navigational landmarks application banner complementary contentinfo form main navigation search
  • 26. 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 , &quot;some things cannot be made accessible without ARIA.&quot;
  • 27. 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
  • 28. Try the Joy <header id=&quot;banner&quot; role=&quot;banner&quot; > <nav id=&quot;globalnav&quot; role=&quot;navigation&quot; > <ul><li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li></ul> </nav> <a href=&quot;trythejoy.html&quot;><img src=&quot;logo.jpg&quot; alt=&quot;try the joy&quot;></a> <hgroup role=&quot;heading&quot;>              <h1>Try the Joy</h1>   <h2>Coding a Page in HTML5</h2> </hgroup> </header>
  • 29. 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=&quot;navigation&quot;> <div class=&quot;nav&quot; > <ul><li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li> <li><a href=&quot;#&quot;>Link</a></li></ul> </div> </nav>
  • 30. 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
  • 31. Sections and Articles Sections can contain articles Articles can contain sections
  • 32. 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.
  • 33. 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.
  • 35. Section <section> <article>First Article</article> <article>Second Article</article> </section>
  • 36. Section <section id=&quot;maincontent&quot; role=&quot;main&quot; > <article>First Article</article> <article>Second Article</article> </section>
  • 37. 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>
  • 38. 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
  • 39. Article Joy <article class=&quot;feature&quot;> <header role=&quot;heading&quot;> <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>
  • 40. Article Joy, 2 <figure><img src=&quot;cup_cat.jpg&quot; alt=&quot;A tiny cat in a teacup&quot;><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>
  • 41. Article Joy, 3 <footer class=&quot;featurefooter&quot;> <p><a href=&quot;commentpage.html&quot;>Leave a comment.</a><br> &copy; copyright 2010. Published Date xxxx.</p> <p class=&quot;vcard&quot;>Written by <a class=&quot;url fn&quot; href=&quot;http://vdebolt.com&quot;>Virginia DeBolt</a></p> </footer> </article>
  • 42. 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.
  • 43. Try the joy: aside <p class=&quot;vcard&quot;>Written by <a class=&quot;url fn&quot; href=&quot;http://vdebolt.com&quot;>Virginia DeBolt</a></p> <aside class=&quot;aboutauthor&quot;> <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>
  • 44. Try the joy: aside <aside class=&quot;aboutauthor&quot; role=&quot;complementary&quot; > <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>
  • 45. The Aside as Sidebar
  • 46. Try the joy <aside id=&quot;sidebar&quot;> Wrap that existing section about element changes in HTML5 in this aside. </aside>
  • 47. Try the joy <aside id=&quot;sidebar&quot; role=&quot;complementary&quot; > Wrap that existing section about element changes in HTML5 in this aside. </aside>
  • 48. Try the joy <aside id=&quot;sidebar&quot; role=&quot;complementary&quot;> <section class=&quot;related&quot;> <h3>Read related articles</h3> <nav id=&quot;relatednav&quot; role=&quot;navigation&quot;> <ul> <li><a href=&quot;#&quot;>context link 1</a></li> <li><a href=&quot;#&quot;>context link 2</a></li> <li><a href=&quot;#&quot;>context link 3</a></li> <li><a href=&quot;#&quot;>context link 4</a></li> </ul> </nav> </section> </aside>
  • 49. 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
  • 50. Try the footer <footer id=&quot;pagefoot&quot; role=&quot;contentinfo&quot;> 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>
  • 51. 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=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;></script> <![endif]-->
  • 52. HTML5 Forms New Attributes Placeholder Autofocus Required Autocomplete list New Elements Datalist New Input Types Search Email url Tel Range Number Date Color
  • 53. What to do with forms? Look at some code examples Wait for improvements in implementation and accessibility before using most of them
  • 54. Attributes <input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder =&quot;First Name&quot;> You can add: <input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot; autofocus > You can add: <input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot; autofocus required >
  • 55. The autocomplete attribute Uses &quot;on&quot; or &quot;off&quot; values. &quot;On&quot; is the default. <form action=&quot;runscript.php&quot; autocomplete=&quot;off&quot; > <input id=&quot;fname&quot; name=&quot;fname&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot; autocomplete=&quot;off&quot; >
  • 56. Datalist element Using the list attribute, you can associate options with an input field. <input type=&quot;text&quot; name=&quot;writer&quot; id=&quot;writer&quot; list=&quot;writers&quot;> < datalist id=&quot;writers&quot;> <option value=&quot;Dr. Seuss&quot;> <option value=&quot;Mickey Spillane&quot;> <option value=&quot;Mother Goose&quot;> <option value=&quot;Phillip Roth&quot;> </ datalist >
  • 57. Search input type If the search input type is implemented in the browser, the input field will look like a search field. <input id=&quot;query&quot; name&quot;query&quot; type=&quot;search&quot; >
  • 58. More input types <input type=&quot;email&quot; name=&quot;email&quot; id=&quot;email&quot;> <input type=&quot;url&quot; name=&quot;website&quot; id=&quot;website&quot;> <input type=&quot;tel&quot; name=&quot;phone&quot; id=&quot;phone&quot;>
  • 59. More input types Sliders <input id=&quot;amount&quot; name=&quot;amount&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;5&quot;> Spinners <input id=&quot;total&quot; name=&quot;total&quot; type=&quot;number&quot; min=&quot;5&quot; max=&quot;20&quot;>
  • 60. 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
  • 61. Date input types <input id=&quot;dtstart&quot; name=&quot;dtstart&quot; type=&quot;date&quot; >
  • 63. Current State of HTML5 Forms wufoo.com/html5/
  • 64. 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
  • 65. 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/
  • 66. This presentation The web page: http://vdebolt.com/accessu/ The slides: http://www.slideshare.net/vdebolt

Editor's Notes

  1. Web Hypertext Application Technology Working Group or WHATWG Lead by Ian Hickson
  2. W3C working group also lead by Ian Hickson
  3. HTML5 must go through two complete implementations before becoming a &amp;quot;proposed recommendation.&amp;quot; That&apos;s projected to happen in 2022, But browsers have already started supporting many features HTML5. And browser implementation is what really counts in terms of what web designers can do now. So far, new HTML5 features don&apos;t make the web more accessible. Some features like longdesc have been dropped and the use of alt text has been muddied and confused. Headings are now an accessibility issue.
  4. From the start, the WHATWG worked under several principles The web app APIs are the most experimental part of HTML5. I&apos;m not going to talk about them beyond saying that any web app you make may break at any time because the specs are changing rapidly. Similarly, web forms have a lot of promise but they aren&apos;t implemented well yet.
  5. Problems and all, HTML5 is now in use in many places and it is being pushed by Google, Apple and other big players. Browsers are implementing parts of it.
  6. This is a page to study, there are many examples there for just about every situation.
  7. Charset no http-equiv=&amp;quot;content-type&amp;quot; content=&amp;quot;text/html&amp;quot; Script no type=&amp;quot;text/javascript&amp;quot; link no type=&amp;quot;text/css To start using HTML5 today, all you have to do is change your DOCTYPE. HTML5 supports existing content, which means that it&apos;s backwards compatible.
  8. Part of backwards compatibility Obsolete: frame, frameset, noframes, acronym, font, big, center, strike If you want to support XML, you can write HTML5 with the same rigor that you used to write XHTML and it will work
  9. I think a practice that includes rigorous, well-formed syntax is the best idea, but it&apos;s now a matter of personal preference.
  10. These new definitions of old tags that were presentational give them a semantic underpinning for the first time, which means they are more accessible.
  11. Actually, you don&apos;t really need the head and body tags in HTML5. They are considered to be understood in an HTML5 document and a page without them will actually validate. Personally, I choose to err on the side or rigor in the code, so that&apos;s what I&apos;ll be showing you here. Just be aware that you can get by with less and still be writing valid HTML5.
  12. Of these, audio is fairly useable right now. Video requires fall back content in several different file formats such as ogg or swf. Canvas draws with JavaScript. Canvas currently has accessibility issues, even though every browser except IE8 and below support canvas.
  13. These new elements are the most useful right now, the easiest to make accessible, and the ones we&apos;ll concentrate on in building a page together today. Two other helpful new semantic elements that don&apos;t fall into the sectioning content area are figure and figcaption
  14. These are not implemented well cross browser yet, but some have promise in terms of usability and accessibility. They aren&apos;t ready to use yet.
  15. .This is a good place to start using HTML5. You can try out the new semantic sectioning elements. We&apos;ll build a page using these new elements to see how it works. We&apos;ll look at it in visual browsers, where things often work. That doesn&apos;t mean they would work the same way in assistive devices.
  16. It&apos;s more complicated than this, but you can see how the layout could be built. The area I have marked as an aside could also logically be a section instead. Aside means content that is tangentially related, so you would decide which to use based on your particular content. Right now, most AT devices don&apos;t distinguish between these new semantic elements and the familiar DIV. You can see the specifics for each one at HTML5accessibility.com. This website also has a workarounds page, listing ways to make HTML5 accessible right now. A major way is ARIA roles.
  17. Only the first heading in an hgroup element appears in the document outline using the new HTML5 outlining model. I have a link to a site that will outline your HTML5 documents for you. The fact that h1 elements can be used multiple times on a page is counter intuitive to everything we&apos;ve known so far. It&apos;s a big change. Hgroup has been in and out of the spec. There&apos;s discussion about it right now which should be concluded by May 22, 2011. We&apos;ll act as if it&apos;s in, but it may not end up being in. See http://html5doctor.com/the-hgroup-hokey-cokey
  18. Browsers can&apos;t display this properly yet, so we&apos;ll modify it, but it&apos;s in the current spec like this.
  19. Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. ARIA roles work now in many browsers and screen readers. When they don’t, they are harmless. If you build a page as accessibly as you can and then add ARIA roles into it where possible, you increase the potential accessibility of the page. It isn&apos;t perfect yet, but it does help in some cases.
  20. Adding ARIA roles to the HTML5 semantic structural elements adds needed accessibility.
  21. You can also add IDs for CSS purposes. Banner can only be used once per page. In theory, you should be able to wrap the anchor tag around both the logo image and the h1, but that doesn&apos;t display right in any browsers I tested yet, so I&apos;m showing it to you this way.
  22. Writers like Jeremy Keith and Tantek Celik are suggesting that bulletproof HTML5 for current implementation and styling should use nested divs with a class name that matches the element name. I&apos;m not going to show it to you that way today, but feel free to try it that way or to include examples of it in your individual work.
  23. For example, ARIA landmark roles make navigation on AT much easier. So even when the HTML5 elements are recognized, ARIA still adds value. Window Eyes, according to HTML5accessibility.com has issues with some landmark roles with some HTML5 semantic elements.
  24. People are a little unsure about their footing with articles and sections, it&apos;s one of the parts of HTML5 that seems confusing.
  25. Essentially, this is replacing a lot of what we did with divs.
  26. If you think of a blog post as an article, it could contain a header, some content divided into sections with headings, some nav areas for permalinks or comments, the comments might be asides or sections. Taken all together the article is something that you could use as a single piece.
  27. Furthermore, each article might have sections. The aside might have sections. To get the visual display to style, I wrapped the whole layout in a div with the id=wrapper
  28. The bare bones of the structure.
  29. Add the ARIA role. You can also add ID or class identifiers for CSS and JavaScript hooks.
  30. Eventually this will be a section in the aside. Go ahead and mark it up as a section, but keep it out of the way for now.
  31. Since articles will be used frequently, it&apos;s a good idea to assign them to a class.
  32. Alt text: lots of drama around whether alt text should be dropped completely or retained. It&apos;s been retained, but there is now a 40 page document explaining when to use it. Basically it is still there to do what it&apos;s always done, explain an image for those who can&apos;t see it or say nothing if the image is merely decorative. However, there are cases when the image is explained in the new figcaption and the alt text is not needed. Sometimes the image is explained in a title attribute, and there may not be a need for alt text then. My advice is to evaluate the need for good alt text on a case by case basis.
  33. An article footer could contain all sorts of things, these are just examples.
  34. The h3 in the aside could be in a header element. You would probably want to assign a class to the aside for styling purposes. The current wisdom is that if you only have one heading element, as in this aside, there is no need to wrap it in a &lt;header&gt; element. When you add a secondary heading or other material to the &lt;header&gt;, then the &lt;header&gt; wrapper becomes needed.
  35. Don&apos;t forget the ARIA role.
  36. I hope you&apos;ve gotten the idea from the previous exercise that as aside is not necessarily a sidebar, although it can be. Let&apos;s move on to that next. Depending on how you wanted to lay out the page, you might want to insert the source material for the aside before the maincontent as I did in the example that is styled.
  37. Give it an ID
  38. Include the ARIA role.
  39. You can add additional sections, a nav area, articles, etc. What do you not see in this example that could be included? (heading element)
  40. Let&apos;s build one of those traditional footers.
  41. Since the page footer will be a unique footer on the page, you can give it an ID. The ARIA role &apos;contentinfo&apos; can only be used once on a page and indicates the section of the page where information about the page is contained: legal notices, copyright information, etc. It&apos;s become a trend recently to put all sorts of things in the footer and build out a big footer with lots of peripheral information. That might be more appropriate in an aside that sits above the footer if you are using role=&amp;quot;contentinfo&amp;quot; with the page footer
  42. Insert that script into the document head
  43. The only visual browser that comes close to displaying most of these is Opera. They are the least ready for prime time of everything we&apos;ve looked at today. Even so, they have to most potential to improve accessibility – so we&apos;ll look at building them although we won&apos;t see much in the browser. Most require the addition of ARIA and additional widgets like those listed at http://www.html5accessibility.com/index-aria.html So far noone supports color, so I won&apos;t show it to you.
  44. The Placeholder text appears in the field. When someone clicks in the field, it disappears. The autofocus, new in HTML5, attribute replaces the scripted focus used now. With required, new in HTML5, the browser will check to be sure required fields are filled out.
  45. Browsers will autocomplete by default. You can turn off autocomplete for an entire form using the value &amp;quot;off&amp;quot; in the form element. You can disable autocomplete for individual form elements.
  46. When datalist displays in the browser, you can type in a value that isn&apos;t on the list.
  47. If the browser doesn&apos;t understand this, it simply displays a normal input text field. With a label, it&apos;s perfectly useful right now.
  48. These are especially helpful in mobile devices, where the on screen board is different depending on the type attribute. For example the keyboard for an email address would include the @ sign, the keyboard for a phone number would be a number display, and the keyboard for a url would include the forward slash and a .com button.
  49. Browsers that don&apos;t support the date input type will display a regular text input. You would have to ask users to enter the date manually. Of course there are many existing JavaScript widgets that do this, which might be a better way to go until all the browsers implement the date input type.
  50. Here&apos;s a tutorial about building cross-browser forms that uses scripted support from Webforms2 , Modernizr , jQuery UI Even when you go to all that trouble to use HTML5 forms, that doesn&apos;t necessarily mean they will be more accessible in AT devices.
  51. This web site also has tables for the new input types and other new form elements as well as information about JavaScripts and CSS with HTML5 forms. In the resources section, there is a link to http://www.accessibleculture.org/research/html5-aria-2011/ HTML5, ARIA Roles, and Screen Readers in March 2011 | Research | Accessible Culture