SlideShare a Scribd company logo
1 of 28
Download to read offline
a11y goes to 11
   …using HTML5+ and CSS3+




             by Eric Eggert @yatil / @webcontravelers
#a11yto11
2010
#fronteers10
2011
#fronteers11
accessibility
11
accessibility
       b
New exciting web
technologies enable
us to do more
accessible
web sites
by doing less.
HTML4
HTML4
HTML5
We need to
get rid of
the dogmas.
Responsive Web
         Design
+ universally works on every screen size
+ simplifies layout for users who need extremely
low screen resolutions (screen magnifying)

- di cult to implement if your project is complex
Robust
Web fonts
+ readable by screen readers
+ resizable
+ easy to implement

- di cult to read for mentally challenged people
- slight performance penalty
Perceivable
Forms
+ validation before sending means less errors
+ required, invalid and disabled visible to SR
+ input according to the type attribute
+ easy to implement

- own validation may interfere visually
- mind that post codes are not numbers
Understandable
Audio &Video
+ HTML controls increase accessibility
+ adding subtitles is easy
+ users are in control of autoplay1

- multiple formats needed (ogg/webm + mp4)


(1 Not yet implemented, but possible.)
Operable
It’s hard to reach


Perfection
and when you do, it is often
   destroyed by others.
We’ll help!
@ScreenOrigami & @yatil
Screenshot
a11yto11.com
 a11yto11.com
Inexpensive
  10 tips tailored to
    your web site
avoid the pitfalls
thank you!
  Follow us on twitter:
       @a11yto11
@ScreenOrigami & @yatil
   @webcontravelers

More Related Content

More from Eric Eggert

How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15Eric Eggert
 
New developments in Web Accessibility
New developments in Web AccessibilityNew developments in Web Accessibility
New developments in Web AccessibilityEric Eggert
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Eric Eggert
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Eric Eggert
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Eric Eggert
 
Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Eric Eggert
 
How I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesHow I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesEric Eggert
 
How I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesHow I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesEric Eggert
 
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Eric Eggert
 
Fronteers Jam Session: Principles of Accessible Web Design
Fronteers Jam Session: Principles of  Accessible Web DesignFronteers Jam Session: Principles of  Accessible Web Design
Fronteers Jam Session: Principles of Accessible Web DesignEric Eggert
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Eric Eggert
 
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...Eric Eggert
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztEric Eggert
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 
Das Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus PixelnDas Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus PixelnEric Eggert
 
HTML5 Fragen und Antworten
HTML5 Fragen und AntwortenHTML5 Fragen und Antworten
HTML5 Fragen und AntwortenEric Eggert
 
Die 7 1/2 Todsünden des Barrierefreien Webs
Die 7 1/2 Todsünden des Barrierefreien WebsDie 7 1/2 Todsünden des Barrierefreien Webs
Die 7 1/2 Todsünden des Barrierefreien WebsEric Eggert
 
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien WebseiteDer Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien WebseiteEric Eggert
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies WebdesignEric Eggert
 
Webdesigner an die Macht
Webdesigner an die MachtWebdesigner an die Macht
Webdesigner an die MachtEric Eggert
 

More from Eric Eggert (20)

How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15
 
New developments in Web Accessibility
New developments in Web AccessibilityNew developments in Web Accessibility
New developments in Web Accessibility
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
 
Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)
 
How I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesHow I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with Notes
 
How I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesHow I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notes
 
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
 
Fronteers Jam Session: Principles of Accessible Web Design
Fronteers Jam Session: Principles of  Accessible Web DesignFronteers Jam Session: Principles of  Accessible Web Design
Fronteers Jam Session: Principles of Accessible Web Design
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
 
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
Das Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus PixelnDas Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus Pixeln
 
HTML5 Fragen und Antworten
HTML5 Fragen und AntwortenHTML5 Fragen und Antworten
HTML5 Fragen und Antworten
 
Die 7 1/2 Todsünden des Barrierefreien Webs
Die 7 1/2 Todsünden des Barrierefreien WebsDie 7 1/2 Todsünden des Barrierefreien Webs
Die 7 1/2 Todsünden des Barrierefreien Webs
 
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien WebseiteDer Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien Webseite
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Webdesigner an die Macht
Webdesigner an die MachtWebdesigner an die Macht
Webdesigner an die Macht
 

Recently uploaded

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
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
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
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
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
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
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
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
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 

Recently uploaded (20)

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
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?
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
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
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
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...
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
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
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 

Fronteers11 Jam Session: a11y goes to 11