Accessibility Cheatsheet

Use semantic HTML

Semantic HTML helps screenreader users to understand the contents structure and gives it meaning. Ask yourself "What is it?" when writing HTML. Use a logical headline order and structuring elements as header, footer, ul, p …

Provide text for non-text content

Every content not represented by text is invisbible for screen readers. Provide concise descriptions in alt attributes for all content images and text alternatives for charts etc. CAPTCHAs also need to be accessible.

Add labels to form elements

Form input elements need linked <label>s for screenreaders access . Example: <label for="search">Search</label><input id="search">
The placeholder attribute is not an alternative.

Show where your :focus is

Navigating by keyboard needs the currently focused element to be visibly highlighted. Interactive elements should get focused in a useful order and be focusable by default. E.g. take a <button> instead of a <span>

Use contrasting colors

Understandable without color

Colors should not be necessary to understand the content and its current state. For example don’t highlight errors just with red text. Add an subsidiary icon.

Write descriptive links

Caption video and audio

Provide text alternatives for audio and video content. Captions should be made available with pre-recorded and live video/audio content. Voice recognition software can help create captions for some type of videos.

Keep pinch and zoom alive

Pinching to zoom is very common and helps aging and low vision users. Use this <meta name="viewport" statement: user-scalable="yes". Avoid user-scalable= "no" and maximum-scale: 1 at any cost.

Use WAI-ARIA for dynamic sites

Dynamic sites such as single page applications tend to get complicated when it comes to accessibility. The WAI-ARIA standard provides tools to tackle accessibility in dynamic applications: https://www.w3.org/TR/wai-aria/