| Title | Inappropriate Zoomed Text Visibility Check |
|---|---|
| id | css_02 |
| type | true |
| elem | all |
| test | overflow |
| score | 10 |
| level | AA |
| trust | 1 |
| ref | 59br37 |
| scs | 1.4.4 |
| dis | 43353 |
| result | warning |
The "Inappropriate Zoomed Text Visibility Check" evaluates whether any elements using CSS overflow properties (e.g., hidden, scroll, auto) do not cause essential text to be clipped or hidden when the page is zoomed up to 200%.
I found 1 text node with a CSS overflow property that might prevent a user from seeing the text when the page is zoomed.
- Visual Impairments: Visually impaired users often zoom pages to read text clearly. If overflow clips content, it may become unreadable.
- Motor Impairments: Users with motor impairments, who cannot pan precisely with a mouse or touch, may miss content if it’s hidden off-screen.
- Elderly: Elder people may have reduced contrast sensitivity and rely on magnification to interpret content.
To address inappropriate text visibility on zoom:
- Avoid using
overflow:hiddenon containers with readable content, especially when widths/heights are fixed. - Instead of clipping content, let it adapt or wrap.
- Allow content to grow as needed to accommodate zoom.