Accessibility Testing
Keyboard readiness
- First link on tab is "Skip to Main Content" or similar: All sites with a main navigation should have a way to easily skip past the navigation.
- I can tab to all linked or active elements: Pay careful attention to linked images/thumbnails, buttons, slider controls, etc.
Should not be tabbing multiple times to the same feature (for instance, many buttons
will appear twice in tab order). You can also use the ANDI plugin to expose tab order
issues.
- Tab order is logical: Generally, the order elements are accessed by tab should be sequential starting at
the top of the page and moving left to right down the page. This can also be assessed
using the ANDI plugin.
- All elements are highlighted on focus: As you are tabbing, you should be able to visually distinguish which element has focus.
Color contrast
- All text elements have sufficient color contrast against background: Visually check for low-contast issues and use WebAIM Contrast Check to verify. Use
ANDI to check color contrast. Note: ANDI will not detect all contrast issues, such as text over images, or content in
iFrames. Color contrast can be tested using the WebAIM Contrast Checker.
Display readiness
No elements are cut off and there is no requirement to scroll in two directions at
any point when:
- The browser is zoomed by 200x: Increase the zoom level in Windows by hitting CTRL +. Be sure to evaluate all zoom
levels up to 200x.
- The browser width is reduced to 320px: Decrease the width of your browser window to 320px (you may need to open the Inspector
to accomplish this). Note any display issues that occur at any point down to 320px
wide.
Alternative descriptions
- Non text content (images, tables, charts) have alt text descriptions: Exception for images that do not carry significant meaning, such as images that are
used for backgrounds or that are purely docorative.
- Alt text descriptions accurately describe important elements of the visuals (they
are not just labels): Alt tex should not be used for any reason other than conveying meaning. It should
not be used for SEO/keyword stuffing.
- For videos: important visual content is described in audio, text-based descriptions,
and/or in captions
Code compliance
Ensure the page code is:
- Minimal: Should be free of un-necessary <span> tags and in-line styling. Should use the minimum
amount of coding to achieve the desired formatting.
- Standardized, utilizing components/snippets where appropriate, and utilizing semantic
code: Examples: All YouTube videos should be embedded through a component, images should
follow the formatting outlined on the Images Snippet page.
Layout compliance
- Headings nested in correct order
- Minimal bolding/italics/highlighting: Avoid bold/italics on entire paragraphs. Instead, a bolded Note: can be added before a paragraph to call it out. There should be no highlighting on
the Harper website.
- Other elements are formatted consistently
Editorial compliance
- Content is up-to-date and accurate
- Content meets editorial standards for capitalization, usage
- Uses consistent nomenclature for important concepts: For example: Avoid referring to the math placement exam as the math placement test in some places.
Navigation and search presence
- Links have descriptive link text: No "click here" or "learn more" type link text. When in doubt, use the title of the
destination page as link text. In cases where "click here" type text is used, for
example on News Feed articles, it should utilize aria-labels that provide more context.
- Metadata is accurate: Metadata should be short (1-2 sentences) and describe what the page is about.
- Page is available in navigation: In most cases, all pages in a subsite should appear in that site's navigation. Exceptions
include blog posts, individual club pages, or other situations where there are a high
number of pages in a subsite. In these cases, the pages should be listed out on a
page within the site.