Web Accessibility (Visual Impairments)

In the previous article, I discussed what accessibility is all about and why you should consider making your websites accessible.

In this article, we would be looking at ways in which we could make our websites accessible. There are so many ways to make your site accessible, so rather than just listing them all out, we would be looking at how we can make our site accessible to a particular category of users (the visually impaired in this case).

So, what does it mean to be visually impaired? First thing that might come to mind is a blind person. But it's actually much more than that.
According to wikipedia, Visual impairment, also known as vision impairment or vision loss, is a decreased ability to see to a degree that causes problems not fixable by usual means, such as glasses. The term blindness is used for complete or nearly complete vision loss.

According to the above, visual impairment could mean blurry vision, myopia (short sightedness), albinism, color blindness, etc.

So our goal here is to try as much as possible to make our website accessible to these people. Well, how do we go about that?

Text sizing

For users that are not visually impaired, your website on a default font size of 12px or 14px might look nice and all, but what happens when the user cannot read the text at that size and needs to zoom in? Does your site still look okay? Or the layout breaks?.
One way to go about this would be to use a default font-size that is a few point larger and can be seen comfortably. You could also test by zooming in the browser to see how your layout would look like when zoomed in.

Contrast

Contrast is the difference in color or lightness that makes an object distinguishable. Contrasting colors are colors that differ from each other. Think green and red, white and black, yellow and blue.

For users with cataract or other visual impairments that could cause a decrease in contrast sensitivity (differentiating between different color shades), we need to use colors with high contrasts.
Consider the image below gotten from the learning hub

It won't be nice to have a yellow text on an orange background would it. So try to use colors that have high contrasts in your website (without making your website look like a nursery painting😅). Head over to webaim to check if two colors have a high contrast and conforms with the standards

Element Descriptions

Use proper and descriptive alt text. This is very important and cannot be over-emphasized. Some users rely on screen readers to navigate your website, and these screen readers don't "see" elements like images and videos. Imagine you have to close your eyes and someone reads out your alt text to you. Would that be enough for you to picture what the image looks like? If no, then you might want to consider using something descriptive. This site shows how you could write your alt texts

Using semantic tags

If what you're trying to achieve is just a slightly bigger and bolder text, then use CSS to style it.
If you're trying to create a sub heading, then consider using the heading (h1-h6) tags. Using the right tags helps those using screen readers to understand the content of your page better

Keyboard shortcuts

For users that might not be able to follow the cursor movements on the screen, they should be able to navigate your entire website with their keyboard alone. How to achieve that would be discussed in another article.

Thanks for reading all the way to this point. See you in the next article 🙂🙂

Comments

[Ben Calder]

I always like to see articles promoting web accessibility - so thanks for writing this :)

A couple of minor comments:

• just as alt text should be meaningful (or empty for decorative images) link text also needs to give a clear indication of the link target. As such I would replace "site" with something more descriptive like "alt text recommendations".
• achieving good colour contrast is not just a matter of picking colours opposite each other on the colour wheel. For example your chosen example of red/green is a combination associated with one of the most common forms of colour-blindness: for some it would render content illegible. I wouldn't necessarily remove the example; but I would add a comment warning that this should also be considered ;)