Accessibility
What the findings of the accessibility check mean and how to fix them. The topics follow the categories of the report.
Structure and language
What the lang attribute does
The lang attribute on the html element says which language a page is written in. Screen readers pick their pronunciation by it, browsers and translation services the language.
How headings structure a page
Headings from h1 to h6 form the table of contents of a page. Screen reader users jump through them from section to section instead of listening to everything.
What landmarks are
Landmarks divide a page into regions such as header, navigation, main content and footer. Screen readers and keyboards use them to jump straight to where the content begins.
Images and media
What makes good alt texts
An alt text stands in for an image for everyone who can't see it, and for search engines. In a few words it says what the image conveys in that place.
Why iframes need a title
An iframe embeds another page, such as a map, a video or a form. Its title tells screen reader users what is inside before they go in.
What captions and transcripts do
Captions make videos understandable for people who are deaf or hard of hearing, transcripts do the same for audio. Part of it is that nothing starts playing with sound by itself.
Operation and forms
What makes good link texts
A good link text says where the link leads, even without the text around it. Links made of an icon only need a name the screen reader can read out.
Why buttons need a name
A button without a name is announced only as “button”, and nobody knows what it does. Icon buttons for menu, search or close therefore need a name in the code.
What form fields need
Every form field needs a visible label that is tied to the field in the code. Fields for personal details also get autocomplete, so the browser can fill them in.
How a page becomes usable with the keyboard
Many people use websites without a mouse, with Tab, Enter and the arrow keys. For that every control must be reachable, in a sensible order, and the focus must be visible.
ARIA
When ARIA helps and when it harms
ARIA is a set of attributes that tell screen readers what an element is and what state it is in. Used well it fills gaps in HTML; used badly it hides or distorts content.
What ARIA references and unique IDs need
Labels and descriptions point to other elements by their ID. That only works if the ID exists and occurs only once on the page.
Presentation
What sufficient contrast is
Contrast is the difference in lightness between text and background. Normal text needs at least 4.5:1 and large text 3:1, so that people with low vision can read it too.
How large click targets must be
Links and buttons must be large enough or spaced far enough apart to be hit reliably. WCAG 2.2 asks for at least 24 × 24 pixels or equivalent spacing.
What reflow on zoom means
Reflow means the content wraps into a single column when zoomed in a lot, instead of running off the side. At 320 pixels wide you must not have to scroll sideways.