UX Design & Accessibility

Accessibility should equal Usability for all.

A design is only useful if it’s accessible to the user: any user, anywhere, anytime. We often mistake the concept of accessibility as involving people with disabilities. But accessibility is simply a function of access. If UX is your user’s experience, then an accessible UX just means that more users can have a positive digital experience on your website. And that means a more positive experience with your company.

The good news is that there are standards for accessibility, and these are easy to understand. Better still, if we consider them at the start of the design process, we’ll find them easy to implement. People with a visual impairment, for example, may not be able to read the text on your website. However, if you have properly formatted your text, they’ll be able to use screen reading software to hear your words.

And think about interaction with your site’s content. Is important content hidden in buttons or images? How will a user with limited vision or limited physical mobility figure out they need to click on that button or image?

Designing for accessibility takes some forethought. Examine your options in the planning phase and stay focused on accessibility throughout development. It’s easy to get caught up in the substance of your work and forget about this essential point. Keep it in mind, and test your designs often to be certain that your efforts are successful.

Types of User Needs

We are all, designers and users, different.

Language

Is your website targeted to just one locale or geographic area? That doesn’t mean that the design you do say, in English, is only going to be read by English speaking people. Did you know that only about 25% of web users speak English as their first language? What happens when your site is translated?

If you’re using designs that are built by others, make sure they’re “translation-ready”. If you’re determined to use one that isn’t translation-ready (for goodness sake, why??) check into third-party options to provide that support. For WordPress sites, there are plugins available that offer translation (check this WP Beginner article for some advice). Depending on the plugin you choose, please remember to include language switchers in the header or footer so visitors not only know they have an option but they can choose their preference easily.

Visual

Long-sightedness, blindness, colour blindness, are all forms of visual abilities you should consider in your design. What you can check for:

  1. Colour contrast. Ensuring your text and buttons have significant colour contrast is a pretty simple method. Here’s one simple tool you can use: https://webaim.org/resources/contrastchecker/
  2. Don’t rely on colour changes for visual cues. When showing errors on the screen, add an icon or include a title to the message. Consider adding a visual cue such as font weight or underline text style to linked text in a paragraph, so the links stand out. And if you need to include graphs and charts, try making them in black and white first to see if you can still understand them.
  3. Use focus indicators. Have you noticed the blue outlines that sometimes show up around links, inputs, and buttons? These outlines are called focus indicators. Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating your site. These are great for visual and mobility impairments including carpal tunnel injuries – AND for those who navigate websites using their keyboard instead of a mouse!
  4. Write useful alt text for images or other non-text content. People with low vision often make use of screen readers to “hear” the web. These tools convert text to speech so that the person can hear the words on a site. So make it descriptive – not just “picture”.
    • There are two ways that you can present alternative text:
      • Within the <alt> attribute of the image element.
      • Within context or surroundings of the image itself.

This needs to be done even if the image is purely decorative or if it creates redundancy because the surrounding context already explains the content. Having an empty <alt> attribute will make screen readers skip it. If you don’t write any alt text, some screen readers will read the file name to the individual. That’s the worst experience you can provide.

Don’t forget your font choices too – check this article for basic guidelines.

Motor/Mobility

This category doesn’t just extend to problems with the use of the hands and arms (which are very likely to cause problems with web accessibility), but also with other muscular or skeletal conditions. If, for example, your web design were to feature in a trade-show booth, you’d need to consider how someone in a wheelchair could access that booth, and turn around and exit it on completing the task. What you can check for:

  1. Focus indicators (as #3 above)
  2. Make sure your forms are accessible. Using placeholder text as labels are one of the biggest mistakes when designing a form. I’m guilty of this one myself in trying to streamline a design. But, also like me, you usually forget what you’re even writing, so it’s hard to know what the fields are about once the label is gone. People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The <label> elements are read for each form control. Any non-label text, as placeholder text, is usually skipped over. Read some more guidelines here: https://webaim.org/techniques/forms/
  3. Support keyboard navigation. Keyboard accessibility is one of the most critical aspects of web accessibility. People with motor disabilities, blind people that rely on screen readers, people that don’t have precise muscle control, and even power users are dependent on a keyboard to navigate content.

If you’re like me, you’ll typically use the Tab key on your keyboard to navigate through interactive elements on a web page: links, buttons, or input fields. 

As you navigate through a page, the order of the interactive elements is essential, and the navigation must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom — header, main navigation, content buttons and inputs, and finally the footer.

A good practice is testing your site only using a keyboard. Use the Tab key to move through links and forms. Test using the Enter key to select an element. Verify that all the interactive components are predictable and in order. If you can navigate through all your site without a mouse, you’re in a good spot!

Auditory

Do you post lots of videos on your website or social media? Captions, captions, captions! Auditory disabilities affect the hearing and come in varying degrees of severity, up to and including total deafness.S

Learning

Learning and cognitive abilities can also influence accessibility. Do you regularly write content that you’d need a university degree to comprehend? There are lots of tools available to help make sure your written content is easy to understand. Having said that, it can be very difficult to translate technical language into an accessible format, and there may be occasions when it just seems impossible, or when that language is necessary (for example, in a blog post).

But if you’re trying to capture the attention of a busy, multitasking individual on your homepage, you might want to consider simplifying your message.

Multitasking

Now, think about yourself as a user. Do you ever try to use your cell phone while you’re walking around? And no, I’m not just talking about texting and walking – watch out for that telephone pole!

How does it feel when you’re trying to multitask? How about when you’re looking for a business on your phone, and trying to find their address or phone number directly from their website while on your mobile? Do you abandon the website and try something else instead – or abandon the potential visit in frustration?

As designers, we have the power and responsibility to make sure that everyone has access to what we create regardless of ability, context, or situation. The great thing about making our work accessible is that it brings a better experience to everyone.

Designing Accessible Websites

There’s a myth that making a website accessible is difficult and expensive, but it doesn’t have to be. Designing a product from scratch that meets the requirements for accessibility doesn’t add extra features or content; therefore there shouldn’t be additional cost and effort.

Fixing Existing Websites

Fixing a site that is already inaccessible may require some effort, though. 
If you do a quick search for accessibility checks for website, you’ll find a range of options available, most of them for free. So what are you waiting for?

IDI Web Accessibility Checker: https://achecker.ca/checker/index.php

I used the one listed above to check my own site while writing this, and was both happy and disgusted to be told that I have only 13 errors on my homepage. Luckily, those were relatively minor and I fixed them quickly and easily. BUT it also told me I have 371 potential violations (yikes!)

web-accessiblity-check-results-for-brightwebs-website

As designers, it is our responsibility to champion accessibility. It is often forgotten or merely added as an afterthought. But with accessible design, we make technology usable to all people regardless of their abilities, economic situation, age, education, or geographic location.

Design responsibly. Make the online world better, for everyone.

Leave A Comment

Your email address will not be published. Required fields are marked *