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.

Linda Ikechukwu

December 27, 2021
Tweet

More Decks by Linda Ikechukwu

Other Decks in Programming

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