DEV Community

Alvaro Montoro
Alvaro Montoro

Posted on

Web Accessibility with CSS

CSS is often seen as a language only related to visualization and presentation –to the point that many developers don't even consider it a programming language– ...but CSS is more than just making things look nice, and it can play an essential role when defining Web Accessibility.

Some people may say "Duh! Ensuring color contrast is done with CSS and it is the top a11y issue according to WebAIM"... and they will be correct, but there's much more to CSS and a11y than just color contrast or font size/readability:

  • Styles for printing
  • Easier to follow tables
  • Accessibility-related media queries
  • Focus outlines
  • Video accessibility

In this series, we will highlight different techniques that can be done in CSS to build more accessible websites. Some of them you might be doing already, and some may be new to the general audience.

Top comments (6)

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

A reality check. Is accessibility about minorities? What if I don't care, aside from search engine penalties?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Accessibility is not only about or for minorities. Yes, it affects people with disabilities (an estimated 15% of the world's population, which equals over 1 billion people), but it also impacts other groups (web accessibility benefits people with slow connections, or that have trouble reading, etc.) Apart from that, not having an accessible web may carry more than just search engine penalties, in many countries it could potentially carry legal and economic penalties. I wrote a different article about this too, which will be more detailed than just a comment.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

What about Desktop / mobile app accessibility? Or even paper / poster accessibility.

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro • Edited

Paper/poster accessibility I don't know to be honest, I guess there are some common needs with web accessibility (e.g. font sizes, color contrast, etc.) Desktop and mobile, even when different, they will be closer to web accessibility and have common requirements too (size of buttons, positioning/tabbing order)... But I have been mostly focused on web dev work...

Collapse
 
bayuangora profile image
Bayu Angora

Is there any tools to check?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

There are many tools to check accessibility. Depending on how and what you want to check, it would be one or another. Here is a shortlist with free a11y tools (it also includes some paid recommendations).