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.

Transcript

1. The CSS Side of Accessibility
   

   View Slide

2. Linda Ikechukwu
   Frontend Developer & Technical Content Manager
   

   View Slide

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

   View Slide

4. Screen readers
   Keyboard usage
   JavaScript
   Semantic HTML
   

   View Slide

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

   View Slide

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
   

   View Slide

7. Some users navigate the web with the keyboard
   

   View Slide

8. Do not disable focus styles
   X ✔
   

   View Slide

9. View Slide

10. Users will have varying device capabilities and
    internet speed
    

    View Slide

11. 1. Load CSS
    asynchronously
    crossorigin>
    

    View Slide

12. 2. Don’t make users
    download styles they do
    not need
    href="small-device.css" />
    href="laptop-device.css" />
    

    View Slide

13. Users will use different browsers
    

    View Slide

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+ */
    }
    

    View Slide

15. 2. Always provide fallback styles
    .example {
    background-color: #000000;/* Fallback*/
    background-color: rgba(0, 0, 0, 0.5);/* RGBa with 0.5 opacity */
    }
    

    View Slide

16. 3. Always use feature queries
    @supports(display: grid) {
    /*All grid styles go here*/
    }
    

    View Slide

17. Users will have different usability preferences
    

    View Slide

18. 1. Use relative units for
    sizing
    

    View Slide

19. View Slide

20. 2. Use CSS user preference media
    features
    

    View Slide

21. View Slide

22. Lastly, do you really need CSS?
    

    View Slide

23. View Slide

24. Thank you!
    @_Mslinda
    

    View Slide