Accessibility. Blind & Partially Sighted Friendly Websites.

When creating websites, one hugely important consideration is to make sure that the website is accessible to people with sight-loss or visual impairment.

Any reputable website designer will have studied this subject thoroughly and include the tips, tricks and the rules throughout the whole process of designing a website.

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee (the inventor of the World Wide Web)

The internet must work to provide equal access to information for people of all abilities.

Making a website accessible for people who are blind or partially sighted isn’t difficult. As long as the rules are followed and there is understanding of how people with sight-loss actually use the internet.

Understanding How Blind People Use Technology

Before we cover how to improve a website’s accessibility for those with sight-loss or visual impairment, we have to understand how the technology is used.

We’ll start with computers. People with complete sight-loss will most likely use screen-reader software. Software packages such as Jaws & NV Access are usually preferred over the built in narrators.

When using computers, keyboard navigation is a preference over a mouse or touch-pad. The use of the Alt, Tab, Arrows & Enter keys allow easier navigation around the computer..

Now to smartphones & tablets. Technology such as Siri Voice Assistant on Apple devices and Google Voice Assistant on Android devices are used. These act as screen readers and also turn on the device’s scrolling and double tapping facilities.

8 Ways To Improve A Website’s Accessibility

1. ALT Tags on images.

Every photo or picture based image on your entire site should have Alt tags on them. This allows the screen-reader technology to read out-loud what the image is.

Examples of Alt tags and the best practice to use them. 3 identical images of a rose with different Alt-tags on them.

1. **Bad mark-up code** = <img src=”rose.jpg” alt=””>

3. **Good mark-up code** = <img src=”rose.jpg” alt=”A blossoming pink rose”>

I have seen web designers load the image with a dozen keywords in the Alt tags to try and appeal to search engines. This is terrible practice and should never be used. If a visitor to your website with sight-loss encounters this, the frustration and confusion caused, makes this practice inexcusable.

2. Clear Navigation.

Easy to navigate links. Clearly worded descriptive links. If you have an “About” page, call it that. Try not to be too clever with page names and links titles. This advice runs throughout web development. A Contact Page should be called “Contact”. Not “Get In Touch”.
(This also helps translation services. Get too clever with your navigation titles and translation services will struggle to make sense and end up translating literally – not good).

3. Avoid the “Am I a robot”? type of captchas.

How frustrating must it be for a user with sight-loss, having spent the time and effort filling in your form or almost finished checking out when making a purchase on your site, to then being told at the end… “To prove you are not a robot, select the pictures that have traffic lights in them”?
Any captcha that you have to use on your site… make sure it has accessibility options.

4. Follow The Correct Title & Heading Structure

The title of a page should be aimed at describing what the page content includes. The heading structure should be set to the correct H1, H2, H3, etc mark-up. This helps to form a non-confusing structure to the content.

5. Use The Label Tags On Forms

When asking for users to input text or data into an online form, the use of the label tags should always be used in the page mark-up. Otherwise screen-readers will have no idea what goes into that space.

6. Table Data

Data or content should not be used in a table format just to make the page look nice. A screen-reader will see this table and start to inform the user that “there is a table with 8 rows, 6 columns, row 1 column 1…” This is distracting, frustrating and confusing. Only use tables when tables are actually required.

7. Audio! Websites Should ALWAYS Be Silent When They Load

If your page includes any audio or video content, make sure that these do not auto-play when the page is loaded. This can cause frustration and the volume may drown out the voice of the screen-reader.

The golden rule of using any audio (even from video content) is that it should be a user consent basis if they wish to hear anything. Websites should be silent when they load. It’s an unwritten rule, that if broken will lose you more traffic than anything else.

Even in the early days of the internet, websites that auto-played those annoying Midi music tunes resulted in users bouncing on entry.

8. Colour Consideration

Users with colour vision deficiency will struggle to see some colour combinations. This is a link to w3.org with some examples, further information and guidance on this subject.

Properly designed websites and tools can be used by people with disabilities. However, currently many sites and tools are developed with accessibility barriers that make it difficult or impossible for some people to use them.
World Wide Web Consortium (W3C)

Further Links On This Subject

W3C. The World Wide Web Consortium. W3’s guidance which should be used by all reputable website designers.

Google’s guidance on accessible digital design.

RNIB – Royal National Institute of Blind People. Probably the best example of a website that is perfectly optimised for accessibility. This is a benchmark example of how it should be done.