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
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 ✔
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
20. 2. Use CSS user preference media features
22. Lastly, do you really need CSS?
24. Thank you! @_Mslinda