irekrog / Accessibility Checklist
Projects that are alternatives of or similar to Accessibility Checklist
Accessibility Checklist
Table of Contents
HTML
Add alt attribute with description or not (then empty) to every <img> tag
Use only one <h1> per page
Use proper and semantic HTML tags to presenting and behavior of content
- Examples:
- Date and time should be in the
<time>tag - Table data should be in the
<table>tag - Use
<caption>to title of the table - If you have "Back to top" button on the page you should use
<button>tag to this - To listed items use
<ul><li>(items ordered isn't important) or<ol><li>(items ordered is important) - Use
<figure> tag with<figcaption>to embeds - Watch out for the difference between
<b>/<strong>and<i>/<em> - Use
<label>s tag to<input>s tags
- Date and time should be in the
Separating content layer (HTML) from presentation layer (CSS)
Add dir attribute to <html> tag
Don't use maximum-scale=1.0 in viewport <meta> tag
Use skip links navigation
Use <title> tag
Add lang attribute to <html> tag
CSS
Contrast ratio should be 4.5:1 for normal text and 3:1 for large text
Don't remove focus (outline property in CSS) from interactive tags (<a>, <button>, <input> etc.)
OTHER
Provide transcript for video or audio media (prerecorded)
Provide captions for video or audio media (prerecorded)
Provide audiodescripton or alternative media (prerecorded)
Provide captions for live audio or video
Provide audiodescription for prerecorded video
Provide sign language for media content
BEHAVIOR
Don't use shapes, colors, sounds to continue execute instructions. (Click on the red shape to continue)
If you have a form with required inputs don't use only colors to provide information about that
If you have an audio automatically plays for more than 3 second should have mechanism to play, pause and stop this or control audio volume independent from OS
Ensure tab sequence is logical
TOOLS
- NVDA (NonVisual Desktop Access)
- Accessibility Tab in Chrome DevTools
- Lighthouse