Accessibility cheat sheet

Allow text to be resized.

Have good contrast in colours.

Test for colour blindness related issues.

Make sure the website works well with screen readers.

Use proper alt attributes.

Don’t autoplay any sound.

Recognize and prepare for the fact that not everybody will use a mouse.

Make the website keyboard accessible.

Increase hit areas of links and buttons.

Make it clear where in the website the user is.

Organize your content correctly & use proper headings.

Make the text easily scannable.

Clearly mark links.

Use lots of images and graphics.

Don’t autoplay any sound.

Provide text captions and subtitles.

Don’t rely on sound for indicators.

Don’t autoplay any sound.

The <th> tags should always denote which direction they label with the scope attribute.

<th scope="col">…</th>
<th scope="row">…</th>

Tables should always include a description of the contents of the table for people who cannot see the tabular data.

<table>
  <caption>Data describing the properties of many mystical creatures.</caption>
  ⋮
</table>

Every single form input must have an associated <label>

<label for="mystical">Favourite mystical creature</label>
<select id="mystical">
  <option>Unicorn</option>
⋮

The placeholder attribute is not an acceptable substitute.

Make is visually apparent what link is currently active.

a:focus {
  outline: 3px solid #000;
}

Allow keyboard users to jump to specific locations on the page.

<a href="#main">Jump to main content</a>

⋮

<main role="main" id="main" tabindex="0">

.skip-links a {
  position: absolute;
  top: -3em;
}

.skip-links a:focus {
  top: 0;
}

Add non-visible, descriptive information to SVGs inside HTML with the <title> and <description>

<svg width="256" height="256" viewBox="0 0 256 256">
  <title>Unicorn leaping a rainbow</title>
  <description>A majestic white unicorn, with pink horn, leaping over a double rainbow.</description>
</svg>

Should be applied to the <header> tag

<header role="banner">
  ⋮
</header>

Should be applied to the <nav> tag

<nav role="navigation">
  ⋮
</nav>

Should be applied to the <main> tag

<main role="main">
  ⋮
</main>

Should be applied to the <footer> tag

<footer role="contentinfo">
  ⋮
</footer>

Should be applied to the <form> tag

<form role="search">
  ⋮
</form>

Should be applied to the <aside> tag

<aside role="complementary">
  ⋮
</aside>

Assign non-visible text to enhance the description of an element.

Can be used on any element to add more description.

<a href="…" aria-label="Read more about of Mystical Animals">Read more</a>
<h2 aria-label="Unicorns seen during ancient times">Unicorns</h2>

Also consider aria-labelledby to point to another element that holds the label text.

Assign the description of an element to other elements on the page.

<img aria-details="#infographic-desc" src="big-complex-infographic.jpg" alt="">

<div id="infographic-desc">
  <h2>All about unicorns</h2>
  <h3>Horns</h3>
  <ul>
    <li>…</li>
    ⋮
</div>

Force the browser to ignore the element because it’s not necessary for understanding the content.

Good for hiding images that are purely decoration.

<img src="…" alt="" role="presentation">

Force the browser to completely ignore an element from the accessibility tree.

Usually paired with the hidden attribute.

<div aria-hidden="true" hidden>
  ⋮
</div>