Vision Impairment Digital Accessibility Guide For Web/App Designers

From managing our bank accounts to ordering everyday necessities, these days, we use technology for everything. It plays a vital role in our lives. Since we rely on it so heavily, everyone should be able to access it, right? Absolutely. However, this is not always the case. Globally, over 15% of the population has a disability. Yet still, many commonly used websites and apps are inaccessible for people with disabilities.

Web accessibility is more important than ever – and it doesn’t just benefit people with disabilities. Many accessibility features are super convenient for everyone. Voice control? Captions? Simple, easy-to-read content? These are all accessibility features that we benefit from regularly. Simply speaking, accessibility makes everyone’s life easier.

Inaccessible websites may also present legal problems. Many companies have been sued over inaccessible content, costing them massively. On top of this, these cases have a detrimental impact on the company’s name and reputation. This article is not about the legality of web accessibility, but it’s just something I thought deserved a mention.

All in all, web accessibility is a big deal. It’s important for your customers, your business, and your company’s reputation. Now, it’s well and good to talk about the importance of accessibility but you may be wondering, how do I put this into practice? That’s where we come in. We’ve created a list of suggestions, categorized by the type of disability that the suggestions are tailored toward, to help increase your website’s accessibility.

Provide Alt-Text

It’s been said a million times. It seems like adding alt-text is the number one accessibility suggestion. It’s impossible to escape. But, yes, it really is that important!

Alt-text (AKA alternative text) is a short text description of an image given when a digital platform fails to load properly. However, it’s mostly used for accessibility purposes. Globally, 253 million people have vision impairment.
Many of these individuals rely on screen readers. Since screen readers cannot interpret images, they depend on alt-text to describe the image and its purpose.

All major digital platforms support alt-text. However, if you find this is not the case then you can provide a short description below your image. Keep your description brief but make sure to add in all the important details.

Bad example of alt-text: Cat in a bag. A better example of alt-text: Tabby cat in a blue rucksack.

If an image is purely decorative, then you don’t need to add alt-text. The accessibility purpose of alt-text is to provide people with context.

Important Information First

Frankly, most people do not have the time or the energy to read an entire text. For people with screen readers, reading a full webpage takes a long time – even at double speed. That’s why it’s our responsibility to put all the important information first. That way we decrease the chance of people missing out on anything vital.

The best way to do this is by using the inverted pyramid method. For this, we put essential information first. Then, we add important information. Lastly, we put information that’s nice to know.

Essential information includes:

Who?
What?
Where?
When?
How?

If your article is very long, then it may be a good idea to start with a content guide. This allows people with screen readers to know how far forward to skip in advance. It saves everybody time and lets them easily find what they need.

Use Color Mindfully

The topic of color is often brought up when talking about vision impairment accessibility. It’s estimated that there are 300 million people worldwide with color blindness. Overuse of color is not just an eyesore, it’s a major accessibility problem.

Use strong contrasting colors. According to WCAG guidelines, you should have a minimum text-to-background contrast ratio of 4.5:1. For strong color contrast, many people choose a white background with black text. However, people often find this difficult to read as it’s too bright and can cause eye strain. It can be particularly difficult for individuals with dyslexia. Gentle background colors such as peach or light yellow with black text are much more dyslexia friendly. If you have your heart set on a white/black theme, then make your background off-white and use a grey-black font. This will reduce accessibility issues.

Always avoid color combinations such as red and green or blue and yellow. They are difficult to read and can be very problematic for people with color blindness.

Consider using a monochromatic color palette. This means your digital content will be in varying hues of one color. Not only is this visually effective, but it’s also one of the most accessible choices for individuals with color blindness. Just make sure that there’s a discernable difference between the shades.

A great example of using a monochromatic palette is the BigSound Buzz website: ![BigSound Buzz Website, red monochromatic website with a record player illustration](

Another great example is the Evolve Wealth website: ![Evolve Wealth Website, blue monochromatic website with knight illustration, done in different shades of blue](

When designing for vision impairment, screen reader compatibility should be at the front of your mind. There are a few questions you need to ask yourself. Are all aspects of your webpage accessible solely from a keyboard? Is everything on my website accurately labeled? Do I have clear headings? If you have answered no to any of these, then some changes need to be made.

There are other important considerations that are often forgotten about. For screen readers, you must indicate what the language is in the HTML attribute. Words often cross over in languages but they have different meanings and pronunciations. The screen reader needs to know which language it should be imitating. For example, this current document is in <html lang="en">, with ‘en’ standing for English. If I were to write ‘hola’, then we would need to input <html lang="es">, representing that it is in Español (Spanish).

Use Headings

Headings are essential. Not only do they allow users to scan for information, but it also speeds up screen reader use.

Even sped up, it would take a screen reader a long time to go through an entire webpage. That’s why screen readers focus on different elements depending on which key/keys you push. When you press H/shift+h, the screen reader only focuses on heading elements. A good heading will describe exactly what the paragraph is about in as few words as possible. Accurate headings save screen reader users a lot of time.

Most people are only interested in certain information on a website. Headings allow individuals to skim through the bulk of the text to find what they need efficiently.

Label Content Properly

When grocery shopping, you would never buy a tin with an unclear label such as ‘food’ or ‘meat’. So, why do web developers think people will click on links with vague descriptions?

‘Click here’ and ‘more’ are link phrases that are still commonly found on web pages. Not only are these unhelpful, but they’re a downright nightmare for people using screen readers. All content should be labeled clearly with text. Your description should accurately describe what the control does or where it takes you.

Never use a graphic or symbol alone to indicate what an interactive element does. Screen readers cannot interpret graphics, so any graphics must be accompanied by a text description.

Predictable Layout

Accessibility demands predictability. It’s a WCAG guideline.

Predictability means that all components of your website or app should be in a spot that makes sense. People that rely on screen readers are often attuned to a specific web layout; this is what they base their navigation on. If you stray too far from the norm, then it becomes far more difficult for them to use your website.

It’s not only good accessibility practice to keep things in the usual place, but it’s also good business practice. People love the familiar. You’re likely to get fewer complaints and questions about your website if it reflects what people are used to.

Voice Recognition Compatibility

Voice recognition is an essential advancement in digital accessibility which can be particularly useful for people with vision impairment.

Voice recognition, formally known as automatic speech recognition, is when speech is used to control a computer. The computer picks up on the audio and can process it into a command or transcription.

Most computers and phones come pre-installed with this feature. However, it’s important that your digital platform is compatible with this feature. If your platform has a search bar, consider adding a speech search feature. You should also consider if your content is designed and coded so it can be used with speech recognition.

Good Quality Audio

Many people with vision impairment rely on their other senses to navigate life. Often, they rely on their hearing to independently access digital content. So, the audio components on your digital content must be up to scratch.

Make sure of the following things. That the audio is loud enough. That there are no crackles or faults within your audio. Lastly, there is no distracting music or sounds in the background. WCAG guidelines recommend that the speaker’s voice should be 20 DB louder than any background audio.

However, remember to always provide a transcript or text alternative to audio content. Some people may have audio-processing problems. Or they may simply want to consume their content differently. Options are always essential.

Never Use Color Indicators Alone

Often, people forget that color can be inaccessible. Because of this, there’s currently a lot of digital content that relies on color indicators. However, for people with color blindness, this often results in a complete lack of indication.

Color alone should never be used to convey something. Always provide text and a symbol to detail what the color change means. For example, if you input information incorrectly into a form, the box may flag red to highlight your mistake. However, a person with color blindness may not see this change. If you provide text alongside the box which says incorrect, then you leave less room for confusion.

When creating graphics, it may seem difficult to express what you mean without color. However, color is an addition not an essential. When differentiating data, consider using simple patterns and textures instead.

Avoid PDFs

PDFs should only be used for content that needs to be printed.

The main problem with PDFs is that they lack navigation. Content guides at the start provide a false sense of navigation, however, these are often faulty and unhelpful. For screen reader users, this is a huge problem.

PDFs are also usually content and text heavy. Due to their page sizing, they tend to compress as much content into a page as possible. This results in a lack of whitespace. Whitespace is the empty space around content. It allows us to perceive and read content more easily. Without whitespace, large chunks of text become difficult to read and end up causing eye strain.

If you cannot avoid using PDFs, then there are some ways to make them more accessible. Make sure that the PDF is searchable. Use a clear font that has a good contrast to its background. Don’t use color alone to indicate something. Lastly, make sure all sections are labeled accurately.

No Autoplay Feature

If your digital content has a video component, then it should not be set to auto-play.

People that use screen readers rely on sound. The screen reader allows you to navigate a page through audio that describes which component you’re on. Auto-play interferes massively with the screen reader, and it can be very difficult to turn it off.

Auto-play is not just an accessibility issue, it can also be an annoyance. If someone is listening to music or a podcast, then auto-play will interrupt this. No one enjoys unwanted interruptions. All video and audio components should be activated by controllable pause/play and volume elements.

Use Whitespace

A lot of people will argue that you need to make the most of a space. However, for accessibility design, the opposite is true. Empty space is a good thing, no matter what others say.

Whitespace is all the empty space around content and text. Not only does a lot of whitespace make your digital platform look modern and sleek, but it also makes your content easier to consume. A good amount of whitespace breaks up large sections of text, which is easier to read and zoom in on. This can reduce eyestrain and visual difficulties.

Make sure to take a break every so often. Everyone will thank you for it.