Six ways to make your site more accessible

Hidde de Vries made this enumeration in this talk. Here is a quick summary.

Names #

  • Use link text that makes sense even out of context (avoid ambiguous link text such as multiple links on one page, all labeled “Read more”, “Click here”, “Continue”)
  • Give form fields a proper name by using a <label> tag.
    <label for="name">Name</label>
    <input type="text" id="name" />
  • Use <caption> for tables.
    <table>
    <caption>Financial results 2018<caption>
    <tbody></tbody>
    </table>
  • Use <legend> for fieldsets.
    <form>
    <fieldset>
    <legend>Personal details</legend>
    <label for="name">Name</label>
    <input type="text" id="name" />
    <!-- more fields here-->
    </fieldset>
    </form>

Markup #

  • Use <a> when the user is send somewhere.
  • Consider <button> if the href attribute is empty. A <button> does something.

Structure #

  • Give each page a unique <title>.
    The <title> is still the first guarantee or first confirmation that you´ve ended up on the page that you intended to reach.
  • Provide proper headings, as they are like the table of contents for assistive technology.
  • Have a sensible HTML structure. Check if the site is properly readable when CSS is turned off.

Language #

Define the language of the site <html lang="en">

Text #

The web is mostly text. Text will provide a lot of accessibility by default. Therefore use text or at least text alternatives, like alt="…".

Keyboard #

Test the site navigation by using a keyboard only and check for visible focus.

References #

  1. Hidde de Vries, Six ways to make your site more accessible
  2. Léonie Watson, tink
  3. WHATWG, HTML: The Living Standard