Website Design For The Visually Impaired

17 May, 2022

Today, most people would find it difficult to imagine their life without the internet – with just a click you can have the world at your fingertips, as long as you can see the screen and interpret the information clearly and accurately; in other words, as long as you don’t have some kind of visual impairment or disability.

It’s not unexpected then that among total web users, there are around 2.2 billion people with various levels of visual disabilities and impairments (data from the World Health Organization). Website developers need to move towards a more inclusive perspective of web design to allow visually impaired individuals equal opportunities in accessing content through the use of screen readers, screen magnifiers, braille displays and input systems.

Let’s take a look at a few key aspects of website design considerations for the visually impaired.

How does a visually impaired person browse the web?

The most common assistive technologies for the visually impaired are screen-readers or Braille displays connected to a computer. The screen-reader works as an interpreter, which sends the text and all readable content on the page to the speech synthesis system, known as text-to-speech (TTS), which transforms it into voice, including images and links. Therefore, simple and direct content allows the user to focus and digest the content of the page in a much simpler way.

Elements such as animated images, scrolling texts and flash effects are hardly ever interpreted by screen-readers. In addition, shaded backgrounds and the use of particular shades of colour make it difficult for the visually impaired to navigate the main content of a webpage.

Tips For Better Site Accessibility:

 Structure Of The Pages

Unlike sighted people, who use a mouse and trackpads to navigate the content of a website, visually impaired people use keyboards to navigate content. Keyboard navigation is one of the most important aspects of website accessibility and the ease of navigation of a website is determined by how well the content is structured.

Therefore, designing web pages that pay attention to the headings and the structure of the elements that compose them can facilitate a better understanding of the content and accessibility-friendly navigation using a keyboard.

Readability

Making sure the content is easily readable is of utmost importance. For this reason, it is essential to use a clear font and a correct layout with titles and bulleted lists that divide the text. Fonts (or typefaces) are not all the same and are divided into two main categories: serif fonts, which are better for reading on paper, and sans serif fonts, which are more popular on the web.

Attention should, therefore, be paid to the font used, the spacing between letters, words and lines, and of course to the size; generally not recommended below 14 pixels.

Most screen readers also have problems with emojis, non-standard characters, and some punctuation marks such as the ampersand.

Alternative Text

Providing a textual alternative to the multimedia and photographic content of web pages is particularly useful for all visually impaired users who use screen readers. For this reason, it is necessary to make a site accessible by labelling everything precisely by inserting the ALT tags of the images and the description, including those of the button link.

For example, a correct “ALT” tag for an image depicting a “house with a garden photographed by the sea is “house with garden by the sea”, while an empty “ALT” field or with a wording such as “IMG_112.jpg” which makes impossible to understand what you are looking at.

Forms

Make sure that users can fill in all form fields on the page. For this reason, it is important to verify that all labels are correctly associated with the elements, making it possible to correct any form-filling errors. For example, “Enter your name here” instead of just “Name”, can facilitate a much better experience for the visually impaired.

Links

Links must make sense so that they are interpreted correctly by screen readers. A series of “Click here” buttons do not allow people to understand what will happen by clicking on that link. It is necessary to use buttons and links explaining the action, for example, “Click here for the Home page”. Making the link obvious and describing what the link is for in context will help screen reader users identify when a link is displayed.

Colours

There are certain algorithms and standards established by the W3C (World Wide Web Consortium, the international organisation that sets standards to ensure long-term web development) that indicate the optimal relationship between the colour of the page background and that of the text.

Don’t rely on colour alone to convey information. Colour can emphasise and make an operation more understandable, but it is ineffective for colour blind users or those using a screen reader.

Conclusions

Most of the technical requirements needed to make an accessible website can be integrated without particular issues or increased development times by a professional web design company.

If you’d like to know more about how to make a website more accessible, get in touch with one of our digital marketing experts.

 

Website Design Agency, Bristol UK

UK Digital Marketing creates high-quality, responsive websites that enable you to engage with mobile consumers effectively, regardless of the device they’re using.

We build bespoke packages for our clients and work directly with them to implement a tailored approach that suits both their immediate and long-term business plans.

Contact us to get started.