Anatomy of an accessible carousel: everyone's responsible!

1,857 views

Published on

The things you need to consider when adding a carousel to your website to make sure it meets accessibility standards.

Published in: Technology
  • Be the first to comment

Anatomy of an accessible carousel: everyone's responsible!

  1. 1. Anatomy of an accessiblecarousel: everyonesresponsible!Access iQ™ Web Accessibilityhttp://www.accessiq.org/
  2. 2. Colour contrastAuthor Lorem ipsum dolor siter Proin scelerisque, sem sit amet elementum pulvinar, orci eros adipiscing elit eget Consectetur adipiscing elitDevelop Colour contrastDesign
  3. 3. Author Lorem ipsum dolor siter Proin scelerisque, sem sit amet elementum pulvinar, orci eros adipiscing elit eget Consectetur adipiscing elitDevelop Keyboard focusDesign
  4. 4. Author Lorem ipsum dolor siter Proin scelerisque, sem sit amet elementum pulvinar, orci eros adipiscing elit eget Consectetur adipiscing elitDevelop Non-active Active FocusDesign
  5. 5. Heading levelAuthor Lorem ipsum dolor siter Proin scelerisque, sem sit amet elementum pulvinar, orci eros adipiscing elit eget Consectetur adipiscing elitDevelopDesign
  6. 6. <h2>Lorem ipsum dolor siter</h2>Author Lorem ipsum dolor siter Proin scelerisque, sem sit amet elementum pulvinar, orci eros adipiscing elit eget Consectetur adipiscing elitDevelopDesign
  7. 7. Author Lorem ipsum dolor siter Proin scelerisque, sem sit amet elementum pulvinar, orci eros adipiscing elit eget Consectetur adipiscing elitDevelop Text alternative alt =“3”Design Text alternative for image alt =“Previous slide”
  8. 8. CSS for stylingAuthor Lorem ipsum dolor siter Proin scelerisque, sem sit amet elementum pulvinar, orci eros adipiscing elit eget Consectetur adipiscing elitDevelopDesign
  9. 9. Sequence preserved First slide headerAuthor First slide text First slide linkscelerisque, sem dolor siter Lorem ipsum Proin sit amet elementum pulvinar, orci eros adipiscing elit eget Second slide header Consectetur adipiscing elit Second slide textDevelop Second slide link Third slide header Third slide text Third slide linkDesign
  10. 10. Author Lorem ipsum dolor siter Proin scelerisque, sem sit amet elementum pulvinar, orci eros adipiscing elit eget Consectetur adipiscing elitDevelop Meaningful linkDesign
  11. 11. Text alternativeAuthor Lorem ipsum dolor siter Proin scelerisque, sem sit amet elementum pulvinar, orci eros adipiscing elit eget Consectetur adipiscing elitDevelopDesign
  12. 12. Analysis and Design Develop requirementsAccessibility testing Content Maintenance authoringAccessibility testing
  13. 13. Practical workshopsAccess iQ™ offers practical, hands-on workshops that teach you how toimplement accessibility in your projects.• HTML and CSS techniques for building accessible websites – teaching developers how to create accessible digital experiences.• Implementing accessibility into your digital projects [custom workshop] – teaching your project team who does what when it comes to accessibility.• Captioning online videos – teaching you to caption your online videos in half a day with no setup costs. View Access iQ’s full list of workshop offerings.
  14. 14. Practical accessibility informationSave time and money by getting easy-to-understand accessibility information, all in oneplace.Access iQ™ has created some killer accessibilityguides for content authors and developers.An accessibility guide for designers is on the way!
  15. 15. Level 3, 616-620 Harris StUltimo NSW 2007t: +61 2 8218 9320e: knowhow@accessiq.org @accessiqaccessiq.orgWeb accessibility know how

×