Step 2: Run Global Tests

Check: The page has an overall structure that is visually and logically perceivable

Tests

Automated: headings

Use ARC Toolkit:

  1. Click on “Highlight”
  2. Click on “Headings”

To understand what to look for, view the video below:

Related Video

Automated: landmarks

Use ARC Toolkit:

  1. Click on “Highlight”
  2. Click on “Landmarks”

To understand what to look for, view the video below:

Related Video

Proper Implementation

The headings shown in ARC Toolkit must:

  • Start with an h1
  • Be sequential
  • Not jump levels

The landmarks shown in ARC Toolkit must:

  • Cover the entire page or view *
  • Include at least one “main” landmark

* This is because when you use either landmark roles or HTML5, you are setting up the expectation that your pages can be consistently navigated using this structure.

Additionally, there are some rules to landmark use. See documentation for landmark roles. The same principles that apply to landmark roles apply by and large to HTML5 elements.

To learn how to communicate any errors you find to your developers, see "More Info" below.

More Info

Reporting this issue

Check: The page's markup is semantic

Tests

Manual
  • Use Developer Tools to Inspect:
    • Paragraphs
    • Lists
    • Tables

Related Video

Proper Implementation

All elements are being used as intended:

  • A visual paragraph uses <p>
  • A visual list uses <ul> or <ol>
  • A visual table uses <table>
    • the first row of the table has a headers row with <th scope=”col”> for each column
    • If one of the cells in a row is a good candidate for the row descriptor, it has a  <th scope=”row”>
    • The table itself has an inner <caption> element that describes it
  • Empty <p> tags are not used for spacing. (Use CSS instead)

More Info

WebAIM on semantic structure

Reporting this issue

Check: The sequence of page elements is logical

Tests

Manual
  1. Open Chrome's Developer Tools:

    View menu > Developer > Developer Tools
  2. Highlight the top-level element, the <body>
  3. Navigate the structure by using the keyboard arrows:
    • Up and Down to navigate
    • Right to open containers

    You will see the corresponding elements highlighted on screen.

  4. Check: does the order of elements on the page match the order of the elements in the code?

Related video

Proper Implementation

The order in the element console should match the order of the visible elements on screen.

More Info

Reporting this issue

Check: Color is not used as the sole indicator of meaning

Tests

Manual

Proper Implementation

If color is used to convey meaning, a secondary method must be employed as well, so that colorblind users can perceive the information.

More Info

Reporting this issue

Check: The color of text (and images of text) sufficiently contrasts with the background color

Tests

Automated
  • Use axe DevTools > Scan ALL of my page.
    • Note contrast failures
    • Be aware that axe DevTools cannot check contrast for:
      • Text over images
      • Gradient backgrounds
Manual
  1. Visually examine the page for possible instances of poor contrast. This includes text as well as controls (buttons, fields, pick lists, etc).
  2. For any that look suspicious, use Stark to examine the contrast. (Related video)

Be sure to also check:

  • Focus states (links, form elements, etc.)
  • Active/inactive states of elements (buttons, tab labels in a tab panel, etc.)

Proper Implementation

Contrast should meet the WCAG 2.1 AA requirement, defined as a ratio of:

  • at least 4.5:1 for regular text
  • at least 3:1 for large text (18pt and larger, or 14pt and larger if it is bold)
  • At least 3:1 for graphics and user interface components (such as form input borders, buttons and their backgrounds, etc).

(See a couple of exceptions.)

For best results and for future proofing, see if you can meet the WCAG 2.1 AAA ratio.

  • at least 7:1 for normal text
  • at least 4.5:1 for large text

More Info

Reporting this issue

Check: Text is resizable

Tests

Manual
  1. Zoom in to 200% magnification
    • How:
      • Mac: Command +
      • Windows: Control +
    • Chrome will display the current level of magnification near the top of the page or in the address bar
    • Can you still see the whole page without scrolling sideways?
  2. Reset to 0% magnification
    • Mac: Command 0
    • Windows: Control 0
  3. Change the font size in your browser to Very Large in Chrome
    • How: see Set page or font size for all webpages
    • Does the page still make visual sense?
    • If there are non-textual elements that did not resize, does this affect comprehension?
    • Any horizontal scrolling?
  4. Reset the font size to where you had it

Proper Implementation

  • No horizontal scrolling should be required to read the resized text
  • If the page contains multiple blocks, the blocks should reflow:
    • If the blocks display side by side on full display, they will stack when the display shrinks
    • If your page consists of stacked blocks to begin with, the width of the blocks should match the width of the viewport

More Info

Reporting this issue

Check: There is no loss of information or functionality on small screens

Tests

Manual
  • Make your browser window 320px tall and 280px wide.
    • How:
      • Open Chrome's Developer Tools:

        View menu > Developer > Developer Tools
      • Click on the phone tablet/icon at the top right of the tools
      • Add 320 and 280 in the “Dimensions” field
  • Check for scrollbars in the new window
  • Make sure that content has not been hidden outside of the window

Related video

Proper Implementation

  • Any content that was presented side-by-side in the original window is now stacked.
  • Content may be hidden in the new window, but the web page should still provide access to this content. A typical example is a long menu that is hidden in the new page, but available by clicking on a button.
Common Exceptions

These elements are exempt from this success criteria because their very nature depends on them not being amenable to stacking or flowing:

  • Videos
  • Complex infographics
  • Tables

More Info

Reporting this issue

Check: The user is able to customize the text display

Tests

Automated
  1. Get the Custom Text Test bookmarklet.
  2. Visit the page you want to test.
  3. When the page loads, click on the "Customized Text Test" bookmark to test the page.
    • The bookmarklet should change the page's font. Did it do that?
    • Is the page usable with the new changes?

You can reset the page with a browser hard refresh:

  • Mac: Command + Shift + R
  • Windows: Ctrl + F5 or (Shift + F5) or (Ctrl + Shift + R)

Proper Implementation

This criterion asks that:

  • Developers do not prevent users from being able to customize the typography
  • If a user does customize the typography, it will not break the layout

 

More Info

Reporting this issue

Check: Content adapts when the device is rotated

Tests

Manual
  1. Load the page in your mobile device.
  2. Rotate your mobile device.
    • Does the content rotate as well so that the text is upright?

Proper Implementation

When a mobile devices is rotated, the content should rotate as well so that the text is always upright.

There is only one exception to this criterion: when the orientation of the content is essential to the operation of the information technology.

More Info

Check: All functionality of the content can be operated solely via the keyboard

Tests

Manual

Try as many of these on the page as you can:

  • Tab through the view (Shift Tab to go backwards)
  • Enter - Triggers the current link or button
  • Spacebar - Triggers the current interactive element (dropdown menu, button, checkbox, etc.)
  • Up / Down arrows - Navigates menus, selects radio buttons, adjusts number inputs
  • Right / Left arrows - Navigates menus, adjusts sliders, etc.
  • Escape - Closes the current menu or modal

Proper Implementation

All controls (tabbing, links, buttons, form elements, etc.) should be operable without using the mouse.

More Info

Reporting this issue

Check: There is a clearly visible method of indicating which element has keyboard focus

Tests

Manual
  1. Load the page.
  2. Use the Tab key to move through the page's elements to see if you can tell which element you are on.

    (related video)

Proper Implementation

  • All controls (buttons, inputs, links) should show a visible focus indicator
  • The focus indicator should offer good contrast against the background so that it is easily perceptible

More Info

Reporting this issue

Check: The navigation order of focusable elements is logical and intuitive

Tests

Manual
  1. Load the page.
  2. Use the Tab key to move through the page's elements.
    1. Does the order make sense (top to bottom, left to right)?
    2. If the language of the page uses a different direction (right to left with Hebrew and Arabic, for example), does the focus order follow the language’s conventions?

Proper Implementation

Focusable elements include links, form inputs and controls, buttons and the like.

More Info

Reporting this issue

Check: Tabbing onto a control does not change the context or the view contents

Tests

Manual
  1. Load the page.
  2. Use the Tab key to move through the page's elements. When you reach a control, you should see no drastic changes to the interface.

Proper Implementation

Focusing (via tabbing) into a control or operating it should not pass the focus or change the interface drastically.

More Info

Reporting this issue

Check: A mechanism is available to bypass blocks of content that are repeated on multiple views

Tests

Manual
  1. Load the page.
  2. Use the Tab key to move through the page's elements.
    • Are you given a link to skip to the main content?
    • Does operating the skip link (using the spacebar or Enter keys) send the focus to the main content?
  3. After activating the skip link (if it exists), tab one more time. Did this move the focus (a visible ring around a content element) inside the main content?

Proper Implementation

If there are a lot of navigational items between the top of the page and the main content, the page needs a skip link. (See "More Info" below.)

More Info

Reporting this issue

Check: When new content appears on hover or focus, the user can interact with it

Tests

Manual
  1. Move your mouse cursor over a control.
  2. If additional content gets added to the screen, check to see:
    • Did the additional content disappear when you move your cursor to it?
    • Did the additional content cover (hide) any critical content on the page?
    • Does the additional content remain on screen
      • until you move the cursor out of it (or out of the control that made it appear)
      • or until you click on a control inside the new content to dismiss it?
  3. Do the same test with the keyboard:
    1. Tab onto the control that makes the additional content appear.
    2. Perform the same checks as you did with the mouse cursor.

Proper Implementation

Additional content that appears on hover or focus should not:

  • disappear when you move your cursor to it
  • cover critical content on the page

Additional content should remain on the screen:

  • until you move the cursor out of it (or out of the control that made it appear), or
  • until you click on a control inside the new content to dismiss it

Examples of such interactions can include:

  • custom tooltips
  • sub-menus
  • other popups that display on hover and focus. 

More Info

Reporting this issue

Check: Text of links provide an informative description of where the link will take the user

Tests

Automated

Use ARC Toolkit

  • Highlight > Links

Related video

Proper Implementation

Link text:

  • Must clearly describe where the user will be taken.
    • "Click here" or "this article" are not clear enough.
  • Cannot be repeated, as this introduces ambiguity.
    • Several links simply saying "More info" would be unhelpful.
  • Is especially important in lists and tables.
    • A table containing "Edit" and "Delete" links in each row might visually make sense, but the position alone doesn't clarify each link's function to a screen reader user.

More Info

Reporting this issue

Check: The page title accurately and clearly describes the page’s contents

Tests

Manual

  • Visually examine the browser tab. If you can read the entire title, compare it to the Proper Implementation criteria.

    If the title is truncated in the browser tab, you can view the full text via Chrome's Developer Tools:

    How to view the full title text

    1. Go to the View menu and select Developer > Developer tools.
    2. In the Developer Tools pane, select the Elements tab.
    3. Click the disclosure (right-facing) triangle next to the <head> tag at the top of the code.
    4. In the code that opens, find the <title> tag. The text between <title> and </title> is the page’s title. (You might need to click another disclosure triangle to see the text.)
    5. Click the x at the top right of the Developer Tools pane to close it.

Proper Implementation

The page title should:

  • accurately summarize what the page is about
  • be succinct
  • present the important information at the beginning

For example:
A page containing a comparison of local pizza places:

Bad titles:

  • "Places Compared"
  • "Hungry? You Came to the Right Place"

Good titles:

  • "Anytown Pizza Options"
  • "Pizza Places of Anytown Compared"

More Info

Reporting this issue

Check: The page contains a "lang" attribute describing the content's primary language

Tests

Manual
  1. Open Chrome's Developer Tools:

    View menu > Developer > Developer Tools
  2. Check the <html> element (at the top) for a lang attribute.

Related video

Proper Implementation

A "lang" attribute will be present in the view's <html> tag.

It should look like:

lang="en"

If the page's primary language is not English, the "en" will be replaced with another code.

More Info

Reporting this issue

Check: Content markup is well formed

Tests

Automated
  • Use axe DevTools > Scan ALL of my page.

    It will flag major violations

Proper Implementation

The markup of the view or page needs to obey the rules so that the view can be understood and operated by assistive technology.

Common markup violations include:

  • multiple ids having the same value
  • improper nesting (tables or lists with extraneous child elements)
  • elements with duplicate attributes
  • empty list

More Info

Reporting this issue

Check: The page provides name/role/value for all elements

Tests

Proper Implementation

The purpose of your view’s elements needs to be programmatically identifiable by assistive technology such as screen readers. 

More Info

Reporting this issue

Check: Navigation is represented consistently across views

Tests

Manual

Visually compare the navigation between two pages on the site:

  1. Open two different pages of the website in separate windows and position them side-by-side.
  2. Compare the navigation of the two pages to ensure all elements remain consistent:
    • Wording of navigation items
    • Location of navigation items
    • Order of navigation items

Proper Implementation

Navigation elements should be consistently placed and labeled so that users who interact with repeated content across web pages can predict the location of the content they are looking for.

More Info

Reporting this issue

Check: Similar or repetitive elements are consistently labeled

Tests

Manual

Compare common (non-navigation) elements between two pages on the site:

  1. Open two different pages of the website in separate windows and position them side-by-side.
  2. Compare the common elements of the two pages to ensure they remain consistent:
    • Wording of elements
    • Location of elements
    • Alternative text of common images, including icons (check this by inspecting the images)

Proper Implementation

All interface elements should look the same, mean the same thing, and have the same function in all views.

More Info

Reporting this issue

Check: Status messages are programmatically perceivable

Tests

Manual

If you know of a page where a status message appears when you perform an operation, run this test on that page.

  1. Load the page and write down the web address.
  2. Perform the operation that results in the status message.
  3. Now compare the web address in the page to the address you wrote down in step 1.

If the web address changed, all is fine.

If the address did not change, perform the test below.

  1. Right-click on the message container and select Inspect.
  2. In the Developer Tools pane that appears, look at the code in the element selected. You should see one or more of the following attributes in the message container:
    • aria-live=”assertive”
    • aria-live=”polite”
    • role=”status”
    • role=”alert”

If any of these attributes are present, all is fine. Otherwise, this is an error to report to your developers.

Related video

Proper Implementation

When a user performs an operation, it is important that any responses from the page are logically perceivable (via code) as well as visually perceivable. 

(This condition is only crucial when it is the page itself that provides the status message. In this case, the page web address will not change when the status message is generated; this is why we had you check the addresses.)

More Info

Reporting this issue

Media

Check: All instances of the <img> element contain appropriate alt attributes

Tests

Automated
  1. Use axe DevTools > Scan ALL of my page.
    • It will flag the absence of alt attributes. (Note: this tool cannot judge the appropriateness of the alternative text value).
  2. Use ARC Toolkit: Highlight > Images
    • ARC Toolkit will help you determine if the image has an appropriate text alternative. 

      If an attribute is present, manually inspect it. Does it describe the image so that someone who could not see the image would understand?

Related video

Proper Implementation

  • If the image is visually meaningful, its <img> element should contain an alt attribute whose value corresponds to the meaning
  • If the image is decorative, its <img> element should have a null alt attribute: alt=””

More Info

There is a lot of subtlety to alt text - the WebAIM documentation is good:

Reporting this issue