Website Accessibility Testing Checklist

There are many things to take into consideration when building a website. It’s important that your website is accessible to all users. Website accessibility practices are crucial.

What is website accessibility exactly?

It is a practice that guarantees websites to be accessible to people with disabilities. This means they will have the same access to the services and goods those sites offer. Professional web design and development includes website accessibility.

This guide will discuss 15 common practices to improve website accessibility.

Why should you care about accessibility?

Developers, designers, and clients should all ensure accessibility as an integral part of the web development process.

  • It is a law requirement in many countries, including the USA, EU and UK, to not discriminate against persons with disabilities. In 2019, 2235 new ADA website lawsuits were filed in the USA. It’s just one per hour.
  • Sites that are accessible tend to be more coded and robust, and rank higher in search engines.
  • Accessible websites are bad news for businesses. A UK survey showed that 4 million people had abandoned retail websites due to accessibility issues.
  • It is a bad business to turn away potential customers.

The Common Standards and the Problems

The W3C, which is responsible for many web standards, has developed a standard that makes websites accessible. It is called Web Accessibility Guidelines (WCAG). There are three levels of accessibility: A, AA and AAA. Level AA is the best.

Unfortunately, WCAG can be a lengthy, technical, and dry read. Let’s take a look at the basics and see if you can get the most bang for your buck.

Respondents with disabilities were asked in the Click Away Pound survey what their main obstacles were to completing purchases. These are the top obstacles (multiple answers allowed):

  1. Crowded pages with too many content – 66%
  2. reCAPTCHA testing – 59%
  3. Poor legibility (56% – contrast, text layout)
  4. Distraction of moving images and graphics 53%
  5. Poor link information: 59% (77% screen reader users).
  6. Filling out forms 56%

How to Increase Website Accessibility (Best Practices).

This is a list of the most frequent errors people with disabilities claim are their biggest blockers. It also includes practical solutions.

First, be aware that the top five are not technical issues. They’re design or copywriting mistakes.

1) Too much content

It is well-known that the amount of information required to make informed decisions and collect it increases with increasing choices. Too much content can quickly become overwhelming.

The new book Designing is recommended.

People want to be capable of skimming long blocks of text regardless of their sight or hearing, so it is important to organize your longform writing using headers, short paragraphs and other best practices in content design.

So:

Do you have Only one page.

Use subheadings liberally. It breaks down a’slab of text’ for visually impaired users. Screen readers and users of assistive technology such as screen readers can use the short-cut key to jump between headings, or get a mental map of all the content within the heading structure.

Do not skip any level of headings . You can use, for example, anMake sure that it is preceded with an.

Use bulleted list Correctly marked up in HTML

Screen readers will display a “List of 10 Items” and allow users to jump over them.Use Plain EnglishMonzo Bank’s “Our voice” guide explains why plain language is so important:An experiment was conducted by Sean Flammer, a US attorney. He asked 800 judges from circuit courts to choose between a traditional legalese argument or plain English.Judges preferred plain English versions 66% to 34%, regardless of their background. Flammer Notes (PDF) in the plain English Version:It is almost one page shorter, which means it eliminates redundant sentences and words. Its sentences average 17.8 words as opposed to 25.2 words.So, in essence, if your goal is to please your reader, you should write in plain English. In short break down text into sections using headings and bulleted list. Use simple language.

2) Google’s ReCAPTCHA

Service is free and helps websites protect themselves from spam. It should be simple for humans to solve, but difficult for bots or other malicious software to figure it out.Many users had difficulty with the reCAPTCHA version.Fortunately, the style of reCAPTCHA’s wobbly letters is no longer in fashion.A newer version called “No CAPTCHA ReCAPTCHA” is more common. This requires that the user check a box to confirm they are not a bot. They can pass without further interaction if they do. If they fail, however, an additional challenge will be presented to them. reCAPTCHA is the most accessible version of reCAPTCHA. It does not require user interaction but requires you to work harder to handle visits that fail to pass the test.This is a JavaScript API that returns a score. It allows you to take actions within the context of your website. You can request additional authentication, send a post to moderation or throttle bots that might be scraping content.

Short version: don’t force your users to jump through seemingly impossible hoops just so you can save time for developers.

3) Low Readability

These are the top ways to make your text more legible.

  • Ensure adequate contrast. Poor contrast between background and text is one of the biggest access barriers on the internet. W3C guidelines recommend a contrast ratio at least 4.5 to 1, except for large-scale texts and images of large text, which must have a contrast ratio at least 3:1. Logos and ‘incidental text are exempted from this requirement. Many utilities can measure contrast ratios. Ada Rose Cannon’s contrast tool is one example.
  • Do not have all-capital headings. They are more difficult to read due to the fact that capital letters are all the exact same height. This means we don’t recognize common words. Screen readers can also spell out capital letters in groups as abbreviations (such as BBC, DOJ etc.). You can have all capital headlines if you need them. Simply write them in normal case in your HTML, then transform them using CSS text transformation: uppercase.
  • Left-align text. Right-align text is used for pages in right to left languages such as Arabic and Hebrew. This makes it more difficult for dyslexics to read. The British Dyslexia Association’s styleguide recommends using sans serif fonts like Comic Sans and Arial to make letters appear smaller. Other options include Verdana and Tahoma as well as Century Gothic, Trebuchet and Calibri.

4) Distracting images and graphics

The most basic level in WCAG is “For any moving or blinking information that (1) begins automatically, (2) lasts longer than five minutes and (3) is presented parallel to other content, the user can pause, stop or hide it unless it is an essential part of an activity.Distraction can be annoying, especially for those with ADHD and other cognitive impairments. However, flashing and movement can cause seizures. According to the WCAG guidelines, content should not flash for more than three seconds.

Respect the choice of the user for animations

The majority of major operating systems allow users to indicate a preference for reduced screen motion. This could be because they have motion-triggered vestibular disorder. Your website can detect whether the user has done this with the CSS prefers-reduced-motion media query.We only allow a button that animates if the user does not express any preference./* @media (prefers-reduced-motion: no-preference) button /* `vibrate` keyframes are defined elsewhere */ animation: vibrate 0.3s linear infinite both; The following may stop any CSS animations that have been previously declared if you are looking to retrofit a site with many animation rules./* @media (prefers-reduced-motion: reduce) *, *::before, *::after animation-duration: 0.001s !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; The HTML image element lets us show a static picture rather than an animated GIF to users who prefer reduced motion./* Designing your website in dark mode is a good option to respect the preferences of the user’s operating systems.

In short: allows users to stop any motion; respect their operating systems settings; don’t auto-play video.

5) Poor Link Information

Poor copywriting is one of the major causes of poor link quality. Poor copywriting is often the main reason for poor links in screen readers. In JAWS, which is the most popular commercial screen reader, the keyboard shortcut to see a page’s list of links is Ins + F7. In free NVDA, the same keyboard shortcut opens up the Elements List, which lists page links, headings and landmarks.But, if each link contains text that says “Click Here” or “Read More”, and nothing else, it is ineffective.This is easiest to fix by writing unique link text. However, if this is not possible, you can use an aria-label attribute to each link to override the link text to assistive technology.Here’s an example from the Joomla Website: The visible link text says “read more”, but Joomla uses attribute-label attributes in order to make each assistive technology unique./* More More W3C recommends that aria_label text be used instead the link text by assistive technology. This is because “this will allow for consistent communication between users”.

Note: Add explanatory text to links that use the title attribute is not recommended./*  

This title is not visible to most screen readers (developers used keywords to stuff it for SEO purposes, so screen-reader vendors disabled it by default), and browsers display title attributes as “tooltips” which are only accessible to mouse users when hovering.

Links should look like links

By default, browsers underline links. While it is best to not change this, you should have a conversation with your designer. The link text must be at least 3:0 contrast from the non-link text. It should also indicate, by using a ‘non-color designationator’, that they are a hyperlink when hovered over or focused./*a:hover, a:focus text-decoration: underline; When a non-mouse user points at the link with a stylus, keyboard, or voice input, the focus style causes it to be underlined. A focus style should be assigned to any hover style that is used on a page. Visitors with low vision, or color blindness can see the change in hover or focus by using the ‘noncolor designator’ (in this case an underline). (Screen readers announce “Link” automatically before linking text.

Tell people if a link opens a new tab/page

Visitors can get confused if a link opens a different tab or window. This is especially true if some links do the same thing (external links only open a new page). You should inform the user in the link text or by using the aria label method.

Tell people if a link is to a file

In the link text, tell the user if the link leads to a file (e.g. a PDF or video). It is important to not hide the link in aria_label. This can be helpful for many users who are blind. Some mobiles cannot open a.docx file. Consider notifying the user if the file is large. They may not want to download large files over 3G. The download attribute can be used to cause the browser’s native file downloading dialogue to open. This code will look something like this when all is said and done./*Annual report (PDF, 240 MB)

Make links identifiable with unique link text. Users should be aware that a link may open a new tab, or a file.

6) Removing the Focus Ring is another design error

We have already mentioned and focus styles. These styles are a valuable visual indicator for people who cannot use a mouse due to RSI, Parkinson’s, Multiple Sclerosis or other conditions. Some people find this visually disconcerting and disable their mouse with CSS. This makes the site unaccessible for keyboard users.A new standard called -focus-visible was created by Firefox. This will give a focus ring to any element that has been reached using a keyboard or non-mouse-pointing device, but not to users who use a mouse. Patrick Lauke recommends the following CSS for Firefox./* button:focus /* some exciting button focus styles */ button:focus:not(:focus-visible) /* undo all the above focused button styles if the button has focus but the browser wouldn’t normally show default focus styles */ button:focus-visible /* some even *more* exciting button focus styles */

Shortly, makes sure that a keyboard user can always view where they are currently focused.

7) Filling out forms

It’s amazing how many forms are not accessible due to the importance of forms for eCommerce websites. This is often because older browsers did not allow for much styling of form elements so developers faking them with other HTML elements. Modern browsers support attractive radio buttons and custom select and combobox components, accessible Autocomplete controls and many other features.

Autofill is your friend

Visitors will be less likely to fill out forms if they can auto-fill them. This makes it easier for them to sign up or buy your product. Autofill in Browsers: A Deep Dive by eBay is a great article about this (and why they should care).Autocomplete is also the best technique to achieve AA compliance with Success Criteria 1.3.5: Identify Input Reason.

Make form fields look like form fields

Browsers defaultly display input fields in boxes. These can be styled with borders, padding, borders and margins. However, they should still be displayed as boxes. Many designers used the Google Material Design pre-2017 pattern of using one line to allow users to enter text.Google discovered that some users were confused by a divider and the line beneath the text fields was unclear. Google changed the design. They found that text fields with box shapes performed better than those without line affordance in a qa testing. You might consider adopting Google’s complete Material Design UI Library. Read Stop using Material Design text field! to find out if it suits your needs.

All fields in the form should be labeled

Labeling is required for all form fields (checkboxes and text inputs, radio buttons, radio buttons, sliders etc). An HTML template is the best method to accomplish this. Here is a comparison of an unlabelled field and a labeled field. Both look identical but the first one lacks a proper label while the second one has one. You can click into the text label on the bottom one to see the input. This makes it easier to focus an input for people with motor control problems – or for you, trying a tiny checkbox on the small screen of a bumpy train. Screen reader users will also need to remember this. By default, links and form fields cannot be tapped by screen readers. When they tap into an input field, the screen reader will inform them of the contents. This code is very simple. The input field is assigned a unique ID and the label is associated using the attribute./* Which is your favorite colour?

Hidden Labels

Sometimes, you may not need a visible label. Sometimes, the designer doesn’t have one and you don’t want to get into a fight in the parking lot. Here’s an example of when adding a label that says “Search” before the input feels excessive. The input field can be associated with the text “Search”, which refers to the content of the submit button that is aria labeledby./* SearchWe could have used the aria-label, which we had discussed earlier in relation to links:/* It is always better to have visible text on a webpage. This will translate if the page goes through a translation tool. Text “hidden in HTML attributes” won’t. (Hat-tip Adrian Roselli for this tip from his article My Priority for Methods for Labeling Control.

In short: design form fields that look similar to form fields and each associated with a label. Don’t disable auto-fill.

Most Common Errors

We have examined the top obstacles to eCommerce sites, as reported by users with impairments. Let’s now look at a wider range of websites–the home pages of the top 1,000,000 websites, automatically analysed by WebAIM August 2019. 98% of pages that were analyzed contained at least one error.These are the most common mistakes:

  • Text with low contrast (86.1%)
  • Missing alternative text (67.9%).
  • Empty links (58.9%).
  • Input labels for missing forms (53.2%).
  • Missing document language (30.5%).

As you can see, we have dealt with links, low contrast and inputs from forms. Let’s now look at some other common mistakes.

8) Text alternatives for all images, video, and audio

Every must contain alternative text (“alttext”) that can be communicated to people with visual impairments, or with limited bandwidth/expensive data plans. This applies to images as well as text.

These are the basics:

  • If the image is decorative only, it should have no alt text: alt="”. However, images that are purely decorative should be in CSS.
  • An image should not be described in body text if it is to be used as an alt text. alt="" To avoid repetition, Be careful, however, if you do it again. In a- See How can you figure? For more information.
  • If the image is the only content of the link (e.g., the logo of your organization can be clicked to visit the homepage), the alternate text should explain the destination of that link. alt="homepage".
  • Avoid icon fonts. They can be very harmful for people with dyslexia. Convert them to SVG if you use them.

Video and audio alternative text

Audio content must have alternative text to accommodate people with hearing impairments. This includes transcripts from podcasts and subtitles on videos. Audio Description is narration that provides information about key visual elements of media work.And, again: don’t autoplay media.

Short: Any information conveyed by an image or video should have a textual counterpart.

9) Add Proper Document Language

About 30% of home pages do not declare the language they are written in. This can be confusing for screen readers users. This is because “six” can be pronounced differently depending on whether the sentence is in English, French, or both.This can be solved by simply adding the lang attribute to your HTML element./*The “en” indicates that the page is in English to a screen reader or translation software. “es” stands for Spanish and “fr” for French. The language tag for most languages is easy to find. W3C offers a guide Choosing. Add a language attribute around any content that is in a language other then the main one. In this example, a page that is English would be:/*Chase a Matador in a cool Cabana and meet senoritas according to the score. Espana por favorLet assistive technology know what language your text is written in.

10) Help a visitor get around your content

A sighted visitor can visually scan your page to see where the navigation is and where the main content starts. This is impossible for a screen reader user.HTML5 allows us to add new tags to mark these areas. Assistive technologies also have shortcuts that allow you to skip (or over) landmarks such as header or footer, Navigation, and others.Here are some things you can do.

Wrap your main content This is stuff that’s not header, primary navigation, or footer in a webpage.element. In nearly all cases, you should have one.per page. You can style it in all browsers (IE9+), and assistive technology knows what to do.

  • Wrap your header In aelement.
  • Your footer should be wrapped Legal stuff, contact details, copyright notices, etc. in a
  • Register your primary navigation UseWrapped in aelement. This can be nestled inside theIf it fits the visual design of your page.
  • Non-essential advertising 
  • Content Should be wrapped
  • Wrap each product/video/news item/blog article on a single page with an envelopeelement.

WebAIM’s survey of screen readers users found that 26% used these landmarks to navigate a page.Also, wrap discrete pieces inApple WatchOS displays content optimally

Short description: use HTML landmark element to assistive technology users to understand and navigate your content.

11) Use HTML Correctly

The correct HTML elements are a common theme throughout this article. The Guide to Writing Good HTML explains the concepts.Take, for example: Label includes a browser behavior that focuses the input field associated with it;It is better to. Because it allows screen readers to quickly jump to the most important content, while remaining completely unobtrusive for those who don’t have a screen reader.

Another example is the use of a  Instead of creating fake buttons with a lot of nested items, use buttons.  Can be styled You can make the button look as big or small as you like. The best part is that a button can be activated by pressing the space bar or entering key. Fake buttons must mimic these built-in behaviors. This makes your code less maintainable and more fragile.

In short: understand and use the default behavior of HTML elements.

12) Complex Interactions

Sometimes, you may be asked to create complex widgets without native HTML equivalents.You should first consider whether these interactions can be made native HTML. If they can’t, then you will need to explore the murky worlds of JavaScript or ARIA. The WAI_ARIA Authoring practices has many examples of accessible Tree Views and multi-thumb sliders.Use these examples as a guideline. Not all examples are great; should not use ARIA menu roes to site nav and shouldn’t use ARIA grid, unless you’re trying recreate Excel.

Brief: Use ARIA only if a native semantic is not available; instead, use the design patterns or code suggested by W3C.

13) Frameworks

Frameworks like Vue and React are increasingly being used to create web pages. Although there is nothing in these frameworks that prevents accessibility, developers often choose components that are not written with correct HTML tags and tested with assistive technologies.

This doesn’t have to be the case. Marcus Herrmann wrote “I get the impression that more React components systems are being built with accessibility in mind.

These look promising for React

  • Reakit adheres to WAI-ARIA 1.1 standards. Each component comes with the correct attributes and keyboard interactions right out of the box
  • Reach UI is tested with Safari + VoiceOver and Firefox + NVDA as well as Edge + JAWS. WebAIM will audit the project as it matures to make sure that
  • Reach UI is a solid foundation for your app. Vue Vuetensils “Follows WAI ARIA authoring practices to accessibility baked in; semantics ARIA attributes roles, etc.”

Tournant and Voe a11y have a small but growing audience.ING bank has released its internal component library as Lion. This project can be used with any framework (or none).Lion is an open-source component library that can be used as a foundation for your in-house Design System. It’s white-label and framework-agnostic. Because these things are nearly impossible to modify/achieve later in development, it was built from the ground up.You should always review third-party software on your own. Just because a utility or library is popular does not mean that it is accessible. Typeform, for example, is still unavailable.Adrian Roselli created an excellent Basic Control Requirements that you can use to assess any component library that you are thinking of adopting.

In short: frameworks can be accessed if you select your components carefully.

14) Content Management Systems and Site Builders

WordPress and Joomla are the major open-source CMSs. However, accessibility is dependent on how accessible themes and plugins are chosen by site creators.Avoid Weebly, one of the hosted Site Builders. It’s not accessible. Squarespace and Wix can create accessible websites. You have to actively seek it out, as it is not something that will happen automatically.

Short summary: Choose CMS and Site Builder themes carefully.

15) PDF

Although PDF documents can be downloaded from web pages, it is not a web technology. According Adobe, many of the features found in HTML formats, including alternative text for images and headings for tabular information, labels for form control, and many others, are fully supported by PDF specifications. Popular assistive technologies can be used and can access the information in PDF files.Make accessible PDFs from HTML and CSS using a library called prince – it’s free for noncommercial use.

Shortly, PDFs are accessible. Check that your PDFs are correct.

Continue Testing Website Accessibility

You should test your pages before you publish them. This is a simple example of a test plan:

  • Check the color contrast.
  • Can you use only the keyboard to navigate the page and find your focus?
  • You can fill out and submit forms with only the keyboard
  • Link to Heydon Pickering’s revenge.css, which places pink error boxes with messages in comic sans wherever you write bad HTML. You won’t forget about it when you make the page live.

The BBC Accessibility Standards Tester has been open-sourced by the BBC. Google Lighthouse is now available as an Firefox extension and Tenon.io.As the article Building the most difficult site with the best Lighthouse score shows, no automated tool is 100% reliable. Testing accessibility with people with disabilities is the best way to determine if your site is accessible. Peter van Grieken provided a helpful list of considerations when testing usability with disabled people.