WCAG (Level AAA) SC 1.4.8 Visual Presentation (w3.org)
Issue description
WCAG 1.4.8, “Visual Presentation” aims to make web content more accessible to people with low vision or cognitive disabilities by providing options for customizing the visual presentation. This guideline recognizes that individuals have different visual needs and preferences, and providing flexibility can significantly improve their online experience.
Many websites have a fixed visual presentation that cannot be easily adjusted by users. This can create problems for people with:
- Low vision: Users with low vision might need larger text, higher contrast, or different color schemes to comfortably read and understand the content.
- Cognitive disabilities: Users with cognitive disabilities might benefit from simpler layouts, reduced visual clutter, or alternative font styles that are easier to process.
- Photosensitivity: Some users are sensitive to flashing or flickering content, which can trigger seizures or migraines.
WCAG requirements
This guideline requires that websites provide ways for users to customize the visual presentation of the content, including:
- Text customization: Allow users to adjust the text size, font family, and spacing.
- Color and contrast: Provide options for adjusting the color scheme and contrast.
- Layout: Allow users to customize the layout or choose from different layout options.
- Flashing content: Avoid flashing content or provide a way for users to disable it.
Benefits
- Personalized experience: Users can tailor the visual presentation to their individual needs and preferences.
- Improved readability: Users with low vision can increase text size and contrast for better readability.
- Reduced distractions: Users with cognitive disabilities can simplify the layout and reduce visual clutter.
- Prevention of seizures: Avoiding or providing control over flashing content helps protect users with photosensitivity.
While this is a AAA-level criterion, meaning it’s a higher level of accessibility, it’s an important consideration for creating a truly inclusive online experience that caters to a wide range of users and their diverse needs.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.4.8, “Visual Presentation” involves providing users with the ability to customize the visual presentation of your website’s content. Here’s how:
Text customization
- Font size: Allow users to adjust the font size through browser settings or provide on-page controls to increase or decrease text size.
- Font family: Offer a choice of font families, including options that are easier to read for people with dyslexia or other cognitive differences.
- Line height and spacing: Allow users to adjust line height and letter spacing to improve readability.
Color and contrast
- Color schemes: Offer different color schemes, including high-contrast options for users with low vision.
- Contrast controls: Provide controls for adjusting the overall contrast of the page.
- Background color: Allow users to change the background color to reduce glare or improve readability.
Layout
- Layout options: Offer different layout options, such as a single-column view for users with cognitive disabilities or a multi-column view for users who prefer to see more content at once.
- Content hiding: Allow users to hide non-essential content, such as sidebars or advertisements, to reduce visual clutter.
Flashing content
- Avoid flashing: Avoid using any flashing or blinking content that could trigger seizures.
- Provide controls: If flashing content is essential, provide a control to turn it off or reduce its frequency.
User preferences
- Save preferences: Store the user’s visual preferences so they don’t have to adjust the settings each time they visit the website.
Testing
- Assistive technology testing: Test the customization options with screen readers and other assistive technologies to ensure they are accessible and usable.
- User testing: Conduct user testing with people with low vision and cognitive disabilities to get feedback on the effectiveness of the customization options.
Example
You can provide an “Accessibility Settings” panel on your website with options to:
- Increase or decrease text size: Use a slider or buttons to adjust the font size.
- Change the font family: Offer a dropdown menu with different font choices.
- Switch between color schemes: Provide options for light and dark modes or high-contrast themes.
- Adjust line height and letter spacing: Use sliders to control these settings.
By providing these customization options, you empower users to adjust the visual presentation of your website to meet their individual needs and preferences, creating a more inclusive and accessible experience for everyone.
