Any deliverable must be able to fulfill these acceptance criteria.

For web design systems

Given that I have delivered a design component

• When I examine any component therein
  • The type size is no smaller than 16px Helvetica or Arial as reference
  • Any interactive target areas are no smaller than 44x44
    • Ex: A video play button
  • Any interactive component has a 3:1 minimum contrast ratio against adjacent elements
    • Ex: A button against its background
  • Any change of state exhibits a 3:1 minimum contrast ratio
    • Ex: A checked radio input compared to unchecked
    • Ex: A disabled checkbox compared to defaults
  • The focus indication has a 3:1 or greater contrast ratio between the default and focused states
  • The focus indication has a 3:1 or greater contrast ratio against adjacent elements
  • The focus indication has a minimum area equal to the width of the element and 2px in height
    • Ex: A button with a 1px focus outline meets the minimum
  • Color is not used as the sole means of conveying meaning

For full experience designs

When delivering part of a user journey that uses existing design components that already meet accessibility acceptance criteria.

Given that I have delivered a web UI design for development

• When I open the accessibility annotation layer
• Then I see
  • HTML <title> is defined
  • HTML meta description is defined
  • Logical headings are defined (h1, h2, h3)
  • Links and buttons are assigned name and role
  • Alternative text for images is defined
  • Ambiguously named components have defined aria-label attributes
  • For custom components Name, role state and group name is defined in the accessibility annotation layer
  • Form labels and fields are stacked vertically with no multi-column layouts
  • Input fields are sized to accommodate the expected character count
  • Color is not used as the sole means of conveying meaning