Write accessibility responsible CSS

Accessibility is important for web applications. Accessibility is important while writing the CSS too. Do you know that CSS also impacts accessibility? Today we are going to look into these issues.

1. CSS outline

I will start with the most basic and obvious. Never ever remove the :focus and make an outline: 0 . These are very important for keyboard users. If you are going to remove these then the keyboard user won't be able to see where the focus is going. These are like 'guide' for them to navigate the application

Also, instead of having a default browser focus style you can have your own focus style for consistency in the UX. Such as smashing magazines do.

Beware, if your outline style on focus not working on the Mac + FF the reason could be the settings are not supporting: https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox

2. Positions

Do you know the screen readers read aloud the layout & content of the application to the screen reader users? By CSS positions if you will change the positions or order of the elements on the screen (visually) it will look fine but screen readers will not be able to read the new order done by positions.

So, if you want an order of the elements to change to do it by moving the whole element not just by playing with the positions.

3. colors

Colors are very important for any application. For accessible folks, there are different kinds of color-issues- low vision, color blindness, black-white. etc. While making any application make sure:

1. Color contrast is getting passed
2. Colors contrast after getting passed are also readable by accessible folks
3. How the site will look for color-blind folks
4. Grey color testing

4. Font-sizes

Font-sizes is one of the bias elements of the applications by designers and developers. For accessibility designers and developers needs to make sure that the font-sizes should not be too small or too large. As well as, the user should be able to zoom-in/out and the design won't break.

Try to use rem unit instead of the px.

Many times, devs by CSS add the property on the container *overflow: hidden* this will hide the content when the text size will be zoomed.

5. font-size: 100%

You must have seen many folks do html { font-size: 100%;} this is important to do from an accessibility perspective. The reason, many folks with sight issues make their system's font-size from default to anything. When we are setting font-size: 100% of our CSS then it will take 100% of the system font settings.

By this, now your application is not flexible as per the user's system font-settings.

6. Content images

Images are an important part of the application. As a developer, we should understand that not every image (non-cms) should come from the CSS. Only the decorative images should be part of the CSS. Why? if you have a banner image with information about the product and deals associated with it and you move this image to the CSS, screen readers never able to get the content. The solution of this is to move this image to your HTML and provide a proper *alt* tag which explains the content of the images for the screen readers.

7. Animations

If your application is having a lot of animations then you should take a moment to think about the users who have cognitive issues or if users are disabling the animations will your application is able to communicate the content and information intended?

So, from the accessibility point of view:

1. Have fewer animations
2. Give the proper control to the users to stop, play, pause, slow the animations.
3. Never run the audio on the load of the application.
4. Give the user the control to play the animations.

8. Tap area

When making the designs for the small screens please make sure that the tap area (clickable area) on the buttons, links, etc. should be accessible. If the area is too small no one won't be able to tap (click) on that. If it is too big then again it is an issue visually. Though there is no perfect size for these.

You can have more than 40px and less than 72px. Have enough white spaces around the tap area to avoid users to accidentally press another tab area.

9. Hidden vs none

There is the time when one needs to hide the elements. If you are using visibility: hidden then this will only hide the element visually but the screen readers will still able to read it.

If you want to hide from the screen as well as from the screen readers then use display:none.

10. Style Responsible

You can do a lot with CSS. Especially you can change the layout positions, styles and most importantly you can make any tag to look like something else eg: a tag can be styled to Button. These all are very dangerous for the accessibility point of view. If you are making a tag to look like a button obviously the screen readers will still read it as a(link) rather than the button. so, style responsibly