Most overlooked web accessibility standards

Don't miss these 10 features!

By Tyler Sanz and Katie Blaszkiewicz, Accessibility Taskforce

A person using a braille screen reader.

A person using a braille screen reader.

The importance of addressing accessibility in web content

There are over 7 billion people in the world today. Of those, 15 percent (or over 1 billion people) live with a disability. Often, people with disabilities have difficulty accessing and interacting with content on the internet and require the use of assistive devices—like screen readers, voice recognition programs, and screen enlargement applications, among others. By not addressing accessibility compliance standards, web content creators are unintentionally leaving a large group of people without a viable means to easily access their content.

That’s why it’s so important for web accessibility compliance standards to be met—so that all people, with or without disabilities, can have equal access to the same content. By building accessible web content, we can create truly inclusive communities, bringing together people from all facets of life.

Before we dive in, let’s review the difference between A, AA, and AAA when it comes to accessibility compliance. You’ve likely come across these levels before, but what do they mean?

Level A: This is the minimum level of compliance for web content accessibility; most people with disabilities will find this content to be inaccessible. At this level of compliance, web content has several addressable items that need to be improved so that people using screen readers or other assistive devices can access it.

Level AA: This is the mid-tier level of compliance for accessibility and must meet all the requirements of the previous level A. Web content that meets this level of compliance will be accessible by most users—but some people with disabilities will still have difficulty interacting with it. Most companies strive to meet AA compliance when creating web content.

Level AAA: This is the highest level of accessibility compliance; almost everyone should be able to interact with web content at this level. Level AAA must meet all the requirements of the previous levels as well as the requirements for this level. While this is the gold standard for web content accessibility, not all content can meet the requirements of this level.

The 10 most overlooked accessibility features in web content

The following are the most often overlooked accessibility compliance standard requirements for web content. By addressing these features, we can help build inclusive web content that’s easily accessible for everyone.

1. Low contrast on text

According to WebAIM’s analysis of the top 1 million home pages, 85 percent of homepages have issues with text contrast color. Low contrast color on text can cause people with low vision or color blindness to have difficulty accessing the content on a web page. Text contrast colors that are at least 4.5:1 meet the AA standard for accessibility requirements and ensure that most users will be able to read the text displayed. To meet AAA compliance standards for accessibility, text contrast color should be at least 7:1.

A series of three images with overlaying text to show how too low or too high of contrast can make text unreadable

Contrast that is too low or too high can make text unreadable. The optimal solution is a light background with dark type.

2. Missing alternative text for images

Images displayed on web pages generally require some form of alternative (alt) text—text that’s used to describe images to people who are blind or have low vision. Alt text dramatically increases the accessibility of sites for people using screen readers. Without it, screen readers can’t recognize the images on a page. It’s important to note that not all images require alt text—for example, those that are purely decorative don’t need it, as they don’t inform the presented content.

An image of a small cactus in a clay pot with alt text describing it when hovering over the image as well as listed below it.

A representation of alt text.

3. Missing link text

Links are used as a way for people to navigate to, from, and between different web pages. Missing link text leaves people—especially those using screen readers—unable to discern the purpose of a link or where the link will take them. By either hyperlinking the text that describes the link or using hyperlinks for alt text in images, web content creators can ensure easily navigable web experiences for everyone.

An ad for organic pet food features a white panting dog. When hovering over the button with the words "ORDER NOW" on it, the alt text pops us as "Link to shop pet food."

An example of good alt text.

4. Ambiguous link text

Much like links that are missing text, ambiguous text can be problematic for accessibility compliance standards. Link text like “learn more” or “click here” doesn’t convey the purpose of the link and can cause confusion for people using screen readers. To ensure that all content on a site is clear and easily navigable, link text should always convey the purpose of the link or include alt text along with calls to action like “learn more” to define the purpose of the link.

Website banner for a creative agency with three employees looking at a computer. A button reads "MEET THE TEAM."

An example of ambiguous link text with an unclear destination.

5. Too many navigation links

Screens and other assistive devices must read through navigation links before getting to a web page’s primary content. The reading of navigation links at the beginning of a web page can cause lots of confusion for people using assistive devices trying to access that content.

For example, many government sites have several navigation links at the top of their web pages. Screen readers and other assistive devices have to make their way through those links before moving to the main content. So, having a way to skip over those links (or limiting the number of navigation links altogether) increases accessibility. Including things like a search bar, sub navigations, or skip navigation links can help to reduce confusion for people with disabilities accessing web content.

6. Empty form labels

Forms are some of the most commonly interacted with pieces of web content today, covering anything from simple subscription forms for user information (such as email, name, address, and more) to job application forms. Yet, issues will arise if a form is missing labels for the fields where data is supposed to be input. A simple fix is to include labels for all fields where data needs to be entered. This makes it easier for people of all abilities to quickly fill out forms online.

Two white rectangle example forms against colorful backgrounds ask the user "What actions are you taking today to fight climate change?" The form on the left has a label telling the user to type their answer in the comment section, while the one of the right does not have a label.

Side-by-side comparison of one form with a label and one without.

7. Unclear form controls

Many of the forms used for web content need controls for navigating between pages, inputting information, submitting the form, and more. A “next page” or “submit form” button is self-explanatory, but other form controls might be ambiguous. It’s essential to ensure that form controls are clearly defined so that people using screen readers or other assistive devices can easily navigate the online forms they’re working on.

8. Uncontrollable time-outs

Given that the use of assistive devices often makes it take longer to fill out online forms, people must be able to control the amount of time they need to complete any forms they’re filling out. Those filling out time-sensitive forms should know when their session is about to expire and be given the option to extend the time limit as required. Control over timing provides those using assistive devices with the time they need to complete forms.

9. Heading level order

Using the appropriate order for header sizing is another way web content creators can help make their web pages more accessible. Headers should always be ordered from largest to smallest. People using screen readers need headers to be ordered correctly to have the information accurately relayed to them. For example, suppose a level 3 header is directly above a level 1 header. This could cause a screen reader to read the information out of order, thus confusing the person using the screen reader.

10. No keyboard focus indicators

All web users would benefit significantly from keyboard focus indicators, which show a person’s current location on a website. As part of accessibility compliance standards, web pages should be entirely navigable through keyboard strokes—no mouse required. People with disabilities, such as those who are missing limbs, would greatly benefit from the ability to navigate websites through keyboard strokes, with appropriate indicators for their position on the page they’re on.

Conclusion

At Indigo Slate, we care about creating amazing web experiences for everyone. In our journey to do so, we’re aiming to make all of our web content meet today’s accessibility compliance standards. By addressing the 10 most overlooked accessibility features for web content, we’re doing our small part in creating accessible web experiences for all. It’s at the core of our corporate identity that people matter, and by ensuring that our web content is accessible to everyone, we’re showing it.

Let's connect about enhancing your customer experience: info@indigoslate.com.

Disclaimer: At Indigo Slate, we care about addressing accessibility issues and adhering to accessibility standards. This blog post represents our aspirations, and we are working to improve upon our accessibility practices.

technology

Share this post:

{
  "appIsLoaded": false,
  "appIsLoadedIntroPlayed": true,
  "is404": false,
  "isStoryblokPreview": false,
  "ui": {
    "isMenuOpen": false,
    "headerStyleMode": "light"
  },
  "a11y": {
    "reduceMotion": false,
    "highContrast": false
  },
  "browser": {
    "name": null,
    "w": 0,
    "h": 0
  }
}