WorkSafeBC logo
CSS library

Accessible UX guide

This guide provides practical tips and best practices for creating accessible user experiences at WorkSafeBC.

Accessibility ensures everyone can use and understand our products, improving equity, usability, and compliance. This guide highlights simple, actionable steps to design and build inclusive experiences, helping teams adopt consistent patterns that work for all users.

1. Structure your page clearly

✔ Use proper headings
<h1>Page title</h1>
<h2>Section title</h2>
<h3>Subsection</h3>
✔ Add a skip link
<a href="#main" class="visually-hidden-focusable">
  Skip to main content
</a>
✔ Keep layout predictable

Do not move navigation, buttons, or repeated elements around between pages.

2. Make it zoom and device friendly

✔ Use mobile-first, responsive design
<div class="container">
  <div class="row">
    <div class="col-md-6">...</div>
  </div>
</div>
✔ Use relative units
body { font-size: 1rem; }
✔ Use SVG or high‑quality PNG

Prevents pixelation when zooming to 200–400%.

✔ Use one‑column forms

Users zooming with screen magnifiers should never scroll horizontally.

3. Provide alt text for images

✔ Give meaningful images meaningful alt text
<img src="worker.png" alt="Worker repairing machinery">
✔ Use empty alt for decorative images
<img src="divider.svg" alt="">
✔ Add labels for clickable icons
<a href="/" aria-label="Go to homepage">
  <img src="logo.svg" alt="">
</a>

4. Ensure everything works with a keyboard

✔ Make every interactive element tabbable
✔ Do not remove focus outlines
button:focus {
  outline: 2px solid #FF9900;
}
✔ Keep DOM order equal to tab order

Do not visually reorder things in a way that breaks reading flow.

✔ Do not trigger actions on focus alone

Nothing should perform an action just because it received focus.

5. Make forms simple and clear

✔ Connect labels to inputs
<label for="email">Email</label>
<input id="email" type="email" class="form-control">
✔ Provide inline error messages
<input class="form-control is-invalid">
<div class="invalid-feedback">Enter a valid value.</div>
✔ Use proper autocomplete
<input autocomplete="given-name">
<input autocomplete="family-name">
<input autocomplete="email">
✔ Avoid time limits on forms

6. Use proper HTML elements

✔ Prefer semantic HTML

Avoid using <div> or <span> as buttons, links, or structure.

✔ Choose buttons versus links correctly

Use buttons for actions, links for navigation.

<button class="btn btn-primary">Save</button>
<a href="/settings" class="btn btn-link">Settings</a>
✔ Use ARIA roles only if needed
<button aria-expanded="false" aria-controls="panel1">
  More details
</button>

7. Write clear, readable content

✔ Use plain language

Short sentences, simple words.

✔ Create strong page titles
<title>Report an injury – WorkSafeBC</title>
✔ Use meaningful link text

Good:

<a href="/coverage">Read coverage details</a>

Bad:

<a href="/coverage">Click here</a>
✔ Avoid placing text over images

Only acceptable with controlled contrast or overlays.

8. Provide accessible offline support

Offer multiple contact methods: phone, email, chat, text, and in-person options.

Mini accessibility checklist