What is website accessibility?

Most people think of website accessibility in terms of how it affects people with disabilities. That's certainly an important consideration, but accessibility is about much more than that. 

Making your website accessible enables people with a wide range of abilities to use it, including those who are blind or visually impaired, deaf or hard of hearing, or have limited mobility. 

This post covers

• What does “accessible” mean?
• What is web accessibility?
• WCAG standards
• What makes accessibility so important?
• Most common accessibility problems
• Accessibility best practices
• Best Accessibility tools

In other words, making your site accessible opens it up to a larger audience, which can be great for business. But what does 'accessibility' mean in practice? And what do you need to do to make your website more accessible? We'll explore these questions in this post.

What does “accessible” mean?

You probably have an idea of what “accessible” means. For example, you can walk upstairs to enter a building. Certainly, the building is accessible. But for the millions upon billions of people internationally who are disabled, impaired, or just getting older, what “accessible” means shifts. 

Think about how wheelchair users are generally unable to use stairs. In many places, they can access buildings through a ramp instead. A ramp is obviously a different way to access the building. Something being accessible is just that- different ways that allow something to be used.

Web advocate at Google, Rob Dodson, sums it up. He says accessible means “giving users with disabilities or impairments alternative ways to use your products.”

What is web accessibility?

Like the ramp example, digital accessibility is when websites, tools, and other digital applications are designed so people with disabilities and impairments can use them. 

For example, people with motor impairments may use a keyboard to navigate sites. If your site not only has keyboard navigation setup but has good organization as well, your site is accessible to those users.

Along with motor impairments, web accessibility involves anything that hinders web access. This can include visual, auditory, and neurological disabilities as well as limitations like: 

• Mobile users 
• Elderly individuals with changing abilities
• Temporary impairments (i.e., broken arms)
• Limitations due to the environment (i.e., bright sunlight)  
• Slow Internet connection or low bandwidth

With this definition in mind, let’s look at the internationally accepted guidelines for web accessibility.

WCAG Standards

WCAG, or the Web Content Accessibility Guidelines, was started by the World Wide Web Consortium in May of 1999 as a web accessibility initiative and accessibility standard. It defines the technical specifications for sites to be accessible. In it, you can find specifications from color contrast to text size.

A quick overview is that their current standards, WCAG 2.1, and older guidelines state the importance of a website being POUR:

• Perceivable: All content needs to be presented clearly. 
• Operable: All elements, components, and navigation must be usable.
• Understandable: Content needs to be readable and easily understood. 
• Robust: Content needs to be understood by various users and assistive technologies (i.e., screen readers). 

What makes accessibility so important?

The big deal about web accessibility is that it brings a better experience for everyone. When you design your site to be accessible, you're allowing more users to obtain information, content, and more regardless of individual need. 

Plus, countries internationally are putting web accessibility into law. This is aided by the web being defined as a basic human right by the United Nations in 2016. 

Beyond that, there is a business case. According to the World Health Organization, 15% of the population, or one billion people internationally, are disabled or impaired (WHO). That’s a good amount of people who have accessibility needs. The number would rapidly increase if we were to add other accessibility needs like older people or those in developing nations. 

Having an accessible site helps those users access it. In addition, it helps improve your user experience across different situations and devices, allowing you to provide a personalized and useful website for everyone regardless of who they are. 

5 Most common accessibility problems

With the importance of web accessibility in mind, we’ll discuss the most common accessibility problems on the web. 

We decided on these issues by using a study by WebAIM that looked at the accessibility problems in the home pages of the top one million sites in February 2022.

1. Low Contrast

Color contrast may be the most common web accessibility issue. That’s because colors are often used for organization and to show errors (i.e., “required fields are in red”). But if there isn’t a high enough difference between the colors used, it can be difficult for people with visual disabilities and impairments to navigate the site.

In addition, WebAIM found that 83.9% of the sample had low contrast on their home pages. Clearly, color contrast is an issue that needs to be addressed.

1. Images Not Having Alternative Text 

WebAIM found that 55.4% of home pages did not have alt text on images in February 2022. 

Now, alt text does more than just organize images. It describes the function of an image to users with visual impairments. Screen readers read aloud, allowing users to understand the content. Plus, alt texts help users with slow internet connection. Often, it will load before an image does. That allows users to understand what an image is even without it loading. 

1. Empty Links

WebAIM found that 50.1% of sites studied had empty links.

Basically, empty links are links except that they have a descriptive text element. This element is what screen readers use to show where the link leads. Without it, users won’t know where a link will take them.

1. No Input labels for Missing Forms 

WCAG discusses in detail about labels being required on all forms. Yet, WebAIM found that 46.1% of home pages featured forms with improper labeling. With this, there are two main issues: 

• Appropriate Labels: Many online forms don’t have clear labels that portray a form’s function to screen readers. This presents an issue for users with visual impairments. 
• Highlighted Labels: Generally, filled forms highlight incorrect fields in red. This does not properly communicate the incorrect fields for users with colorblindness or visual impairments. 

1. Organization 

The last two accessibility issues that WebAIM discusses are empty buttons and missing document language. However, we want to emphasize organization above these. Without it, a site can be challenging to navigate for not just people with disabilities. WCAG even emphasizes the importance of content being operable. That means all users alike can navigate it.

If there isn't a logical, easy organization to go through a site, users may become disoriented if they:

• Depend on a joystick
• Depend on a keyboard
• Have a language barrier
• Have visual impairments 
• Have neurological disabilities
• Have a slow internet connection

Accessibility best practices

When building accessible websites, you want to ensure that your design is universal. A universal design seeks to allow any consumer to use your site. Let’s break down the three most important things to make this happen. 

Ensure your site is easy to understand 

Having a universal design means anyone can understand your site.

That doesn’t mean just having great content, though that’s a factor. It means having content that is clear and simple to read. That includes non-convoluted and plain text. 

It refers to how the content appears. Sites that are easy to understand use fonts and font sizes that provide an easy reading experience. Referring to color contrast, the color of your text matters as well. You’ll need to choose a font color that has a high contrast to the background page. 

Make sure that your site is navigable 

Do you remember a site that had a confusing design? It was probably hard to navigate, making you disoriented and unable to use the site. 

It is an annoying problem that will bother many users. For users with disabilities, a confusing design makes it extremely difficult to navigate a site. This only becomes harder if they are using assistive technologies or depend on the keyboard to navigate. 

WCAG has very helpful suggestions to improve your site’s navigation. They recommend:

• Highlighting any search terms 
• Providing easy ways to get to each section on a web page 
• Decreasing link usage 
• Ensuring all links appear different from the rest of the content on each page

Ensure your site is adaptable 

Many different people with many different accessibility accommodations need to understand your site. That alone sounds daunting, but it is easier than you think. There are three main ways to ensure your site has options for accessibility. 

Firstly, make sure that all videos have closed captions. This is a good practice not just for allowing users with auditory impairments to understand them. It helps users with migraines in areas where they need to be quiet or experience sensory overload. 

Secondly, make sure that all images have alt text. This helpful tool will read your website to the user, typically if they have a visual impairment or other disability that makes reading a web page difficult.

Third, ensure your website is set up for keyboard-only navigation. Users with visual or motor disabilities, or even just growing older, may use a tab key to navigate your site. 

Best Accessibility tools

The web offers several applications that make it easy to ensure you have an accessible site. Let’s take a look at some of the best options. 

1. Stark 

Stark is a plugin that can be incorporated into any web-building software. It runs a check over visual elements like contrasts, color saturation, and hues. That helps ensure accessibility for people with color blindness or visual impairments. 

Plus, since it's embedded in the software, you can make adjustments easily from the start of a project.

• Good For: Ensuring your website is color accessible
• Price: Their subscription plans start at free, $60 a year, and a custom amount for teams

1. Wave AIM

Wave AIM is a powerful testing tool that provides a detailed report about your site’s accessibility. With it, you’ll receive an automated and manual Accessibility IMpact (AIM)) score. This includes data on how your site stands according to WCAG, a recommendation from an expert tester, and a detailed report of all accessibility issues detected. 

• Good For: Having a detailed check of your sites’ accessibility and ensuring your stay within WCAG guidelines 
• Price: It starts at $500 for up to 20,000 pages

1. Funkify

Funkify is a chrome extension that allows you to look at your site through the eyes of users with disabilities and impairments. Through it, you experience what users with visual and motor impairments, dyslexia, keyboard-only control, and more experience. This allows you to understand where you can make meaningful improvements. 

• Good For: Having a hands-on experience how accessible your site is and checking for keyboard navigation functions 
• Price: Free and 4.99 monthly plans 

1. Google Lighthouse 

Google Lighthouse is an automated, open-source tool in Chrome DevTools. It runs many different tests against pages to help improve their quality.  These tests will report how accessible your page’s buttons, forms, images, and even headers are. 

In addition, Lighthouse is only one group of checks you can do using Chrome DevTools.

• Good For: Chrome users who want to check the accessibility of different buttons and forms
• Price: Free on the Chrome Store

1. ARIA DevTools 

ARIA DevTools is a chrome extension that helps you understand screen readers such as Jaws, NVDA, and Voiceover. Specifically, it helps with ARIA or Accessible Rich Internet Applications. These attributes help describe each element on a page, letting users with visual impairments better navigate. 

ARIA allows you to understand how screen readers present it to blind users. You’ll be able to see all elements in their ARIA roles, allowing you to spot missing labels and keyboard support. 

• Good For: Testing your site’s screen reader accessibility 
• Price: Free on the Chrome Web Store

Build an accessible website with Ikius

Whether you need us for an immediate accessibility issue or are building a Jamstack website with modern technologies, we have the skillset to get it done. Our team is well versed in WCAG standards as they also happen provide guidance on how best approach accessibility for users in Europe and the US.