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.
- 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)
- Check for sufficient colour contrast between text and background. Normal and large text to pass WCAG 2.0 level AA. WebAIM colour contrast checker
- Colour is not used as the only visual means of conveying information Salesforce UX
- Make sure that headings provide structure to the page Nomensa
- Use plain English How people read - GDS
- Before creating a new design pattern, check if there are already common patterns we can use from elsewhere. Example - GOV.UK Design System
Use the most appropriate html element. e.g.
<span class="h1">Main heading</span>
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">Read more</a>
- Make sure all inputs have a label.
<label for="name">Name</label> <input id="name" type="text" />
<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" />
<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>
- Always use the
- If it's decorative only, then make sure to use
- Use the surrounding context to give the alt attribute an appropriate description. Alternative Text; Context.
- If it's decorative only, then make sure to remove
- Use the surrounding context to give
<title />an appropriate description. Alternative Text; Context.
- You should be able to navigate elements with interactions using only the keyboard.
<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
- If an element can be clicked, then make sure that it can also be activated using the appropritate keyboard key (usually