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
As I said, it’s possible to hide elements off-screen so they are not visually present to a user, however, they are still picked up by the likes of a screen reader. Let’s break that down. If we create a selector called, let’s say .sr-only with the minimum pixels required to be picked up in a document by a screen reader and position the element far off the document page, it still technically “exists” it’s just not immediately visible on the document.
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
Let’s jump back a bit to visual layout of the text in the browser. Sometimes it’s difficult to make out text and according to the The Web Content Accessibility Guidelines (WCAG), they recommend at least a 4.5 to 1 contrast ratio for user legibility. You can just google what contrast works for you. This is useful when you have a light grey background which makes text harder to read. Let’s see what we could change in the text when we apply a CSS class selector called “body” which will affect all content in the body element, as it is reffering to that element:
body {
color: #636363;
background-color: #FFF;
}
Using Sufficient Contrast to Avoid Colourblind Issues
People who are colourblind have trouble distinguishing between colours so we need to find an alternative to avoid potential problems and make the user experience (also known as the UX) accessible to everyone. This is done by affecting the hsl() property which we covered earlier. According to FreeCodeCamp:
“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:
Give Descriptive Link Text to Links
Okay, topic change. Remember what an anchor did? It takes a user through a URL to another page via a link.
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.
