SlideShare a Scribd company logo
1 of 13
Download to read offline
Esther Brunner
Make prominent visual elements
accessible!
@ebr76
ZÜRICH, SWITZERLAND
• You can find what you need
• Content
• Everything makes sense
• Structure
• Guidance
Information architecture
Carousels
1. Highlight key features and content
2. Draw users’ attention to the slides
• Visual prominence
• Motion
Why use a carousel?
“Hey there, I'm new,

I'm important,

I'm sexy!”
The implicit guiding message:
1. Highlight key features and content

We know how to make content and structure accessible:
• Semantic markup
2. Draw users’ attention to the slides

But how can we transport the implicit guiding message for
visually impaired users?
What about accessibility?
• Don’t use autoplay together with aria-live!
• Autoplay and aria-live will disrupt the reading experience
every time a slide changes
• Try to avoid autoplay entirely. If you can’t …
• There must be a mechanism to pause, stop, or hide
(WCAG 2.0, success criterion 2.2.2)
Don’t
• Use words!
• Visually hidden heading
• Follow the recommendations of W3C for accessible
carousels:

https://www.w3.org/WAI/tutorials/carousels/
Do
Thank you!
Esther Brunner
@ebr76
esther.brunner@zeix.com

More Related Content

Similar to Make prominent visual elements accessible!

Theming moodle for integration and usability
Theming moodle for integration and usabilityTheming moodle for integration and usability
Theming moodle for integration and usability
Alex Walker
 

Similar to Make prominent visual elements accessible! (20)

10 tips for making a presentation
10 tips for making a presentation10 tips for making a presentation
10 tips for making a presentation
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Design
 
Marketing Automation Summit 2015
Marketing Automation Summit 2015Marketing Automation Summit 2015
Marketing Automation Summit 2015
 
Selfish Accessibility: UXSG 2014
Selfish Accessibility: UXSG 2014Selfish Accessibility: UXSG 2014
Selfish Accessibility: UXSG 2014
 
The Intersection of Accessibility and Inclusive Design
The Intersection of Accessibility and Inclusive DesignThe Intersection of Accessibility and Inclusive Design
The Intersection of Accessibility and Inclusive Design
 
IS100 Week 10 - Part 1
IS100 Week 10 - Part 1IS100 Week 10 - Part 1
IS100 Week 10 - Part 1
 
OOCSS
OOCSSOOCSS
OOCSS
 
Getting Started With AureliaJs
Getting Started With AureliaJsGetting Started With AureliaJs
Getting Started With AureliaJs
 
People First Accessibility
People First AccessibilityPeople First Accessibility
People First Accessibility
 
Implementing and Evaluating Web Accessibility
Implementing and Evaluating Web AccessibilityImplementing and Evaluating Web Accessibility
Implementing and Evaluating Web Accessibility
 
Can everyone use your app?
Can everyone use your app?Can everyone use your app?
Can everyone use your app?
 
Creating a Universal Design syllabus
Creating a Universal Design syllabusCreating a Universal Design syllabus
Creating a Universal Design syllabus
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POUR
 
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
 
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility
 
Theming moodle for integration and usability
Theming moodle for integration and usabilityTheming moodle for integration and usability
Theming moodle for integration and usability
 
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
 
Senses Working Overtime: Improving Software Quality Through Accessibility and...
Senses Working Overtime: Improving Software Quality Through Accessibility and...Senses Working Overtime: Improving Software Quality Through Accessibility and...
Senses Working Overtime: Improving Software Quality Through Accessibility and...
 
Storytelling
StorytellingStorytelling
Storytelling
 
Gavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility CentreGavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility Centre
 

More from Zeix AG

Benutzerzentriertes Gesundheitswesen: Hype oder Umbruch? - Zeix ehealthevent2013
Benutzerzentriertes Gesundheitswesen: Hype oder Umbruch? - Zeix ehealthevent2013Benutzerzentriertes Gesundheitswesen: Hype oder Umbruch? - Zeix ehealthevent2013
Benutzerzentriertes Gesundheitswesen: Hype oder Umbruch? - Zeix ehealthevent2013
Zeix AG
 
Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21
Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21
Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21
Zeix AG
 

More from Zeix AG (18)

You have earned 100 Points and a bonus life - How apps and wearables change t...
You have earned 100 Points and a bonus life - How apps and wearables change t...You have earned 100 Points and a bonus life - How apps and wearables change t...
You have earned 100 Points and a bonus life - How apps and wearables change t...
 
Zeix e business-kongress-2011_b-3_was-user-lieben_v1.0
Zeix e business-kongress-2011_b-3_was-user-lieben_v1.0Zeix e business-kongress-2011_b-3_was-user-lieben_v1.0
Zeix e business-kongress-2011_b-3_was-user-lieben_v1.0
 
Zeix medien2.0 retweet_deslike_one-v0.1.1
Zeix medien2.0 retweet_deslike_one-v0.1.1Zeix medien2.0 retweet_deslike_one-v0.1.1
Zeix medien2.0 retweet_deslike_one-v0.1.1
 
Zeix pflichtenheftfalle v1-0
Zeix pflichtenheftfalle v1-0Zeix pflichtenheftfalle v1-0
Zeix pflichtenheftfalle v1-0
 
Zeix i2 summit2014_redesigneda_intranet_v1.0
Zeix i2 summit2014_redesigneda_intranet_v1.0Zeix i2 summit2014_redesigneda_intranet_v1.0
Zeix i2 summit2014_redesigneda_intranet_v1.0
 
Zeix swiss ict-fachgruppe-ux_erfolgsmessung-ux_2014-11-25
Zeix swiss ict-fachgruppe-ux_erfolgsmessung-ux_2014-11-25Zeix swiss ict-fachgruppe-ux_erfolgsmessung-ux_2014-11-25
Zeix swiss ict-fachgruppe-ux_erfolgsmessung-ux_2014-11-25
 
Healthy by Design
Healthy by DesignHealthy by Design
Healthy by Design
 
Bridging the gap: Wie neue Services helfen können, die Kommunikation zwischen...
Bridging the gap: Wie neue Services helfen können, die Kommunikation zwischen...Bridging the gap: Wie neue Services helfen können, die Kommunikation zwischen...
Bridging the gap: Wie neue Services helfen können, die Kommunikation zwischen...
 
The Future of Healthcare – Vom Schachcomputer und Routenplaner zur personal...
The Future of Healthcare – Vom Schachcomputer und Routenplaner zur personal...The Future of Healthcare – Vom Schachcomputer und Routenplaner zur personal...
The Future of Healthcare – Vom Schachcomputer und Routenplaner zur personal...
 
Contextual Inquiry - Weshalb beobachten besser ist als fragen
Contextual Inquiry - Weshalb beobachten besser ist als fragenContextual Inquiry - Weshalb beobachten besser ist als fragen
Contextual Inquiry - Weshalb beobachten besser ist als fragen
 
Benutzerzentriertes Gesundheitswesen: Hype oder Umbruch? - Zeix ehealthevent2013
Benutzerzentriertes Gesundheitswesen: Hype oder Umbruch? - Zeix ehealthevent2013Benutzerzentriertes Gesundheitswesen: Hype oder Umbruch? - Zeix ehealthevent2013
Benutzerzentriertes Gesundheitswesen: Hype oder Umbruch? - Zeix ehealthevent2013
 
Zeix e healthsummit_2013_v1-1_slideshare
Zeix e healthsummit_2013_v1-1_slideshareZeix e healthsummit_2013_v1-1_slideshare
Zeix e healthsummit_2013_v1-1_slideshare
 
Orientierung im Kartendschungel: Ein Überblick über Karten und ihre User
Orientierung im Kartendschungel: Ein Überblick über Karten und ihre UserOrientierung im Kartendschungel: Ein Überblick über Karten und ihre User
Orientierung im Kartendschungel: Ein Überblick über Karten und ihre User
 
Wieviel Komplexität verträgt der User? Content & Verpackung in der Geovisuali...
Wieviel Komplexität verträgt der User? Content & Verpackung in der Geovisuali...Wieviel Komplexität verträgt der User? Content & Verpackung in der Geovisuali...
Wieviel Komplexität verträgt der User? Content & Verpackung in der Geovisuali...
 
Kartografie 2.0: Trends der Kartennutzung und -entwicklung
Kartografie 2.0: Trends der Kartennutzung und -entwicklungKartografie 2.0: Trends der Kartennutzung und -entwicklung
Kartografie 2.0: Trends der Kartennutzung und -entwicklung
 
Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21
Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21
Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21
 
"Case Study: Mobile Couponing" or "What Users don't understand about their iP...
"Case Study: Mobile Couponing" or "What Users don't understand about their iP..."Case Study: Mobile Couponing" or "What Users don't understand about their iP...
"Case Study: Mobile Couponing" or "What Users don't understand about their iP...
 
Was User lieben, was sie hassen
Was User lieben, was sie hassenWas User lieben, was sie hassen
Was User lieben, was sie hassen
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
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
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.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
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
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 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
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
 
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
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
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...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

Make prominent visual elements accessible!

  • 1. Esther Brunner Make prominent visual elements accessible! @ebr76 ZÜRICH, SWITZERLAND
  • 2. • You can find what you need • Content • Everything makes sense • Structure • Guidance Information architecture
  • 4.
  • 5.
  • 6.
  • 7.
  • 8. 1. Highlight key features and content 2. Draw users’ attention to the slides • Visual prominence • Motion Why use a carousel?
  • 9. “Hey there, I'm new,
 I'm important,
 I'm sexy!” The implicit guiding message:
  • 10. 1. Highlight key features and content
 We know how to make content and structure accessible: • Semantic markup 2. Draw users’ attention to the slides
 But how can we transport the implicit guiding message for visually impaired users? What about accessibility?
  • 11. • Don’t use autoplay together with aria-live! • Autoplay and aria-live will disrupt the reading experience every time a slide changes • Try to avoid autoplay entirely. If you can’t … • There must be a mechanism to pause, stop, or hide (WCAG 2.0, success criterion 2.2.2) Don’t
  • 12. • Use words! • Visually hidden heading • Follow the recommendations of W3C for accessible carousels:
 https://www.w3.org/WAI/tutorials/carousels/ Do