Website Accessibility: 5 UI Design Tips to Avoid "User Blindness"

I had a dream last night. I needed to call someone to let them know I was running late for our meeting. Easy task, no? I thought so too. Then I realized I was also trying to balance seven apples, a pile of A4 paper and a pair of running shoes in my arms. Besides, the screen of my phone featured a single, completely obscure tone. It made browsing my contact list impossible... These are times you realize the need for website accessibility.

Color blindness affects 4.2% of the world's population. But what percent of the websites does user blindness affect?

We know from the World Health Organization research that over a billion people live with some kind of disability. Designing websites without taking accessibility requirements into account indicate blindness to these people. Website accessibility holds the key requirement for good design to create websites for everyone.

In this article we cover:

• What constitutes website accessibility
• Why website accessibility matters
• How to make your websites accessible

What constitutes website accessibility?

Accessibility comprises an attribute of a methodology called inclusive design. Inclusion means creating products usable by a various range of people.

Website accessibility involves designing websites which people with different disabilities can use comfortably. These include visual, auditory, neurological, cognitive, speech or physical impairments. And yes, it also benefits people without disabilities.

We at UX studio have a passion for understanding how our users really work. Designing for accessibility forms a core value in our process because we know we have diverse users. Therefore, we must empathize with their unique conditions, situations, and needs.

To make a website accessible, we need to understand user diversity. We must also learn from as many people as possible, with a range of perspectives.

Does accessibility matter?

Yes, it does. According to diversity, different kinds of people might struggle in some ways to use our website. Accessibility awareness helps us empathize with people by giving valuable insights about their conditions and understanding their motivations. And it actually covers more than that.

Accessible thinking doesn't stop at seeking solutions for people with permanent disabilities. Considering accessibility fundamentals may provide better usability for everyone else. If we take care of people who live with one arm, we also benefit the ones who have a broken one. Everyone can have special needs.

In addition to those really cool benefits, accessibility really benefits SEO. If you’ve optimized a page for search engines, it doesn’t necessarily lead to better accessibility – and vice versa. But if you know the points where accessibility and SEO overlap, it might lead to a better result.

Overlapping parts include:

• Proper semantics while writing HTML
• Clear page titles and structure
• Image alt attributes and image captioning
• Link anchor text
• Transcripts for video and audio content

Basically, accessibility helps keep us from accidentally excluding potential users. If we'd like to reach as many users as possible, we shouldn't just ignore so many of them. We have to take the necessary steps to assure a broad spectrum of visitors can use our website.

A practical guide for making your website more accessible

1. Always provide text alternatives to non-text content

We base the full perception of non-text content on the website on our auditory or visionary conditions. When an e-learning course uses image-only content in an exercise, students with poor vision may miss significant information.

Or we can completely lose the attention of those who have hearing difficulties when we provide video content without any text alternative.

Images become accessible when we add a proper description which screen readers can catch. According to the purpose of the image, this text can take the form of a name which labels the role of the image, or a straightforward, descriptive identification.

Images used for visual purposes only – such as decoration or illustration – lie beyond the scope of assistive technology, so we don't need to label them at all.

We also need to provide access to our video or audio content for people with hearing impairments. Deaf or hard of hearing users can have difficulty or even find it impossible to perceive them without captioning or a transcript.

Our video content always needs precise and synchronized captioning which users can switch on or off based on their needs and preferences. Audio content becomes accessible when it has a full-text transcript. We can make them available on a separate web page or as a downloadable file.

Remember that not only users with permanent disabilities need video captions/subtitles or audio transcripts. Anyone can land in such a situation. People using our website in a noisy environment would greatly appreciate the above solutions.

When you provide text alternatives to non-text content, you definitely help people with perceptual impairments in gaining all the information you have a passion to provide them.

2. Think about color and contrast

Colors help us highlight parts of the page we want to communicate firmly. They also draw the user's attention to them for important information.

But if you use color alone, you make it hard for people who have poor vision or color blindness to fully get the content of the section.

Color does not provide the only way of highlighting or warning.

When designing elements with different background colors, consider playing with patterns too. As long as not everyone can distinguish colors, using different patterns can help make the difference.

When you mark elements with colors, take care to use enough difference in intensity. Users with color blindness or poor vision can fully perceive visual elements with strong light and dark contrast too. But it can help everyone visiting the website under poor conditions, for instance, trying to fill out a form in strong sunlight.

Count the line thickness and size contrast among your weapons too. Making key information much bigger than its environment or bolding the call-to-action text can help.

We need enough contrast between the text color and the background behind it. This includes text on color or gradient backgrounds, images, buttons, diagrams, and maps. This helps people with low contrast sensitivity, narrow range of sight or color blindness to get the information.

3. Allow access to keyboard navigation

People with motor disabilities can not physically navigate a mouse and use the keyboard instead. Blind users also use a keyboard while browsing. Therefore, we need to provide them with all functionality on the website available by mouse also available by keyboard.

Keyboard navigation crucially focuses on the elements active during navigation. This gives a complete experience only when the user always knows their exact location on the page. So keep the keyboard focus visible for all elements of page navigation, and ensure the focus order follows an exact sequence

4. Don't kill accessibility through form placeholders

By designing forms, we have to take care of placing any information within a form field. Some screen readers cannot recognize this text, so they cannot read it aloud. Consequently, blind users or those with a visual impairment may miss the label or hint completely.

Place it outside its connecting field. It can complicate matters when we want to save space. In this case, we can use floating labels which appear inside the field until the field comes into focus. After that, it sticks on the border of the file.

Placeholder text usually lands inside a form field. It provides an additional hint or example of the information required. Many issues come up with placeholders when we overlook them from the perspective of accessibility.

First, poor color contrast in the placeholder text causes even worse readability for users with visual impairments. We can easily check it when we try to read the text while winking a little. Difficult, no?

Placeholder texts require really good short-term memory because they typically disappear when we start typing. People with ADHD may have memory issues, and I confess I do as well.

We can help people – with or without visual impairments – to always get the label and the hint by putting them outside the form field. We can also miss the hint instead of using it as placeholder text.

5. Carefully experiment with noise, movement and flashing

I mentioned the importance of giving the user control over the video or audio contents on the website. It doesn’t just mean we all like having the control in our hands.

Moving or noisy content can really overwhelm some people. A person with autism might experience sensory overload due to noise or rapid movement.

We can easily include these users if the main page doesn't automatically start with a video or background audio sound. But if it does so, we need to provide users the ability to pause, stop or adjust the volume of this content.

Flashing or content can trigger photosensitive reactions. It may cause seizures in those with epilepsy. Ideally, we should avoid flashing content entirely or use it only in a way that does not come with known risks.

+1 Read more how-tos from us

Did you know you can make your product inaccessible by using the wrong UI elements? If you would like to know how we successfully solved accessibility issues from one of our projects, read our case study!

Conclusion: Website Accessibility: How to avoid user blindness

I hope this guide helps you get to know accessible thinking and avoid the trap of user blindness while designing a website. Accessibility means lifelong learning for us, and the responsibility of designing products people can fully connect with.

If you engage with this topic as much as we do, read our case study about an app for people with disabilities.

Want to read more?

Want to know more about the UX process? Download our free ebook Product Manager’s Guide To UX Design to read our UX case studies and learn about tools and tricks.

We also have additional reading for you, an actual hardcover Product Design book as well! And we ship it worldwide!

More into in-person learning? Reach out to if you are thinking about organizing an in-house UX training for your team. We sure have some ideas! ;)