Acceptance Criteria

1. Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.
2. Provide a mechanism to easily dismiss the additional content, such as by pressing Escape or selecting a close button.
3. Once new styles are set, text must fit within the bounds of its containing box without being cut off or overlapping other boxes.
4. Once content appears, it should remain visible until:
   • The user removes hover or focus from the trigger and the additional content, consistent with the typical user experience;
   • The user dismisses the additional content via the mechanism provided to satisfy the Dismissable condition; or
   • The information conveyed by the additional content becomes invalid, such as a 'busy' message that is no longer valid.
   • This criterion does not affect the use and display of the title attribute in HTML when it displays as a small tooltip.
   • Modal dialogs are out of scope for this criterion because they must take keyboard focus and thus should not appear on hover or focus.
   • Content which can be triggered via pointer hover should also be able to be triggered by keyboard focus.
   • ARIA: Use role="tooltip"
   • CSS: Use hover and focus pseudo classes

Notes

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the below examples are true.

Acceptance Criteria

1. Information that is conveyed by color differences needs to also be available in text.
2. Do not identify required or error fields using color differences only. (Please see standard set up for error handling)
3. Using a mouse, hover over the element - check that the background, border, or text color changes. (See link style standards.)

Notes

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Acceptance Criteria

1. Any sound that plays must turn off automatically within three seconds.
2. Provide a control near the beginning of the Web page that turns off sounds that play automatically.
3. Play sounds only on user request

Notes

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

Acceptance Criteria

1. 4.5:1 ratio if:
   • Normal weight text size is UNDER 1.5rem / 18pt / 150% / 24px
   • Bold weight text size is UNDER 1.17rem / 14pt / 116.67% / 18.67px
2. 3:1 ratio if:
   • Normal weight text size is OVER 1.5rem / 18pt / 150% / 24px
   • Bold weight text size is OVER 1.17rem / 14pt / 116.67% / 18.67px

When Text DOES NOT have to meet contrast minimum

• Text is part of an inactive user interface component that is purely decoration, not visible to anyone.
• Text is part of a logo or brand name.

Notes

The visual presentation of text and images of text has a contrast ratio based on the below information.

WebAIM Contrast Checker Tool

Acceptance Criteria

1. Ensure that text containers resize when the text resizes.
2. Use measurements that are relative to other measurements in the content.
   • Using rem units or percent for font sizes.
   • Calculate size and position in a way that it scales with the text.
   • Use predefined Grid system for layout to ensure liquid layout. DO NOT specify layout widths in px.
   • User must be able to change size of all text on page up to 200 percent.
   • Ensure there is no loss of content or functionality when the text resizes.

Notes

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Acceptance Criteria

1. No text should be embedded in an image.

Exceptions to the Rule

1. Customizable: The image of text can be visually customized to the user's requirements;
2. Essential: A particular presentation of text is essential to the information being conveyed. (Logotypes (text that is part of a logo or brand name) are considered essential.)

Notes

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images.

Acceptance Criteria

1. In other words, ALL pages need to be responsive and utilize media queries to reflow.
2. Breakpoints are not only triggered by narrower viewpoints, but also when browser zoom function is used.
3. All pages must fit a minimum of 320px, which is equivalent to a desktop browser window at 1280px wide and zoomed in to 400%.
4. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.
5. It is also important that content is not hidden off-screen. i.e., zooming into a vertically scrolling page should not cause content to be hidden to one side.
6. All content and funtionality must still be available, either directly, or via accessible controls.
7. Do not use fixed sized containers or fixed position content (CSS).

Notes

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions.

Acceptance Criteria

1. All button states must meet contrast ration requirements of at least 3:1.
2. Focus indicator must have sufficient contrast when the component is focused.
3. Disabled or inactive UI components do not have to meet the contrast requirements. i.e., A submit button that is visible but not active until all required fields are completed.
4. Graphical elements that must convey meaning, or are necessary for the user to understand the graphic, must meet contrast requirements.

Notes

The visual presentation of the examples below have a contrast ratio of at least 3:1 against adjacent color(s).

Ways to Test

• Identify each user-interface component (link, button, form control) on the page and:
  • Identify the visible boundaries of the component that indicate it is a component and test the contrast ratio against the adjacent colors.
  • Identify the state indicators and test the contrast ratio against the adjacent colors.
• Identify each graphic on the page that includes information required for understanding the content (i.e. excluding graphics which have visible text for the same information, or are decorative) and:
  • Check the contrast of the graphical object against its adjacent colours;
  • If there are multiple colours and/or a gradient, chose the least contrasting area to test;
  • If it passes, move to the next graphical object;
  • If the least-contrasting area is less than 3:1, assume that area is invisible, is the graphical object still understandable?
  • If there is enough of the graphical object to understand, it passes, else fail.

Acceptance Criteria

1. Bookmarklet to use for testing. opens in new window
2. A user must be able to set text style properties as listed above without losing content or functionality. (This doesnt mean all text needs to be set like this for ALL users.)
3. Once new styles are set, text must fit within the bounds of its containing box without being cut off or overlapping other boxes.

Notes

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting the below examples and by changing no other style property.