The WCAG Explained

Summary:
WCAG 1.4 focuses on making web content more accessible through better visual presentation. It addresses the needs of users who have visual impairments like color blindness, low vision, or sensitivity to brightness. The criterion ensures that information is not conveyed through color alone, text is readable and understandable, and the content is visible and distinguishable.

What:
This criterion includes guidelines for text contrast, color use, resizing text, avoiding text in images, and adapting content to different viewing environments. The goal is to make sure that all users, regardless of their visual capabilities, can access and understand content comfortably.
Sure, here are brief summaries for each sub-criterion under WCAG 1.4 up to 1.4.13:

1. 1.4.1 Use of Color: Information should not be conveyed solely by color; it should be discernible through other means as well, ensuring accessibility for color-blind users.
2. 1.4.2 Audio Control: Provide users with the ability to control any audio that plays for more than 3 seconds, ensuring it doesn't interfere with assistive technologies or distract users.
3. 1.4.3 Contrast (Minimum): Text and images of text must have a contrast ratio of at least 4.5:1, except for large text, incidental text, or logotypes.
4. 1.4.4 Resize Text: Text should be resizable up to 200% without loss of content or functionality, aiding users with low vision or reading disabilities.
5. 1.4.5 Images of Text: Avoid using images of text whenever possible, and provide actual text alternatives to ensure accessibility for screen readers and scalability for different viewing devices.
6. 1.4.6 Contrast (Enhanced): A higher contrast ratio of 7:1 for normal text and 4.5:1 for large text is recommended for better readability, especially for users with low vision.
7. 1.4.7 Low or No Background Audio: For pre-recorded audio content, ensure that background sounds are at least 20 decibels lower than the foreground speech content, making it easier for users with hearing impairments to understand.
8. 1.4.8 Visual Presentation: Offer users options to customize visual presentation regarding text size, line spacing, alignment, and color for blocks of text, enhancing readability and comfort.
9. 1.4.9 Images of Text (No Exception): Images of text are only used for essential purposes or where particular presentation of text is crucial, such as logos.
10. 1.4.10 Reflow: Content must be presented without loss of information or functionality, and without requiring scrolling in two dimensions, for ease of reading and navigation on different screens.
11. 1.4.11 Non-text Contrast: Ensure that visual elements such as user interface components and graphical objects have sufficient contrast against adjacent colors.
12. 1.4.12 Text Spacing: Allow users to modify text spacing (like line height, paragraph spacing, letter spacing) without loss of functionality or content.
13. 1.4.13 Content on Hover or Focus: Ensure that any content that appears on hover or focus can be dismissed, viewed without triggering additional content, and remains visible until the hover or focus trigger is removed.

Why:
Visual accessibility is crucial because a significant number of users have some form of visual impairment. Without considering these aspects, we risk excluding a large audience who might find content hard to read, understand, or even physically uncomfortable to view.

Examples and Scenarios:

1. Contrast: Ensure there's enough contrast between text and background, so it's readable even for someone with low vision.
2. Color Usage: Don't use color as the only way to convey information. For instance, in a graph, use patterns or labels in addition to color.
3. Text Resizing: Text should be resizable up to 200% without loss of content or functionality, aiding users with low vision.

How to Comply:

• Websites: Use CSS to control text and background colors, ensuring high contrast. Avoid color-only indicators and ensure responsive design for text resizing.
• Mobile Apps: Implement dynamic text resizing and high-contrast modes. Test your app with different color settings and screen magnifiers.
• Documents: Use styles and formatting tools to ensure high contrast and readability. Avoid embedding essential text in images.

Exceptions:

• Logos and Brand Names: Text that's part of a logo or brand name is exempt from contrast requirements.
• Incidental Text: Text that's part of an inactive user interface component, purely decorative, or not visible to anyone, does not need to meet these guidelines.
• Advanced User Interfaces: Sometimes, in complex visualizations or certain kinds of data graphics, achieving high contrast for all text might be impractical or diminish the usability for others.