Every component in our design system meets meets WCAG 2.2 Level AA standards. While the system has accessibility features, teams should take extra steps to ensure consistent and accessible experiences across all products and platforms.
Accessibility and inclusion
Inclusive design enables us to make experiences usable and open to as many people as possible, regardless of ability or circumstance. Meeting accessibility standards is just a part of inclusive design.
Disabilities are not always visible in obvious forms. For example, someone with a permanent vision impairment, temporary blindness due to an eye infection, or a situational challenge such as using a device in bright sunlight may all encounter similar barriers.
Inclusive design helps us to create products that work across the following spectrum of needs:
- Permanent: Long-term conditions that require ongoing accessibility considerations, such as a person with no arm, or someone with ADHD.
- Temporary: Short-term conditions that can be recovered from but still require accessibility features, such as a person with a fractured arm, or someone experiencing stress from lack of sleep.
- Situational: Conditions that occur due to specific situation or surroundings, such as a person carrying groceries, wearing gloves in cold weather, or someone interacting with our product in a noisy environment.
We must ensure that we design experiences considering these wide range of user needs. In many cases, designing for a permanent disability can also benefit users with temporary disabilities and situational limitations.
Making digital products accessible and inclusive
- WCAG compliance: The Government of Alberta follows Web Content Accessibility Guidelines (WCAG), the most widely used resource for web accessibility. Product teams should leverage this resource to incorporate design and development features necessary to make products accessible.
- Usability testing: Usability testing is our preferred method to check if our products are user-friendly. We highly recommend all DDD product teams to conduct inclusive usability testing with diverse groups of users to validate if their products meet the users' expectations.
- Accessibility testing: Involving people with disabilities in testing can help in identifying specific challenges faced by people with different abilities and needs. These challenges could make digital experiences unusable, even if they technically comply with WCAG. Product teams must learn from accessibility testing and iterate based on insights to make our products usable to those with disabilities.
Key principles of accessibility
We follow the four WCAG principles:
- Perceivable: Ensure users can sense all information. This means:
- Providing text alternatives for non-text content
- Creating content that can be presented in different ways without losing meaning
- Making content easy to see and hear.
- Operable: Make every function easy to use. This means:
- Making all functionality available from a keyboard
- Providing users enough time to read and use content
- Helping users navigate and find content
- Understandable: Keep content clear and predictable. This means:
- Making text readable and understandable
- Making content appear and operate in predictable ways
- Helping users avoid and correct mistakes
- Robust: Make sure it works with both current and future tools. This means:
- Ensuring compatibility with different browsers and assistive tools.
- Providing clear and consistent structure to content
Design considerations
Visuals
- Color contrast - Use a ratio of 4.5:1 for normal text and 3:1 for large text. Helpful tools include:
- Don't rely on color alone - Use text or icons for clarity. Color-only information or changes are hard to distinguish for users with color blindness or limited vision.
- Semantic colors - Use colors thoughtfully (e.g., green for success, red for errors).
- Text size - Use a minimum font size of 16px for readability. Smaller fonts should be used sparingly and only for less important information.
Interactions
- Component states - Include relevant component states such as focus, hover, active, selected, and disabled to guide users.
- Target size - Make interactive areas at least 24x24 pixels, including the white space.
- Avoid displaying disabled elements - Instead of disabling buttons, let users try actions and provide feedback or guidance if needed. Alternatively, you can hide an element on a page rather than showing it in a disabled state.
Content
- Clear language - Use simple, inclusive language, aiming for a Grade 9 reading level.
- Headings and labels - Organize content using clear headings for easier navigation. This is especially important for those with cognitive disabilities or those using screen readers.
- Alternative text - Provide descriptive text for images and clear labels for links or buttons. Screen readers and text-to-speech tools rely on alternative text for images and accessible labels for interactive elements to share information and actions clearly.
Multimedia
- Transcripts and captions - Provide captions or transcripts for all video and audio content. These offer a different way for users with hearing loss, low vision, or blindness to access content.
Time on task
- Allow enough time for completing tasks - Make sure users have enough time to complete tasks like one-time-password validation and other sessions that may expire.
- Save progress - Let users save their progress during time-limited tasks.
Input assistance and system feedback
- Feedback and error messages - Most users depend on the feedback from the system when making a decision or performing a task. Providing clear and concise help text, instructions, feedback and error messages allows users to navigate and move forward effectively.
Device-friendly design
- Text resizing - Ensure content remains accessible when users enlarge text.
- Responsiveness - While adapting a design for different screens, consider how users access content on different devices. For example, scanning a cheque on a mobile device could also allow scanning in landscape mode for better usability and output.
Development considerations
Accessibility Rich Internet Applications (ARIA)
ARIA attributes add extra accessibility features to components.
Our design system components come with default ARIA behaviours and properties. These are documented to help developers understand and implement accessibility features without requiring extensive modifications.
ARIA roles and headings
The system uses ARIA roles to help assistive tools understand the purpose of different elements. These roles communicate what each element is for to screen readers and other assistive technologies.
- Headings - Use structured headings (H1, H2, etc.) to organize content. H tags don't have to match the text size. For example, a Large Heading can be labelled as H1. Just keep headings consistent across pages, as this helps users find information quickly.
Dynamic content
Dynamic content, which updates or changes without a full page reload, can create challenges for accessibility. Here are some ways to handle dynamic content for accessibility:
Use of ARIA live regions
ARIA live regions let screen readers announce webpage updates without changing focus.
Use aria-live with values like:
- "polite" for non-urgent updates
- "assertive" for important updates
- "off" to turn off announcements
Check the Callout or Notification Banner components to see how we handle updates for assistive technology.
Form updates
Use ARIA role=”alert” or live regions to notify users when new questions show up. When a form changes and new fields appear based on what a user enters, it's important to let them know.
Managing focus
In Single Page Applications (SPAs), manage focus to help users understand where they are after dynamic content loads. For example:
- If a pop-up window opens, move focus to it.
- When the pop-up closes, move focus back to the main page.
Skip to content link
Skip to content links help users, especially those using screen readers or keyboard navigation, jump directly to the main part of a webpage. This makes it easier for people with varying abilities to use the product without having to go through repetitive navigation links.
- Positioning - These links are usually placed at the top of the page, so they are the first thing users can focus on.
- Functionality - When users activate these links, they go straight to the main content, avoiding long navigation menus.
- Visibility - For users who can see, these links should be visible when they first tab to them, allowing them to skip navigation easily.
Keyboard navigation
All interactive elements in our design system are accessible via the keyboard, with clear focus indicators.
Keyboard navigation is important for users who only use a keyboard to interact with websites and apps. It allows them to move around and do things without a mouse or touch screen.
Optimizing performance
Improving speed, loading time, and responsiveness helps users with older devices, slower internet connections, or mobile phones access our digital products effectively.
Accessibility testing
Testing ensures components are used in ways that make digital products fully accessible. Recommended tools include:
- Screen readers - NVDA (Windows), VoiceOver (Apple).
- Automated tools - Axe, Wave, Lighthouse.
Additional resources
Book time in drop in hours