Back to Blog

Tips for an accessible UX Design

A common misconception is that accessibility requires a focus on users that have some kind of disability — but that’s not the case.

Imagine you were left-handed (and if you are, reflect on your left-handedness). You are part of a 10% minority in the world. Adjusting to certain tasks takes longer — but help in the form of left-handed stationery, sports equipment, etc. is available easily. Now imagine you are colour blind. Or visually impaired. Or clinically anxious. Or prone to seizures. Collectively, you are part of more than 20% of the population, but help is not as easily available, and even less so digitally.

So what is accessibility?

Accessibility is a measurement of a user’s ability to use products/services, the extent to and ease with which they can meet their goals. Designing with accessibility in mind enables people with a range of abilities and disabilities to perceive, understand, navigate, interact with, and contribute to the web.

A common misconception is that accessibility requires a focus on users that have some kind of disability — but that isn’t the case. Accessibility design is inclusive of everyone. Maximising ease of use to reach all ability levels leads to products that anyone can use and enjoy, whatever the context. Accessibility design only widens the user pool, and helps all users. The practice of designing to maximise the user pool is known as Universal Design.

Usability and accessibility are not the same thing, but there are definite overlaps between bad UX and inaccessibility. The way to look at this is that a bad experience for the general public is usually much worse for a disabled or impaired individual. Inaccessibility in a product comes between a user and his goal.

Here are 10 ways to make your website or app more accessible and inclusive:


  1. Enable keyboard navigation.

Keyboard? YES! Not only that there are some users limited to keyboard navigation due to mobility or dexterity issues, but some (power) users actually prefer using keyboard shortcuts.


  1. Maintain color contrast ratios.

The Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text. Check out their tool to check your own color contrast ratios. If you’re a designer using Figma, Sketch, or XD, we recommend using the Stark plugin for optimal results.


  1. Enlarge font sizes to assist visually impaired users.

Who knows, this might even help the user whose eyes are strained after a long day of work. Increasing the font size not only helps users that are visually impaired but also helps to make the browsing experience more strainless for the rest of us.


  1. Always provide (descriptive) alternate text on images.

This allows assistive technology, like screen readers and Google’s bots to do their job. Plus, alt text is proven to improve your Search Engine Optimization (SEO) since Google has increased the relevance of accessibility when it comes to general optimization.


  1. Pair important icons with label text.

This ensures screen reader devices can dictate the icon while reducing icon ambiguity for everyone else. Screen readers are getting better at their job, but we still need to be careful about how we pair the icons with the label text.


  1. Don’t rely exclusively on color.

Did you know color-blindness affects close to 10% of the population? Combating this can be as simple as pairing red error messages with error icons. Adding a red background to an error message does not help users that are color-blind, that’s why it is important to pair it with the adequate error icon.


  1. Include subtitles and sign language elements on audio and video components.

Ever been to a public place and wanted to watch YouTube but didn’t have your headphones? This accessibility feature is guaranteed to be welcomed by all. Adding subtitles to video content does take a bit of time, but it increases the overall watch-through rate of videos.


  1. Allow users to pause animations and videos.

Not only can these motions and sounds be distracting to users, but those with vestibular impairments might get dizzy or experience migraines. The simple solution? Let the user press pause. You also have to be careful when it comes to flashing animations as they might trigger users with photosensitive epilepsy.


  1. Make sure touch targets are large enough and reachable on mobile devices.

This doesn’t mean all the icons need to be huge, just that the touch area itself should be big enough for users to target comfortably with one finger while holding the device in hand. Also, make sure that the icons and buttons are not too close to the text, as it can cause navigation difficulties for some users. Google’s new Page insights scans your website for usability issues and notifies you whether your website is mobile-friendly or not.


  1. Consult with a digital accessibility expert.

Auditing sites and running usability tests are essential to validating accessible design features. JustTempalteIT is here to make your digital experiences inclusive and engaging, so let us know how we can help. Accessibility is a constantly evolving field in the tech space, and that’s why you need expert advice when it comes to your website’s usability.