Accessibility
Products and web properties should be accessible to everyone, including those with vision, hearing, cognitive, or motor impairments. Accessible design allows people of all abilities to interact, understand, and navigate WISE.
Keep in Mind
Accessibility is about having a good understanding of our users' journeys and proactively anticipating their needs. Accessible design is everyone's responsibility, from information and user experience design, through development, and onto help and support.
Structure & Hierarchy
A consistent, clear hierarchy helps users who navigate the page using links or headers. Use headings and titles to outline the page so that users can see the structure and how the sections relate. Give users feedback so they know where they are in the application.
List by level of importance
Place items on the page in order of their level of importance so that users don't have to search for them.
Have consistent hierarchy
Create and maintain a consistent hierarchy so that users can use alternative input methods to move through the page. Headings are in order without skipping levels.
Text scaling
Test the UI with color correction, magnification, and other accessibility settings to ensure the layout works with assistive settings.
Group similar items
Group items under titles or headings that clearly communicate the content of the group.
Keyboard Navigation
Some users can't use a mouse, and instead navigate through applications using tools such as a keyboard, mouth wand, or eye tracking system. Users should be able to navigate and use the product with a keyboard or screenreader. Make sure anything users can see by hovering with a mouse is also accessible to keyboard focus and screen readers. When creating an application, ask yourself whether you can use a keyboard to:
- Navigate
- Perform the same tasks as users who use a mouse
- Tell where you are on the page
- Tell where the keyboard focus is
Manage focus
Keyboard focus follows the page as the eye would scan it. Focus travels top to bottom, left to right, moving from most to least important item. Users can navigate applications using alternative input methods (D-pads, trackballs, keyboards, and navigation gestures), and the focus flows in a logical order.
Use tooltips
Users can activate tooltips by keyboard. When an element gets keyboard focus, a tooltip displays. When that element loses focus, the tooltip disappears.
Validate forms in-line
Validate forms in-line so keyboard users don't have to navigate far to get feedback.
Colors
We comply with AA standard contrast ratios. To do this, we choose primary, secondary and extended colors that support usability. This ensures sufficient color contrast between elements so that users with low vision can see and use our products.
Make sure that the combination of text and background color do not fall below the WCAG recommended threshold ratio of 4.5:1 for standard text and 3:1 for larger text.
Note: Disabled states do not have contrast requirements.
Include visual cues
Don't convey information using color alone. Use multiple visual cues, such as stroke weight, patterns, shape, text, or illustrations to ensure that all users receive the same information.
This helps users who are unable to, or have difficulty with, distinguishing one color from another. This includes people who are color blind, have low vision, or are blind.
Testing & research
These guidelines will help improve accessibility in your applications, but they don't guarantee a fully accessible experience. We also recommend that you:
- Test the entire application and journeys using various assistive technologies and text scaling.
- Include users with impairments when testing.
- Ensure that the tasks in your applications can be accomplished by anyone, regardless of ability.
When in doubt, refer to the following guidelines:
- WebAIM - http://webaim.org/
- Web Accessibility Initiative - https://www.w3.org/
Tools to Use
Instead of manually auditing, designers and developers can use these tools to cross-check accessibility to ensure WISE complies with WCAG standards.
Designers
Stark
A designer can run the Stark plugin in Figma to check how their design matches up to multiple accessibility standards. Stark has many features such as Contrast Checker, Focus Order, Alt-Text Annotations, and Vision Simulator.
Developers
WAVE
A developer can input a web page address, and WAVE's suite of evaluation tools will identify any potential accessibility and/or WCAG errors. Another way to utilize WAVE is to download the browser extension.
Lighthouse
This developer tool rates and suggests improvements based on performance, accessibility, progressive web apps, SEO, and more. Download the browser extension to get started.