Learning to Code: Day 22 — Applied Accessibility Part 4

Good evening everyone. How are we keeping? I’ve been looking at hiding objects off-screen and then animating them to slide on-screen. I had the idea this morning while I was at work so I sketched it out on paper, when I got home I looked it up and figured it out. Now I just opened up FreeCodeCamp and we are at the exact point of learning that! How convenient. Let’s jump in.

What did the clock say to the other clock? Hey have you got the time? Yeah that was pretty lousy.

Make Elements only visible to a Screen Reader

The browser will recognise that there is content far off to one side so it will offer a scroll bar for you, as if you want to scroll into blank space to find the hidden element, we’ll use the overflow property (when content of the element breaks out the element’s box) and set it to hidden to bypass this issue. Here’s an example of all that from FreeCodeCamp:

.sr-only {

position: absolute;

left: -10000px;

width: 1px;

height: 1px;

top: auto;

overflow: hidden;

}

Therefore we can then write a paragraph which gives a narration of the visual experience, and that transcript is being read off-screen like magic.

On that note of off-screen elements, here’s my code I wrote today to move an object slide into the screen from off-screen. I did’t quite hack the end-positioning to be central to the browser and I’m leaving this on here for my own personal development, but anyway, work in progress:

#moving-object {

animation-duration: 1s;

animation-name: slidein;

animation-fill-mode: forwards;

animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

}

@keyframes slidein {

0% {

margin-left: 100%;

width: 20%;

}

100% {

margin-left: 30%;

width: 20%;

}

}

Yeah. Look at that huh.

Improve Contast for Readability

body {

color: #636363;

background-color: #FFF;

}

Using Sufficient Contrast to Avoid Colourblind Issues

“The 4.5:1 contrast ratio can be reached by shading (adding black to) the darker color and tinting (adding white to) the lighter color. Darker shades on the color wheel are considered to be shades of blues, violets, magentas, and reds, whereas lighter tinted colors are oranges, yellows, greens, and blue-greens.”

we need to brighten the lightness of the background-color in this example and weaken the color lightness of the text to improve contrast to a 5.9:1 contrast value. Let’s see it before:

body {

color: hsl(0, 55%, 20%);

background-color: hsl(120, 25%, 35%);

}

And after:

body {

color: hsl(0, 55%, 15%);

background-color: hsl(120, 25%, 55%);

}

Hey Presto. Notice the clear shift in legibility and now the words are easier to read.

Furthermore, the most common colour that is difficult to detect with reduced sensitivity is green. Looking at this example, we can see how green on yellow vastly reduces the ability to read the text, until we change it to a dark blue:

Can you make that out?
How about now?

Give Descriptive Link Text to Links

But imagine a screen reader reading aloud all the “click here” link texts, cue nightmares for the users. So, we’ll simply adjust our thinking and write brief descriptive link texts for the users instead of generic link names like “click on this” or something within a paragraph:

<p>

Click here for more <a href=””>information about dogs</a>.</p>

Easy.

Aaaaand let’s leave it there.

Thanks a lot for checking in today and learning with me. As you can see from my example over off-screen elements, I am finding creative ways to think about coding by literally writing my ideas down on scrap paper and planning ahead first when I have a idea in mind. How to bring that idea into exsistance is what it’s all about people. See ya next time.

Step by step, learning to code with FreeCodeCamp