An introduction to web accessibility. Tips on how to improve the accessibility of your web sites and apps with CSS.
… a lot of things have changed and CSS now gives us an incredible set of tools to style the web. We went from Verdana to Webfonts, from fixed widths to Responsive Web Design, from table-based layouts to Grid, and we don’t have to use images anymore for borders, fonts or shadows. We have custom properties, Feature Queries, calc() and numerous new units. This of course is only a subset of the great developments of the last years.
While this wide range of properties and endless ways of solving tasks with CSS makes our lives easier, it also creates the potential to worsen the experience for our users. It’s actually possible to make a website inaccessible in just three lines of CSS.
In this post I’ve collected techniques, considerations and approaches that will help you write more accessible CSS. The collection starts with basic concepts and well-known properties and covers some of the newer stuff at the end.
In the end it got way bigger than expected, so here’s a handy menu so you can jump directly to a section that interests you the most:
- From legible to readable text
- Using content in pseudo elements cautiously
- The screen is not the only medium
- Fallback for property values with incomplete support
- There are many ways to hide content
- You can’t trust bad contrast
- Color alone should not be the only source of information
- Taking care of order
- Focus on what’s important: focus
- Grid and flat document structures
Curated by (Lifekludger)
Read full article at Source: Writing CSS with Accessibility in Mind – Manuel Matuzovic – Medium