v0.11 – 2023-12-30

Accessibility Cheatsheet

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

Buy Me a Coffee at ko-fi.com

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.

Use contrasting colors

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

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 only if necessary

Dynamic sites such as single page applications tend to get complicated when it comes to accessibility. Semantic HTML should always be considered before using WAI-ARIA.

Test for accessibility

Zoom to 400%

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

Keyboard

Check keyboard navigation

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

Turn your monitor off and use a screen-reader

E.g. Apple Voiceover or NVDA on Windows

Google Chrome icon

Run Lighthouse accessibility audit

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

CSS3 icon

Deactivate CSS

Check if the document structure still makes sense.