Skip to content
Accessibility guidelines and principles for Orion
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md

README.md

Orion Accessibility

Welcome to the accessibility documentation for Orion. This repository will continue to evolve as we mature our understanding of what it means to be accessible to all.

Our principles

  • Available, usable, understandable to all
  • Simplicity - as OREX gets more complex, keep it simple as possible
  • Try using ‘tried and tested’ design patterns as a first resort
  • Constantly doing our own accessibility testing
  • Accreditation to give users confidence
  • Accessibility eclipses previously accepted ways of working

What we mean when we say Accessibility:

  • Making OREX available, usable and understandable to all
  • Making sure that everyone has an equal experience when using OREX
  • Building for people with disabilities (visual, hearing, motor or cognitive)
  • Not just restricted to disabilities (internet access, language, device use)

Checklist

Design

Development

Semantic structure

  • Use the most appropriate html element. e.g.

    <h1>Main heading</h1>

    instead of

    <span class="h1">Main heading</span>

Links

  • Don't use the word link, screen readers will read the element out as a link so this information is redundant.

  • Try to make the link readable out of context

    <a href="/food">Food</a>

    instead of

    <a href="/food">Read more</a>

Inputs

  • Make sure all inputs have a label.
    • Using for and id.
      <label for="name">Name</label>
      <input id="name" type="text" />
    • Using aria-label.
      <label for="expiry-date-month">Expiry date</label>
      <input
        id="expiry-date-month"
        type="text"
        aria-label="Expiry date month"
        maxlength="2"
        placeholder="MM"
      />
      <input
        type="text"
        aria-label="Expiry date year"
        maxlength="4"
        placeholder="YYYY"
      />
    • Using aria-labelledby.
      <table>
        <thead>
          <tr><th id="table-header-name">Name</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="text" aria-labelledby="table-header-name" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="text" aria-labelledby="table-header-name" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="text" aria-labelledby="table-header-name" />
            </td>
          </tr>
        </tbody>
      </table>

Images

Using <img />:

  • Always use the alt attribute.
  • If it's decorative only, then make sure to use alt="".
  • Use the surrounding context to give the alt attribute an appropriate description. Alternative Text; Context.

Using <svg />:

  • If it's decorative only, then make sure to remove <title />.
  • Use the surrounding context to give <title /> an appropriate description. Alternative Text; Context.

Keyboard

  • You should be able to navigate elements with interactions using only the keyboard.
  • Using <Tab> to move between elements should logically follow what is visible on the screen.
  • You should not be able to <Tab> to an element if it has no interaction associated with it.
  • Do not set tabindex higher than 0.
  • If an element can be clicked, then make sure that it can also be activated using the appropritate keyboard key (usually <Enter> or <Space>).
You can’t perform that action at this time.