/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

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

USEFUL LINKS