Accessibility cheat sheet

Impairments overview

  • Visual

    • 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.

  • Mobility and dexterity

    • 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.

  • Cognitive

    • 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.

  • Auditory

    • Provide text captions and subtitles.

    • Don’t rely on sound for indicators.

    • Don’t autoplay any sound.

HTML semantics

  • Table headers

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

    • <th scope="col">…</th>
      <th scope="row">…</th>
  • Table captions

    • 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>
  • Form labels

    • Every single form input must have an associated <label>

    • <label for="mystical">Favourite mystical creature</label>
      <select id="mystical">
    • The placeholder attribute is not an acceptable substitute.

  • Focus styles

    • Make is visually apparent what link is currently active.

    • a:focus {
        outline: 3px solid #000;
  • Skip links

    • 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;
  • SVG information

    • 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>

WAI-ARIA landmark roles

All content should be within ARIA landmark roles. Roles should not be repeated on a single page.

  • banner

    • Should be applied to the <header> tag

    • <header role="banner">
  • navigation

    • Should be applied to the <nav> tag

    • <nav role="navigation">
  • main

    • Should be applied to the <main> tag

    • <main role="main">
  • contentinfo

    • Should be applied to the <footer> tag

    • <footer role="contentinfo">
  • search

    • Should be applied to the <form> tag

    • <form role="search">
  • complementary

    • Should be applied to the <aside> tag

    • <aside role="complementary">

Extra information

  • aria-label

    • 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.

  • aria-details

    • 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>
  • role="presentation"

    • 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">
  • aria-hidden="true"

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

    • Usually paired with the hidden attribute.

    • <div aria-hidden="true" hidden>