accessibility of a website

Quick Ways To Check The Accessibility Of A Website

Published: May 20, 2021

Web accessibility is becoming increasingly important nowadays. Every website owner is required to comply with the laws such as the Americans with Disabilities Act (ADA), which includes plenty of standards to protect people with disabilities.

If you are new to this subject, accessibility basically relates to a specific set of rules that is quite long, created by experts who want to make web content more accessible for people with disabilities, especially ones with cognitive, learning, visual, or hearing disabilities.

In order to be deployed, assistive technologies like these require the presence of experts who would be knowledgeable with HTML, CSS, JavaScript, assistive technology, and APIs. Nonetheless, the ADA Act is required for many businesses.

What Makes A Website Accessible?

The current standards formed under the Web Content Accessibility Guidelines (WCAG) 2.1 are published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). According to the requirements, your website’s accessibility should feature content that is:

  • Perceivable: Every page of your website should be perceived in more than one way. For instance, if a person has visual impairments, the web content should have a written alternative so that they can use a screen reader to access it.
  • Operable: Operations are equally important, and websites need to be operable and not only limited to a mouse. Assuming that a person with disabilities finds it hard to use the mouse, a website needs to have keyboard support.
  • Understandable: All information should be easily understood. For instance, unexpected errors should have a description and point to the location of the mistake (and how to fix it).
  • Robust: Support for the newest hardware and emerging technologies.

How To Prevent Web Accessibility Lawsuits

Having the current web content accessibility guidelines present on your site is more than just the right thing to do. It can be one of the smartest moves you’ve made and one that safeguards your organization against any legal risk.

One of the quickest ways to check your website accessibility is by running a FREE SCAN on our home page and entering your URL in the box. However, if you appreciate the detail and want to know what accessibility guidelines you should adhere to in order to prevent a lawsuit, below you can find our detailed plan to checking the accessibility of a website.

Testing Accessibility of a Website: Five Crucial Things To Consider

It doesn’t matter if you want to have the most accessible website or one that is only accessible so that you stay ADA compliant and in line with the law. Either way, you should know the basic elements and web content accessibility guidelines WCAG.

Below, we are talking more about this and sharing the key parts of a site that need to be optimized for people with disabilities. We won’t mention all of the WCAG requirements, but it is good to know what are some of the main areas you could improve on.

1. Testing your keyboard navigation and operations

First on the list is keyboard accessibility. As we said above, not everyone knows how to use a mouse or is comfortable with it. As such, keyboard navigation compatibility must be present.

One of the first checks in this manner includes checking whether the Tab key follows a logical order of the elements and making sure that every URL link and button receive keyboard focus when you tab to them. Lastly, you need to ensure that the focus ring is noticeable and easily locatable. The following are equally important:

  • Ensuring that menus are accessible – The Tab key should reach the navigation menu and all of its elements, as well as the drop-down list and the search button.
  • Ensuring that forms are accessible – The Tab key should be able to reach a form and all of its fields. Also, websites should be optimized so that check/uncheck boxes can be toggled using the spacebar. If there are validations in your forms, you should ensure that your keyboard focus is taken to the first field if a form is fulfilled wrongly or an error shows.
  • Ensuring that popups are accessible – Popups should be optimized so that a user can close them using their keyboard. The popups must be closed by hitting the Esc key. Also, the keyboard focus should lift off the main page and to the popup itself when it appears, allowing disabled people to leave their details if they want to.

2. Optimizing images’ ALT text and non-text content

Every image should have a text alternative so that it aligns with the web accessibility rules. Nowadays, people surf the web in many different ways, especially through screen readers or refreshable Braille displays.

If the images do not have an ALT text variant, accessibility issues will arise, and people won’t be able to understand what is displayed on the pages.

The best way to solve this is by updating the ALT attribute on every image so that it reflects the content of the image. You can also use a screen reader to check whether the information is transcribed well and optimize your page titles to reflect the content.

3. Closed captions and video transcripts

As you know, captions are text alternatives of audio that are synchronized with the video. Under the ADA Act, they should include spoken dialogue, sounds, and elements like music. However, people who are deaf or have hearing loss should have an easy way of understanding the purpose of the content.

Therefore, video transcripts work well as text versions of the video content, allowing users to understand what a video is all about and improving the SEO score of a website. Videos with a lot of dialogue should have a text transcript, too.

4. Color contrast

Checking the color contrast is another important thing and one that refers to the difference in light between a font and its background. This creates plenty of trouble for people with low vision, low-contrast vision, or color vision deficiency.

The Web Content Accessibility Guidelines (WCAG) also suggest the criterion 1.4.3, which says that standard text should have a contrast ratio of at least 4:5:1 and large text should have a minimum ratio of 3:1. A handy tool for checking your website’s color contrast is the ADA Site Compliance Color Contrast Calculator – you can use it to see detailed color contrast analysis on any combination of colors from your website.

5. Zooming in and out without loss of content/functionalities

The failure to zoom in and out is one of the big accessibility issues that people with disabilities share. A good accessibility evaluation here should make sure that the website can be zoomed in without loss of content or loss of any functionality.

In other words, when you zoom in and out, your website should align to the area and not mess up any of the content. To do a test, you can zoom your web browser to 200% and see what happens to your page’s layout and content. If elements overlap, duplicate, or are lost, you should have a developer adjust them nicely.

Ways To Test And Ensure Your Website Is Accessible (And ADA Compliant)

If you want to ensure that your website is properly optimized as per the WCAG and won’t get you any web accessibility lawsuits, you should perform some tests. We recommend doing the following to test your website accessibility:

  • Unplug your mouse and turn off your trackpad: People using only the keyboard or people who only use a mouse should be able to access your site. To put yourself in their shoes, start testing from the home page. Turn off your keyboard and mouse and see how you can navigate with all controls, URL links, forms, and menus using the ‘Shift’ and ‘Tab’ keys (SHIFT TAB).
  • Turn on High Contrast mode: High Contrast mode makes content more accessible for users with light sensitivity and end-users that have low vision. Turn High Contrast on (on your Windows/Mac) and try to interact with your site.
  • Disable all the images: To turn off images in Chrome, go to Advanced Settings > Images > Do not show any images. If you are using Internet Explorer, go to Tools > Internet Options > Advanced and uncheck the checkbox “Show Pictures” and hit OK. (the configuration is similar in most browsers). Once you do that, you won’t be able to see any images but will still be able to see their ALT text attributes. Check whether the content makes sense, whether the page title bar, menu items, and ALT text are all correct, and if any essential controls disappear.
  • Check for captions or transcripts: Make sure to check for captions, transcripts, and other alternatives wherever you have media. If you are using YouTube embed videos, see if there are controls that turn captions on/off. If there aren’t, try to find similar videos with captions or text transcripts.
  • Navigate to Field Labels: Field labels are another part of the accessibility journey. Forms-related accessibility issues all fall under this category, and you should look out for any missing or incomplete labeling, ineffective error handling, as well as poor focus control.
  • Turn off your CSS: Last and least is the option to turn off your CSS and see how your site looks. In most browsers, you can do that by navigating to View > (Page) Style and selecting No Style. Once done, you will see that all background images will disappear. See if all web page content looks good, has the same style, and is displayed in reasonable and easy-to-understand colors.

As you can see, all of these tests put the above theory on standards to practice, helping you see how disabled people access your website. You can use any or all of them to see whether your site has issues with images, form fields, captions, transcripts, CSS, color contrast, text, or keyboard/mouse accessibility.

Final Words

The main aim of the blog post is to help you understand how the WCAG and ADA requirements affect pages of your website. Making your website more accessible will ensure a better user experience not just for the disabled, but for everyone. As a result, you will find it easier to rank higher and reach a whole new target audience.

CONTACT ADA SITE COMPLIANCE today for all your website accessibility needs!

    Test Your Website For Compliance

    This site is protected by reCAPTCHA and the Google Privacy Policy and Google Terms of Service apply.


    Have a question?

    We’re always here to help.