Step 3: Run Specific Tests

After running the global tests, there are a few specific tests to run, depending on whether your site contains certain elements.

Read the note of each test below to see if you need to perform that test. If you do, find a representative page in your site to test it on.

Forms

Check: Forms are structured with parts identified

Tests

If your site has a form that is long and/or contains groups of radio buttons or checkboxes, you need to perform this test.
Manual
  1. Visually examine the form:
    • Can you understand what is required and how to complete it?
  2. Inspect the form elements:
    • If there are groups of radio or checkbox buttons: are they contained in a <fieldset>?
    • If it is a long form: are sections of the form contained in <fieldsets> with a <legend> element that describes the section?

Related video

Proper Implementation

Forms, especially complex and long forms, need to be structured, with parts identified.

More Info

  • Report unlabeled elements or poorly written form instructions as a violation of WCAG 3.3.2 Labels or Instructions
  • Report poorly written labels as a violation of WCAG 2.4.6 Headings and Labels 
    (under the Navigation and Consistency category in the Technical Review template)
  • Report issues related to labels in complex elements as a violation of WCAG 4.1.2 Name, Role, Value
  • Recommend these techniques to developers

Check: Error messages are associated with the element in error

Tests

If your site has a form, you need to perform this test.
Manual
  1. Trigger an error by submitting the form with a required field left blank.
  2. Use Developer Tools to Inspect the error message.
    • Does the error element have an id attribute?
    • Does the associated input have an aria-describedby attribute with the value of the error element's id?
  3. Inspect any general error messages (those not referring to a specific field).
    • Does it reside outside of the <form> element?
  4. Repeat the above steps by submitting the form with a field filled with information that is formatted incorrectly.

Related video

Proper Implementation

  • Any error messages before (client side validation) or after submission need to be programmatically associated with the element in error.
  • If there is a general message about the errors, this message needs to exist prior to the <form> element or be associated with it.

More Info

Reporting this issue
  • Report missing error message issues as a violation of WCAG 3.3.1 Error Identification
  • Report lack of instructions needed to understand a form as a violation of WCAG 3.3.2 Labels or Instructions 
    (under the Instructions category in the Technical Review template)
  • Report form fields that detect errors prior to submission but that do not offer error suggestions before submission as a violation of WCAG 3.3.3 Error Suggestion 
    (under the Instructions category in the Technical Review template)
  • Recommend these techniques to developers

Check: Form controls have programmatically associated labels

Tests

If your site has a form, you need to perform this test.
Automated
  • Use axe DevTools > Scan ALL of my page.
    • Look for unlabeled form controls (the absence of all labeling techniques)

Proper Implementation

Each form control needs a programmatically associated label.

More Info

Reporting this issue

Check: Controls with a text label report that label to assistive technology

Tests

If your site has a form, you need to perform this test.
Manual
  1. Right-click on a control with a text label and select Inspect.
  2. In the Developer Tools window that appears, click on the Accessibility tab in the right pane.
    • Is the control reporting the same wording in that Accessibility tab as the wording on the page?

Related video

Proper Implementation

Ensure that the non-visible name matches the visible name.

More Info

Reporting this issue

Check: Text inputs are automatically filled when they ask for personal information

Tests

If your site has a form that asks for personal information, perform this test.
Automated
  1. Use the Test for Autocomplete bookmarklet to detect whether an autocomplete attribute is present when needed.
    • If there are text fields that ask for personal info but the bookmarklet doesn't show that they have the autocomplete attribute, this is a violation.
  2. Use axe DevTools > Scan ALL of my page.
    • It will test whether the autocomplete attributes contain the correct values.
Manual

This is a practical test to ensure that your browser will autofill personal information correctly. 

  1. If you have not previously set up autofill in Chrome, do so now and fill in fields that would be needed for the form you are testing (the personal data doesn't need to be real).
  2. When done, go to the page you are testing and start typing in the first field. Chrome should offer to fill out the rest.

Related video

Proper Implementation

Certain fields should be enabled for autofill, such as:

  • name
  • address
  • payment methods

By identifying their purpose with the autocomplete attribute:
<input autocomplete=”given-name”>
form elements for these fields enable the browser to fill in relevant info the user has stored in their profile.

More Info

Reporting this issue

Check: There are error prevention mechanisms for user actions with serious implications

Tests

If your site has a form that involves legal or financial information, perform this test.
Manual
  • Try entering information into the form.
    • Can you tell if the system is storing the information?
    • If the form allows the user to change or delete legal, financial, or test data, verify that the changes/deletions can be reversed, verified or confirmed.

Proper Implementation

With legal or financial transactions or other situations where there may be serious consequences, there must be a mechanism for:

  • Revising submission within a stated interval
  • Reviewing submission before actual submission
  • Allowing undeletion if the user action involves removing data

More Info

Reporting this issue

Check: Where keyboard focus can be moved to a component, focus can be moved away with intuitive keyboard controls

Tests

If your site has a form, you need to perform this test.
Manual
  • Operate each element of the form with the keyboard
    • Try to trigger validation errors where appropriate and see if you can still navigate away from the element after the error has been generated. (Keyboard traps, where focus gets stuck, often occur in validation situations.)

Proper Implementation

The general rule here: if you can tab to an element, you must be able to tab out of it.

More Info

Reporting this issue

Media

Check: Font icons associated with controls or links are hidden via ARIA

Tests

If your site uses font icons with controls or links, perform this test.
Manual
  1. Visually examine the view for icons
  2. Use Developer Tools to Inspect each icon
    • The icon element should have an aria-hidden=”true” attribute

Related video

Proper Implementation

Font icons have become common, particularly in buttons, menus, etc.

<span class="glyphicon glyphicon-star"></span>

will produce a visual star icon, but unfortunately a screen reader will only read it as “\e006” (meaningless to those users).

If the icon is only used for decoration, hiding the link with the aria-hidden=”true” attribute won't cause screen reader users to lose any meaning.

But if the font icon is inside a control or link, make sure that there is text associated with the control or link before hiding the icon so screen reader users will understand its meaning.

More Info

Reporting this issue

Check: SVG graphics have properly coded and appropriate alternate text

Tests

If your site uses SVG graphics, perform this test.
Automated
  • Use axe Expert > Analyze.
    • Look for cases of missing alternative text in SVG elements

Proper Implementation

  • SVG is a markup format that produces an image in the browser. It is rendered with an <svg> element instead of an <img>
  • If the image is meaningful (it has meaning itself or it is the only content of a control), it will need a textual equivalent

More Info

Reporting this issue