Basic HTML Accessibility Checklist

Use Header Tags Correctly

Use exactly one <h1> tag. Use <h2> tags for other major headings. For headings that support content under your <h2> tags, use <h3> tags. For headings that support content under your <h3> tags, use <h4> tags.

<h1>Accessibility Checklist</h1>
  <p>This is my post about accessibility!</p>

  <h2>Accessible Forms</h2>
    <p>Make sure that your inputs are well-labeled and use aria tags appropriately.</p>

    <h3>Labeling Inputs</h3>
      <p>Inputs can be labeled implicitly and explicitly.</p>

    <h3>Using aria tags</h3>
      <p>There are some aria tags that are better-supported than HTML tags</p>

  <h2>Tags for Clickable elements</h2>
    <p>Buttons are very useful!</p>

Use Buttons for Clickable Things

If an HTML element performs some kind of action when you click on it, make it a <button>. Same-page actions should be triggered by <button> tags.

<button onclick="showAnswer()">show answer</button>

Make Sure Links are Tab-Focusable

If an <a> tag does not have an href attribute, give it a tabindex="0" attribute to insert it into the normal tab flow of the page for keyboard users. Note: if an <a> tag does not have an href attribute, you're probably not using it for navigation to another document or within the current document. In that case you should use a <button>.

<a tabindex="0">tab focusable</a>

Don't Hide Content Off-Screen

Don't move content off-screen to hide it, especially if it is keyboard focusable. It's not hidden for keyboard users.

Label Inputs

Connect <label> tags to <input> tags.

<!-- This is an implicit connection. -->
<!-- Tapping the label focuses the input. -->
<label>
  First Name
  <input type="text" />
</label>

<!-- This is an explicit connection. -->
<!-- Tapping the label does NOT focus the input. -->
<label for="last-name">Last Name</label>
<input type="text" id="last-name" />

Label Inputs with ARIA Tags

Use aria-label if you can't use a <label> tag.

<input type="text" aria-label="Search" placeholder="Search" />

Put Helper and Error Text Inside Labels

Put input field helper text and error text inside the label.

<label>
  <span>Age</span>
  <span class="helper-text">Enter the customer's age.</span>
  <span class="error-text">The customer's age must be a number.</span>
  <input type="text" />
</label>

Mark Invalid Inputs With "aria-invalid"

Mark inputs with aria-invalid="true" when they fail validation. Remove this attribute when validation pass. (Do NOT set aria-invalid="false".)

<input type="text" aria-invalid="true" />

Mark Required Inputs With "aria-required"

Mark required fields with aria-required="true". It has slightly better screen-reader performance than using the HTML required attribute: screen readers complain immediately about missing fields that use the HTML attribute.

<input type="text" aria-required="true" />

Group Related Fields

Group related fields to improve clarity.

<fieldset>
  <legend>Date of birth</legend>
  <div>
    <label>
      <span>Month</span>
      <span class="helper-text">Month in MM format.</span>
      <input type="number" />
    </label>
    <label>
      <span>Day</span>
      <span class="helper-text">Day in DD format.</span>
      <input type="number" />
    </label>
    <label>
      <span>Year</span>
      <span class="helper-text">Year in YYYY format.</span>
      <input type="number" />
    </label>
  </div>
</fieldset>

Source: Accessible Forms

Photo by Steven HWG