Asking Vendors about Visual Design

When working with vendors, a natural point to incorporate accessibility is when visual designs are being finalized and developers are preparing for build. The following are questions that are appropriate questions to ask about the designs at that point to ensure accessibility, identify issues for redesign, and resolve defects before they become too costly to fix.

  1. Choose colors that conform with color contrast requirements in WCAG. Use the WebAIM Color Contrast Checker, Contrast Triangle, or similar tools to verify color choices.
  2. Include skip links in designs, to allow keyboard and screen reader users to skip navigation elements repeated on each page.
  3. Include controls in designs for content that starts automatically (for example, a video that lasts longer than 5 seconds must have an easy to find play/pause button).
  4. Provide designs for focus indicators and focus states for interactive controls (to support keyboard-only use) that conform to requirements in WCAG.
  5. Avoid use of color alone to convey meaning, for example to identify links.
  6. For each page, identify any ARIA landmarks, ARIA labels, and the heading hierarchy.
  7. Identify any interactions that use scripting to update the page, such as AJAX driven filters, content insertions, or status messages. For each interaction:
    1. describe how the interaction will be made accessible to a keyboard; and
    2. describe how the interaction will be made accessible to a screen reader.
  8. Identify any interactions driven by custom widgets and scripting, such as accordions, carousels, comboboxes, disclosures, dropdowns, and tooltips. For each interaction:
    1. describe how the interaction will be made accessible to a keyboard; and
    2. describe how the interaction will be made accessible to a screen reader; and
    3. if the widget is being used in lieu of a standard HTML element, why the standard HTML element is not being used.
  9. Identify any content or interactions that may not work on particular orientations of a mobile device (portrait or landscape).
  10. Describe your approach to ensuring that text, text overlaid on background images, links, interactive controls, and focus states can be perceived by people with low vision or colorblindness.
  11. Identify which non-text content should and should not have text alternatives, and if the content is provided by an editor, how you will encourage the editor to provide an appropriate text alternative for all non-text content.
  12. Include form feedback in designs, that does not rely solely on color (for example, relying on the color red to indicate an error), and provide clear information about form status.