website-accessibility-image

UX Design & Accessibility

Accessibility should equal  Usability for all.

A design is only useful if it’s accessible to the user:  any user, anywhere, any time. 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 only contained in buttons or images? That might hide them entirely for someone who can’t “see” them the way you can. 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 not??) check into third-party options to provide that support. For WordPress sites, there are plugins available that offer translation (check this out). 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.
  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”, your camera’s default title “IMG_date_size.jpg”, or even worse, a long string of numbers and letters.

There are two ways that you can present alternative text:

  1. Within the <img alt=”text“> attribute of the image element.
  2. 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 <img alt=”text“> 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.

Pro tip: Your SEO can benefit from your alt text too!

  • Don’t forget your font choices too – check my article here for basic guidelines.

Motor/Mobility

This category doesn’t just extend to problems with the use of the  hands  and/or  arms  (which are very likely to cause problems with web accessibility), but also with other muscular or skeletal conditions. If, for example, your company 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. So why wouldn’t you consider your website navigation similarly?

What you can check for:

  • 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.
  • Focus indicators (as Visual #3 above)
  • Accessible forms. Users who cannot use a mouse navigate web pages with the keyboard. Forms that use JavaScript to manipulate form data, set focus, change form elements, or submit forms, can create interactions that only work with a mouse. Ensure that your web site forms can be understood and operated with the keyboard alone.

*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.

Keyboard navigation throughout the website

Many folks will choose to skip the mouse and 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? The easiest thing you can do is add  Captions, captions, captions!  Auditory disabilities affect the hearing and come in varying degrees of severity, up to and including total deafness.

But guess what else is affected – how you visit websites while in public areas. Sometimes reading the captions is just more polite than forcing everyone around you to listen to your video.

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

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!)

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

Designing Accessible Websites

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.

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.

In fact, it should be a no-brainer: an accessible website is easier for everyone to visit, not just for visitors with disabilities. It also improves your SEO, search engine optimization, and it can even include making your website deliver faster, which is great for visitors with unreliable internet speeds.

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 there’s no reason not to at least check your website and see how it ranks.

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!)

Conclusion

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.

Geek out some more with some of my other articles on web accessibility here: