Html5 accessibility

V
Virginia DeBoltwriter at home
••
HTML5 and Accessibility John Slatin AccessU 2011 Virginia DeBolt, presenter www.webteacher.ws
Theory and Practice ,[object Object],[object Object],[object Object]
A Brief History of HTML5 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
A Brief History of HTML5, 2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
A Brief History of HTML5, 3 ,[object Object],[object Object],[object Object]
Goals and Principles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Problematic Areas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Alt text ,[object Object]
Try the Simplified Joy ,[object Object],[object Object],[object Object],[object Object]
Syntax ,[object Object],[object Object],[object Object],[object Object]
Oh, the Joy: Syntax ,[object Object],[object Object],[object Object],[object Object]
Reworked & Not Obsolete ,[object Object],[object Object],[object Object],[object Object]
Restored or acknowledged ,[object Object],[object Object],[object Object]
Try the Joy ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Try the Joy ,[object Object],[object Object]
New Rich Media Elements ,[object Object],[object Object],[object Object]
New Semantic Sectioning Elements are a Giant Step Forward ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
New Form Features ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Sectioning semantically ,[object Object],[object Object],[object Object]
A high level look
header ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
The a element ,[object Object]
Try the Joy ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ARIA Roles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ARIA Roles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Support for ARIA Roles ,[object Object],[object Object],[object Object],[object Object]
Give a Listen with YouTube ,[object Object],[object Object]
Try the Joy ,[object Object],[object Object],[object Object],[object Object],[object Object]
Try the Joy ,[object Object],[object Object],[object Object],[object Object],[object Object]
Semantics and Roles ,[object Object]
Sections and Articles ,[object Object],[object Object]
Section ,[object Object]
Article ,[object Object],[object Object]
Section
Section ,[object Object],[object Object]
Section ,[object Object],[object Object]
Section ,[object Object],[object Object]
Article Recap ,[object Object],[object Object]
Article Joy ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Article Joy, 2 ,[object Object],[object Object],[object Object]
Article Joy, 3 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Add more ,[object Object],[object Object],[object Object],[object Object],[object Object]
Try the joy: aside ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Try the joy: aside ,[object Object],[object Object],[object Object]
The Aside as Sidebar
Try the joy ,[object Object],[object Object],[object Object]
Try the joy ,[object Object],[object Object],[object Object]
Try the joy ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Footer ,[object Object],[object Object]
Try the footer ,[object Object],[object Object],[object Object]
HTML5 shim ,[object Object],[object Object]
HTML5 Forms ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What to do with forms? ,[object Object],[object Object]
Attributes ,[object Object],[object Object],[object Object],[object Object],[object Object]
The autocomplete attribute ,[object Object],[object Object],[object Object]
Datalist element ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Search input type ,[object Object],[object Object]
More input types ,[object Object],[object Object],[object Object]
More input types ,[object Object],[object Object],[object Object],[object Object]
Date and Time Input Types ,[object Object],[object Object],[object Object],[object Object],[object Object]
Date input types ,[object Object]
Cross-browser forms ,[object Object]
Current State of HTML5 Forms ,[object Object]
Links and Resources ,[object Object],[object Object],[object Object],[object Object],[object Object]
More links and resources ,[object Object],[object Object],[object Object]
This presentation ,[object Object],[object Object]
1 of 66

Html5 accessibility

••
Download to read offline
TechnologyDesign

A presentation for John Slatin AccessU in May 2011 in Austin, TX.

V
Virginia DeBoltwriter at home

Recommended

You and Your Stylesheet by
You and Your StylesheetYou and Your Stylesheet
You and Your StylesheetVirginia DeBolt
2.3K views•16 slides
HTML Fundamentals by
HTML FundamentalsHTML Fundamentals
HTML FundamentalsDoncho Minkov
4.5K views•76 slides
Html5: What is it? by
Html5: What is it? Html5: What is it?
Html5: What is it? joeydehnert
905 views•21 slides
Html tags by
Html tagsHtml tags
Html tagsGaurav Jaiswal
1.3K views•50 slides
Class 1 handout (2) html exercises by
Class 1 handout (2) html exercisesClass 1 handout (2) html exercises
Class 1 handout (2) html exercisesErin M. Kidwell
3.9K views•17 slides
Html5 structure tags by
Html5 structure tagsHtml5 structure tags
Html5 structure tagsSEO SKills
272 views•10 slides

More Related Content

What's hot

WordPress Development Confoo 2010 by
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010Brendan Sera-Shriar
2.8K views•53 slides
1.3 creating links by
1.3 creating links1.3 creating links
1.3 creating linksBulldogs83
287 views•6 slides
What's New on the Facebook Platform, May 2011 by
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 2011Iskandar Najmuddin
8K views•13 slides
Lecture 1 - Comm Lab: Web @ ITP by
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPyucefmerhi
876 views•37 slides
Building A Website by
Building A WebsiteBuilding A Website
Building A Websitemarabeas
2.1K views•36 slides
Introducing YUI by
Introducing YUIIntroducing YUI
Introducing YUIChristian Heilmann
17.2K views•142 slides

What's hot(16)

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

Viewers also liked

Twitter For Writers by
Twitter For WritersTwitter For Writers
Twitter For WritersVirginia DeBolt
2.5K views•27 slides
Southwest Conference on Disability 2011 by
Southwest Conference on Disability 2011Southwest Conference on Disability 2011
Southwest Conference on Disability 2011Virginia DeBolt
1.7K views•13 slides
Designing Teams for Emerging Challenges by
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging ChallengesAaron Irizarry
1.1M views•27 slides
Visual Design with Data by
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
2.9M views•76 slides
3 Things Every Sales Team Needs to Be Thinking About in 2017 by
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 2017Drift
492.7K views•50 slides
How to Become a Thought Leader in Your Niche by
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 NicheLeslie Samuel
1.6M views•13 slides

Viewers also liked(6)

Twitter For Writers by Virginia DeBolt
Twitter For WritersTwitter For Writers
Twitter For Writers
Virginia DeBolt•2.5K views
Southwest Conference on Disability 2011 by Virginia DeBolt
Southwest Conference on Disability 2011Southwest Conference on Disability 2011
Southwest Conference on Disability 2011
Virginia DeBolt•1.7K views
Designing Teams for Emerging Challenges by Aaron Irizarry
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
Aaron Irizarry•1.1M views
Visual Design with Data by Seth Familian
Visual Design with DataVisual Design with Data
Visual Design with Data
Seth Familian•2.9M views
3 Things Every Sales Team Needs to Be Thinking About in 2017 by Drift
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•492.7K views
How to Become a Thought Leader in Your Niche by Leslie Samuel
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•1.6M views

Similar to Html5 accessibility

HTML5 - One spec to rule them all by
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them allStu King
614 views•46 slides
HTML 5 by
HTML 5HTML 5
HTML 5Renu Karthick.S
758 views•15 slides
HTML5 by
HTML5HTML5
HTML5tanamania
276 views•54 slides
HTML5 - techMaine Presentation 5/18/09 by
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09pemaquid
471 views•29 slides
HTML5 - What h#@$ is it? by
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?Carlos Ramon
595 views•26 slides
Html 5.0 by
Html 5.0Html 5.0
Html 5.0Kristof Degrave
3.7K views•92 slides

Similar to Html5 accessibility(20)

HTML5 - One spec to rule them all by Stu King
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them all
Stu King•614 views
HTML 5 by Renu Karthick.S
HTML 5HTML 5
HTML 5
Renu Karthick.S•758 views
HTML5 by tanamania
HTML5HTML5
HTML5
tanamania•276 views
HTML5 - techMaine Presentation 5/18/09 by pemaquid
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
pemaquid•471 views
HTML5 - What h#@$ is it? by Carlos Ramon
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
Carlos Ramon•595 views
Html 5.0 by Kristof Degrave
Html 5.0Html 5.0
Html 5.0
Kristof Degrave•3.7K views
ARTDM 171 Week 4: Tags by Gilbert Guerrero
ARTDM 171 Week 4: TagsARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
Gilbert Guerrero•314 views
Html5 Overview by Owen Williams
Html5 OverviewHtml5 Overview
Html5 Overview
Owen Williams•769 views
Html5 by Peeyush Chandel
Html5 Html5
Html5
Peeyush Chandel•1.4K views
Wordpress & HTML5 by Rob Larsen by George Mamadashvili
Wordpress & HTML5 by Rob LarsenWordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob Larsen
George Mamadashvili•5.9K views
Basic HTML by coachhahn
Basic HTMLBasic HTML
Basic HTML
coachhahn•2K views
Html5 by dotNETUserGroupDnipro
Html5Html5
Html5
dotNETUserGroupDnipro•734 views
HTML5 by Doncho Minkov
HTML5HTML5
HTML5
Doncho Minkov•999 views
Using HTML5 and CSS3 today by thebeebs
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 today
thebeebs•1.7K views
How To Create Personal Web Pages On My Web by sritikumar
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•948 views
Html 5 by Ajay Ghosh
Html 5Html 5
Html 5
Ajay Ghosh•693 views
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM by Alfresco Software
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•3.3K views
HTML5: The Next Internet Goldrush by Peter Lubbers
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet Goldrush
Peter Lubbers•11K views
Is it time to start using HTML 5 by Ravi Raj
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•3.3K views
1.2 elements and attributes copy (3) by Bulldogs83
1.2 elements and attributes copy (3)1.2 elements and attributes copy (3)
1.2 elements and attributes copy (3)
Bulldogs83•270 views

Recently uploaded

Tunable Laser (1).pptx by
Tunable Laser (1).pptxTunable Laser (1).pptx
Tunable Laser (1).pptxHajira Mahmood
23 views•37 slides
Special_edition_innovator_2023.pdf by
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdfWillDavies22
16 views•6 slides
Uni Systems for Power Platform.pptx by
Uni Systems for Power Platform.pptxUni Systems for Power Platform.pptx
Uni Systems for Power Platform.pptxUni Systems S.M.S.A.
50 views•21 slides
The Research Portal of Catalonia: Growing more (information) & more (services) by
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)CSUC - Consorci de Serveis Universitaris de Catalunya
73 views•25 slides
handbook for web 3 adoption.pdf by
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdfLiveplex
19 views•16 slides
Attacking IoT Devices from a Web Perspective - Linux Day by
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day Simone Onofri
15 views•68 slides

Recently uploaded(20)

Tunable Laser (1).pptx by Hajira Mahmood
Tunable Laser (1).pptxTunable Laser (1).pptx
Tunable Laser (1).pptx
Hajira Mahmood•23 views
Special_edition_innovator_2023.pdf by WillDavies22
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdf
WillDavies22•16 views
Uni Systems for Power Platform.pptx by Uni Systems S.M.S.A.
Uni Systems for Power Platform.pptxUni Systems for Power Platform.pptx
Uni Systems for Power Platform.pptx
Uni Systems S.M.S.A.•50 views
The Research Portal of Catalonia: Growing more (information) & more (services) by CSUC - Consorci de Serveis Universitaris de Catalunya
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)
CSUC - Consorci de Serveis Universitaris de Catalunya•73 views
handbook for web 3 adoption.pdf by Liveplex
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdf
Liveplex•19 views
Attacking IoT Devices from a Web Perspective - Linux Day by Simone Onofri
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day
Simone Onofri•15 views
.conf Go 2023 - Data analysis as a routine by Splunk
.conf Go 2023 - Data analysis as a routine.conf Go 2023 - Data analysis as a routine
.conf Go 2023 - Data analysis as a routine
Splunk•93 views
ChatGPT and AI for Web Developers by Maximiliano Firtman
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
Maximiliano Firtman•181 views
The details of description: Techniques, tips, and tangents on alternative tex... by BookNet Canada
The details of description: Techniques, tips, and tangents on alternative tex...The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...
BookNet Canada•121 views
The Importance of Cybersecurity for Digital Transformation by NUS-ISS
The Importance of Cybersecurity for Digital TransformationThe Importance of Cybersecurity for Digital Transformation
The Importance of Cybersecurity for Digital Transformation
NUS-ISS•27 views
Top 10 Strategic Technologies in 2024: AI and Automation by AutomationEdge Technologies
Top 10 Strategic Technologies in 2024: AI and AutomationTop 10 Strategic Technologies in 2024: AI and Automation
Top 10 Strategic Technologies in 2024: AI and Automation
AutomationEdge Technologies•14 views
Report 2030 Digital Decade by Massimo Talia
Report 2030 Digital DecadeReport 2030 Digital Decade
Report 2030 Digital Decade
Massimo Talia•14 views
Transcript: The Details of Description Techniques tips and tangents on altern... by BookNet Canada
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...
BookNet Canada•130 views
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu... by NUS-ISS
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...
NUS-ISS•37 views
Java Platform Approach 1.0 - Picnic Meetup by Rick Ossendrijver
Java Platform Approach 1.0 - Picnic MeetupJava Platform Approach 1.0 - Picnic Meetup
Java Platform Approach 1.0 - Picnic Meetup
Rick Ossendrijver•25 views
Digital Product-Centric Enterprise and Enterprise Architecture - Tan Eng Tsze by NUS-ISS
Digital Product-Centric Enterprise and Enterprise Architecture - Tan Eng TszeDigital Product-Centric Enterprise and Enterprise Architecture - Tan Eng Tsze
Digital Product-Centric Enterprise and Enterprise Architecture - Tan Eng Tsze
NUS-ISS•19 views
Five Things You SHOULD Know About Postman by Postman
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About Postman
Postman•27 views
Web Dev - 1 PPT.pdf by gdsczhcet
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
gdsczhcet•55 views
Melek BEN MAHMOUD.pdf by MelekBenMahmoud
Melek BEN MAHMOUD.pdfMelek BEN MAHMOUD.pdf
Melek BEN MAHMOUD.pdf
MelekBenMahmoud•14 views
20231123_Camunda Meetup Vienna.pdf by Phactum Softwareentwicklung GmbH
20231123_Camunda Meetup Vienna.pdf20231123_Camunda Meetup Vienna.pdf
20231123_Camunda Meetup Vienna.pdf
Phactum Softwareentwicklung GmbH•28 views

Html5 accessibility

  • 1. HTML5 and Accessibility John Slatin AccessU 2011 Virginia DeBolt, presenter www.webteacher.ws
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20. A high level look
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45. The Aside as Sidebar
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.

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 "proposed recommendation." That'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'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'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'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="content-type" content="text/html" Script no type="text/javascript" link no type="text/css To start using HTML5 today, all you have to do is change your DOCTYPE. HTML5 supports existing content, which means that it'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'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'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's what I'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'll concentrate on in building a page together today. Two other helpful new semantic elements that don'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'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'll build a page using these new elements to see how it works. We'll look at it in visual browsers, where things often work. That doesn't mean they would work the same way in assistive devices.
  16. It'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'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've known so far. It's a big change. Hgroup has been in and out of the spec. There's discussion about it right now which should be concluded by May 22, 2011. We'll act as if it's in, but it may not end up being in. See http://html5doctor.com/the-hgroup-hokey-cokey
  18. Browsers can't display this properly yet, so we'll modify it, but it'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'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't display right in any browsers I tested yet, so I'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'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'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'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'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's always done, explain an image for those who can'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 <header> element. When you add a secondary heading or other material to the <header>, then the <header> wrapper becomes needed.
  35. Don't forget the ARIA role.
  36. I hope you've gotten the idea from the previous exercise that as aside is not necessarily a sidebar, although it can be. Let'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'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 'contentinfo' 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'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="contentinfo" 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've looked at today. Even so, they have to most potential to improve accessibility – so we'll look at building them although we won'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'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 "off" 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't on the list.
  47. If the browser doesn't understand this, it simply displays a normal input text field. With a label, it'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'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'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'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