Design and Usability Testing

Source: https://accessibility.web-resources.upenn.edu/testing-evaluating-accessibility/design-and-usability-testing Parent: https://accessibility.web-resources.upenn.edu/get-help

When evaluating design assets for accessibility, consider how it will be rendered across various devices, assistive technologies, and connection speeds.

For website designs, you will want to validate the following across all breakpoints that you have deliverables for.

Information hierarchy and on-page navigation

• Are all pages titled and descriptive?
• Are headers used to convey structure, not style?
• Are layouts consistent from page to page?
• Does the layout allow for content to be broken up with subheadings and lists?
• Are calls to action clear and descriptive?
• When the layout is collapsed (like on mobile), is there enough spacing between elements?
• If there is auto-updating content, is there a way to pause, stop or hide the motion?
• Are there multiple ways to get to a piece of content, such as a site map or table of contents?

Interactive elements

• Are buttons and toggles descriptive?
• Do clickable areas have enough space?
• Clickable areas should be at least 44px x 44px.
• If a carousel is necessary, does it have a pause button and clear interaction control?
• Do video backgrounds have a pause button?
• Is there an alternative way to complete an action if the interaction is mouse- or touch-only, such as an alternative to drag and drop functionality?
• Do all elements that have a hover state have the equivalent focus state?

Color contrast

Large-sized text requires a contrast ratio of 3:1 and normal-sized text requires a contrast ratio of 4.5:1.

WCAG defines large text as text that is 18pt (~24px) and larger, or 14pt (~18.5px) and larger if it is bold.

• Does normal-sized text and large-sized text have proper color contrast at all breakpoints?
• Do interactive elements and their hover and focus states have proper color contrast?
• Do form elements, such as the borders on text fields, radio buttons, and check boxes, have proper color contrast?
• Do elements that have text over background images have proper color contrast, as well as a background color fallback for when background images are disabled?
• Do images and icons that functions as links or buttons meet color contrast requirements?
• Are other visual or non-visual cues used to identify information or meaning?
• Example: links are underlined or bars on a chart are patterned.

Forms and feedback

• Do form elements have visible labels?
• Are visible labels still present when a user is inside the form element?
• Ensure that placeholder text is not mean to be the visible label.
• Are required field identifiable by something other than color?
• Are field formatting requirements clear and intuitive?
• If a form is a multi-step form, is it clear where the user is in the process?