By Diego S.

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.

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.

This post covers

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

      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.

      2. 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 connections. Often, it will load before an image does. That allows users to understand what an image is even without it loading.

      3. Empty Links

      WebAIM found that 50.1% of the 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.

      4. No Input labels for Missing Forms

      WCAG discusses in detail 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.

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

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

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

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

      5. 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 build a Jamstack website with modern technologies, we have the skill set to get it done. Our team is well versed in WCAG standards as they guide how best to approach accessibility for users in Europe and the US.

      Do you need accessibility services?

      Ikius can help you build an accessible website application. We can build something from scratch or work with your devs to lend them an extra hand during implementation.

      Contact sales

      sales@ikius.com

      * Submitting this form will not sign you up for any marketing lists. Your information is strictly used and stored for contacting you. Privacy Policy