Accessibility finding
Layout and markup disagree: unmarked lists and tables, text missing on mobile, blocks moved by CSS
Accessibility Warning Severity: Medium
Part of the audit What looks like structure is not marked up as structure. Finding id: accessibility.layoutVsMarkup.
What it costs you
A screen reader announces a real list with its number of items and lets its user move through a real table by row and column. Lines with typed bullets, or columns made with spaces and line breaks, come out as one run of text.
What to do
Worth checking by eye; we assume the look of the page shows the structure that was meant. Mark a list as ul or ol with li, and a table of data as table with th for the headers.
What it checks
- Visual list or table without markup
How to fix it
Use list and table elements
How to check: Recrawl: the block is marked up as what it looks like.
Keep the content at every width
- Find the CSS rule that hides the block at small widths.
- Remove it, or replace the block by a control (details and summary, or a button) that opens the same text.
How to check: Open the page at phone width: the text is there or one tap away.
Order the markup as it is read
How to check: Read the page with CSS switched off: the blocks come in the order they have on screen.
Thresholds
| Name | Default | Meaning |
|---|---|---|
min_words_removed | 20 | A block that is visible on desktop and not on mobile is reported from this many words. Shorter blocks are mostly labels that an icon replaces. |
How to verify by hand
A person.
What this relies on
The visual design shows the intended structure.