Layout Measurement Value Check

Description

The “Layout Measurement Value Check” evaluates whether all layout-related measurement units (e.g., for width, padding, font size) are defined using relative units such as % and em.

Example outcome

I found all instances where the measurement units that define the width of content elements are expressed in relative values.

Impact

• Visual Impairments: Zooming may cause text to overflow or become clipped.
• Motor Impairments: Individuals with motor imairments may need to resize the interface for ease of interaction, and fixed sizes prevent that.
• Cognitive Disabilities: Layout issues from fixed sizes create distractions or confusion.
• Color Blindness: Users may zoom to compensate color blindness, but absolute units break layout scaling.
• Elderly: Poor text scaling breaks page layout.

Fixes

To address inappropriate layout measurements defined using absolute units:

1. Locate the inappropriate measurement definition.
2. Replace the absolute unit by a relative one (e.g., em, rem and %).

Resources

• WCAG 2.2: Understanding Success Criteria 1.4.4
• WCAG 2.2 Techniques: Technique G146: Using liquid layout
• WebAIM: Accessible CSS