Skip to content

Instantly share code, notes, and snippets.

@smhigley
Last active April 21, 2022 15:38
Show Gist options
  • Save smhigley/e72ac02a392bfdbf8eeab7affa3a901b to your computer and use it in GitHub Desktop.
Save smhigley/e72ac02a392bfdbf8eeab7affa3a901b to your computer and use it in GitHub Desktop.
Advice on how to test new WCAG 2.1 rules

Testing Guidance for new WCAG 2.1 guidelines

1.3.4: Orientation

Quick test: resize your browser or application window between a rough estimate of portrait and landscape aspect ratios, and verify that everything looks OK and works correctly in both.

Full test: open the website or app in a tablet, and rotate the tablet.

1.3.5: Identify Input Purpose

It's better to simply verify this one in the code. Identify any form inputs that collect personal information about the person filling out the form, and check that they include a valid autocomplete attribute with a value in this list: https://www.w3.org/TR/WCAG21/#input-purposes

Axe-coconut has an experimental rule that should detect autocomplete attributes, but may miss inputs or flag inputs that are not collecting information about the primary user (e.g. a second passenger on a flight or a backup email address).

1.4.10 Reflow

Manual testing only. Quick test: resize your browser to 320px x 256px, and verify that all content is avaliable and all functionality is usable. The document should only scroll in one direction, apart from the exceptions defined here: https://www.w3.org/WAI/WCAG21/Understanding/reflow.html#content-exceptions-for-reflow.

Full test: Set your monitor's resolution to 1280x1024px, and zoom to 400%. Check the content and functionality as specified above.

1.4.11 Non-text contrast

Quick test: install the Color Contrast Analyzer extension and run it on any website or web app. Check that the contrast boundaries it identifies are sufficient for understanding any meaningful icons, charts, graphs, UI boundaries, and UI states (e.g. focused or selected). Note: this a rough test, the extension may not highlight a boundary that does actually pass 3:1.

Full test: use a contrast checker to test the contrast of adjacent colors that are deemed meaningful, as defined above.

Additional tools: The Color Contrast Analyzer from TPG may be useful, but has not been tested by our team.

1.4.12: Text Spacing

Run the following bookmarklet on your website or web app and test that all content is still readable and not cut off, and all functionality is still available: https://developer.paciellogroup.com/blog/2018/05/short-note-on-getting-spaced-out-with-sc-1-4-12-text-spacing/

1.4.13: Content on Hover or Focus

Manual testing only. Identify any non-modal popup content (e.g. a tooltip) that could overlay other content and opens on hover or focus. Ensure there is some way to dismiss the popup while still maintaining hover or focus.

A more in-depth writeup on this is coming, but there is no simple or automatic test for this one.

2.1.4: Character Key Shortcuts

Manual testing only. If you have not implemented any single-character global character shortcuts yourself, this does not apply. Access keys (i.e. with the HTML attribute accesskey) and shortcuts that are only active while a certain element has focus do not apply. If a shortcut needs a modifier key, it is not considered a single-character shortcut and does not apply.

If you have single-character shortcuts, make sure there is a way to disable or remap them (e.g. in a Settings panel).

2.5.1: Pointer Gestures

Manual testing only. If you have coded custom path-based gestures (e.g. any sort of drag, pinch, trace, etc.), verify there is an alternative way to complete the same task with only single clicks or taps. For example, a map's zoom in and out can be done via pinching or with +/- buttons.

There is no separate test to run for this apart from manual verification.

2.5.2 Pointer Cancellation

Manual testing only. First, identify any action you can take that cannot be undone. Examples include submitting a form, shutting down a virtual machine, hanging up a call, or closing a draft email without saving.

Next, for each of those actions, click or tap down on the UI element that triggers it. Then make sure it's possible to cancel the action, either by dragging the mouse or pointer off the UI element and releasing, or with an additional confirmation step.

2.5.3: Label in Name

Quick test: by running aXe-coconut (the experimental version of aXe on the Chrome web store), or by enabling experimental rules in axe-core automated tests, you can automatically test this against many elements. Note: these tests will not catch form input label mismatches, as they do not receive name from content.

Full test: manually check that the accessible name matches visible text (if visible text exists) for all interactive elements. The Firefox dev tools accessibility tab or the Chrome accessibility panel can be used to inspect the accessible name.

2.5.4: Motion Actuation

Manual testing only, and only applicable if there is anything listening to device motion (e.g. shaking, tilting, rotating). If there is, verify that there is another way to accomplish the same task without moving the device (imagine it is mounted to something like a wheelchair, and cannot be moved, then try to use the UI).

4.1.3: Status Messages

Manual testing only. Any type of alert or informational text that appears visually but allows the user to continue their current interaction is a status message, and must be read by a screen reader. This includes non-text icons that indicate loading / loaded states.

To test, first identify all status messages, and then trigger them while running a screen reader and check that they are announced without moving the user's focus.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment