WCAG 2.1 Test of Model 2: Add a new section to the end of each existing Guideline that will have new SCs

Unsanctioned made-up example of how stuff might look

< Model listing

A quick(ish) demo of how the current (very draft) new SCs might fit in, just focusing on guideline 1.4, and assuming we use an addative-only approach where the current WCAG 2.0 SCs are un-changed.


WCAG 2.0 Guidelines

Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.


Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

Note: This success criterion addresses color perception specifically. Other forms of perception are covered in Guideline 1.3 including programmatic access to color and other visual presentation coding.

1.4.2 Audio Control: 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. (Level A)

Note: Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether or not it is used to meet other success criteria) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)

  • Customizable: The image of text can be visually customized to the user's requirements;

  • Essential: A particular presentation of text is essential to the information being conveyed.

Note: Logotypes (text that is part of a logo or brand name) are considered essential.

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;

  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

1.4.7 Low or No Background Audio: For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true: (Level AAA)

  • No Background: The audio does not contain background sounds.

  • Turn Off: The background sounds can be turned off.

  • 20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.

    Note: Per the definition of "decibel," background sound that meets this requirement will be approximately four times quieter than the foreground speech content.

1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)

  1. Foreground and background colors can be selected by the user.

  2. Width is no more than 80 characters or glyphs (40 if CJK).

  3. Text is not justified (aligned to both the left and the right margins).

  4. Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

  5. Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

1.4.9 Images of Text (No Exception): Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. (Level AAA)

Note: Logotypes (text that is part of a logo or brand name) are considered essential.


1.4.10 Reflow to Single Column: Content can be viewed as a single column with all information in the correct reading sequence, except for the following: (Level A)

  • Data tables may retain their multi-column format with reflow.
  • If the user agent cannot reflow content containing interactive controls, the author is exempt from reflow with this content.

1.4.11 Graphics Contrast: The visual presentation of graphical objects that are essential for understanding the content have a contrast ratio of at least 4.5:1 against their immediate surrounding background, except for the following: (Level AA)

  • Thicker: where the minimum width and height of the graphical object is at least 3px the graphic has a contrast ratio of at least 3:1;
  • Sensory: Non-text content that is primarily intended to create a visual sensory experience has no minimum contrast requirement;
  • Logotypes: Graphics that are part of a logo or brand name have no minimum contrast requirement.

1.4.12 Interactive Element Contrast: The visual presentation of the following has a contrast ratio of at least 4.5:1 against the immediate surrounding background in all states including when the page is scrolled: (Level AA)

  • important (non-text) information in an interactive image;
  • input elements or the border line(s) of input elements;
  • focus and select indicator(s).

3:1 Exceptions: The visual presentation of the following has a contrast ratio of at least 3:1 against the immediate surrounding background in all states including when the page is scrolled:

  • disabled interactive elements;
  • thicker lines: where the minimum width of the line is at least 3px;
  • medium width border;
  • medium indicator;
  • focus indicators for an interactive logo image.

1.4.13 Resize content: The content of the Web page can be increased to 400% without loss of content or functionality, without two dimensional scrolling, except for the following: (Level AA)

  • If the spatial layout of some the content is essential to that contents use, that part of the content is exempt.
  • If the user-agent fits the layout to the viewport and does not provide a means of reflowing content, two dimensional scrolling is exempt.

1.4.14 Visual Presentation (Enhanced): For the visual presentation of blocks of text and objects, a mechanism is available to achieve the following (Level AA):

  1. Foreground and background colors can be selected by the user.
  2. Width is no more than 80 characters or glyphs for Latin and Semitic based languages; or 40 for Chinese, Japanese, and Korean; or can be selected by the user.
  3. Text is not fully justified (aligned to both the left and the right margins), or justification can be set by the user.
  4. Line spacing (leading) is at least space-and-a-half within paragraphs; and paragraph spacing is at least 1.5 times larger than the line spacing.
  5. Text can be resized, without assistive technology, up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
  6. Increased line and border spacing can be added around blocks of text and objects, such that they can be increased up to 200% without loss of content or functionality.