Accessibility
What a keyboard and a screen reader run into: labels, landmarks, tab order and link text.
Buttons without an accessible name
Give every button text, an aria-label, or an inner image with alt text, so it is announced as something other than "button".
- Id
- BUTTON_MISSING_ACCESSIBLE_NAME
- Fix estimate
- 10 min per page
Text without enough contrast against its background
Measured in the rendered page by axe-core on a sample of pages: raise the contrast of the named text to 4.5:1 (3:1 for large text), usually one colour in the theme.
- Id
- COLOR_CONTRAST_LOW
- Fix estimate
- 15 min per page
Form fields without a label
Tie every field to a label element, or give it aria-label, so it is clear what is being asked for.
- Id
- FORM_FIELD_MISSING_LABEL
- Fix estimate
- 10 min per page
Links with no accessible name
An icon or image link with no text, alt or aria-label reads as "link" to a screen reader and as nothing to a search engine; give each one a name.
- Id
- LINK_WITHOUT_NAME
- Fix estimate
- 5 min per page
ARIA attributes the browser cannot honour
Roles or aria-* attributes that do not exist, hold an invalid value or sit on an element that cannot take them; assistive technology ignores them and sometimes the element with them.
- Id
- ARIA_ATTRIBUTES_INVALID
- Fix estimate
- 10 min per page
Data table without header cells
Mark the header row with th cells so a screen reader can say which column a value belongs to.
- Id
- DATA_TABLE_MISSING_HEADERS
- Fix estimate
- 10 min per page
The same id used twice on a page
Labels, aria references and anchors point at ids; when two elements share one, the browser picks the first and the other is unreachable.
- Id
- DUPLICATE_ID_IN_PAGE
- Fix estimate
- 5 min per page
Links with generic text
Replace "read more" and "click here" with wording that says where the link goes, since links are often read out of context.
- Id
- GENERIC_LINK_TEXT
- Fix estimate
- 5 min per page
Heading levels skip a rank
Move down one heading level at a time, so an H1 is followed by an H2 before any H3.
- Id
- HEADING_ORDER_SKIP
- Fix estimate
- 5 min per page
Iframe without a title
Give each iframe a title attribute saying what it contains, otherwise a screen reader announces only "iframe".
- Id
- IFRAME_MISSING_TITLE
- Fix estimate
- 5 min per page
Lists that are not built of list items
A <ul> or <ol> holding elements other than <li> (or a <dl> out of order) is not announced as a list; keep only list items inside, and wrap other markup in them.
- Id
- LIST_STRUCTURE_INVALID
- Fix estimate
- 5 min per page
No skip-to-content link
Put a skip link first in the body so keyboard users can step past the navigation on every page.
- Id
- MISSING_SKIP_LINK
- Fix estimate
- 10 min per page
Page built almost entirely from divs
Wrap the page in header, nav, main and footer so assistive tech can jump between regions instead of reading everything in order.
- Id
- NON_SEMANTIC_LAYOUT
- Fix estimate
- 20 min per page
Positive tabindex overrides tab order
Use tabindex="0" or none at all, so focus follows the document instead of a hand-written order that drifts as the page changes.
- Id
- POSITIVE_TABINDEX
- Fix estimate
- 10 min per page
Controls too small to tap
Buttons and links measured under 24×24 px at a phone's width; give them padding or a minimum size so a thumb lands on the right one.
- Id
- TOUCH_TARGETS_TOO_SMALL
- Fix estimate
- 15 min per page
More than one H1
Keep a single H1 per page and demote the extra ones to H2 or H3.
- Id
- MULTIPLE_H1
- Fix estimate
- 5 min per page