SlideShare une entreprise Scribd logo
1  sur  32
Télécharger pour lire hors ligne
HTML5 Accessibility
    Ted Drake
    Yahoo! Accessibility Lab
Big Questions

     1.What is HTML5?
     2.Does it help or hurt?



Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
In the good ol’ days...


Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
We had text
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Then came design
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Salvation Arrived
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
“Design” returned
Some rights reserved by DanCentury on Flickr
Take a deep breath
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
What is HTML5?


Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
a reality check


Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
HTML5 is not...

• Finished
• Difficult
• Fully Supported

 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
HTML5 includes
• More powerful forms                             • JavaScript tools
• CSS3                                            • Device Integration
• Canvas and SVG                                  • Semantic structure
• Audio and Video                                 • WAI-ARIA


 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Good Stuff

• Native Interactions
• Enhanced Form Elements
• Better Semantic Structure
• ARIA

 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Native Support
• Browsers replace plugins and JavaScript
• Consistency
• Extensible



 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Super Forms




Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Super Forms




Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
No More ‘Divitis’


Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Semantic Tags

• New containers: article, section, aside,
   footer, header, nav
• New & improved tags: dl, time, hgroup,
   mark
• Shift from document to modular design:
   multiple h1, header, footer tags

 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
New Attributes
• Custom data attribute: data-ticker=”yhoo”
• Timestamps: datetime=”2011-03-16”
• Drag & Drop:
   • draggable=”true”
   • dropEffect=”move”
   • dropEffect=”copy”
 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
ARIA

• Web application functionality
• Landmark structure: navigation, banner,
   search, main
• Meta information: aria-required, aria-label
• Live regions for dynamic content
 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
ARIA Landmarks
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
ARIA Quick Fixes

• <a href=”#” role=”button”>
• <input aria-label=”enter search term” ...>
• <img aria-describedby=”stockinfo” ...>
• <table role=”presentation>

 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
New Concerns


Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Canvas
• Blank canvas for JavaScript to draw upon
• Problems:
   • Text within canvas is not accessible
   • Images within canvas have no alt text
   • User interactions lack roles, states, and
           properties

 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Closed Captioning

• Flash wasn’t great, but at least it supported
   closed captioned videos
• Multiple caption formats
• See John Foliot for details

 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
longdesc

• HTML5 spec deprecates the longdesc
   attribute
• This is not final
• HTML5 is backwards compatible. It should
   still work.


 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
ARIA Longdesc
           Replace longdesc with aria-describedby

<img src="foo.jpg" ...
   aria-describedby="dHustler">
<a href="hustler.html" id="dHustler">
   Image Description
</a>




    Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Headers

• Module hierarchy, not headers.
• Each section and article can have an h1
• Pages may have no h2,h3,h4...


 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Autoplay & Autofocus

• Built in support for auto behaviors
   • Video autoplay
   • Form input autofucus
• Native support avoids adhoc JavaScript

 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
What you can do
• Participate in HTML5 specifications
• Begin using HTML5 Form elements
• Combine ARIA with HTML5 tags
• Start using HTML5 and test, test, test

 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
More Talks
•   Wednesday, March 16, 10:40 AM
    WEB-2033 
 Accessible HTML5 Media Players, Captions, Audio Description, and Search

•   Wednesday, March 16, 10:40 AM
    Building Fully Accessible Social Software and Rich Web Applications with WAI-ARIA

•   Wednesday, March 16, 1:50 PM
    Video Accessibility in User Agents - Panel

•   Thursday, March 17, 10:40 AM
    HTML 5 Accessibility - Panel

•   Thursday, March 17, 1:50 PM
    WEB-3065 
 HTML5 – What’s new for Accessibility 

•   Friday, March 18, 1:50 PM
    WEB-2063 
 Web Media Accessibility with HTML5

•   Friday, March 18, 1:50 PM
     HTML 5 and Flash – An Accessibility Comparison



    Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Ted Drake
Yahoo! Accessibility Lab
      Accessibility.Yahoo.Com

Contenu connexe

En vedette

Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
دورة CSS3 باللغة العربية
دورة CSS3 باللغة العربيةدورة CSS3 باللغة العربية
دورة CSS3 باللغة العربيةanees abu-hmaid
 
باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة anees abu-hmaid
 
كتاب تعلم Html5 css3
كتاب تعلم Html5 css3كتاب تعلم Html5 css3
كتاب تعلم Html5 css3titifcom
 
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةأحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةAbdullah AlQasim
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 

En vedette (8)

Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
1 فون جاب
1  فون جاب1  فون جاب
1 فون جاب
 
دورة CSS3 باللغة العربية
دورة CSS3 باللغة العربيةدورة CSS3 باللغة العربية
دورة CSS3 باللغة العربية
 
باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة
 
كتاب تعلم Html5 css3
كتاب تعلم Html5 css3كتاب تعلم Html5 css3
كتاب تعلم Html5 css3
 
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةأحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Www.kutub.info 16076
Www.kutub.info 16076Www.kutub.info 16076
Www.kutub.info 16076
 

Plus de Ted Drake

Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Transforming Accessibility one lunch at a tiime - CSUN 2023
Transforming Accessibility one lunch at a tiime - CSUN 2023Transforming Accessibility one lunch at a tiime - CSUN 2023
Transforming Accessibility one lunch at a tiime - CSUN 2023Ted Drake
 
Inclusive Design for cognitive disabilities, neurodiversity, and chronic illness
Inclusive Design for cognitive disabilities, neurodiversity, and chronic illnessInclusive Design for cognitive disabilities, neurodiversity, and chronic illness
Inclusive Design for cognitive disabilities, neurodiversity, and chronic illnessTed Drake
 
Inclusive design for Long Covid
 Inclusive design for Long Covid  Inclusive design for Long Covid
Inclusive design for Long Covid Ted Drake
 
Covid 19, brain fog, and inclusive design
Covid 19, brain fog, and inclusive designCovid 19, brain fog, and inclusive design
Covid 19, brain fog, and inclusive designTed Drake
 
Customer obsession and accessibility
Customer obsession and accessibilityCustomer obsession and accessibility
Customer obsession and accessibilityTed Drake
 
The Saga of Accessible Colors
The Saga of Accessible ColorsThe Saga of Accessible Colors
The Saga of Accessible ColorsTed Drake
 
Artificial Intelligence and Accessibility - GAAD 2020 - Hello A11y
Artificial Intelligence and Accessibility - GAAD 2020 - Hello A11yArtificial Intelligence and Accessibility - GAAD 2020 - Hello A11y
Artificial Intelligence and Accessibility - GAAD 2020 - Hello A11yTed Drake
 
Expand your outreach with an accessibility champions program
Expand your outreach with an accessibility champions program Expand your outreach with an accessibility champions program
Expand your outreach with an accessibility champions program Ted Drake
 
Intuit's Accessibility Champion Program - Coaching and Celebrating
Intuit's Accessibility Champion Program - Coaching and Celebrating Intuit's Accessibility Champion Program - Coaching and Celebrating
Intuit's Accessibility Champion Program - Coaching and Celebrating Ted Drake
 
Accessibility First Innovation
Accessibility First InnovationAccessibility First Innovation
Accessibility First InnovationTed Drake
 
Inclusive customer interviews make it your friday task
Inclusive customer interviews  make it your friday taskInclusive customer interviews  make it your friday task
Inclusive customer interviews make it your friday taskTed Drake
 
Coaching and Celebrating Accessibility Champions
Coaching and Celebrating Accessibility ChampionsCoaching and Celebrating Accessibility Champions
Coaching and Celebrating Accessibility ChampionsTed Drake
 
Accessibility statements and resource publishing best practices csun 2019
Accessibility statements and resource publishing best practices   csun 2019Accessibility statements and resource publishing best practices   csun 2019
Accessibility statements and resource publishing best practices csun 2019Ted Drake
 
Raising Accessibility Awareness at Intuit
Raising Accessibility Awareness at IntuitRaising Accessibility Awareness at Intuit
Raising Accessibility Awareness at IntuitTed Drake
 
Trickle Down Accessibility
Trickle Down AccessibilityTrickle Down Accessibility
Trickle Down AccessibilityTed Drake
 
Trickle-Down Accessibility - CSUN 2018
Trickle-Down Accessibility - CSUN 2018Trickle-Down Accessibility - CSUN 2018
Trickle-Down Accessibility - CSUN 2018Ted Drake
 
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Ted Drake
 
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleTed Drake
 
React Native Accessibility - San Diego React and React Native Meetup
React Native Accessibility - San Diego React and React Native MeetupReact Native Accessibility - San Diego React and React Native Meetup
React Native Accessibility - San Diego React and React Native MeetupTed Drake
 

Plus de Ted Drake (20)

Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Transforming Accessibility one lunch at a tiime - CSUN 2023
Transforming Accessibility one lunch at a tiime - CSUN 2023Transforming Accessibility one lunch at a tiime - CSUN 2023
Transforming Accessibility one lunch at a tiime - CSUN 2023
 
Inclusive Design for cognitive disabilities, neurodiversity, and chronic illness
Inclusive Design for cognitive disabilities, neurodiversity, and chronic illnessInclusive Design for cognitive disabilities, neurodiversity, and chronic illness
Inclusive Design for cognitive disabilities, neurodiversity, and chronic illness
 
Inclusive design for Long Covid
 Inclusive design for Long Covid  Inclusive design for Long Covid
Inclusive design for Long Covid
 
Covid 19, brain fog, and inclusive design
Covid 19, brain fog, and inclusive designCovid 19, brain fog, and inclusive design
Covid 19, brain fog, and inclusive design
 
Customer obsession and accessibility
Customer obsession and accessibilityCustomer obsession and accessibility
Customer obsession and accessibility
 
The Saga of Accessible Colors
The Saga of Accessible ColorsThe Saga of Accessible Colors
The Saga of Accessible Colors
 
Artificial Intelligence and Accessibility - GAAD 2020 - Hello A11y
Artificial Intelligence and Accessibility - GAAD 2020 - Hello A11yArtificial Intelligence and Accessibility - GAAD 2020 - Hello A11y
Artificial Intelligence and Accessibility - GAAD 2020 - Hello A11y
 
Expand your outreach with an accessibility champions program
Expand your outreach with an accessibility champions program Expand your outreach with an accessibility champions program
Expand your outreach with an accessibility champions program
 
Intuit's Accessibility Champion Program - Coaching and Celebrating
Intuit's Accessibility Champion Program - Coaching and Celebrating Intuit's Accessibility Champion Program - Coaching and Celebrating
Intuit's Accessibility Champion Program - Coaching and Celebrating
 
Accessibility First Innovation
Accessibility First InnovationAccessibility First Innovation
Accessibility First Innovation
 
Inclusive customer interviews make it your friday task
Inclusive customer interviews  make it your friday taskInclusive customer interviews  make it your friday task
Inclusive customer interviews make it your friday task
 
Coaching and Celebrating Accessibility Champions
Coaching and Celebrating Accessibility ChampionsCoaching and Celebrating Accessibility Champions
Coaching and Celebrating Accessibility Champions
 
Accessibility statements and resource publishing best practices csun 2019
Accessibility statements and resource publishing best practices   csun 2019Accessibility statements and resource publishing best practices   csun 2019
Accessibility statements and resource publishing best practices csun 2019
 
Raising Accessibility Awareness at Intuit
Raising Accessibility Awareness at IntuitRaising Accessibility Awareness at Intuit
Raising Accessibility Awareness at Intuit
 
Trickle Down Accessibility
Trickle Down AccessibilityTrickle Down Accessibility
Trickle Down Accessibility
 
Trickle-Down Accessibility - CSUN 2018
Trickle-Down Accessibility - CSUN 2018Trickle-Down Accessibility - CSUN 2018
Trickle-Down Accessibility - CSUN 2018
 
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
 
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessible
 
React Native Accessibility - San Diego React and React Native Meetup
React Native Accessibility - San Diego React and React Native MeetupReact Native Accessibility - San Diego React and React Native Meetup
React Native Accessibility - San Diego React and React Native Meetup
 

Dernier

PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 

Dernier (20)

PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 

HTML5 Accessibility | CSUN 2011

  • 1. HTML5 Accessibility Ted Drake Yahoo! Accessibility Lab
  • 2. Big Questions 1.What is HTML5? 2.Does it help or hurt? Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 3. In the good ol’ days... Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 4. We had text Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 5. Then came design Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 6. Salvation Arrived Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 7. “Design” returned Some rights reserved by DanCentury on Flickr
  • 8. Take a deep breath Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 9. What is HTML5? Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 10. a reality check Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 11. HTML5 is not... • Finished • Difficult • Fully Supported Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 12. HTML5 includes • More powerful forms • JavaScript tools • CSS3 • Device Integration • Canvas and SVG • Semantic structure • Audio and Video • WAI-ARIA Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 13. Good Stuff • Native Interactions • Enhanced Form Elements • Better Semantic Structure • ARIA Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 14. Native Support • Browsers replace plugins and JavaScript • Consistency • Extensible Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 15. Super Forms Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 16. Super Forms Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 17. No More ‘Divitis’ Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 18. Semantic Tags • New containers: article, section, aside, footer, header, nav • New & improved tags: dl, time, hgroup, mark • Shift from document to modular design: multiple h1, header, footer tags Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 19. New Attributes • Custom data attribute: data-ticker=”yhoo” • Timestamps: datetime=”2011-03-16” • Drag & Drop: • draggable=”true” • dropEffect=”move” • dropEffect=”copy” Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 20. ARIA • Web application functionality • Landmark structure: navigation, banner, search, main • Meta information: aria-required, aria-label • Live regions for dynamic content Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 21. ARIA Landmarks Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 22. ARIA Quick Fixes • <a href=”#” role=”button”> • <input aria-label=”enter search term” ...> • <img aria-describedby=”stockinfo” ...> • <table role=”presentation> Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 23. New Concerns Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 24. Canvas • Blank canvas for JavaScript to draw upon • Problems: • Text within canvas is not accessible • Images within canvas have no alt text • User interactions lack roles, states, and properties Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 25. Closed Captioning • Flash wasn’t great, but at least it supported closed captioned videos • Multiple caption formats • See John Foliot for details Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 26. longdesc • HTML5 spec deprecates the longdesc attribute • This is not final • HTML5 is backwards compatible. It should still work. Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 27. ARIA Longdesc Replace longdesc with aria-describedby <img src="foo.jpg" ... aria-describedby="dHustler"> <a href="hustler.html" id="dHustler"> Image Description </a> Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 28. Headers • Module hierarchy, not headers. • Each section and article can have an h1 • Pages may have no h2,h3,h4... Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 29. Autoplay & Autofocus • Built in support for auto behaviors • Video autoplay • Form input autofucus • Native support avoids adhoc JavaScript Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 30. What you can do • Participate in HTML5 specifications • Begin using HTML5 Form elements • Combine ARIA with HTML5 tags • Start using HTML5 and test, test, test Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 31. More Talks • Wednesday, March 16, 10:40 AM WEB-2033 Accessible HTML5 Media Players, Captions, Audio Description, and Search • Wednesday, March 16, 10:40 AM Building Fully Accessible Social Software and Rich Web Applications with WAI-ARIA • Wednesday, March 16, 1:50 PM Video Accessibility in User Agents - Panel • Thursday, March 17, 10:40 AM HTML 5 Accessibility - Panel • Thursday, March 17, 1:50 PM WEB-3065 HTML5 – What’s new for Accessibility • Friday, March 18, 1:50 PM WEB-2063 Web Media Accessibility with HTML5 • Friday, March 18, 1:50 PM HTML 5 and Flash – An Accessibility Comparison Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
  • 32. Ted Drake Yahoo! Accessibility Lab Accessibility.Yahoo.Com

Notes de l'éditeur

  1. Logo is the new HTML5 icon with braille: http://www.flickr.com/photos/draket/5449654430/\n
  2. \n
  3. \n
  4. Original internet pages were text based and accessible.\nImages were introduced and pages were still easy to read.\nYahoo! circa 197\n
  5. &amp;#x201C;Geocities 1996&amp;#x201D; a tribute to Geocities web designs on CSS Zen Garden\nanimated gifs, clashing colors, flashing images, and more\n&amp;#x201C;Creating Killer Web Sites&amp;#x201D; released in 1997 by David Siegel introduces the spacer gif, table-based layout, and so much more\n
  6. Jeffrey Zeldman and friends introduce web standards\nReturn to semantic, structural markup.\ndesign and interactions are separated from markup.\n
  7. Web 2.0 introduced application-like web sites. \nAJAX for dynamic content changes, drag and drop interfaces, semantic elements transform into forms\nelements no longer behave naturally.\n
  8. \n
  9. \n
  10. HTML5 is the result of recognizing web sites were moving from documents to web applications.\nInitial spec written by WHATWG\nCombine best of XHTML with HTML\nEnthusiasts began lumping the various elements under the HTML5 moniker\n
  11. The spec is still accepting feedback.\nBrowser implementation is increasing.\nOlder IE browsers need JS shim for CSS support of new elements\nBackwards compatibility actually makes HTML5 easier to use than HTML4 + XHTML\n
  12. XForms became HTML5 forms\nCSS3 has been under development for years, browsers are rapidly adopting it.\nCanvas and SVG are not new, browser support is allowing them to replace flash\nAudio and Video specs are still devloping. \nJavaScript enhanced with web workers, sockets, local storage, browser api\n
  13. browsers handle interactions natively, no need for JS\nimproved form structure\nnew tags\n\n
  14. consistent interactions across the web as browsers replace adhoc js and plugins\nbrowsers provide hooks for extending experience via CSS and JS\n
  15. New input types: email, url, date, number...\n New attributes: placeholder, autofocus, required...\n Combine with ARIA: aria-require...\n Backwards compatible\n\n
  16. the generic div and span tags have been abused. HTML5 introduces new semantic containers to avoid a page filled with nothing but divs.\n
  17. ARIA and new elements can be combined for fallback. Avoid wrapping element in a div with the same role, &lt;div role=&amp;#x201D;navigation&amp;#x201D;&gt;&lt;nav&gt;\nhttp://diveintohtml5.org/semantics.html#new-elements\ntime also uses datetime and optional pubdate attributes for expanding publish date in machine readable timestamp.\n
  18. &lt;script&gt;document.createElement(&quot;header&quot;)&lt;/script&gt;\n\nIAccessible2 is an engineered accessibility interface allowing application developers to leverage their investment in MSAA while also providing an Assistive Technology (AT) access to rich document applications such as the IBM Workplace productivity editors and web browsers such as Firefox. The additional functionality includes support for rich text, tables, spreadsheets, Web 2.0 applications, and other large mainstream applications.\n
  19. the data-foo pattern avoids placing related information in hidden divs, rel/rev/title attributes.\nhttp://html5doctor.com/microdata/ - similar to microformats, uses itemtype, itemprop, itemscope\nadd pubdate to the time tag to show this was a published event &lt;time datetime=&amp;#x201D;&amp;#x201D; pubdate&gt;\nNative drag and drop, integrate with aria http://html5doctor.com/accessibility-native-drag-and-drop/\n
  20. W3C Web Accessibility Initiative: Accessible Rich Internet Applications\nTodd&amp;#x2019;s lecture: Yahoo! Mail: An Accessible Hub for Your Connected Life Wednesday March 16 10:40 - 11:40\n\n
  21. role=&amp;#x201D;banner&amp;#x201D; | role=&amp;#x201D;search&amp;#x201D; | role=&amp;#x201D;main&amp;#x201D; | role=&amp;#x201D;complementary&amp;#x201D;\n\n
  22. Use role=&amp;#x201D;button&amp;#x201D; on links that trigger an action, not take the user to a new page\naria-label for adding a label to an input that has no label.\naria-describedby is similar to longdesc. points to a section of content with id\nrole=&amp;#x201D;presentation&amp;#x201D; on layout table tells the screen reader its not for data.\n
  23. \n
  24. http://www.w3.org/TR/SVG-access/ - SVG accessibility\n
  25. Wednesday, March 16, 1:50 PMVideo Accessibility in User Agents - Panel\n Thursday, March 17, 10:40 AM HTML 5 Accessibility - Panel\nphoto of John Foliot by Dirk Ginader\n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. Web workers: multi threading\nWeb sockets: comet, push data\nLocal storage: cookies on steroids\nOffline support: gmail without internet\nGeolocation: and other access to computer resources\n
  32. \n
  33. \n
  34. \n