Coding log 05.01.19

April 30th, 2019

Today I continued the Applied Accessibility Curriculum in freeCodeCamp.

I learned how to use CSS to hide information from the visual area of a webpage while still making it accessible to screen readers. This is useful when information needs to be presented in an alternative way.

An example is a cart. To make it understandable to screen readers, it needs to be presented maybe like a table.

The way to do this is to use CSS to position the screen-reader-only elements off the screen.

.screen-reader { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; }

We can not accomplish the same with

display:none visibility:hidden width: 0px; height: 0px;

By doing this we hide the elements from everyone.

High Contrast

Low contrast makes text difficult to read. The Web Content Accessibility Guidelines (WCAG) recommends at least a 4.5 to 1 contrast ratio for normal text.

There are many tools available on the web for checking this. 21:1 is the strongest contrast with black text against a white background.

The same goes for color.

First and foremost, color should not be used as the only way to convey important information. Screen readers can’t see it.

And colorblind users need high enough contrast between the colors to distinguish between foreground and background. One should, therefore, avoid close neighbors on the color wheel.

Descriptive links

Many screen readers read out the links on a page. Having links like “read more” and “click here” provides no meaning in this situation. We should provide a brief and descriptive text within the tags to provide meaning.