Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS, Accessibility and You: CSSDevConf 2014

3,754 views

Published on

When most people think about accessibility, they think about HTML as the foundation for accessibility. It makes perfect sense -- strong semantic HTML has a huge impact on a visually impaired person using a screen reader.

But, what about people with other disabilities? In order to provide the best of user experience to people of all abilities, we must move beyond “write great HTML and you’ll be accessible.” To do that, we use CSS.

In this session, we’ll share with you some of the most significant accessibility challenges we face when it comes to the web today and share with you solutions for addressing those head on with the CSS you write. You’ll learn all about the issues, AND know what to do about them. Learn:

- the accessibility issues with using CSS background images
- how to wrangle the potential negative effects of your animations and parallax
- how to ensure sighted keyboard users don’t get lost on your site or app
- the implications of responsive web design on accessibility
- strategies for ensuring your site works well with custom user stylesheets and browser settings

Published in: Technology

CSS, Accessibility and You: CSSDevConf 2014

  1. 1. CSS Accessibility and YOU #a11yCSS @feather Derek Featherstone
  2. 2. GROUP CLOSELY RELATED ITEMS
  3. 3. The Principle of Proximity.
  4. 4. PROBLEM Multi-column layouts make using an interface very challenging for someone with low-vision.
  5. 5. Check In 1. Are you a U.S. citizen? 2. Have you ever been denied entry to the U.S.? Yes No Yes No 3. Do you have a TSA Redress Number? 4. If yes, please enter it: Yes No Quit << Previous Next >>
  6. 6. Check In 1. Are you a U.S. citizen? 2. Have you ever been denied entry to the U.S.? Yes No Yes No 3. Do you have a TSA Redress Number? 4. If yes, please enter it: Yes No Quit << Previous Next >>
  7. 7. Check In 1. Are you a U.S. citizen? Yes No 2. Have you ever been denied entry to the U.S.? Yes No 3. Do you have a TSA Redress Number? Yes No 4. If yes, please enter it: Next >> Quit or Go Back Not sure?
  8. 8. SOLUTION Use the straw test to find layout and design challenges for people with low-vision.
  9. 9. • blind • low-vision • hearing • mobility/dexterity (fine motor control, low-strength, single-handedness) • cognitive (attention, memory-related, literacy, routines/predictability) • vestibular issues • speech
  10. 10. 3 types of relationships
  11. 11. 1 2 3 Explicit, implicit and content based relationships. sateach.es/3-rel
  12. 12. Screen reader compatible ≠ Accessible
  13. 13. PROBLEM Background images are over-used, abused, and often cause accessibility issues for non-screen reader users.
  14. 14. <a href=“#theThing">! ! Flip! ! </a>
  15. 15. <a href=“#theThing">! ! Details for Ibura Sport Coupe! ! </a>
  16. 16. <a href=“#theThing">! ! Flip to see details for Ibura Sport Coupe! ! </a>
  17. 17. What’s the call to action?
  18. 18. <a href="javascript:void(0);">! <img src=“images/homepage_tool_programs.png”! alt=“visit">! </a>
  19. 19. Calls to action must match!
  20. 20. SOLUTION Alt text that reflects the call to action. Image and text alternative in the same layer. Use SVG
  21. 21. Background images
  22. 22. Windows High Contrast Mode: background images disappear.
  23. 23. PROBLEM When CSS background images are off, what content, functionality, or affordances are missing?
  24. 24. SOLUTION Rethink your use of background images. Keep your meaning out of CSS. Apply a different stylesheet.
  25. 25. var inputSelectors = [! ! ! 'select',! ! ! 'input:checkbox',! which elements? ! ! 'input:radio'! ! ],! ! backgroundColors = [! ! ! '#fff',! ! ! '#ffffff',! ! ! 'rgb(255, 255, 255)',! ! ! 'white'! ! ],! ! textColors = [! ! ! '#333',! ! ! '#484641',! ! ! 'rgb(72, 70, 65)'! ! ],! ! fontSize = '14px',! ! pageBgColor = $('body').css('background-color'),! ! pageTextColor = $('body').css('color'),! ! pageFontSize = $('body').css('font-size');! ! // Only run uniform.js if no modifications have been made to ! // the background color, text color, or font size! ! if(backgroundColors.indexOf(pageBgColor) !== -1 && textColors.indexOf(pageTextColor) !== -1 && pageFontSize === '14px') {! ! $(inputSelectors.join(',')).uniform();! } expected background colours expected text colours expected font size
  26. 26. If the computed background colour, text colour, or font size isn’t what you expected, consider applying a different set of styles. ! One of more of these is true: • High Contrast Mode is on. • A custom font-size is set. • Custom colours are set. • They are using a user style sheet.
  27. 27. PROBLEM When using generated content, what content, functionality, or affordances are missing?
  28. 28. #cssmenu ul ul li.has-sub > a::after {! ! display: block;! ! position: absolute;! ! content: "";! ! width: 5px;! ! height: 5px;! ! right: 20px;! ! z-index: 10;! ! top: 11.5px;! ! border-top: 2px solid #eeeeee;! ! border-left: 2px solid #eeeeee;! ! transform: rotate(-135deg);! }! ! ! <li class="has-sub"><a href="#"><span>Product 1</span></a>! <ul>! <li><a href="#"><span>Sub Product</span></a></li>! <li class="last"><a href="#"><span>Sub Product</ span></a></li>! </ul>! </li>!
  29. 29. <li class=“has-sub" aria-expanded=“true”>! <a href="#">Product 1</a>! </li>!
  30. 30. SOLUTION When generated content provides meaning, provide the same with hidden text, or ARIA.
  31. 31. PROBLEM Sighted keyboard users must have a High Visibility Focus Indicator.
  32. 32. SOLUTION DESIGN a high visibility focus indicator that works with your site instead of relying on the default user agent focus indicator.
  33. 33. PROBLEM Just because something isn’t visible, doesn’t mean it isn’t there.
  34. 34. SOLUTION Elements that are off-screen or not visible should be hidden using a combination of display:none and aria-hidden=“true”
  35. 35. PROBLEM CSS animations and parallax effects can cause pain, discomfort, nausea and other effects on people with vestibular issues.
  36. 36. sateach.es/vestibular
  37. 37. SOLUTION Allow for user control of animations including auto-rotating carousels, parallax or motion.
  38. 38. SUMMARY 5 point diagnostic
  39. 39. Look for all of these in your CSS: ! • cursor: pointer • outline: none • :hover without :focus • background: url(..) or background-image • ::before and ::after
  40. 40. Derek Featherstone feather@simplyaccessible.com @feather

×