How to make your website accessible for the visually impaired

Accessible websites contribute to digital inclusion

A little while back, I started following Tjarda Struik’s profile on Instagram. Tjarda has a visual impairment and only sees 5%. This has never stopped her from fulfilling her dreams and ambitions. She is a mother, psychologist, speaker, vlogger, and entrepreneur, and she is actively involved in politics. In addition, she advocates for diversity and inclusion.

On Instagram (all in Dutch) she gives her followers a glimpse into her daily life, and she shows how she deals with daily life situations. She also explains which steps we can make to make the world more inclusive. She first grabbed my attention when she shared a post on Instagram about how we, Instagrammers, should leverage alt descriptions to make our posts more accessible to people with visual impairments.

As a blogger, I realized I should start to put more effort into using alt descriptions on my blog correctly, too! And this inspired me to dedicate a blog post to this topic so other beginning bloggers can make their blogs more inclusive, as well!

I mean, what’s a website filled to the brim with blogging tips without a post explaining how to make your website accessible to everyone?

Therefore I asked Tjarda which adjustments we can make as bloggers to make our blogs accessible to everyone with a visual impairment. Her answers can be found in this post together with explanations (coming from me) on how to implement them.

It should be a priority for every blogger to make your website more accessible for all audiences

For me, improving the accessibility of my website is a major goal for 2022. There is still a lot to be worked on, but progress is being made! By making your website accessible for the visually impaired you don’t only help others, but you also improve your own website. You will improve the user experience and that is something the search engines factor in as well when they’re crawling your site.

It really is a win-win situation for everyone; you contribute to a more inclusive and pleasant digital world for the visually impaired. Therefore, you will gain a whole new target group and on top of that, you’re improving the SEO of your website!

Is it really that important to make your website more accessible?

So let’s talk about some stats. Because once you know the numbers, you’ll also immediately understand why it’s so important to make your website accessible to the visually impaired, but also how silly it is that so many websites haven’t yet tackled this.

Here are the numbers:

According to the WHO there are “at least 2.2 billion people who have a near or distance vision impairment.” Wow, let that sink in, right?! And according to boia.org only 14% of all websites as of May 2021 are accessible for people with a visual impairment. Not a good score if you ask me, and it gives a lot of room for improvement. It’s about time to make a change!

Tips to make your website accessible to people with a visual disability

Install the Userway Accessibility plugin

When you install this plugin, an icon will appear on your website for the visually impaired. When installing, you can choose a design and an appropriate place on your site where it will then be displayed. When a user clicks on it, they can choose to:

• Increase or decrease the font size;
• Change the contrast of the page;
• Adjust the amount of space between texts;
• Pause animations;
• Opt for grey tones;
• Underline hyperlinks;
• Make the text dyslexia-friendly;
• Make the cursor bigger;
• Align the text differently;
• Adjust the line height.

It’ll look like this:

Install the ReadSpeaker plugin

Another plugin that can be incredibly helpful for people with visual impairments is the ReadSpeaker plugin. This plugin converts the text of a page into natural speech with one click, and your visitor can also enlarge the text, put a mask over the text or open a text version of the page with this plugin. The buttons at the top of the page allow you to choose from different options.

Do you want to install ReadSpeaker for your website? Visit their website for more information and prices.

Don’t want to install an additional plugin on your website? Then pay attention to the following points when designing your site:

• Make sure the body copy has a minimum font size of 11 points;
• Have the text aligned to the left. In other words: avoid padding. For calmer reading;
• Make the font size of the headings as large as possible;
• Choose a sans serif font – letters without any extending features or boldness;
• Use as many bright colors as possible such as blue, green, and red;
• Don’t let colors fade or blend into each other;
• Provide enough contrast between the text color and the background;
• Soft yellow or off-white are good colors to use as a background colors. People who are hypersensitive to light have problems with bright white surfaces, especially if they are looking at a screen and using magnification software;
• Make hyperlinks stand out enough;
• Add a title to your buttons (such as the menu buttons) that includes the button’s name.

Pay attention to these points when writing your blog posts:

Write an ALT description for images

Write an alt text for images. For people with visual impairments, this is very useful. In fact, alt texts are meant for the visually impaired. Many bloggers think that alt descriptions are meant to make your image contribute to the SEO of your website, but these texts are actually meant to make your site more accessible. A special screen reader reads what’s in the alt description out loud to explain what can be seen on an image.

That’s why it’s best to summarize what the image is portraying. It is an important factor for search engines, too, because they can’t ‘see’ an image. We need to tell the search engine what can be seen on it.

Note: you don’t need to include an alt text for images that are only illustrative. They are not meant as a part of the overall post, and adding an alt text could be confusing.

In WordPress, there are several ways to add alt descriptions to your images.

• Option 1: select your picture, and click on the ‘Settings’ icon in the side menu of your Gutenberg editor while you’re writing your post. Make sure to select ‘Block’.
• Option 2: You can also edit your alt descriptions via the WordPress dashboard. Go to ‘Media’, and then to ‘Library’. When you click on an image here, you will also be presented an option on the right-hand side to input the alt description.

Use headers for headings and sub-headings

People who are visually impaired scan the intermediate headings first with the magnifying or reading software to make sure the structure of your website is clear to them. Therefore, it is important to give these headings a header tag. These tags are also very important for good search engine optimization (SEO) of your website. If you give your posts a clear structure, you will score points with Google. So twice as many reasons to use the header tags correctly.

Use the header tags as follows:

• H1 – Just once for your title
• H2 – For the headers
• H3 – For the sub-headers

You can also choose between H4, H5, and H6 tags, but I don’t recommend using them. They won’t make your text easier to read, and the headings will get smaller and smaller. They don’t contribute to better accessibility of your website either.

Also read: how to write the perfect blog post?

Make hyperlinks understandable

• Instead of adding the anchor text ‘click here’ to a link, it is better to give it a more straightforward description, such as ‘download our product catalog’;
• Avoid opening internal links in a new window;
• Linking to another website? Let your site visitor explicitly know.

Other textual considerations

• Use capital letters, italics, or bold type sparingly: these are harder to read;
• Do not include italicized text;
• Do not use text overlays on images.

Test your website’s accessibility

Not sure if your website is accessible enough for people with a visual impairment? You can test the level of accessibility of your website free of charge with the WAVE Web Accessibility Evaluation Tool.

Final thoughts

As you now understand, it is extremely important to make your website accessible to all people. There are more people than you might initially expect who are visually impaired and who would like to read your blogs as well. By making your website more accessible, you contribute to inclusion, and you ensure a better user experience. An important factor when it comes to SEO. These are all good reasons to start working on the accessibility of your website.

Finished setting up your blog for better accessibility? Then go the next important step and make sure you’re blogging legally, as well.

Thank you, Tjarda, for your input and for making me realize how important it is to focus on this aspect of owning a website as well.

Do you need help or do you have a question in response to this article? Please contact me via the contact form.

Angie