Summary: Work as a team to determine which design system, components, and
specifications to use. Many already work with assistive technology and will help
make your products more accessible.
More accessible design systems
The following design systems are built with accessibility in mind, aiming to
build more inclusive products.
Google Material 3
Google Material 3 is a design system that also features guidance on
accessible design
Ads Design System
(Reach UX)
Ads Design System
(Reach UX) is a design system for Ads products. This spec is based on Google
Material and addresses the unique needs of enterprise products
Corp Eng (CE) Elements
Corp Eng (CE) Elements is a design system that brings cohesion to 500+
products, ~130 teams, and helps reduce cognitive load
Cloud Design System
Cloud Design System empowers producers to create elegant and insightful
data visualization experiences.
More accessible components and specifications
Discover more accessible component specifications that you can incorporate in to
your designs, agnostic of your chosen design system
Accessibility UX Specs
Accessibility UX Specs has user experience specifications
and guidelines to implement accessible components and patterns complementary
to Google Material and beyond
ARIA Greenlines
ARIA Greenlines document the proper use of ARIA in common web UI
components. They reflect the advice of web accessibility experts on how best
to mark up accessible UI.
Data Accessibility Playbook
Data Accessibility Playbook guidance helps create accessible charts,
graphs and visualizations with accessible colors, dual encodings, data
sonification, Greenlines, GAR-certified components, and more.
Systems & Platforms Accessibility Leadership Advisory Board (SpaLab)
SpaLab is a select group of individuals with accessibility expertise who are also
accountable for design systems across Google PAs. Its mandate is to increase
alignment, quality, and clarity of accessibility standards, provide an authoritative
and equitable forum for defining standards that can be trusted, and ensure that
the user is at the center of how our standards are developed and defined.
Learn more at go/spalab.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-04-03 UTC."],[],[]]