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" />

//alternatively:
<label>
Name
<input type="text" />
</label>

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.
Léonie Watson, accessibility expert and screenreader user
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

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

Comments