SlideShare ist ein Scribd-Unternehmen logo
1 von 29
HTML 5 & WAI ARIA Steve Faulkner TPG  [email_address] Accessibility 2.0, September 22, 2009
HTML 5 - the Future ,[object Object],[object Object],[object Object],[object Object]
WAI-ARIA NOW ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Future Potential ,[object Object],[object Object],[object Object],[object Object],[object Object]
Future Potential ,[object Object],New Way HTML5
Future NOW ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ARIA NOW ,[object Object],HTML5 + ARIA
[object Object],[object Object],[object Object],[object Object],[object Object],Potential -  HTML5 Form controls
[object Object],[object Object],[object Object],[object Object],Potential -  HTML5 Form controls
Potential -  HTML5 Form controls ,[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],Potential -  HTML5 Form controls
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],ARIA enabled  Form controls
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Potential -  HTML5 Form controls ARIA  - NOW
HTML 5 Audio & Video ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 5 Audio & Video ,[object Object],[object Object],[object Object],If you want users to access content,  don’t  put it inside the video or audio elements
Potential  shit fight ,[object Object],[object Object],[object Object]
HTML5 Canvas element It’s a black hole <canvas> </canvas> On browsers that support canvas –  you can’t  access to the fallback content
HTML5 Canvas element “ When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas.  This content may be placed as content of the canvas element.  The contents of the canvas element, if any, are the element's fallback content.” Source:  http://dev.w3.org/html5/spec/the-canvas-element.html#the-canvas-element BAD  advice  –  don’t do it. Make fallback available outside of the canvas element!
HTML5 Canvas element Canvas based graph depicting amount of emails, issues and bugs  to be processed over time.
HTML5 Canvas element The data is provided in tabular format inside the <canvas> element. BUT  nobody using a canvas supporting browser can access it  unless they ‘view source’
HTML5 Canvas element Maybe we will have better luck viewing it in IE ,  a browser that does not support canvas...
Potential ,[object Object],[object Object],[object Object],[object Object]
ARIA & HTML 5 Potential ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ARIA & HTML 5 ,[object Object],[object Object]
ARIA NOW
ARIA NOW
ARIA NOW
References ,[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]
References ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Weitere ähnliche Inhalte

Andere mochten auch

Text Formatting+(HTML5)
Text Formatting+(HTML5)Text Formatting+(HTML5)
Text Formatting+(HTML5)Ahmed Hassan
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and ImprovedTimothy Fisher
 
Again with the Ajax accessibility
Again with the Ajax accessibilityAgain with the Ajax accessibility
Again with the Ajax accessibilityChristian Heilmann
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIDirk Ginader
 
Joining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UXJoining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UXDavid Sloan
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibilitybgibson
 
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic BookHTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic BookiTawy Community
 
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
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةأحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةAbdullah AlQasim
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricksDirk Ginader
 
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
 
Responsive Design Overview for UB CIT
Responsive Design Overview for UB CITResponsive Design Overview for UB CIT
Responsive Design Overview for UB CITAdrian Roselli
 

Andere mochten auch (20)

Text Formatting+(HTML5)
Text Formatting+(HTML5)Text Formatting+(HTML5)
Text Formatting+(HTML5)
 
طور نفسك
طور نفسكطور نفسك
طور نفسك
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
Again with the Ajax accessibility
Again with the Ajax accessibilityAgain with the Ajax accessibility
Again with the Ajax accessibility
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
 
Joining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UXJoining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UX
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic BookHTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
 
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
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةأحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
 
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)
 
Responsive Design Overview for UB CIT
Responsive Design Overview for UB CITResponsive Design Overview for UB CIT
Responsive Design Overview for UB CIT
 

Ähnlich wie HTML5 & WAI-ARIA - Happy Families

Ähnlich wie HTML5 & WAI-ARIA - Happy Families (20)

HTML 5 Accessibility
HTML 5 AccessibilityHTML 5 Accessibility
HTML 5 Accessibility
 
HTML5
HTML5HTML5
HTML5
 
Html5 accessibility
Html5 accessibilityHtml5 accessibility
Html5 accessibility
 
Introdution to HTML 5
Introdution to HTML 5Introdution to HTML 5
Introdution to HTML 5
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
HTML 5
HTML 5HTML 5
HTML 5
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Introduction of html5
Introduction of html5Introduction of html5
Introduction of html5
 
Html 5.0
Html 5.0Html 5.0
Html 5.0
 
Thadomal IEEE-HTML5-Workshop
Thadomal IEEE-HTML5-WorkshopThadomal IEEE-HTML5-Workshop
Thadomal IEEE-HTML5-Workshop
 
Html5
Html5Html5
Html5
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
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
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
 
Basics of HTML5 for Phonegap
Basics of HTML5 for PhonegapBasics of HTML5 for Phonegap
Basics of HTML5 for Phonegap
 
Html5
Html5 Html5
Html5
 
Html 5
Html 5Html 5
Html 5
 
Silver Light By Nyros Developer
Silver Light By Nyros DeveloperSilver Light By Nyros Developer
Silver Light By Nyros Developer
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 

Kürzlich hochgeladen

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 

Kürzlich hochgeladen (20)

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 

HTML5 & WAI-ARIA - Happy Families

  • 1. HTML 5 & WAI ARIA Steve Faulkner TPG [email_address] Accessibility 2.0, September 22, 2009
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. HTML5 Canvas element It’s a black hole <canvas> </canvas> On browsers that support canvas – you can’t access to the fallback content
  • 18. HTML5 Canvas element “ When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This content may be placed as content of the canvas element. The contents of the canvas element, if any, are the element's fallback content.” Source: http://dev.w3.org/html5/spec/the-canvas-element.html#the-canvas-element BAD advice – don’t do it. Make fallback available outside of the canvas element!
  • 19. HTML5 Canvas element Canvas based graph depicting amount of emails, issues and bugs to be processed over time.
  • 20. HTML5 Canvas element The data is provided in tabular format inside the <canvas> element. BUT nobody using a canvas supporting browser can access it unless they ‘view source’
  • 21. HTML5 Canvas element Maybe we will have better luck viewing it in IE , a browser that does not support canvas...
  • 22.
  • 23.
  • 24.
  • 28.
  • 29.