Test steps

View samples-load.js on GitHub

Given I load the sample "<input URL>"

Loads a sample to test from a web URL.

View elements-are-focused.js on GitHub

When I focus "<selector>"

Focuses an element programmatically (without a keyboard press). Note: May not activate :focus-visible styles.

When I focus "<selector>" using a keyboard

Focuses an element using the keyboard. Note: Will activate :focus-visible styles.

When I focus a link behind "<selector>" using a keyboard

Focuses a link behind the element (to check if focus indicator is visible). Note: The link is automatically injected and focused by the test.

When I focus "<selector>" using the arrow keys

Focuses an element inside a component using arrow keys. For example: Components which use a roving tabindex pattern. Note: Will activate :focus-visible) styles.

View elements-are-inspected.js on GitHub

When I inspect "<selector>" in the DOM

Checks element exists in the DOM, regardless of visibility on the page.

When I inspect "<selector>" in the Accessibility Tree

Checks an element exists in the accessibility tree.

When it has the pseudo element "<pseudo selector>"

Checks if an element has a CSS pseudo element.

View elements-are-viewed.js on GitHub

When I view the rendered "<selector>"

Checks an element is visibly rendered on the page.

View keyboard-events-occur.js on GitHub

When I press the "<key>" key once

Presses a key on the keyboard.

When I hold the "<key>" key

Holds a key on the keyboard.

View mouse-events-occur.js on GitHub

When I press the mouse down on "<selector>"

Holds the primary mouse button down on an element

When I click on "<selector>"

Clicks an element with the primary mouse button

View navigation-occurs.js on GitHub

When I navigate to the fragment "<fragment>"

Navigates to an anchor on the current page, as following a link to it would

View user-settings-are-changed.js on GitHub

When I enable "<requested mode>" mode

Changes the colour mode in the browser. For example: light, dark, forced colours.

When I preview the page for printing

Previews the page as it would print, so print styles apply

When I switch to landscape mode

Simulates landscape mode by swapping the browser's width and height. Note: This is a preview based on proportions rather than true landscape mode. Orientation media queries, screen.orientation and other device metadata will not change.

When I zoom in the browser to <zoom percent>%

Changes the zoom level in the browser.

When I set the viewport to <width>px wide

Sets the viewport width in the browser.

When I set the viewport to <width>px by <height>px

Sets both the width and height of the viewport in the browser.

When I increase the line height to <multiplier> times the font size

Increases the line height.

When I increase the spacing following paragraphs to <multiplier> times the font size

Increases the line spacing following paragraphs.

When I increase the letter spacing to <multiplier> times the font size

Increases the letter spacing.

When I increase the word spacing to <multiplier> times the font size

Increases the word spacing.

When I apply a custom foreground and background colour using a user stylesheet

Overrides the foreground and background colours using a custom stylesheet.

When I apply a custom max-width using a user stylesheet

Overrides the max width using a custom stylesheet.

When I apply a custom text-alignment using a user stylesheet

Overrides the text alignment using a custom stylesheet.

When I apply a custom line height using a user stylesheet

Overrides the line-height of the font using a custom stylesheet.

When I apply a custom font size of 200% using a user stylesheet

Resizes the font to 200% using a custom stylesheet.

View content-checks.js on GitHub

Then it should have an accessible name which contains the visible label "<visible label>"

Automatically checks if the label is in the accessible name.

Then the content should be readable and usable

Manual check to see if the content is readable.

Then it should not use instructions which rely on the visual layout

Manual check to see if sensory characteristics are used in content.

Then it should be easy to understand the purpose of each link from its text and surrounding context

Manual check to see if link text makes sense in context.

Then it should be easy to understand the purpose of each link from its text alone

Manual check to see if link text makes sense in isolation.

Then it should be easy to understand the expected input from the label text

Manual check to see if a the label is descriptive.

Then it should be easy to understand the topic or purpose from the label text

Manual check to see if a label describes topic or purpose.

View context-checks.js on GitHub

Then it should navigate to a new page

Automatically checks that context changes to another page. Note: Validates the page content actually changes.

Then it should NOT navigate to a new page

Automatically checks that context does NOT change to another page. Note: Validates the page content stays the same.

Then the URL should change

Automatically checks that the URL changes. Note: Does not validate the page content actually changes.

View contrast-checks.js on GitHub

Then its text should have a contrast ratio of "<min ratio>" against its background

Automatically checks the colour of text against its background colour.

Then its pseudo element should have a contrast ratio of "<min ratio>" against its background

Automatically checks the colour of CSS pseudo content against its background colour.

Then its selected state box-shadow or border should have a contrast ratio of "<min ratio>" against its background

Automatically checks the contrast of a box-shadow or border used to indicate that an element is selected, against it's background. Note: Used for comparing indicators drawn inside of a selected element, against it's own background.

Then its selected state box-shadow or border should have a contrast ratio of "<min ratio>" against the "<adjacent selector>" element

Automatically checks the contrast of a box-shadow or border used to indicate that an element is selected, against another element. Note: Used for comparing indicators drawn inside of a selected element, against adjacent unselected elements.

View focus-checks.js on GitHub

Then "<selector>" should be focused

Automatically checks an element is currently focused.

Then the focus should not be on a "<selector>" element

Automatically checks an element is NOT currently focused.

Then it should have a visible focus indicator

Automatically checks an element has a visible focus indicator. Note: Only checks for for outline or box-shadow.

Then its focus indicator should be at least partially visible

Automatically checks the focus indicator is at least partially visible.

Then its focus indicator should be fully visible

Automatically checks the focus indicator is fully visible.

Then it should not have any part of its focus indicator covered by "<selector>"

Automatically checks that a named element does not cover any part of the focus indicator.

Then it should not have its focus indicator entirely covered by "<selector>"

Automatically checks that a named element does not cover the focus indicator entirely.

Then the focus indicator should have a contrast ratio of 3:1 against its background

Automatically checks the contrast ratio of the focus indicator.

Then its focus indicator should have a minimum perimiter thickness of 2px

Automatically checks the thickess of the focus indicator.

View image-checks.js on GitHub

Then it should contain static text, not an image

Automatically checks an element contains static text and no image nodes.

Then it should not contain any images

Automatically checks an element contains no images or CSS background images. Note: A component with no images passes 1.4.5 and 1.4.9. If a component needs an image, use the manual images of text steps instead.

Then it should not contain images of text which should have been rendered as actual text

Manual check to see if there are images of text which do not fit the exemption criteria.

Then it should not contain any images of text at all

Manual check to see if there are any images of text at all.

Then any icon should have a text description, or be hidden from assistive technologies

Automatically checks each icon is hidden from assistive technologies when a text label exists, or has a text description when it doesn't. Note: An icon which carries its own description also records a manual checklist, so a person can judge the wording.

View keyboard-checks.js on GitHub

Then every interactive control should be reachable using the keyboard

Automatically checks every rendered control inside the element receives focus when sweeping with Tab, and with the arrow keys inside composite widgets such as a tab list. Note: Open or expand the component first, so the controls you want checked are rendered.

View markup-checks.js on GitHub

Then it is positioned after the "<previous element>" element in the DOM

Automaically checks if an element is positioned after another in the DOM.

Then it should use valid HTML with no parsing errors

Automatically checks the HTML is valid.

Then it should have an accessible name

Automatically checks that an element just has an accessible name.

Then its accessible name should be "<accessible name>"

Automatically checks the accessible name matches a given string.

Then its accessible name and visible text should be identical

Automatically checks that the accessible name is identical to the visible text.

Then it should use the tag "<tag>"

Automatically checks that an element uses a specific HTML tag.

Then it should have an accessible role of "<role>"

Automatically checks an element has a particular role.

Then it should have the attribute "<attribute>" with the value "<value>"

Automatically checks that an element has a particular attribute and value.

Then it should contain the text "<text>"

Automatically checks that an element's text includes some expected text, including text which is visually hidden.

Then it should not contain the text "<text>"

Automatically checks that an element's text does not include some text, including text which is visually hidden.

Then it should have the attribute "<attribute>"

Automatically checks that an element has a particular attribute Note: The value is not checked in this test

Then it should not have the attribute "<attribute>"

Automatically checks that an element does NOT have a particular attribute

Then it should be nested within the "<ancestor selector>" element

Automatically checks that an element is a descendant of another element.

View visual-checks.js on GitHub

Then it should reflow without requiring horizontal scrolling

Automatically checks there is no horizontal scrolling.

Then it should not lose any content or functionality

Automatically checks nothing was lost after a user setting changed, such as zoom, text spacing, orientation, a user stylesheet or forced colours. Note: Fails on clipped text, overlapping content, horizontal scrolling, collapsed or covered controls, and ignored user stylesheet preferences.

Then it is "<position>" aligned visually to the "<previous>" element

Automatically checks if elements are visually aligned.

Then it should be to the left of the text in the "<reference>" element

Automatically checks an element sits entirely to the left of the visible text in another element. Note: Use for icons which should appear before a label.

Then it should be visually identifiable as a link without relying on colour alone

Automatically checks a link for a reliance on colour. Note: Checks for underlines, borders and font-weight

Then it should be distinguishable from "<reference>" without relying on colour alone

Automatically checks an element can be told apart from another without colour, by comparing text decoration, weight, borders, outlines, shadows, background images, generated content and icons. Note: Use for a selected tab against an unselected one, or the current page against another page.

Then it should not rely on colour to convey information

Manual check to see if an element for a reliance on colour. Note: For more complicated components other than links.

Then it should have a width and height of at least 44px

Automatically checks an element has a target size of at least 44px. Note: Could cause false positives if used on things like inline links.

Then it should have a width and height of at least 24px

Automatically checks an element has a target size of at least 24px. Note: Could cause false positives if used on things like inline links.

Then it should have a visible separator between elements using a '::before' element

Automatically checks if an element has a CSS pseudo separator.

Then it should have the CSS property "<property>" with the value "<value>"

Automatically checks if an element has a certain CSS property and value.