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

More Decks by Linda Ikechukwu

Other Decks in Programming


  1. 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
  2. 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" />
  3. 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+ */ }
  4. 2. Always provide fallback styles .example { background-color: #000000;/* Fallback*/

    background-color: rgba(0, 0, 0, 0.5);/* RGBa with 0.5 opacity */ }