8 Ways to Amp Up the Accessibility of Your UX

Contributed content / By Mansi Dhorda / 14 November 2019

Creating an accessible website isn’t a difficult task. Find out the quickest tips for building a user-friendly platform for different users all over the world.

Website or digital accessibility involves building websites and digital applications that individuals with disabilities can also use. With the ever-growing role the internet is playing in our lives, web accessibility has become a matter of debate.

While opinions about web accessibility vary, the number of lawsuits filed in federal courts under Title III of the ADA is growing swiftly. Title III prohibits discrimination on the basis of disability within public places and commercial facilities.

Federal courts witnessed a 177% increase in these lawsuits, going from just 814 in 2017 to 2258 in 2018. The surge in these cases came after New York federal judges allowed website accessibility cases to move to discovery in lawsuits against the retailer Blick and restaurant Five Guys

If you don't want your business to end up on the wrong side of this debate, you need to make your website accessible enough that it will enable site visitors with disabilities to have a smoother experience. Fortunately, making your website accessible doesn't have to be difficult and expensive.

Here are a few simple steps to make your website's UX more accessible.

8 Tips for Improving Your Website’s UX Accessibility

  1. Write correct image alt text
  2. Enable efficient keyboard navigation
  3. Go beyond color-coded instructions
  4. Have appropriate focus indicators
  5. Improve form accessibility
  6. Structure headings and content correctly
  7. Provide descriptive links
  8. Use ARIA whenever necessary

1. Write Correct Image Alt Text

Blind users or people with severe visual impairment often rely on text readers or screen readers to understand online content. A screen reader usually reads and converts the text into speech. You should, therefore, have concise but accurate alt text to describe the images.

Try to describe the image as clearly as possible using precise words. If the image includes any text, make sure to include it in the alt tag as well. For example, if you have a picture of blueberry pancakes. You want to have a descriptive alt text that goes beyond ‘pancakes,’ but you also don’t want to overwhelm or stuff. This can be seen in the example below:

write correct image alt text

Moz

One example has different and random keywords for a simple picture of blueberry pancakes. Of course, you don't have to follow this rule for images intended purely for aesthetics. In this case, you can use an empty <alt> attribute so that the screen reader will skip it.

It can also help improve your on-page SEO, helping you increase the search engine ranking. Accurate alt text provides website crawlers with the context, ranking your page higher than the ones without proper alt tags. Make sure to use accurate alt text for all your visual content, including images, infographics, and videos.

While this can be quite a daunting task, depending on the number of images your website has, there are easier ways to automate this process which we will discuss at the end of this article.

2. Enable Efficient Keyboard Navigation

Although the mouse offers quick navigation, people with motor disabilities, blind people, and people with repetitive stress injuries can't use it.

They have to rely on a keyboard and in some cases, input devices such as single-switch input or mouth stick, to surf the web. This is why it is necessary to ensure keyboard-only users can navigate your website as efficiently as one using a mouse.

Usually, you have to use the Tab key to navigate through interactive elements such as inks, buttons, or input fields on a web page. Make sure this navigation is logical. It should follow the page’s visual order.

You can also break down long content into small paragraphs with anchor links. It will help keyboard-only users to skip the irrelevant content and jump directly to the desired one.

3. Go Beyond Color-Coded Instructions

Color-coded instructions have a strong aesthetic appeal. However, users with vision disabilities such as color blindness will find them useless as a visual cue. On the other hand, people with learning disabilities find color-coded instructions quite useful.

In other words, you have to use color codes in combination with other visual indicators such as text labels, asterisks, or symbols. You can also use whitespace or borders to separate different sections of the content. For complex visual elements such as graphs and charts, you can use non-visual information like shape, labels, and size to send your message across.

4. Have Appropriate Focus Indicators

Focus indicators are visual cues that show up when selected. They are usually glowing outlines or texts. Most web browsers have a CSS pseudo class to show these focus indicators. As seen in the screenshot below, different sections of the website are highlighted or in specific colors.

appropriate focus indicators

accessiBe

If users move their mouse over them, the indicators will become more prominent. However, vision-impaired users can't see these visual focus indicators. For example, people with motor disabilities can't access hover-only menus and buttons. So, you should avoid using these elements on your website.

You need to replace them with something that visually challenged people can understand. You can use simple alternatives like contrasting patterns or use both, colors and symbols. Keep colorblind users in mind, you should also avoid using wrong color combinations such as green-red, green-brown, blue-purple, green-blue, and light green-yellow, among others.

5. Improve Form Accessibility

Online forms are one of the crucial elements associated with web accessibility. Most websites have online forms with placeholder text as labels. Unfortunately, placeholder text is gray and has low contrast, making it difficult to read for visually challenged users.

This is why you should use well-positioned and descriptive labels for all the fields in your online forms. Use the <label> tag or an ARIA landmark to make it easier for visually-impaired users to fill out the form. It is better if the labels stay put when you are filling out the form. With this arrangement, screen readers can keep track of the progress, and users also don't lose context.

6. Structure Headings and Content Correctly

The heading structure plays a critical role in navigating the content using screen readers. However, you need to use headings such as <h1> and <h2> correctly to maintain the hierarchy of the content on a webpage. Avoid using headers just because they look aesthetically pleasing.

Always use <h1> tag for the main title only whether it is for a homepage or any other page. Never skip headers. For example, don't jump from <h1> tag to <h3> or <h4> directly. Make sure to organize your content into a navigable hierarchy for screen readers. You should create a new CSS class to style your text if required.

7. Provide Descriptive Links

Once again, keeping the screen reader-dependent users in mind, you should use descriptive links in your content. One of the most common mistakes is using text such as “click here for more information” or “check out this post.” Instead, you should use text like “learn more about XYZ product by clicking the XYZ section.”

As most screen readers will announce the presence of a link, you don't have to use words like "link" or "website" in the link description. It leads to redundancy. Descriptive text explains the context of links not only to screen readers, but also to search engine crawlers. As a result, it can also help improve your on-page SEO and search engine ranking.

8. Use ARIA Wherever Necessary

ARIA (Accessible Rich Internet Applications) role and landmarks can help define various navigation areas of your content. They are particularly useful in creating efficient keyboard-based navigation.

The most common ARIA landmarks are:

  • role=”banner”
  • role=”navigation”
  • role=”main”
  • role=”complementary”
  • role=”contentinfo”
  • role=”search”
  • role=”form”
  • role=”application”

You can add ARIA attributes to your HTML in the same way you would add classes to HTML. When screen reader reaches an ARIA landmark, users can immediately go to the relevant section. 

Many functions requiring ARIA attributes are available as HTML5 elements. However, screen readers work better with ARIA landmarks compared to their HTML5 equivalents. So, it is recommended to use ARIA landmarks wherever necessary.

Take Your Website’s Accessibility to the Next Level

The rising number of federal lawsuits and growing social awareness has brought web accessibility back into the limelight. As a web designing agency, it is your moral responsibility and also a wise business decision to build websites with accessible UX.

Making these changes manually is no easy feat, unless there is a dedicated developer with the right expertise. However, web accessibility tools such as accessiBe can make the process a lot easier and quicker. Just a few small steps will take your web platform to new heights.

owner
Lead capture icon

WANT TO HIRE A SERVICE PROVIDER?

Based on your budget, timeline, and specifications we can help you build a shortlist of companies that perfectly matches your project needs. Get a free shortlist of best-fit companies from a Manifest Analyst.

TELL US ABOUT YOUR PROJECT