gradient

How to do an assessment

A web accessibility assessment measures a website's level of accessibility against a specific set of accessibility guidelines and checkpoints. The internationally recognized benchmark for web accessibility is the Web Content Accessibility Guidelines (WCAG) 2.0 AA. The result of an assessment either validates that the site is in compliance or results in a list of actions to improve accessibility and compliance.  

Most importantly, anything you do to improve web accessibility helps. Don't let perfection be the enemy of good.

You will need Knowledge, Tools, and a Checklist to test for WCAG compliance.

1. Knowledge

To do an assessment you don't need to know everything, but you will need a working-knowledge of WCAG guidelines. A summary of the WCAG 2.0 AA Principles and Guidelines can be found on our site or from other places on the internet like webaim.org.
 

2. Tools 

Accessibility assessments require automated tools and manual checks

The tool used to check for compliance does not matter, as long as the site meets all the WCAG guidelines. Below are assessment tool recommendations.

2.a Automated testing tools

Automated testing tools provide visual feedback about the accessibility of website content by injecting icons and indicators into your page. No automated tool can tell you if a page is accessible, but these automated tools facilitate human evaluation and reveal some accessibility issues.

Choose one (or more) of these automated tools:

Browser extensions
  1. WAVE Toolbar
  2. Deque Systems Axe Chrome Extension
  3. Chrome Lighthouse (this comes with Chrome as of version 60)
  4. Firefox Functional Accessibility Evaluator 
  5. Chrome Accessibility Developer Tools
Or Web-based versions of those extensions

2.b Manual testing tools

Even with manual testing, there are tools to help. But they require human interpretation.

Color Contrast Analyzer

Most of the automated tools already check for color contrast violations. But they are only looking at the CSS on a page. It does not take into account text on top of a background image. Color Contrast Analyzer should be used to test for this scenario.

Keyboard

Any keyboard will do. This is to test that the entire site can be navigated with the tab, space, up, down, and enter keys.

Screen reader (choose at least one)

Screen reader and knowledge of how it works (testing in at least one is required).

3. Checklist

The reason to do an assessment is to make sure the website is accessible. The method used to test it is not as important, as long as the website is accessible. There is a suggested checklist on this page. 

 

    Testing Keyboard Navigation

    See if you can navigate the page, including all menus and interactive elements, using only the keyboard.

    Keyboard Focus

    • Use the TAB, ENTER, SPACE, and UP and DOWN ARROW keys to navigate.
      1. You can always see the keyboard focus when tabbing through the page. ☐ Yes ☐ No
      2. Keyboard focus does not unexpectedly shift to other elements. ☐ Yes ☐ No

    Tab Order

    1. TAB through the page to see if the order is logical.
    2. See if you can activate all interactive elements with the ENTER or SPACE keys.
    • Tab order is logical. ☐ Yes ☐ No
    • All elements on the page can be reached by keyboard. This includes links, dropdown menu items, buttons, and other interactive elements. ☐ Yes ☐ No
    • If dropdown menus exist, the keyboard can be used to select and open items in them. ☐ Yes ☐ No ☐ N/A

    Electronic Forms

    • ☐ N/A (There are no forms.)
    • Tab order of form fields is logical. ☐ Yes ☐ No
    • In dropdown menus, you can navigate and select items using the keyboard alone. ☐ Yes ☐ No
    • Data entered is retained if the page is refreshed or too much time is taken to fill out form fields. ☐ Yes ☐ No
    • If a required field is left blank, keyboard focus shifts to that field when user is notified. ☐ Yes ☐ No

    Dialog Boxes AND POPUPS

    • ☐ N/A (There are no dialog boxes.)
    • Dialog boxes or pop-up menus receive keyboard focus. ☐ Yes ☐ No
    • Dialog messages can be dismissed using the keyboard. ☐ Yes ☐ No
    • Focus returns to a logical location when dialog boxes are closed. ☐ Yes ☐ No

    MultiMedia Controls

    Includes features such as videos, audio files, calendars, Flash content, and photo carousels.

    • ☐ N/A (There are no multimedia.)
    • Manual controls exist (e.g. start, pause, go back, go forward). ☐ Yes ☐ No
    • Controls can be tabbed through. ☐ Yes ☐ No
    • Controls can be activated using the keyboard. ☐ Yes ☐ No

    Testing Non-Visual Navigation (Screen Reader)

    When testing with your screen reader, use the same keyboard navigation strategies that you used in the previous section (TAB, ENTER, SPACE, and ARROW KEYS). This time, listen to how the screen reader interprets the page as you navigate with the keyboard. We recommend testing in at least one of these screen readers

    How to use a screen reader:

    Links – Descriptive Text

    One of the ways a screen reader user navigates a page is by using the TAB key to skip through the links on the page, or by bringing up a list of links. Links should be descriptive so that a user can easily determine where they will go even when taken out of context.

    • Links are descriptive, without generic text such as “click here”. ☐ Yes ☐ No
    • Distinguishing information is placed at the beginning of links. ☐ Yes ☐ No
    • The texts of links are intuitive when listed alphabetically. ☐ Yes ☐ No

    Logical Headings

    Screen reader users also navigate content using headings. Headings allow them to jump to a specific section instead of having to listen to the entire page.

    • Headings are used logically to provide structure and indicate the importance of the content. ☐ Yes ☐ No
    • Pages can be navigated using headings. ☐ Yes ☐ No

    Skip Navigation Links

    A skip navigation link is helpful for users who don’t want to work their way through all the links on the page before getting to the main content. This link does not have to be visible on the page, but it should be listed first in the tab order.

    • Skip navigation links are present. ☐ Yes ☐ No
    • Skip links work as intended, skipping to the main content of the page. ☐ Yes ☐ No

    Images

    Any non-text element needs a text description that screen reading software can read aloud to the listener. It should describe the purpose of the image in context.

    • ☐ N/A (There are no images.)
    • Purely decorative images have null alternate text (ALT=””). ☐ Yes ☐ No
    • All meaningful images have descriptive alternate text. ☐ Yes ☐ No
    • All navigation buttons have descriptive alternate text. ☐ Yes ☐ No

    Multimedia

    Includes features such as videos, audio files, calendars, Flash content, and photo carousels.

    • ☐ N/A (There is no multimedia.)
    • Multimedia controls have alternate text. ☐ Yes ☐ No
    • Video or audio do not start to play automatically, only when triggered by the user. ☐ Yes ☐ No
    • You hear what you expect when selecting controls. ☐ Yes ☐ No
    • Using the controls is intuitive. ☐ Yes ☐ No
    • Videos have audio descriptions available for any information that is only conveyed visually. ☐ Yes ☐ No
    • More video requirements in section “TESTING NON-AUDIO ACCESS”.

    Forms

    • ☐ N/A (There are no forms.)
    • Form fields have descriptive labels. ☐ Yes ☐ No
    • Appropriate descriptive labels are present and read by a screen reader when tabbing through form fields. ☐ Yes ☐ No
    • You can fill out the forms and submit them successfully with screen reader. ☐ Yes ☐ No
    • Buttons are labeled and read correctly by a screen reader. ☐ Yes ☐ No
    • If a required field is left blank, the screen reader reads the error text and navigates dialog buttons. ☐ Yes ☐ No
    • When an error dialog is dismissed, screen reader automatically returns to the empty field. ☐ Yes ☐ No

    Layout Tables

    Layout tables are not recommended for accessibility. CSS should be used rather than tables to layout information.

    • ☐ N/A (There are no layout tables.)
    • Tables are not used purely for positioning content. ☐ Yes ☐ No
    • If tables are used for layout, they do not have designated header rows. ☐ Yes ☐ No
    • If tables are used for layout, the reading order of the cells makes sense when linearized. ☐ Yes ☐ No
    • If tables are used for layout, they allow end user customization and text scaling. ☐ Yes ☐ No
    • Tables are not nested or filled with spanned or ‘spacer’ cells. ☐ Yes ☐ No

    Data Tables

    • ☐ N/A (There are no data tables.)
    • Data tables have designated header and/or column rows. ☐ Yes ☐ No
    • Tables have captions (short text descriptions). ☐ Yes ☐ No
    • Tables are not nested or filled with spanned or ‘spacer’ cells. ☐ Yes ☐ No
    • Row or column headers are associated with the appropriate Scope attribute. ☐ Yes ☐ No

    Frames

    • ☐ N/A (There are no frames.)
    • If Frames are found (not recommended for accessibility):
    • Each frame has a descriptive title attribute value. ☐ Yes ☐ No
    • When you refresh a page, it stays on the current frame. ☐ Yes ☐ No
    • While listening with screen reader, you can navigate between frames ☐ Yes ☐ No
    • While listening with screen reader, you can tell what the purpose of each frame is ☐ Yes ☐ No

    Captcha

    If CAPTCHA is used, it must be fully accessible and simple to use.

    • ☐ N/A (There is no CAPTCHA.)
    • CAPTCHA is fully accessible by keyboard. ☐ Yes ☐ No
    • CAPTCHA is fully accessible to screen reading software. ☐ Yes ☐ No
    • Audio CAPTCHA is fully accessible by screen readers, including a pause that allows the screen reader to finish before the audio begins. ☐ Yes ☐ No
    • Audio CAPTCHA has an alternative for users with hearing impairments. ☐ Yes ☐ No

    Testing Alternate Visual Access

    Many users are colorblind or have low vision. Color choice matters for both groups of users. Contrast impacts those with low vision, while those who are colorblind cannot distinguish between certain colors.

    Choice of Color

    • Color is not used as the sole means of conveying information on the page. ☐ Yes ☐ No
    • The WAVE test indicates sufficient contrast (Minimum AA) for text on solid color backgrounds. ☐ Yes ☐ No
    • The Chrome WCAG 2.0 Color Contrast Analyzer indicates sufficient contrast for text on top of images or gradient backgrounds. Example on how to use Color Contrast Analyzer. ☐ Yes ☐ No
    • Hover state has sufficient contrast or underline ☐ Yes ☐ No

    Font Size / Zoom

    This is important for users with low vision who change zoom settings.

    • Text is actual text (e.g. not images of text). ☐ Yes ☐ No
    • Font sizes increase when you zoom in on the page. ☐ Yes ☐ No
    • Text does not become pixelated when zooming in on the page. ☐ Yes ☐ No
    • Items do not become jumbled when zooming in on the page. ☐ Yes ☐ No

    Usability

    Many users have a non-apparent disability, such as a traumatic brain injury or a cognitive or learning disability, that affects their ability to process information. Clear organization of information is vital for these users.

    Clear and Simple Content

    • Fonts are basic, legible, easy to read. ☐ Yes ☐ No
    • The viewing area is not crowded or chaotic. ☐ Yes ☐ No
    • There is plenty of white space. ☐ Yes ☐ No
    • There is no flashing content, blinking or moving text. ☐ Yes ☐ No

    Consistency and Logic in visual Navigation

    • Menus are consistent across the entire product. ☐ Yes ☐ No
    • Visual navigation is logical. ☐ Yes ☐ No

    Testing Non-Audio Access

    This includes audio files such as podcasts as well as videos.

    • ☐ N/A (There is no audio or video content.)
    • Users have control over whether or not to start playing the video or audio. ☐ Yes ☐ No
    • All videos have captions. ☐ Yes ☐ No
    • Existing captions are accurate. ☐ Yes ☐ No
    • Captions have sufficient contrast. ☐ Yes ☐ No
    • All audio files have a link to a transcript. ☐ Yes ☐ No

    STEM (science, technology, engineering and mathematics) Content

    This includes math or other content that uses special symbols:

    • ☐ N/A (There is no content with math or other symbols.)
    • Screen reader recognizes and reads the symbols (Formatted using MathML, MathJax, LaTeX). ☐ Yes ☐ No

    Downloadable Files

    Documents that are linked for download from a site also need to be accessible.

    • ☐ N/A (There are no downloadable files.)
    • PDFs are searchable / OCR’d (you can highlight or search text in the document). ☐ Yes ☐ No ☐ N/A
    • PDFs have tags and the reading order is logical. ☐ Yes ☐ No ☐ N/A
    • PDFs have alt text for non-text elements. ☐ Yes ☐ No ☐ N/A
    • Word documents have hierarchical headings. ☐ Yes ☐ No ☐ N/A
    • Word documents have alt text on non-text elements. ☐ Yes ☐ No ☐ N/A
    • PowerPoint slides have logical reading order. ☐ Yes ☐ No ☐ N/A
    • PPT slides have alt text on non-text elements. ☐ Yes ☐ No ☐ N/A
    • PPT slides have sufficient contrast.☐ Yes ☐ No ☐ N/A