Accessability

Interactive elements

Any interactions on the page should be easily accessible with a keyboard and the action on the element understandable by assistive tools.

Links and buttons

Any links that takes you to a new page or somewhere within the current should be a <a> element with a correct href attribute. Make sure the text within your link clearly states where the link takes you. If you for some reason needs to add a link with "Read more" text, make sure you add a aria-label attribute. This is because some assistive tools can add a list of all links on the page (and multiple "Read more" links does not make sense).

You should never use a <a href="#">, instead use a <button>.

<a href="more.html" aria-label="Descriptive link text">Read more</a>

Buttons should be used to submit or clear your forms or for any in-page actions (like opening an modal). Generally, if you need to use a onclick attribute, use it on a <button> element.

The text in the button should describe what the action of the button. If a icon is used, add aria-label attribute.

<button aria-label="Close" onclick="close()">
  <svg>...</svg>
</button>

Forms

Make sure all input elements has a <label> element and pair the for attribute on the <label> element with the id-attribute on the <input> or <select> element.

Placeholder texts does not replace a label.

If your form contain multiple sections, separate them with <fieldset> with each fieldset containing a <legend> with a label for that section.

<fieldset>
  <legend>Personal information</legend>
  <label for="first_name">First name</label>
  <input id="first_name" name="first_name" type="text" />
</fieldset>

Error handling

Make sure that any input error are clearly displayed for the user. Just changing the border color of the input is not enough.

Add aria-invalid="true" to any input containing an error and refer to the error with aria-describedby.

<label for="email">Email</label>
<input
  id="email"
  name="email"
  aria-invalid="true"
  aria-describedby="email-hint"
  type="text"
/>
<p id="email-hint">The email address is not valid</p>

Focus states

Make sure focusable elements (links, buttons, inputs) have a focus state. This makes sure that the user can visually see which element has the focus. All focusable elements should also be accessible using the tab key.

button:focus {
  outline: 3px dashed orange;
}

Test by tabbing on the web page and make sure that while aesthetically pleasing, it's also apparent what is focused.

To do

All links to other pages or in-page are <a> tags with correct href.
<button> are used to submit or clear your forms or for any in-page actions.
Only use onclick on <button> tags.
All form <input> tags has a <label>.
Different sections of form are contained in a <fieldset> with a <legend>.
Form errors are clearly visible and accessible.
You can visually see which focusable element that has focus.