loading...

Web Accessibility with CSS

alvaromontoro profile image Alvaro Montoro ・1 min read

Web Accessibility with CSS (8 Part Series)

1) Web Accessibility with CSS 2) Allow end-user styling overrides 3 ... 6 3) Using !important in CSS 4) Use font-relative units for font sizes 5) Accessible text 6) Color contrast: text 7) Color contrast: beyond text 8) Do not just use color to convey information

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.

Web Accessibility with CSS (8 Part Series)

1) Web Accessibility with CSS 2) Allow end-user styling overrides 3 ... 6 3) Using !important in CSS 4) Use font-relative units for font sizes 5) Accessible text 6) Color contrast: text 7) Color contrast: beyond text 8) Do not just use color to convey information

Posted on May 22 by:

alvaromontoro profile

Alvaro Montoro

@alvaromontoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Active moderator in Stack Overflow en Español. Husband, Father, Longhorn 🤘

Discussion

markdown guide
 

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

 

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.

 

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

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...

 

Is there any tools to check?

 

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).