Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The CSS Side of Accessibility

The CSS Side of Accessibility

In very simple terms, web accessibility is the practice of building web pages that are usable by all. "All," here, means "everyone who uses the web or wants to use the web", and so encompasses a wide range of people with varying abilities.

The problem is that when mainstream media talks about web accessibility, they only focus on accessibility for screen readers and keyboard usage and proffer either Semantic HTML or JavaScript as a solution. But that is a very limited representation of what web accessibility is all about. What about users with varying auditory, cognitive, neurological, physical, speech, device or even internet limitations?

To truly create accessible web experiences, other concepts that foster usability and inclusion, such as responsive design, cross-browser compatibility, web-performance optimization, and progressive enhancement, should all be put into consideration. HTML and JavaScript is not enough.

In this talk, you'll learn how you can leverage CSS to create better web experiences for your users.

B12ebc301b41cd08402e95641fd3be46?s=128

Linda Ikechukwu

December 27, 2021
Tweet

More Decks by Linda Ikechukwu

Other Decks in Programming

Transcript

  1. The CSS Side of Accessibility

  2. Linda Ikechukwu Frontend Developer & Technical Content Manager

  3. Web Accessibility: The practice of building web pages that are

    usable by all.
  4. Screen readers Keyboard usage JavaScript Semantic HTML

  5. Screen readers Keyboard usage Responsive design Progressive enhancement Cross-browser compatibility

    Performance optimization
  6. Two things to remember: - All your users will not

    experience the web exactly like you do - CSS can help you create better experiences for them
  7. Some users navigate the web with the keyboard

  8. Do not disable focus styles X ✔

  9. None
  10. Users will have varying device capabilities and internet speed

  11. 1. Load CSS asynchronously <link rel="preload" as=”style” href="mystyle.css”> <link rel="preconnect"

    href="https://fonts.gstatic.com/" crossorigin>
  12. 2. Don’t make users download styles they do not need

    <link rel="preload"as=”style” type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" /> <link rel="preload"as=”style” type="text/css" media="only screen and (min-device-width: 1000px)" href="laptop-device.css" />
  13. Users will use different browsers

  14. 1. Always provide browser prefixes .example { -webkit-transform: rotate(30deg); /*

    Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: rotate(30deg); /* IE 9 */ transform: rotate(30deg); /* IE 10, Fx 16+, Op 12.1+ */ }
  15. 2. Always provide fallback styles .example { background-color: #000000;/* Fallback*/

    background-color: rgba(0, 0, 0, 0.5);/* RGBa with 0.5 opacity */ }
  16. 3. Always use feature queries @supports(display: grid) { /*All grid

    styles go here*/ }
  17. Users will have different usability preferences

  18. 1. Use relative units for sizing

  19. None
  20. 2. Use CSS user preference media features

  21. None
  22. Lastly, do you really need CSS?

  23. None
  24. Thank you! @_Mslinda