To ensure your service is accessible and inclusive, consider accessibility at every stage. That means including diverse users that include people with disabilities at all phases of your design and development cycle.
Plan to engage Accessibility Services throughout each phase. You can also ask for longer-term help with monitoring progress and creating a sustainable accessibility model.
Test your code regularly to uncover issues with development, design and content. At CDS we have built in automated testing as part of our continuous integration (CI) process. You must conduct both automated and manual testing - you'll miss a lot of the issues if you only do automated testing. Currently, automated testing only covers 40% of the accessibility-related issues.
The following sections provide details to focus your accessibility work in each phase of development:
- Discovery
- Alpha
- Beta
- Live
In Discovery
At the beginning of your project, ask yourself, "How would this product work if I couldn't see it? What if I couldn't touch it, or move it? What if I couldn't hear it, taste it, smell it?" This will help you think about people's pain points and different usage contexts, lending some guidance toward the design of your service.
Conversations with people with disabilities can spark unexpected feedback. Doing design research with people with disabilities helps define the problem space and informs your understanding of user needs. Talking to people with diverse needs improves the human experience of digital services.
Engage Accessibility Services in the discovery phase for help engaging people with diverse user needs. Include users with different abilities in user research. Consider potential visual, hearing, motor, and cognitive disabilities. Remember that including people disabilities also helps people who experience temporary or situational disabilities, like having an injured limb, being in public without earphones or holding a baby.
Incorporate accessibility considerations in your research artifacts (for example, personas or user stories).
- Recognize bias
- Do design research
- Follow ethical practices
- Actively listen
- Test with people
- Consider diverse needs
- Build inclusive personas
- Conduct cognitive tasks
- Offer different ways to engage
In Alpha
In Alpha, ensure your service meets the standards of our Priority Check 1 checklist.
Priority check 1: critical (WCAG 2.1 A, AA)
Check that your service includes all the following:
Use automated tools to test:
- All form inputs have explicit labels
- Text has sufficient color contrast: All text has a contrast ratio of 4.5:1 with the background
- Form instructions are associated with inputs
- Language is set for the page. For sections on the page that differ from the site, language is set.
Manually test:
- Site is keyboard accessible: All interactions can be accessed with a keyboard
- Site is free of keyboard traps: The keyboard focus is never trapped in a loop
- All relevant images use an img tag
- All images have alt attributes
- Multimedia is tagged: All multimedia has appropriate captioning and audio description
- If you use color gradients or background images check text has sufficient color contrast: All text needs a contrast ratio of 4.5:1 in all display modes (desktop, tablet & mobile).
- Sitenever loses focus: Focus is always visible when moving through the page with the keyboard
- Tab order is logical - The Accessibility Insights tool is useful for this.
- Site doesn't timeout unexpectedly: Identify elements that may "timeout" and verify that the user can request more time
- Tables are coded properly: Tables have proper headers and column attributes
- Headings are nested properly: Heading elements are nested in a logical way
- Audio and video have appropriate captions, transcriptions and described video where necessary
- Identifying content only by its shape or location, or using graphical symbol alone to convey information
- Use of colour: No colour is used alone to convey meaningful information
- Skip links: Are available to bypass blocks of content that are repeated on multiple Web pages
Enabling adaptive technology
In Alpha, you will also need to ensure your service works with the most common adaptive technologies:
- test with adaptive technology yourself (you can ask the accessibility community of practice lead or contact the Accessibility, Accommodation and Adaptive Computer Technology (AAACT) program at Shared Services Canada (SSC) to learn about adaptive technology)
- reach out to the design research community lead to help find user research participants who use adaptive technology
- ask for adaptive technology testing to be included in your accessibility audit.
Examples of tools you can use include:
- Voice Over
- NVDA
- Zoom Text
- High Contrast (OS and dark modes)
In Beta
You must get an accessibility audit - and fix any issues - before your service moves into public beta.
As well, ensure your Beta service meets the standards of our Priority Check 2 list.
Priority check 2: less critical, but essential (WCAG 2.1, A, AA)
- Frames are named and have a name element
- Flashing elements are compliant: any elements that flash on screen do so at a rate of less than 3 Hz
- CSS is not required to use the page: The page makes sense with or without CSS
- Links are unique and contextual: All links can be understood taken alone
- Page titles are descriptive
- Required plugins are linked on the page
- Orientation of web content is not restricted or locked
- Use CSS to set the orientation to allow both landscape and portrait.
- Use show/hide controls to allow access to content in different orientations.
- The input field serves a purpose that identifies the expected meaning for form input data
- Content can be presented without loss of information or functionality, and without requiring scrolling
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSSpixels.
- Active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision using non text contrast
- Ensure people can override text spacing to improve their reading experience using text spacing
- Hover and focus events should not obscure content and should be dismissible
- If a keyboard shortcut is implemented in content using only letters, refer to character key shortcuts
- Additional details on character key shortcuts
- Content can be operated using simple inputs on a wide range of pointing devices using pointer gesture techniques
- Additional details on pointer gesture
- Functions that emulate a keyboard or numeric keypad key press are considered essential using pointer cancellation techniques
- Additional details on pointer cancellation
- Words which visually label a component are also the words associated with the component programmatically using label in name techniques
- Additional details on label in name
- Functions that are triggered by moving a device, or by gesturing towards the device can also be operated by more conventional user interface components, unless the motion is essential for the function or not using motions or gestures would invalidate the activity using motion actuation techniques
- Additional details on motion actuation
- Make users aware of important changes in content that are not given focus, and do so in a way that doesn't unnecessarily interrupt their work using status messages techniques
- Additional details on status messages
Live - keeping your work accessible
As you prepare to make your service live, and after launch, strive to ensure your service meets the standards of our Priority Check 3 list.
Priority check 3: Ideal (WCAG 2.1 AAA)
- In content implemented using markup languages, the purpose of UI, icons and regions can be programmatically determined.
- Timeouts
- Animations from interactions
- Concurrent input modalities
- Sign Language