v0.4 – 2018-09-18

Accessibility Cheatsheet

Practical approaches to Universal Design for making
your website/webapp accessible to everyone https://moritzgiessmann.de/accessibility-cheatsheet/

Design for accessibility

HTML5 icon

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

Text with good and bad contrast to it’s background-color. Always choose high contrast

Understandable without color

Form error in black and whiteColors 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

Linktexts: Wrong: Click here. Right: Assignment instructions

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/

Test for accessibility

Zoom to 200%

Use your browser or document viewer zoom. Does all text remain visible?


Check keyboard navigation

Navigate just using TAB, SHIFT+TAB, ESC, and ENTER keys.

Turn your monitor off and use a screen-reader

E.g. Apple Voiceover or NVDA on Windows

Google Chrome icon

Run Google Chrome accessibility audit

It’s in the "Audits" section inside of the DevTools.

CSS3 icon

Deactivate CSS

Check if the document structure still makes sense.