Manual testing

There are several ways to perform manual testing for accessibility. These include visual inspection, trying out navigation with and without a keyboard, and checking page transformations and interactions. In the following paragraphs, we’ll go over each WCAG principle and provide you with a checklist of what you should look for when testing for accessibility on your webpage.

Perceivable

Guideline 1.1. Text Alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

• Non-text content that conveys meaning should have its alternative text.
• Images that don’t communicate content or are just decorative should be given empty alternative text (alt=””) so the screen reader will know to skip them.

Guideline 1.2. Time-based Media

Provide alternatives for time-based media.

• Any pre-recorded audio or video content that is not an alternative to the text should be provided with alternative content that presents equivalent information (e.g. a podcast is provided with a full transcript of an episode, or a video is provided with an audio description).
• Live and pre-recorded audio content within videos should be provided with captions.

Guideline 1.3. Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

• Content on the page should be grouped meaningfully so that the content sequence and relationships are not lost when communicated via assistive technologies.
• Instructions for operating the page should not rely only on visual or auditory cues.
• Content can be viewed in both landscape and portrait orientation.
• Input fields for common information about the user should have the autocomplete option provided.

Guideline 1.4. Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

• Color should not be the only way to convey meaning (testing tip: try viewing the page in grayscale mode).
• Audio content set to auto-play that is longer than 3 seconds is provided with volume control or the option to play and pause it.
• Interactive elements (like links or buttons) should be visually distinguishable from non-interactive content.
• The contrast between the text/component and its background should be clear (this includes gradient backgrounds).
• When content is resized, it should remain usable and understandable. The page should remain readable and functional when the text is resized to 200%. No horizontal scrollbars should appear when zooming in the page (exemptions are data tables, maps, charts, etc.).
• Hover effects should behave predictably, and they should not diminish the accessibility of the content and components. The additional content that becomes available via hover should be dismissable, it should remain visible until the user dismisses it, and the user should be able to move the pointer over it.
• The content accessible via hover should also be accessible via the keyboard.

Operable

Guideline 2.1 Keyboard Accessible

Make all functionality available from a keyboard.

• Check if all website features are accessible only with the use of the keyboard.
• Users should be able to navigate inside components (for example, if a modal pops up, tabbing through the elements should not give focus to the elements outside of that modal).
• The user should be able to navigate outside a component (users should not become trapped inside a component).
• Keyboard shortcuts mapped only to one letter should be provided with a mechanism to turn it off or remap the shortcut. The shortcut should be active only when the relevant component is in focus.

Guideline 2.2 Enough Time

Provide users enough time to read and use content.

• If the content has a time limit, before the user encounters this time limit, they should be able to turn it off or adjust it. Otherwise, the user should be warned of the time limit of at least 20 seconds before it expires and given a simple way to extend it. This does not apply to the content where time limits are required or if the time limit is longer than 20 hours.
• Check that any flashing, animated, or moving displays are provided with stop, play or hide options if they are autoplay, last longer than 5 seconds, and are played in parallel with other content.

Guideline 2.3 Seizures and Physical Reactions

Do not design content in a way that is known to cause seizures or physical reactions.

• Flashing content that is spread over a large area of the screen should be checked to confirm that it respects the three flashes or below threshold.

Guideline 2.4 Navigable

Provide ways to help users navigate, find content, and determine where they are.

• Users should be able to skip to the main content or move between content sections.
• The page title should be shown, it should be unique, and it should briefly describe the content of the page.
• Focusable elements on the page should receive focus in the correct and meaningful order. For example, if you’re using the keyboard to navigate the page, the order of element focus should be predictable and logical. Elements can be navigated in forward and reverse order.
• Links should be descriptive, so their purpose and target are clear and easy to understand.
• There should be multiple ways to navigate the content.
• Any interactive component operable by the keyboard should receive a visual indicator when focused.

Guideline 2.5 Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

• Multi-pointer gestures (e.g. pinch-zoom) or path-based gestures (e.g. drag-and-drop) can be replaced with single-pointer gestures.
• Pointer actions can be aborted, undone, or reversed. For example, a mouse click is registered only when the user releases the click in the up event, not on the down event when the click is in the down position.

Understandable

Guideline 3.1 Readable

Make text content readable and understandable.

• The language of the page can be determined by assistive technology.

Guideline 3.2 Predictable

Make Web pages appear and operate in predictable ways.

• Links that contain the same text should point to the same page (for example, don’t use multiple “read more” links that take you to different pages).
• Sometimes when the user interacts with the page, the appearance of elements will change. These changes need to be user-activated, predictable, understandable, visible, and timely. Context changes should not happen unless the user initiates them; dynamic changes to context should be predictable.
• If the user returns to a previous screen or page, they should be returned to the same position from which they left that screen.

Guideline 3.3 Input assistance

Help users avoid and correct mistakes.

• Errors and user instructions should be easily visible. Error handling and instructions should be clearly identified and intuitive.
• All form fields should have visible text labels that help users understand the form’s purpose.
• If user input is required on the page, clear and concise user instructions should be provided.
• Suggestions for fixing user input errors should be provided in a timely and accessible manner.
• Users should be able to verify, confirm or reverse important data updates.

Robust

Guideline 4.1 Compatible

Maximize compatibility with current and future user agents, including assistive technologies.

• Content compatibility should be maximized across different current and future technologies, including assistive technologies.