Designing For Inclusive User-Experience

In this talk, Kayla Sween shares how to avoid SUX (“Some User Experience”).

Here’s the talk link 📹

What is “SUX” (Some User Experience)

Web accessibility is about designing and building for every kind of person. It isn’t restricted only to the visually/hearing impaired or people with disabilities.

We want everyone to be able to navigate, use, and consume the contents of our website. So we need to make sure that we’re developing with everybody in mind. Not just the common case.

SUX Tweet

Important Terminologies

Web Content Accessibility Guidelines 2.1

The Web Content Accessibility Guidelines 2.1 are a set of standards for designers and developers to follow so that they can design and build inclusive experiences.

Assistive technologies

They are the set of hardware or software that help users to consume content. Some examples are:

  • Screen readers
  • Screen magnifiers
  • Dictation Software

How You Can Avoid “SUX” When Building Websites

Use Clear Page Titles

In the <head> tag of your HTML, make sure that you add a title because this is the first thing that will be read by a screen reader.

Also, setting the title allows users to manage their tabs easily since they can understand what each tab is for and what website they’re on.

2 <title>Home | My Website</title>

HTML Title Tag

If you’re using React.js, react-helmet helps in managing the titles of your React App

Have Sufficient Contrast Between Foreground & Background

Text over images looks nice; however, if we’re not careful, we might have a low contrast between the foreground and the background image. This will make the text less visible and much harder to read.

A cool browser extension you can use to test whether or not you have sufficient contrast is color contrast analyzer

The good news is you don’t have to sacrifice aesthetics for accessibility.

Adding an overlay to the background image makes the foreground text a lot easier to read.

Here’s an example:

Overlay Image Example

On the other hand, if you’re using solid colors as your background, you can test the contrast between the text color and the background color using tools like Colorable or WebAIM Color Contrast Checker

To further enhance the inclusiveness of your website, you should add meaningful content to your links. Some users set the screen readers only to read headings and links when they visit a page.

Using “click here” is not considered descriptive, and is ineffective for a screen reader user. So now, they will have to adjust their screen reader settings to read the entire content to understand the context.

Non-screen reader users share a similar experience, because “click here” links are not easily scannable.

Here are two examples of important links:

“For a complete list of all available HTML tags, visit our HTML Tag Reference” (source: w3schools )

“The IRS recommends using its online Where’s My Refund Tool or the mobile app, IRS2Go. These systems are updated once every 24 hours and are the fastest ways to track your refund.” (source: USA Gov )

Having meaningful names for links is also useful for SEO (Search Engine Optimization) and will make your webpage rank higher in search engines.

Associate Form Elements With Their Labels

Associating form elements with their labels increases the clickable area. This is crucial for mobile users since they use smaller screens.

2 <label for="name">Name:</label>
3 <input type="text" id="name" />

Here’s an example of an accessible checkbox. Much easier to use on mobile because users can click the label to check the box. Accessible Checkbox

All you need to do to achieve this is to use the for attribute on your label and match it to the id on your input. To test that everything works correctly, clicking on the label will bring focus (a border will surround the element) to the input.

Make Your Website Keyboard Accessible & Add Visual Focus

Some users only use a keyboard to navigate a website by using the Tab key. These users might have dexterity issues, or they might be using a screen reader.

You need to make sure that every element a user can interact with can receive visual focus, an indicator that this element is clickable.

Setting Text Alternatives For Images

the <img> tag in HTML has an "alt" attribute that will render a description of the image in case the image doesn’t load. However, this attribute is important for screen reader users because it helps them determine what the images are and what their context is.

When setting the “alt” attribute, make sure you give it a value that is relevant to the context that it’s in.

Here’s an example of an image with good alt text:

Image with good alt text

1<img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar" />

The exception to this is when you have a purely decorative image, like a line separator or an image that you’re using as a bullet inside a list. Then you can use an empty alt attribute.

Some cool tools you can use to check the accessibility of your site automatically:

While these tools are awesome, the best way to test if your website is accessible is to use it the same way a user will.

Use the Tab key to navigate the entire website; make sure that everything is readable, and that everything works.

For screen readers, you can use:

And to check the color contrast you can use:

Found this article useful? Make sure you share it with other people on Twitter