Web Accessibility Audit – A Toolkit You Want to Save!

An accessibility audit is a systematic and thorough evaluation of how well your digital properties meet the requirements of people with disabilities. This is not something anyone can know just by glancing at the website or spending a few minutes on your app. When an audit is carried out accurately, every component is scrutinized and verified by experts so that when it is complete, you can be assured that the report has all the barriers listed.

An app, website, or document is deemed accessible only if it can be perceived, understood, navigated, and interacted with by everyone, irrespective of them having disabilities or not. It shouldn’t discriminate with sections of information that can only be understood by a person who can hear or a specific app feature that can be used only by someone who can click a mouse. Rather, it should be barrier-free for everyone. This includes people who use assistive technologies (AT) as screen readers.

 

Why Sign Up for an Accessibility Audit?

 

Web Accessibility News & Resources | Deque
Image: Source.

The actual question is: Why make a commitment to eliminate barriers from your website?

Here’s the simple answer. There are laws that require you to do so. An example of legislation is the Americans with Disabilities Act, which prohibits discrimination against any individual with a disability, and requires every communications technology, apps, and website to be completely accessible if they are open to the public. Other laws are specific to industries: The Rehabilitation Act needs all federal government-funded programs and activities, plus the information technologies they use, to be accessible. The Air Carrier Access Act bans discrimination against air travellers with disabilities and needs the websites of airlines to fulfil meet accessibility guidelines. 

The best way to make sure that you are not discriminating against customers or clients online is to guarantee that your web presence is friendly, welcome, and fully accessible. For certain companies, it might mean a complete remake of all their digital properties. Others who favour a more efficient or timely solution might opt for remediation of their existing website, with constant monitoring at regular intervals.

An accessibility audit is an initial step to re-adjudication. Before you move forward, you need to know which fragments of your website contain barriers, what these barriers are, and what has to be done to eliminate them. An accessibility audit by experts can answer these questions. It can identify the problems and specify where they exist, and evaluate your level of compliance with legal requirements and universally accepted technical necessities like the Web Content Accessibility Guidelines (WCAG). The audit can also help establish what needs to be done to solve the accessibility problems, making it a road map to your aim of a fully usable app or website.

 

The Multiple Testing Methods of an Accessibility Audit

This is crucial, but don’t worry, it won’t hurt! Numerous types of accessibility testing are involved in an accessibility audit, and they are all important to get a complete picture.

Automated testing can check some specific features, reporting a programmed “pass” or “fail” as to whether a certain condition has been met on the web page, like a set standard for colour contrast, or the presence of “alt-text” (alternative text) to describe an image. 

Manual testing is equally important as they also tend to churn out false positives where no barriers exist, which need to be confirmed by a human consultant. Judgment is also needed to evaluate certain features further. 

 

Checking Accessibility

It is crucial to understand that accessibility testing CANNOT be fully automated as there is just too much nuance and too many judgment calls to remove humans from the process. However, there are a huge number of tools and processes that can help you with some of the verification and allow you to automate what you can to focus your limited resources where they are needed most. Here is what you should look for in an accessibility audit! 

 

Linting

As with several other best practices, accessibility linters are available out there for some basic checking as you write your code. If you are using JSX or Vue, look for ESLint plugins, and there are plenty more for different languages and frameworks.

If you cannot find one for your particular situation, all the information you would need to create your own is freely available. You are probably not the only person looking for accessibility linting in a specific language, so think about creating one for everyone to see.

Similar to every other kind of testing, the earlier in the development process you start accessibility checking, the better. You do not want to perform a bunch of testing and verification the day before you are due to go live or, even worse, skipping it altogether.

 

CI/CD Pipeline

You will likely want to add a little automated accessibility checking to your code check-in and positioning processes along with a linter.

There are plenty of tools that are excellent automated accessibility checkers that you can add to your continuous integration and constant deployment pipeline. Some are open-sourced, making it easy for those who might be interested in making improvements or changes.

 

Extensions and Bookmarklets

Browser extensions and bookmarklets are a great place to start your manual checking: They are simple to find and use and provide a lot of value. 

Although extensions and bookmarklets are almost like automated testing, they check the obvious and easy things. Some also provide a checklist of items that cannot be tested automatically. More importantly, they let you use a site or app to see how items pass or fail in the real world.

Browser Dev Tools

Both Chrome and Firefox have accessibility tools that are installed by default. For example, both browsers include built-in contrast checkers in their code inspectors. Choose an element and open the colour picker for the text/foreground colour, and you will see a little icon indicating success or failure as well as the contrast value. To try this on your own, you have to open your dev tools (F12) and inspect an element. You can then click on the colour preview in the Styles panel to see the colour picker and the contrast information in a popup.

Firefox has an Accessibility tab in dev tools with an automated accessibility checker. It also has a really unique and interesting feature as it provides a visual representation of the accessibility tree.

 

Keyboard Navigation

There is one accessibility test that cannot be automated, but it is so easy and simple to do that it is surprising it is not tested more often: keyboard navigation. Unplug your mouse, turn off your touchpad and try to navigate through your site. Is it clear everywhere on the page? Can you interact with controls as expected? Do you ever get stuck somewhere, like in a menu or pop-up, with no chance of getting back to the main content of the page?

As you start manoeuvring through your site, you will want to keep an eye out for dissimilar focus states on every interactive element. Most of the time, you will see nothing more than a dotted light grey outline, which is the browser default kicking in. When you see this, it is almost always because the CSS for this site has deliberately taken out the focus states, and the browser is struggling to compensate for that removal. And do not forget about contrast, as your focus state needs to meet contrast criteria on all elements!

 

Contrast and Color Blindness

Colour contrast is more vital and more complicated than people think. Someone with low vision might have difficulty with common colour patterns that use light grey text on white backgrounds. Buttons and links with different colours, also need to be checked for contrast. And of course, you need to have enough contrast on focus states too.

Luckily, checking for colour contrast is both simple and easily automated, well mostly. Automated tools generally won’t be able to pick up on hover states or links that change after they are clicked, so you might need to use a different kind of tool to check your whole palette at once.

 

Text Analysis

It is important to keep in mind that language choices matter a lot when it comes to accessibility.

As a general guideline, you will want to aim for a fourth-grade reading level on the Flesch-Kincaid scale. Add a passage to the page and click on the Analyze button to receive a report on your text, including information that helps you more easily target problematic parts. Specifically, look at the Percentage of Difficult Words and run your text through the Difficult and Extraneous Word Finder. Remember that it doesn’t deal very well with contractions. Also note that, just because you have a higher reading level or larger percentage of difficult words, it does not necessarily mean that you have to make any changes to your text.

 

Screen Readers

Developers, designers, project managers, product owners need to be familiar with the basics of how a screen reader works. Screen readers are highly specialized tools, although they are difficult to master when not used consistently.

Because of this and availability, licensing, and pricing issues, it is prudent to become familiar with the screen reader built-in in your phone or tablet. On both Apple and Android devices, a built-in screen reader is available in the Settings, usually under Accessibility. The Apple screen reader is called VoiceOver, and Android’s is TalkBack. They are both relatively easy to pick up and start using, although they can behave differently from what someone might expect based on previous experiences with desktop screen readers, like NVDA or JAWS.

 

Summing It Up

This audit can be done at any point during your project, including early development, planning, design, or testing. An audit will help you determine the areas you need to work on for your website to become accessible. An automated as well as a manual audit is ideal to determine the accessibility of your webpage.  

In addition, Accessibility Spark provides complete compliance on all site pages on your website. This includes ADA, WCAG 2.1, s508, and other worldwide legislations. It is a highly equipped automated tool that makes sure your website is compliant for everyone to use. It also provides accessibility statement and certificate of performance.