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 …
Practical approaches to Universal Design for making
your website/webapp accessible to everyone
https://moritzgiessmann.de/accessibility-cheatsheet/
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 …
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.
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.
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>
Colors should not be necessary to understand the content and its current state. For example don’t highlight errors just with red text. Add a subsidiary icon.
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.
Pinching to zoom is very common and helps aging and low vision users. Use this <meta name="viewport"
statement: user-scalable="yes"
. Avoid
and user-scalable= "no"
at any cost.maximum-scale: 1
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.
Use your browser or document viewer zoom. Does all text remain visible?
Navigate just using ←↑↓→ TAB, SHIFT+TAB, ESC, SPACE and ENTER keys.
It’s in the "Audits" section inside of the Chrome DevTools.
Check if the document structure still makes sense.