feoche/a11y-checklist.md

## a11y-checklist.md

      
    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.