checklist.html

---
layout: page
title: Web Accessibility Checklist
description: A beginner's guide to web accessibility
permalink: checklist.html
---

<nav class="toc-wrap toc-long" aria-labelledby="toc_title">
    <h2 id="toc_title" class="toc-title">Categories</h2>
    <ul class="toc">
        <li><a class="aria-roles" href="#aria-roles">Landmarks</a></li>
        <li><a class="language" href="#language">Language Attribute</a></li>
        <li><a class="outline" href="#outline">Document Outline</a></li>
        <li><a class="links" href="#links">Links</a></li>
        <li><a class="images" href="#images">Images</a></li>
        <li><a class="js" href="#js">JavaScript</a></li>
        <li><a class="forms" href="#forms">Forms</a></li>
        <li><a class="audio" href="#audio">Media (Audio and Video)</a></li>
        <li><a class="color-contrast" href="#color-contrast">Color and Contrast</a></li>
        <li><a class="color-blind" href="#color-blind">Test for Color Blindness</a></li>
        <li><a class="testing" href="#testing">Testing</a></li>
    </ul>
</nav>

<form action="/" data-persist="garlic" method="POST" class="checklist" id="simple-a11y-checklist">
	<!-- Aria Roles -->

  <fieldset class="article-section resources-section" id="aria-roles" aria-labelledby="label-landmarks" tabindex="-1">
		<legend id="label-landmarks">Landmarks</legend>
		<p>
      ARIA Landmark roles can help assistive technology users to quickly navigate to and past blocks of content in a web interface.
    </p>
		<p>
      <strong>Note:</strong> When you <a href="https://validator.w3.org/nu/">validate HTML</a> that utilizes most landmark roles, you'll receive a warning stating these roles are redundant.
    </p>
    <p>
      In HTML5, several of the landmark roles are implicit via the native structural elements which are supported by modern <a href="https://www.html5accessibility.com/">desktop browsers</a>. With that said, if you need to support older browsers, you'll want to check their support for landmark roles. If you find support to be lacking, then use the landmark roles regardless of the validation warnings. For more information, read <a href="/posts/aria-landmark-roles/">Quick Tip: ARIA Landmark Roles and HTML5 Implicit Mapping</a>.
    </p>
		<!-- banner -->
		<label for="banner-role" class="checkbox"><code>header role="banner"</code>
			<input name="aria-banner-role" id="banner-role" aria-describedby="banner-role-description" type="checkbox">
		</label>

		<p id="banner-role-description" class="description">A region of the page that is site focused. Typically your global page header.</p>

		<!-- navigation -->
		<label for="navigation-role" class="checkbox"><code>nav role="navigation"</code>
			<input name="aria-navigation-role" id="navigation-role" aria-describedby="navigation-role-description" type="checkbox">
		</label>

		<p id="navigation-role-description" class="description">Contains links to navigate to different pages of a website, screens of an application, or a sections within a single document.</p>

		<!-- main -->
		<label for="main-role" class="checkbox"><code>main role="main"</code>
			<input name="aria-main-role" id="main-role" aria-describedby="main-role-description" type="checkbox">
		</label>

		<p id="main-role-description" class="description">Wraps the focal content of document. Use only once.</p>

		<!-- article -->
		<label for="article-role" class="checkbox"><code>article role="article"</code>
			<input name="aria-article-role" id="article-role" aria-describedby="article-role-description" type="checkbox">
		</label>

		<p id="article-role-description" class="description">
      Represents an independent item of content. There may be many <code>article</code>s in a single document. <code>article</code>s are not considered landmarks, but screen readers may still surface <code>article</code>s when navigating by regions or landmarks in a document.
    </p>

		<!-- complementary -->
		<label for="complementary-role" class="checkbox"><code>aside role="complementary"</code>
			<input name="aria-complementary-role" id="complementary-role" aria-describedby="complementary-role-description" type="checkbox">
		</label>

		<p id="complementary-role-description" class="description">Supporting section related to the main content even when separated.</p>

		<!-- contentinfo -->
		<label for="content-info" class="checkbox"><code>footer role="contentinfo"</code>
			<input name="aria-contentinfo-role" id="content-info" aria-describedby="content-info-description" type="checkbox">
		</label>

		<p id="content-info-description" class="description">Contains information about the document (meta info, copyright, company info, etc).</p>

		<!-- search -->
		<label for="search-role" class="checkbox"><code>form role="search"</code>
			<input name="aria-search-role" id="search-role" aria-describedby="search-role-description" type="checkbox">
		</label>

		<p id="search-role-description" class="description">Add a `search` role to your primary search (<a href="http://adrianroselli.com/2015/08/where-to-put-your-search-role.html">how to implement</a>).</p>
	</fieldset>

	<!-- Language -->
	<fieldset class="article-section resources-section" id="language" aria-labelledby="label-language-attribute" tabindex="-1">
		<legend id="label-language-attribute">Language Attribute</legend>
		<p>Declaring a language attribute on the HTML element enables a screen reader to read out the text with correct pronunciation.</p>
		<!-- text transcript -->
		<label for="language-input" class="checkbox"><code>html lang="en"</code>
			<input name="language-input" id="language-input" aria-describedby="language-input-description" type="checkbox">
		</label>

		<p id="language-input-description" class="description">Specify a language with the <code>lang</code> attribute on the <code>html</code> element.</p>
	</fieldset>

	<!-- Document Outline -->
	<fieldset class="article-section resources-section" id="outline" aria-labelledby="label-document-outline" tabindex="-1">
		<legend id="label-document-outline">Document Outline</legend>
		<!-- form document-outline -->
		<label for="document-outline" class="checkbox">Use semantic headings and structure
			<input name="document-outline" type="checkbox" id="document-outline">
		</label>
	</fieldset>

	<!-- Links -->
	<fieldset class="article-section resources-section" id="links" aria-labelledby="label-links" tabindex="-1">
		<legend id="label-links">Links</legend>
		<!-- focus -->
		<label for="links-focus" class="checkbox">Ensure links have <code class="language-markup">:focus</code> state.
			<input name="links-focus" id="links-focus" type="checkbox">
		</label>

		<!-- underlined -->
		<label for="links-underlined" class="checkbox">Ensure links are recognizable (underlined).
			<input name="links-underlined" id="links-underlined" type="checkbox">
		</label>

    <!-- skip link -->
    <label for="skip-to-link" class="checkbox">Provide a “<a href="http://a11yproject.com/posts/skip-nav-links/">Skip to main content</a>” link.
      <input name="skip-to-link" id="skip-to-link" type="checkbox">
    </label>

	</fieldset>

	<!-- Images -->
	<fieldset class="article-section resources-section" id="images" aria-labelledby="label-images" tabindex="-1">
		<legend id="label-images">Images</legend>

		<!-- alt -->
		<label for="img-alt" class="checkbox">Use appropriate <code class="language-markup">alt</code> text. <a href="http://a11yproject.com/posts/alt-text/">Read article on using ALT text</a>
			<input name="img-alt" id="img-alt" type="checkbox">
		</label>
	</fieldset>

	<!-- JavaScript -->
	<fieldset class="article-section resources-section" id="js" aria-labelledby="label-javascript" tabindex="-1">
		<legend id="label-javascript">JavaScript</legend>
		<!-- unobtrusive js -->
		<label for="unobtrusive-js" class="checkbox">Unobtrusive JavaScript
			<input name="unobtrusive-js-input" id="unobtrusive-js" aria-describedby="unobtrusive-js-description" type="checkbox">
		</label>

		<p id="unobtrusive-js-description" class="description">Use unobtrusive JavaScript (never use inline scripting).</p>

		<!-- js alts -->
		<label for="alt-js" class="checkbox">No-JS Alternatives
			<input name="alt-js-fallback" id="alt-js" aria-describedby="alt-js-description" type="checkbox">
		</label>

		<p id="alt-js-description" class="description">Provide alternatives for users who do not have JavaScript enabled and for environments where JavaScript is unavailable.</p>
	</fieldset>

	<!-- Forms -->
	<fieldset class="article-section resources-section" id="forms" aria-labelledby="label-forms" tabindex="-1">
		<legend id="label-forms">Forms</legend>
		<!-- form layout -->
		<label for="logical-layout" class="checkbox">Logical layout
			<input name="logical-layout" type="checkbox" aria-describedby="logical-layout-description" id="logical-layout">
		</label>

		<p id="logical-layout-description" class="description">Tab order of the form follows a logical pattern.</p>

		<!-- labels -->
		<label for="labels" class="checkbox">Associated <code>label</code> for all form controls (e.g. <code class="language-markup">input</code>, <code class="language-markup">select</code> etc.)
			<input name="labels" type="checkbox" aria-describedby="labels-description" id="labels">
		</label>

		<p id="labels-description" class="description">(e.g. <code class="language-markup">&lt;label for="name"&gt;Name:&lt;/label&gt;&lt;input id="name" type="text"&gt;</code>)</p>

		<!-- placeholder -->
		<label for="placeholders" class="checkbox">Make sure <code>placeholder</code> attributes are <strong>not</strong> being used in place of <code>label</code> tags. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder">WHATWG</a>
			<input name="placeholders" type="checkbox" aria-describedby="placeholders-description" id="placeholders">
		</label>

		<p id="placeholders-description" class="description">An exception to this rule would be smaller forms with one or two fields (eg. search or log in forms)</p>

		<!-- fieldset -->
		<label for="group-related-elements" class="checkbox">Group related form elements with <code class="language-markup">fieldset</code> and describe the group with <code class="language-markup">legend</code>
			<input name="group-related-elements" type="checkbox" aria-describedby="group-related-elements-description" id="group-related-elements">
		</label>

		<p id="group-related-elements-description" class="description">Important for <code class="language-markup">input type="radio"</code> and <code class="language-markup">input type="checkbox"</code></p>

	</fieldset>

	<!-- Audio -->
	<fieldset class="article-section resources-section" id="audio" aria-labelledby="label-media" tabindex="-1">
		<legend id="label-media">Media (Audio and Video)</legend>
		<p>Providing text alternatives makes the audio information accessible to people who are deaf or hard of hearing. This also goes for search engines who are deaf and hard of hearing as well.</p>
		<!-- text transcript -->
		<label for="audio-input" class="checkbox">Provide text transcripts
			<input name="audio-input" id="audio-input" type="checkbox">
		</label>
		<label for="video-subtitles" class="checkbox">Synchronized subtitles for videos
			<input name="video-subtitles" id="video-subtitles" type="checkbox">
		</label>
	</fieldset>

	<!-- Color and Contrast -->
	<fieldset class="article-section resources-section" id="color-contrast" aria-labelledby="label-color-contrast" tabindex="-1">
		<legend id="label-color-contrast">Color and Contrast</legend>
		<label for="test-colorcontrast" class="checkbox">Test color contrast
			<input name="test-colorcontrast" id="test-colorcontrast" type="checkbox">
		</label>
		<p class="description">Best done early in the process, by ensuring that the foreground and background colors of your site have sufficient contrast you will help make your site more readable for everyone. <a href="http://leaverou.github.com/contrast-ratio/">Contrast Ratio</a> is one tool for checking the contrast of your colors for both standard vision and color deficient user.</p>
	</fieldset>

  <fieldset class="article-section resources-section" id="color-blind" aria-labelledby="label-test-color-blindness" tabindex="-1">
    <legend id="label-test-color-blindness">Test for different types of color blindness.</legend>
		<label for="deuteranopia" class="checkbox">Deuteranopia
			<input name="deuteranopia" id="deuteranopia" type="checkbox">
		</label>
		<label for="protanopia" class="checkbox">Protanopia
			<input name="protanopia" id="protanopia" type="checkbox">
		</label>
		<label for="tritanopia" class="checkbox">Tritanopia
			<input name="tritanopia" id="tritanopia" type="checkbox">
		</label>
		<p class="description">Test against different types of color blindness with a tool like <a href="http://colorfilter.wickline.org/">http://colorfilter.wickline.org</a>. If you are on a Mac, another option is <a href="http://michelf.ca/projects/sim-daltonism/">Michel Fortin's, Sim Daltonism</a> color blindness simulator.</p>
  </fieldset>

	<!-- Testing -->
	<fieldset class="article-section resources-section" id="testing" aria-labelledby="label-testing" tabindex="-1">
		<legend id="label-testing">Testing</legend>
		<p>
      Navigate your site or application using a range of tools. For instance, using only a keyboard or a screen reader will help you understand how a blind, low-vision, or limited-mobility user will experience it.
    </p>
		<label for="test-screenreader" class="checkbox" >Test using a screen reader
			<input name="test-screenreader" id="test-screenreader" type="checkbox">
		</label>
		<label for="test-keyboard" class="checkbox">Test using keyboard only
			<input name="test-keyboard" id="test-keyboard" type="checkbox">
		</label>
	</fieldset>
</form>