Webpage accessibility

The current minimum best practice accessibility standards are described at WebAIM’s WCAG 2.0 Checklist – http://webaim.org/standards/wcag/checklist

These can be complex to understand and implement for any but professional webpage designers but there is a ‘dirty dozen checklist’ any anyone can use to significantly improve the accessibility compliance of the webpages you manage or at least use to identify areas where you may need help.

Website Accessibility Checklist

Here is a handy checklist that highlights some of the most common website accessibility errors. Check your site against this list, and see how you measure up!

1: Add meaningful ‘alt text’ to all images.

2: Are all of your headers in the correct reading order? Use headings and styles to allow assistive technologies to identify the parts of the page – headings, subheadings, paragraph text etc. Do not use editing tools e.g. color, bold, resizing text to achieve this.

3: Are your videos captioned? Ensure a transcript is available for download.

4: Do you have a site with media files that play automatically when a user enters the site? Pay particular attention to the accessibility of slide shows / carousels – see WEBAIM’s

Carousel Concepts – https://www.w3.org/WAI/tutorials/carousels/

5: Is your link text descriptive? Avoid ‘click here’! In all but exceptional cases, ensure that hyperlinks are not set to open in new window or tab. There are legitimate reasons to open a new window or tab, for example:

Opening a page containing context-sensitive information, such as help instructions, or an alternate means of completing a form, such as a calendar-based date picker, will significantly disrupt a multi-step workflow, such as filling in and submitting a form, if the page is opened in the same window or tab.

The user is logged into a secured area of a site, and following a link to a page outside of the secured area would terminate the user’s logon. In this case opening external links in an external window allows the user to access such references while keeping their login active in the original window.

When this is the case you should warn the user.

6: Can the website content text be re-sized by the end user?

7: Can all elements of your site be accessed without a mouse? One of the most effective and easiest tests for accessibility is to see if you can completely interact with your site using only your keyboard. If you cannot move around the website with your keyboard only it is not accessible.

8: Is your site’s language defined?

9: Has color contrast been optimized for users with low vision or color-blindness? Do not rely on color to convey meaning – use the color contrast checkers below to verify compliance.

10: Ensure any downloadable PDFs you have embedded within a webpage are fully accessible – see

Create and verify PDF accessibility (Acrobat Pro DC) – https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html

11: Do you have some ‘helpful text’ prominent on your site to assist users experiencing difficulties? For example see https://accessibility.unc.edu

12: Test your website using the automated tools listed below? Different tools all have their own unique checking capabilities and so it is essential to use multiple tools. Be sure to test via different common browsers and on different operating systems.

The University of Washington has a much more exhaustive checklist to assist with ensuring accessibility compliance – http://www.washington.edu/accessibility/checklist/

Out-of-the-Box Testing Tools

508Checker

http://www.508checker.com/.

Accessibile Color Palette Evaluator

This free service from NC State will allow you to build a color palette and evaluate all of the possible color combinations in a palette to see which are accessible and which are not.

AChecker

This free online tool checks for a number of accessibility errors. The errors are based on the source code of the Web page.

aXe

Chrome extension – automated tool to find Accessibility defects on your web site.

aXe

Firefox add-in – automated tool to find Accessibility defects on your web site.

Color Contrast Analyzer for Google Chrome

This is a free Chrome extension from NC State that allows you to check for WCAG color contrast problems.

Color Contrast Checker from WebAim

Contrast Analyser for Windows and Mac

This free desktop-based tool from The Paciello Group tests for color contrast. It lets you pick any two colors from your desktop, including Web browsers, and see if they provide enough color contrast to be accessible.

Jim Thatcher Favelets

This free set of browser-based tools from Jim Thatcher will test for numerous accessibility features and errors. These extensions will work in any browser. The errors are based on the rendered page (DOM), not the source code.

JuicyStudio Accessibility Toolbar

This free tool is a Firefox plugin that will test for color contrast, plus reveal info

Firefox Accessibility Extension

This free toolbar from the University of Illinois works with Firefox. It reports on accessibility features and errors for pages. This tool can check password-protected pages.

Functional Accessibility Evaluator

This free online tool from the University of Illinois checks for a number of accessibility features and errors. The reports are organized functional evaluations, meaning they organize results by how users interact with the page. This tool cannot check password-protected pages.

Grackle Docs

Grackle Docs is an accessibility checker for the Google suite of products and gives creators the option to export their accessible Google Docs file as an accessible PDF document. the product can scan Google Docs and PDF files in google Drive and check for accessibility errors

Photosensitive Epilepsy Analysis Tool

The Trace Center’s Photosensitive Epilepsy Analysis Tool (PEAT) is a free, downloadable resource for developers to identify seizure risks in their web content and software.

SortSite

A one-click web site testing tool used by federal agencies, Fortune 100 corporations and independent consultancies. The tool is available as a desktop application for Mac or Windows, and is also available as a web application.

VisCheck

Vischeck is a way of showing you what things look like to someone who is color blind. You can try Vischeck online- either run Vischeck on your own image files or run Vischeck on a web page. You can also download programs to let you run it on your own computer.

W3C Validator

This free service from the W3C will check the validity of your code based on the doctype used.

WAVE Toolbar

This free tool from WebAIM is a Firefox extension that checks for a number of accessibility errors and features. Because it runs within the browser, it can check password protected pages. The reports are shown within the context of the page. The errors are based on the rendered page (DOM), not the source code.

WAVE Web Accessibility Tool

This free service from WebAIM allows you to enter a URL and receive reports on numerous accessibility errors and features. The detail of the reports can be controlled through a side bar. Additionally it provides documentation for why each error is important and how to fix it. This service is not able to scan password-protected sites. The errors are based on the rendered page (DOM), not the source code.

Web Accessibility Toolbar for IE

This free browser-based tool from The Paciello Group tests for numerous accessibility errors. It works within Internet Explorer. It can test password protected Web pages.

Web Evaluation Tools Bookmarklet

This free tool from NC State will reveal several accessibility features of Web Sites. It will reveal heading structure, ARIA landmarks and their labels, ARIA roles and attributes, tabindex attributes, and internal links. It will also allow you to force the visual keyboard focus to always be seen. This tool is helpful primarily for determining if a feature has been implemented correctly. This tool works in any browser.

Screen readers

Screen readers should not be your first tool for testing for accessibility. Screen readers are specialized pieces of software that have a steep learning curve to use effectively. Designing to standards and using other tools to confirm that the UI has been implemented accessibly should be used instead.

Additionally, just because something works with a screen reader does not mean it is accessible with all types of assistive technology and for people with other types of disabilities.

However, there are times when a screen reader is necessary for testing. This is usually when you are implementing non-standard controls and using ARIA. If you do need to use a screen reader, these are your main options