checklist.html

---
layout: page
title: Checklist
description: Determine how accessible your site is
permalink: checklist/
redirect_from:
  - "/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="content" href="#section-content">Content</a></li>
    <li><a class="global-code" href="#section-global-code">Global code</a></li>
    <li><a class="keyboard" href="#section-keyboard">Keyboard</a></li>
    <li><a class="images" href="#section-images">Images</a></li>
    <li><a class="headings" href="#section-headings">Headings</a></li>
    <li><a class="lists" href="#section-lists">Lists</a></li>
    <li><a class="controls" href="#section-controls">Controls</a></li>
    <li><a class="tables" href="#section-tables">Tables</a></li>
    <li><a class="forms" href="#section-forms">Forms</a></li>
    <li><a class="media" href="#section-media">Media</a></li>
    <li><a class="appearance" href="#section-appearance">Appearance</a></li>
    <li><a class="animation" href="#section-animation">Animation</a></li>
    <li><a class="color-contrast" href="#section-color-contrast">Color Contrast</a></li>
    <li><a class="mobile-touch" href="#section-mobile-touch">Mobile/Touch</a></li>
  </ul>
</nav>

<section class="resources-section checklist-introduction" id="section-introduction" aria-labelledby="label-introduction">
  <h2 id="label-introduction">Introduction</h2>
  <p>
    This checklist uses the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">The Web Content Accessibility Guidelines (<abbr>WCAG</abbr>)</a> as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.
  </p>
  <p>
    There are three levels of accessibility compliance in the WCAG, which reflect the priority of support:
  </p>
  <ol>
    <li><strong>A</strong>: Essential. If this isn't met, assistive technology may not be able to read, understand, or fully operate the page or view.</li>
    <li><strong>AA</strong>: Ideal support. Now required for EU government and public body websites.</li>
    <li><strong>AAA</strong>: High-level support. This is typically reserved for sites that serve a specialized audience.</li>
  </ol>
  <p>
    This checklist targets many, but not all level A and AA concerns. Note that the different levels of WCAG support do not necessarily indicate an increased level of difficulty to implement.
  </p>
  <h3 id="success-criteria">Success criteria</h3>
  <p>
    Each item on this checklist has a corresponding WCAG "success criterion." Success criterion are the specific, testable rules that power the WCAG, described by a reference number and short title. For example, the rule about text resizing is called <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">1.4.4 Resize text</a>.
  </p>
  <p>
    Some accessibility issues may have multiple success criterion apply to them. We have identified the most relevant for each checklist item.
  </p>
  <h3 id="does-this-checklist-guarantee-my-site-is-accessible">Does this checklist guarantee my site is accessible?</h3>
  <p>
    No. However, addressing the issues called out in this checklist will help improve the experience for everyone who uses your site.
  </p>
  <p>
    The issues this checklist prompts you to check for covers a wide range of disability conditions. There is no such thing as "perfect accessibility" or a site being "100% accessible". You should be wary of companies and services that make such promises. If you need professional accessibility help, use <a href="/resources/#professional-help">professional accessibility services</a>.
  </p>
</section>

<section class="article-section resources-section checklist-section" id="section-content" aria-labelledby="label-content">
  <h2 id="label-content">Content</h2>
  <p>
    Content is the most important part of your site.
  </p>
  <div class="checklist">
    <details id="use-plain-language-and-avoid-figures-idioms-and-complicated-metaphors">
      <summary>
        Use plain language and avoid figures of speech, idioms, and complicated metaphors.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html">3.1.5  Reading Level</a>
        </p>
        <p class="checklist-description">
          Write content at <a href="https://datayze.com/readability-analyzer.php">an 8th grade reading level</a>.
        </p>
      </div>
    </details>
    <details id="make-sure-that-button-a-and-label-element-content-is-unique-and-descriptive">
      <summary>
        Make sure that <code>button</code>, <code>a</code>, and <code>label</code> element content is unique and descriptive.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
        </p>
        <p class="checklist-description">
          Terms like "click here" and "read more" do not provide any context. Some people navigate using a list of all buttons or links on a page or view. When using this mode, the terms indicate what will happen if navigated to or activated.
        </p>
      </div>
    </details>
    <details id="use-left-aligned-text-for-left-to-right-languages-and-right-aligned-text-for-right-to-left-languages">
      <summary>
        Use left-aligned text for left-to-right languages, and right-aligned text for right-to-left languages.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">1.4.8 Visual Presentation</a>
        </p>
        <p class="checklist-description">
          Centered-aligned or justified text is difficult to read.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-global-code" aria-labelledby="label-global-code">
  <h2 id="label-global-code">Global code</h2>
  <p>
    Global code is code that affects your entire website.
  </p>
  <div class="checklist">
    <details id="validate-your-html">
      <summary>
        Validate your HTML.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html">4.1.1 Parsing</a>
        </p>
        <p class="checklist-description">
          <a href="https://validator.w3.org/nu/">Valid HTML</a> helps to provide an consistent, expected experience across all browsers and assistive technology.
        </p>
      </div>
    </details>
    <details id="use-a-lang-attribute-on-the-html-element">
      <summary>
        Use a <code>lang</code> attribute on the <code>html</code> element.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html">3.1.1 Language of Page</a>
        </p>
        <p class="checklist-description">
          This helps screen readers to <a href="https://github.com/FreedomScientific/VFO-standards-support/issues/188">pronounce content correctly</a>.
        </p>
      </div>
    </details>
    <details id="provide-a-unique-title-for-each-page-or-view">
      <summary>
        Provide a unique <code>title</code> for each page or view.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">2.4.2 Page Titled</a>
        </p>
        <p class="checklist-description">
          The <code>title</code> element, contained in the document's <code>head</code> element, is often the first piece of information announced by assistive technology. This helps tell people what page or view they are going to start navigating.
        </p>
      </div>
    </details>
    <details id="ensure-that-viewport-zoom-is-not-disabled">
      <summary>
        Ensure that viewport zoom is not disabled.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">1.4.4 Resize text</a>
        </p>
        <p class="checklist-description">
          Some people need to increase the size of text to a point where they can read it. Do not stop them from doing this, even for sites with a native app-like experience (even native apps should respect Operating System settings for resizing text).
        </p>
      </div>
    </details>
    <details id="use-landmark-elements-to-indicate-important-content-regions">
      <summary>
        Use landmark elements to indicate important content regions.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">4.1.2 Name, Role, Value</a>
        </p>
        <p class="checklist-description">
          Landmark regions help communicate the layout and important areas of a page or view, and can allow quick access to these regions. For example, use the <code>nav</code> element to wrap a site's navigation, or the <code>main</code> element to contain the primary content of a page.
        </p>
      </div>
    </details>
    <details id="ensure-a-linear-content-flow">
      <summary>
        Ensure a linear content flow.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html">2.4.3 Focus Order</a>
        </p>
        <p class="checklist-description">
          Remove <code>tabindex</code> attribute values that aren't either <code>0</code> or <code>-1</code>. Elements that are inherently focusable, such as links or buttons, do not require a <code>tabindex</code>. Elements that are not inherently focusable should not have a <code>tabindex</code> applied to them outside of very specific use cases.
        </p>
      </div>
    </details>
    <details id="avoid-using-the-autofocus-attribute">
      <summary>
        Avoid using the <code>autofocus</code> attribute.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html">2.4.3 Focus Order</a>
        </p>
        <p class="checklist-description">
          People who are blind or who have low vision may be disoriented when focus is moved without their permission. Additionally, <code>autofocus</code> can be problematic for people with motor control disabilities, as it may create extra work for them to navigate out from the autofocused area and to other locations on the page/view.
        </p>
      </div>
    </details>
    <details id="remove-session-timeouts">
      <summary>
        Remove session timeouts.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">2.2.1 Timing Adjustable</a>
        </p>
        <p class="checklist-description">
          If you cannot, let the person using your site know the timeout exists ahead of time, and provide significant notice before the timer runs out.
        </p>
      </div>
    </details>
    <details id="remove-session-timeouts">
      <summary>
        Remove <code>title</code> attribute tooltips.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">4.1.2 Name, Role, Value</a>
        </p>
        <p class="checklist-description">
          The <code>title</code> attribute has <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title#Accessibility_concerns">numerous issues</a>, and should not be used if the information provided is important for all people to access. An acceptable use for <code>title</code> would be labeling an <code>iframe</code> element to indicate what content it contains.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-keyboard" aria-labelledby="label-keyboard">
  <h2 id="label-keyboard">Keyboard</h2>
  <p>
    It is important that your interface and content can be operated, and navigated by use of a keyboard. Some people cannot use a mouse, or may be using other assistive technologies that may not allow for "hovering" or precise clicking.
  </p>
  <div class="checklist">
    <details id="make-sure-there-is-a-visible-focus-style-for-interactive-elements-that-are-navigated-to-via-keyboard-input">
      <summary>
        Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html">2.4.7 Focus Visible</a>
        </p>
        <p class="checklist-description">
          Can a person navigating with a keyboard, <a href="https://axesslab.com/switches/">switch</a>, or screen reader see where they currently are on the page?
        </p>
      </div>
    </details>
    <details id="check-to-see-that-keyboard-focus-order-matches-the-visual-layout">
      <summary>
        Check to see that keyboard focus order matches the visual layout.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">1.3.2 Meaningful Sequence</a>
        </p>
        <p class="checklist-description">
          Can a person navigating with a keyboard or screen reader move around the page in a predictable way?
        </p>
      </div>
    </details>
    <details id="remove-invisible-focusable-elements">
      <summary>
        Remove invisible focusable elements.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html">2.4.3 Focus Order</a>
        </p>
        <p class="checklist-description">
          Remove the ability to focus on elements that are not presently meant to be discoverable. This includes things like inactive drop down menus, off screen navigations, or modals.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-images" aria-labelledby="label-images">
  <h2 id="label-images">Images</h2>
  <p>
    Images are a very common part of most websites. There are techniques you can use to help make sure they are enjoyable by all.
  </p>
  <h3 id="all-images">All images</h3>
  <div class="checklist">
    <details id="make-sure-that-all-img-elements-have-an-alt-attribute">
      <summary>
        Make sure that all <code>img</code> elements have an <code>alt</code> attribute.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content.</a>
        </p>
        <p class="checklist-description">
          <code>alt</code> attributes (alt text) give a description of an image for people who may not be able to view them. When an <code>alt</code>ttribute isn't present on an image, a screen reader may announce the image's file name and path instead, failing to communicate the image’s content.
        </p>
      </div>
    </details>
    <details id="make-sure-that-decorative-images-have-empty-alt-attribute-values">
      <summary>
       Make sure that decorative images have empty <code>alt</code> attribute values.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content</a>
        </p>
        <p class="checklist-description">
          Decorative images do not communicate information that is required to understanding the website's content. Historically they were used for flourishes and <a href="https://en.m.wikipedia.org/wiki/Spacer_GIF">spacer gif images</a>, but are less relevant for modern websites. Empty <code>alt</code> attributes are also sometimes known as null alt attributes.
        </p>
      </div>
    </details>
    <details id="provide-a-text-alternative-for-complex-images-such-as-charts-graphs-and-maps">
      <summary>
        Provide a text alternative for complex images such as charts, graphs, and maps.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content</a>
        </p>
        <p class="checklist-description">
          Is there a plain text which lists points on the map or sections of a flowchart? Describe all visible information. This includes graph axes, data points and labels, and the overall point the graphic is communicating.
        </p>
      </div>
    </details>
    <details id="for-images-containing-text-make-sure-the-alt-description-includes-the-images-text">
      <summary>
        For images containing text, make sure the <code>alt</code> description includes the image's text.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content</a>
        </p>
        <p class="checklist-description">
          For example, the FedEx logo should have an alt value of "FedEx."
        </p>
      </div>
    </details>
  </div>
  <h3 id="svgs">SVGs</h3>
  <p>
    SVGs are images described using markup.
  </p>
  <div class="checklist">
    <details id="make-sure-that-svg-elements-include-the-code-focusable-false-when-they-are-the-child-element-of-a-focusable-element">
      <summary>
        Make sure that <code>svg</code> elements include the code <code>focusable="false"</code> when they are the child element of a focusable element.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
        </p>
        <p class="checklist-description">
          This prevents Internet Explorer from allowing focus to navigate through the child elements of an SVG that is meant to be decorative.
        </p>
      </div>
    </details>
    <details id="add-aria-hidden-true-to-svg-that-is-decorative">
      <summary>
        Add <code>aria-hidden="true"</code> to <code>svg</code> that is decorative.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">4.1.2 Name, Role, Value</a>
        </p>
        <p class="checklist-description">
          This is equivalent to an empty/null <code>alt</code> value on a non-<code>svg</code> image.
        </p>
      </div>
    </details>
    <details id="make-sure-that-svg-utilizing-the-use-element-has-whitespace-between-the-svg-and-use-elements">
      <summary>
        Make sure that <code>svg</code> utilizing the <code>use</code> element has whitespace between the <code>svg</code> and <code>use</code> elements.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html">2.1.2 No Keyboard Trap</a>
        </p>
        <p class="checklist-description">
          This solves a bug in Safari which sometimes creates hidden tab-stops when navigating.
        </p>
      </div>
    </details>
    <details id="ensure-that-img-elements-with-an-svg-source-includes-the-role-img-attribute">
      <summary>
        Ensure that <code>img</code> elements with an <code>svg</code> source includes the <code>role="img"</code> attribute.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">4.1.2 Name, Role, Value</a>
        </p>
        <p class="checklist-description">
          VoiceOver on macOS and iOS will not correctly convey the element as an image if <code>role="img"</code> is not present.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-headings" aria-labelledby="label-headings">
  <h2 id="label-headings">Headings</h2>
  <p>
    Heading elements (<code>h1</code>, <code>h2</code>, <code>h3</code>, etc.) help break up the content of the page into related "chunks" of information.
  </p>
  <div class="checklist">
    <details id="use-heading-elements-to-introduce-content">
      <summary>
        Use heading elements to introduce content.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
        </p>
        <p class="checklist-description">
          Heading elements construct a document outline, and should not be used for purely visual design.
        </p>
      </div>
    </details>
    <details id="use-only-one-h1-element-per-page-or-view">
      <summary>
        Use only one <code>h1</code> element per page or view.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
        </p>
        <p class="checklist-description">
          The <code>h1</code> element should be used to communicate the high-level purpose of the page or view. Do not use the <code>h1</code> element for a heading that does not change between pages or views (for example, the site's name).
        </p>
      </div>
    </details>
    <details id="heading-elements-should-be-written-in-a-logical-sequence">
      <summary>
        Heading elements should be written in a logical sequence.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
        </p>
        <p class="checklist-description">
          <a href="https://webdesign.tutsplus.com/articles/the-importance-of-heading-levels-for-assistive-technology--cms-31753">The order of heading elements</a> should descend, based on the "depth" of the content. For example, an <code>h4</code> element should not appear on a page before an <code>h3</code> element.
        </p>
      </div>
    </details>
    <details id="dont-skip-heading-levels">
      <summary>
        Don't skip heading levels.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
        </p>
        <p class="checklist-description">
          For example, don't jump from a <code>h2</code> to a <code>h4</code>, skipping a <code>h3</code> element. If heading levels are being skipped for a specific visual treatment, use CSS classes instead.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-lists" aria-labelledby="label-lists">
  <h2 id="label-lists">Lists</h2>
  <p>
    Lists let people know the content is related, and how many items are included in the grouping.
  </p>
  <div class="checklist">
    <details id="use-list-elements-for-list-content">
      <summary>
        Use list elements (<code>ol</code>, <code>ul</code>, and <code>dl</code>) for list content.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
        </p>
        <p class="checklist-description">
          This may include sections of related content, items visually displayed in a grid-like layout, or sibling <code>a</code> elements.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-controls" aria-labelledby="label-controls">
  <h2 id="label-controls">Controls</h2>
  <p>
    Controls are interactive elements such as links and buttons that let a person navigate to a destination or perform an action.
  </p>
  <div class="checklist">
    <details id="use-the-a-element-for-links">
      <summary>
        Use the <code>a</code> element for links.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
        </p>
        <p class="checklist-description">
          Links should always have a <code>href</code> attribute, even when used in Single Page Applications. Without a <code>href</code> attribute, the link will not be properly exposed to assistive technology. An example of this would be a link that uses an <code>onclick</code> event, in place of a <code>href</code> attribute.
        </p>
      </div>
    </details>
    <details id="ensure-that-links-are-recognizable">
      <summary>
        Ensure that links are recognizable.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use of Color</a>
        </p>
        <p class="checklist-description">
          Color alone is not sufficient to indicate the presence of a link. Underlines are a popular and commonly-understood way to communicate the presence of link content.
        </p>
      </div>
    </details>
    <details id="ensure-that-controls-have-focus-states">
      <summary>
        Ensure that controls have <code>:focus</code> states.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html">2.4.7 Focus Visible</a>
        </p>
        <p class="checklist-description">
          Visible focus styles help people determine which interactive element has keyboard focus. This lets them know that they can perform actions like activating a button or navigating to a link's destination.
        </p>
      </div>
    </details>
    <details id="use-the-button-element-for-buttons">
      <summary>
        Use the <code>button</code> element for buttons.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
        </p>
        <p class="checklist-description">
          Buttons are used to submit data or perform an on-screen action which does not shift keyboard focus.
        </p>
      </div>
    </details>
    <details id="provide-a-skip-link-and-make-sure-that-it-is-visible-when-focused">
      <summary>
        Provide a skip link and make sure that it is visible when focused.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">2.4.1 Bypass Blocks</a>
        </p>
        <p class="checklist-description">
          A <a href="/posts/skip-nav-links/">skip link</a> can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget.
        </p>
      </div>
    </details>
    <details id="identify-links-that-open-in-a-new-window">
      <summary>
        Identify links that open in a new window.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a>
        </p>
        <p class="checklist-description">
          Doing this will help people understand what will happen when activating the link. Ideally this information should be communicated in a way that is available to all users. While this technique is technically not required for compliance, it is an often-cited area of frustration for many different kinds of assistive technology users.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-tables" aria-labelledby="label-tables">
  <h2 id="label-tables">Tables</h2>
  <p>
    Tables are a structured set of data that help people understand the relationships between different types of information.
  </p>
  <div class="checklist">
    <details id="use-the-table-element-to-describe-tabular-data">
      <summary>
        Use the <code>table</code> element to describe tabular data.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
        </p>
        <p class="checklist-description">
          Do you need to display data in rows and columns? Use the <code>table</code> element.
        </p>
      </div>
    </details>
    <details id="use-th-for-table-headers">
      <summary>
        Use <code>th</code> for table headers (with appropriate scope attributes).
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html">4.1.1 Parsing</a>
        </p>
        <p class="checklist-description">
          Depending on <a href="https://www.w3.org/WAI/tutorials/tables/">how complex your table is</a>, you may also consider using <code>scope="col"</code> for column headers, <code>scope="row"</code> for row headers. Many different kinds of assistive technology still use the scope attribute to help them understand and describe the structure of a table.
        </p>
      </div>
    </details>
    <details id="use-the-caption-element-to-provide-a-title-for-the-table">
      <summary>
        Use the <code>caption</code> element to provide a title for the table.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">2.4.6 Headings or Labels</a>
        </p>
        <p class="checklist-description">
          The table's <code>caption</code> should describe what kind of information the table contains.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-forms" aria-labelledby="label-forms">
  <h2 id="label-forms">Forms</h2>
  <p>
    Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders.
  </p>
  <div class="checklist">
    <details id="all-inputs-in-a-form-are-associated-with-a-corresponding-label-element">
      <summary>
        All inputs in a form are associated with a corresponding <code>label</code> element.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html">3.2.2 On Input</a>
        </p>
        <p class="checklist-description">
          Use a <code>for</code>/<code>id</code> pairing to guarantee the highest level of browser/assistive technology support.
        </p>
      </div>
    </details>
    <details id="use-fieldset-and-legend-elements-where-appropriate">
      <summary>
        Use <code>fieldset</code> and <code>legend</code> elements where appropriate.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
        </p>
        <p class="checklist-description">
          Does your form contain multiple sections of related inputs? Use <code>fieldset</code> to group them, and <code>legend</code> to provide a label for what this section is for.
        </p>
      </div>
    </details>
    <details id="inputs-use-autocomplete-where-appropriate">
      <summary>
        Inputs use <code>autocomplete</code> where appropriate.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">1.3.5 Identify Input Purpose</a>
        </p>
        <p class="checklist-description">
          <a href="https://www.w3.org/TR/html52/sec-forms.html#sec-autofill">Providing a mechanism</a> to help people more quickly, easily, and accurately fill in form fields that ask for common information (for example, name, address, phone number).
        ted.
      </div>
    </details>
    <details id="make-sure-that-form-input-errors-are-displayed-in-list-above-the-form-after-submission">
      <summary>
        Make sure that form input errors are displayed in list above the <code>form</code> after submission.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html">3.3.1 Error Identification</a>
        </p>
        <p class="checklist-description">
          This provides a way for assistive technology users to quickly have a high-level understanding of what issues are present in the form. This is especially important for larger forms with many inputs. Make sure that each reported error also has a link to the corresponding field with invalid input.
        </p>
      </div>
    </details>
    <details id="associate-input-error-messaging-with-the-input-it-corresponds-to">
      <summary>
        Associate input error messaging with the input it corresponds to.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html">3.3.1 Error Identification</a>
        </p>
        <p class="checklist-description">
          Techniques such as <a href="https://developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/">using <code>aria-describedby</code></a> allow people who use assistive technology to more easily understand the difference between the input and the error message associated with it.
        </p>
      </div>
    </details>
    <details id="make-sure-that-error-warning-and-success-states-are-not-visually-communicated-by-just-color">
      <summary>
        Make sure that error, warning, and success states are not visually communicated by just color.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use of Color</a>
        </p>
        <p class="checklist-description">
          People who are color blind, who have other low vision conditions, or different cultural understandings for color may not see the state change, or understand what kind of feedback the state represents if color is the only indicator.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-media" aria-labelledby="label-media">
  <h2 id="label-media">Media</h2>
  <p>
    Media includes content such as pre-recorded and live audio and video.
  </p>
  <div class="checklist">
    <details id="make-sure-that-media-does-not-autoplay">
      <summary>
        Make sure that media does not autoplay.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-dis-audio.html">1.4.2 Audio Control</a>
        </p>
        <p class="checklist-description">
          Unexpected video and audio can be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD. Certain kinds of autoplaying video and animation can be a trigger for vestibular and seizure disorders.
        </p>
      </div>
    </details>
    <details id="ensure-that-media-controls-use-appropriate-markup">
      <summary>
        Ensure that media controls use appropriate markup.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">1.3.1 Info and Relationships</a>
        </p>
        <p class="checklist-description">
          Examples include making sure an audio mute button has a pressed toggle state when active, or that a volume slider uses <code>&#x3C;input type=&#x22;range&#x22;&#x3E;</code>.
        </p>
      </div>
    </details>
    <details id="check-to-see-that-all-media-can-be-paused">
      <summary>
        Check to see that all media can be paused.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html">2.1.1 Keyboard</a>
        </p>
        <p class="checklist-description">
          Provide a global pause function on any media element. If the device has a keyboard, ensure that pressing the <kbd>Space</kbd> key can pause playback. Make sure you also don't interfere with the <kbd>Space</kbd> key's ability to scroll the page/view when not focusing on a form control.
        </p>
      </div>
    </details>
  </div>
  <h3 id="video">Video</h3>
  <div class="checklist">
    <details id="confirm-the-presence-of-captions">
      <summary>
        Confirm the presence of captions.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">1.2.2 Captions</a>
        </p>
        <p class="checklist-description">
          Captions allow a person who cannot hear the audio content of a video to still understand its content.
        </p>
      </div>
    </details>
    <details id="remove-seizure-triggers">
      <summary>
        Remove seizure triggers.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">2.3.1 Three Flashes or Below Threshold</a>
        </p>
        <p class="checklist-description">
          Certain kinds of strobing or flashing animations will trigger seizures.
        </p>
      </div>
    </details>
  </div>
  <h3 id="audio">Audio</h3>
  <div class="checklist">
    <details id="confirm-that-transcripts-are-available">
      <summary>
        Confirm that transcripts are available.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">1.1.1 Non-text Content</a>
        </p>
        <p class="checklist-description">
          Transcripts allow people who cannot hear to still understand the audio content. It also allows people to digest audio content at a pace that is comfortable to them.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-appearance" aria-labelledby="label-appearance">
  <h2 id="label-appearance">Appearance</h2>
  <p>
    How your site content looks in any given situation.
  </p>
  <div class="checklist">
    <details id="check-your-content-in-specialized-browsing-modes">
      <summary>
        Check your content in specialized browsing modes.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use of Color</a>
        </p>
        <p class="checklist-description">
          Activate modes such as <a href="https://support.microsoft.com/en-us/help/13862/windows-use-high-contrast-mode">Windows High Contrast</a> or <a href="https://9to5mac.com/2017/06/09/ios-11-dark-mode-smart-invert-colors-how-to-enable/">inverted colors</a>. Is your content still legible? Are your icons, borders, links, form fields, and other content still present? Can you distinguish foreground content from the background?
        </p>
      </div>
    </details>
    <details id="increase-text-size-to-200">
      <summary>
        Increase text size to 200%.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">1.4.4 Resize text</a>
        </p>
        <p class="checklist-description">
          Is the content still readable? Does increasing the text size cause content to overlap?
        </p>
      </div>
    </details>
    <details id="double-check-that-good-proximity-between-content-is-maintained">
      <summary>
        Double-check that good proximity between content is maintained.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html">1.3.3 Sensory Characteristics</a>
        </p>
        <p class="checklist-description">
          Use <a href="https://www.youtube.com/watch?v=S1j6CYT3kWA&feature=youtu.be">the straw test</a> to ensure people who depend on screen zoom software can still easily discover all content.
        </p>
      </div>
    </details>
    <details id="make-sure-color-isnt-the-only-way-information-is-conveyed">
      <summary>
        Make sure color isn't the only way information is conveyed.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use of Color</a>
        </p>
        <p class="checklist-description">
          Can you still see where links are among body content if everything is grayscale?
        </p>
      </div>
    </details>
    <details id="use-a-simple-straightforward-and-consistent-layout">
      <summary>
        Use a simple, straightforward, and consistent layout.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">1.4.10 Reflow</a>
        </p>
        <p class="checklist-description">
          A complicated layout can be confusing to understand and use.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-animation" aria-labelledby="label-animation">
  <h2 id="label-animation">Animation</h2>
  <p>
    Content that moves, either on its own, or when triggered by a person activating a control.
  </p>
  <div class="checklist">
    <details id="ensure-animations-are-subtle-and-not-do-not-flash-too-much">
      <summary>
        Ensure animations are subtle and not do not flash too much.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">2.3.1 Three Flashes or Below Threshold</a>
        </p>
        <p class="checklist-description">
          Certain kinds of strobing or flashing animations will trigger seizures. Others may be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD.
        </p>
      </div>
    </details>
    <details id="provide-a-mechanism-to-pause-background-video">
      <summary>
        Provide a mechanism to pause background video.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">2.2.2 Pause, Stop, Hide</a>
        </p>
        <p class="checklist-description">
          Background video can be distracting, especially if content is placed over it.
        </p>
      </div>
    </details>
    <details id="make-sure-all-animation-obeys-the-prefers-reduced-motion-media-query">
      <summary>
        Make sure all animation obeys the <code>prefers-reduced-motion</code> media query.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html">2.3.3 Animation from Interactions</a>
        </p>
        <p class="checklist-description">
          Remove animations when the "reduce motion" setting is activated. If an animation is necessary to communicate meaning for a concept, slow its duration down.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-color-contrast" aria-labelledby="label-color-contrast">
  <h2 id="label-color-contrast">Color contrast</h2>
  <p>
    <a href="/posts/what-is-color-contrast/">Color contrast</a> is how legible colors are when placed next to, and on top of each other.
  </p>
  <div class="checklist">
    <details id="check-the-contrast-for-all-normal-sized-text">
      <summary>
        Check the contrast for all normal-sized text.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast</a>
        </p>
        <p class="checklist-description">
          Level <strong>AA</strong> compliance requires a contrast ratio of <code>4.5:1</code>.
        </p>
      </div>
    </details>
    <details id="check-the-contrast-for-all-large-sized-text">
      <summary>
        Check the contrast for all large-sized text.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast</a>
        </p>
        <p class="checklist-description">
          Level <strong>AA</strong> compliance requires a contrast ratio of <code>3:1</code>.
        </p>
      </div>
    </details>
    <details id="check-the-contrast-for-all-icons">
      <summary>
        Check the contrast for all icons.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>
        </p>
        <p class="checklist-description">
          Level <strong>AA</strong> compliance requires a contrast ratio of <code>3.0:1</code>.
        </p>
      </div>
    </details>
    <details id="check-the-contrast-of-borders-for-input-elements">
      <summary>
        Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.).
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>
        </p>
        <p class="checklist-description">
          Level <strong>AA</strong> compliance requires a contrast ratio of <code>3.0:1</code>.
        </p>
      </div>
    </details>
    <details id="check-text-that-overlaps-images-or-video">
      <summary>
        Check text that overlaps images or video.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast</a>
        </p>
        <p class="checklist-description">
          Is text still legible?
        </p>
      </div>
    </details>
    <details id="check-custom-selection-colors">
      <summary>
        Check custom <code>::selection</code> colors.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast</a>
        </p>
        <p class="checklist-description">
          Is the color contrast you set in your <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection"><code>::selection</code></a> CSS declaration sufficient? Otherwise someone may not be able read it if they highlight it.
        </p>
      </div>
    </details>
  </div>
</section>

<section class="article-section resources-section checklist-section" id="section-mobile-touch" aria-labelledby="label-mobile-touch">
  <h2 id="label-mobile-touch">Mobile/Touch</h2>
  <p>
    Things to check to best support different device form factors.
  </p>
  <div class="checklist">
    <details id="check-that-the-site-can-be-rotated-to-any-orientation">
      <summary>
        Check that the site can be rotated to any orientation.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">1.3.4 Orientation</a>
        </p>
        <p class="checklist-description">
          Does the site only allow portrait orientation?
        </p>
      </div>
    </details>
    <details id="remove-horizontal-scrolling">
      <summary>
        Remove horizontal scrolling.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">1.4.10 Reflow</a>
        </p>
        <p class="checklist-description">
          Requiring someone to scroll horizontally can be difficult for some, irritating for all.
        </p>
      </div>
    </details>
    <details id="button-and-link-icons-can-be-activated-with-ease">
      <summary>
        Button and link icons can be activated with ease.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">2.5.5 Target Size</a>
        </p>
        <p class="checklist-description">
          It's good to make sure things like hamburger menus, social icons, gallery viewers, and other touch controls are usable by a wide range of hand and stylus sizes.
        </p>
      </div>
    </details>
    <details id="ensure-sufficient-space-between-clickable-items-in-order-to-provide-a-scroll-area">
      <summary>
        Ensure sufficient space between clickable items in order to provide a scroll area.
      </summary>
      <div class="checklist-details">
        <p class="checklist-criterion">
          <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">2.4.1 Bypass Blocks</a>
        </p>
        <p class="checklist-description">
          Some people who experience <a href="https://axesslab.com/hand-tremors/">hand tremors</a> have a very difficult time scrolling past clickable items which feature zero spacing.
        </p>
      </div>
    </details>
  </div>
</section>