Skip to content

Instantly share code, notes, and snippets.

@feoche

feoche/a11y-checklist.md

Last active December 11, 2019 14:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save feoche/8c3f2d917dbe5b8c7dd9961e5b9703b1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save feoche/8c3f2d917dbe5b8c7dd9961e5b9703b1 to your computer and use it in GitHub Desktop.
Download ZIP
a11y checklist (based on the http://a11yproject.com/checklist.html page, kudos to them)
Raw
a11y-checklist.md

a11y checklist

Landmarks

  • <html lang="en">
  • <header role="banner">
  • <nav role="navigation">
  • <main role="main">
  • <article role="article">
  • <aside role="complementary">
  • <footer role="contentinfo">
  • <form role="search">

Document Outline

  • Use semantic headings and structure.

Links

  • Ensure links have :focus state.
  • Ensure links are recognizable (underlined).
  • Provide a “Skip to main content” link (using <a href="#main">Skip to main content</a> and <main id="main">).

Images

  • Use appropriate alt text.

Javascript

  • Use unobtrusive Javascript (never use inline scripting).
  • No-JS Alternatives (fallbacks for users w/o JS).

Forms

  • Tab order of the form follows a logical pattern.
  • Associated label for all form controls (e.g. input, select etc.).
  • Make sure placeholder attributes are NOT being used in place of label tags.
  • Group related form elements with fieldset and describe the group with legend (important for radio and checkbox <input>).

Color and Contrast

  • Test color contrast.
  • Test for different types of color blindness (Deuteranopia, Protanopia, Tritanopia).

Media (Audio and Video)

  • Provide text transcripts.
  • Synchronized subtitles for videos.

Testing

  • Test using a screen reader.
  • Test using keyboard only.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment