Accessibility

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

Use links (<a>) for navigation to another page, resource or location. Links should have a valid href attribute and their text should make the destination or purpose clear.

Prefer descriptive visible link text instead of generic text such as "Read more" or "Click here". If additional context is needed for assistive technologies, it can be provided using visually hidden text or an appropriate accessible name.

<a href="/article"> Read more <span class="sr-only"> about accessible websites</span> </a>

Use buttons (<button>) for actions, such as submitting a form, opening a menu or dialog, changing content or triggering other functionality on the current page.

Do not use links such as <a href="#"> to perform button actions.

For buttons that contain only an icon, provide an accessible name.

<button type="button" aria-label="Close">
  <svg aria-hidden="true">...</svg>
</button>

Forms

Form controls should have a clear accessible name. For text fields, selects, checkboxes and other visible form controls, use a <label> whenever possible and associate it with the control using for and id.

Placeholder text does not replace a label.

Use <fieldset> and <legend> to group related controls, such as a group of radio buttons or checkboxes.

<fieldset>
  <legend>Contact preference</legend>
  <label>
	<input type="radio" name="contact" value="email">Email
  </label>
  <label>
	<input type="radio" name="contact" value="phone">Phone
  </label>
</fieldset>

Clearly indicate required fields and provide instructions where the expected format or input may not be obvious.

Use appropriate input types and autocomplete attributes where applicable to make forms easier to complete.

Error handling

Form errors should be clearly identified and explained in text. Do not rely only on color, icons or styling to indicate that a field contains an error.

Use aria-invalid="true" on invalid fields and associate the error message with the field using aria-describedby.

<label for="email">
  Email
</label>
<input id="email" name="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">
  Enter a valid email address.
</p>

When a form contains multiple errors, consider providing an error summary that helps the user understand what needs to be corrected.

Errors should explain how the problem can be fixed whenever possible.

Focus states

All interactive elements must be operable using a keyboard and have a clearly visible focus indicator.

Do not remove the browser's default focus outline unless it is replaced with an equally or more visible alternative.

Use :focus-visible when applying custom keyboard focus styles.

button:focus-visible, 
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { 
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Test the page using only the keyboard and make sure the focus order is logical and it is always clear which element currently has focus.

Focused elements must not be completely hidden by sticky headers, cookie banners, overlays or other content.

Target size

Buttons, links and other interactive controls should be large enough and sufficiently separated to be activated accurately with a mouse, touchscreen or other pointing device.

Interactive controls should be at least 24 × 24 CSS pixels. Important controls and controls intended for touch should be at least 44 × 44 CSS pixels.

Dragging

Do not rely on dragging as the only way to perform an action.

If functionality uses drag-and-drop, provide an alternative that can be operated without dragging, such as buttons for moving, sorting or selecting items.

The alternative should also be accessible using a keyboard.

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.
Touch targets are at least 44 × 44 CSS pixels.
Draggable actions have a non-drag alternative.