How to test accessibility using Visual Inspection methods

Identify accessibility barriers that cannot be detected by automated tests.

Carefully scrutinize the content and its context and note any discrepancies that automated solutions cannot detect. This manual process requires the use of sight and may be incorporated with your keyboard and screen reader testing procedures (detailed in following sections). In addition to the front end, you may want to view the page source with your browser's element inspector to get a better feel for what's going on under the hood.

As some issues can only be recognized by employing the human ability to reason and apply abstract concepts to human-created interfaces, this method was given its own section on this site to highlight its importance.

• Ensure all content is written in clear and straightforward language and is easy to understand: body text, headers, navigation, links, lists, form, buttons, etc.
• Examine the page's text size and scalability. Text should be easily readable and must automatically reflow and remain readable when zoomed. You should be able to zoom in by 200% without breaking the layout.
• Test the pages's responsive design. Resize your browser window to different screen sizes and observe the stylesheet behavior. The content should be accessible and readable on smaller resolutions and screens.
• Links should be descriptive and inform the user about the target destination. Some examples of link text that should set off red flags when you see them: "Click here"; "Read more"; "Here"; "Continue"; "Click here"; "Learn more"; "Continue"; "This website".
• Headings must be structured hierarchically and accurately communicate the content structure. Headings that are structured or nested incorrectly can cause confusion for users, so it's important to adhere to a logical hierarchy.
• No more than one H1 heading element should be on the page. WCAG does not restrict the use of multiple H1 elements, but it's considered a best practice to use just one per page due to potential semantic misuse. If you must use multiple H1s, note that each <h1> should represent a distinct section or topic on the page, and the hierarchy should make logical sense.
• Information cannot be conveyed with color alone. For example, required form fields outlined in red can be missed by colorblind or low vision users, so it's a good practice to add an asterisk or "required" to the field label. Using either of these two browser extensions: COLORVISION for Firefox, or Colorblindly for Chrome (or similar extensions), is not required, but you may find it helpful to how what these users experience when visiting your site.