Git Product home page Git Product logo

accessibility-checklist's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.