About
Accessibility
VA is here to serve Veterans of the United States military, and approximately 40% have an identified disability.
Therefore, accessibility is core to all design decisions made in our Design System. All components must be tested before admission into the Design System, and all VA products must be tested before launch.
Our holistic approach to accessibility
The VA Design System provides accessible components, the guidance to implement these components, and the tools to customize and extend the design system accessibly. It was built on top of a fork of the U.S. Web Design System (USWDS), which prioritizes accessibility throughout. Learn more about how USWDS practices accessibility.
Components don’t live in a vacuum. As standalone elements, they can only be tested atomically. Learn more about how VA Design System components are tested. For a product to launch, you need to test holistically; you should review the product as a whole before launch.
The surest way to make an accessible product is to “shift left,” or prioritize accessibility during an entire project’s lifecycle.
Create accessible products using the Design System
Whenever you make a new component, feature, or product, follow these steps to ensure that, in the end, your creation is accessible.
We recommend a mix of automated, semi-automated, and manual testing. You should also research with real people who use assistive technology to access services online.
Design
- Review your mockups for accessibility issues before development (learn how to design with with accessibility in mind)
- Add accessibility annotations to your mockups to communicate important semantic information (heading levels, aria-labels, etc.) to designers, developers, and accessibility specialists
Development
Manually test your product:
- Color and color contrast
- Content zoom and reflow
- Keyboard navigation
- Heading levels (HeadingsMap is a useful Chrome extension)
- With screen readers
- Based on recommendations from the Blinded Veterans Association, we recommend testing with the following as a minimum:
- iOS with Safari using VoiceOver (Mobile)
- Windows 11 with Chrome using JAWS (Desktop)
- Based on recommendations from the Blinded Veterans Association, we recommend testing with the following as a minimum:
- Conduct automated testing with axe DevTools by Deque
- Evaluate how Design System components are used to ensure they aren’t appearing in an unanticipated combination or context within a page.
Research
- Test with people who use assistive technology (at least 20% of your participants)
Contribute accessible components to the Design System
Foundational accessibility tests
As part of staging reviews, new components must complete foundational accessibility testing using this GitHub ticket. Foundational testing requires evaluating:
- Color and color contrast
- Automated testing with aXe DevTools by Deque
- Content zoom and reflow
- Keyboard navigation
Advanced testing with mobile and desktop screen readers
As part of staging reviews, new components must also complete advanced testing with an accessibility specialist using a screen reader on both mobile and desktop. As a default, based on recommendations from the Blinded Veterans Association, we recommend testing with the following at a minimum:
- iOS with Safari using VoiceOver (Mobile)
- Windows 11 with Chrome using JAWs (Desktop)
If time and resources allow, do a more comprehensive review by testing with:
- Android with Chrome using TalkBack (Mobile)
- Windows 11 with Chrome using NVDA (Desktop)
It is the intention of this team to improve our testing standards to more accurately reflect the full experience of users with disabilities. Today our compliance testing sets a minimal standard (WCAG 2.2 AA) that we are striving to raise.
Resources for Veteran-facing service teams
Get accessibility guidance early from the Accessibility Digital Experience (ADE) team
The Accessibility Digital Experience (ADE) team can help you meet VA.gov’s accessibility standards. Whether you’re starting a new product or refining an existing one, contact the CAIA team as early as possible to create accurate, consistent, accessible, and equitable digital services for Veterans.
- Submit an ADE intake form ticket in GitHub
- Contact ADE on Slack using their handle: @accessibility-de