Summary: Follow the latest Material design and writing guidelines for accessibility, become familiar with "how to design" content in GAR (go/gar), and review guidance in the hub. Then create Greenlines for hand-off.
Google Material 3 accessibility guidelines
Google Material 3 is an internal design system that also features guidance on accessible design.
It's a good idea to start your project by reviewing Material’s principles for accessible design as a team. Use these to identify and prioritize opportunities for more inclusive and equitable design, development, collaboration, and co-creation.
Throughout your design process, you should also rely on Material's guidelines for reflow, color and contrast, text resizing, target sizes, and other aspects of the user experience. This will help your product serve more users.
Google Accessibility Rating (GAR) "how to design" content
GAR (go/gar) includes "how to design" content in each of the accessibility criteria, along with examples of successful and unsuccessful design implementations.
Writing
In addition to Google Material’s writing guidelines, there are a number of other resources to help you write and design accessible content.
In addition to Google Material’s writing guidelines, there are a number of other resources to help you write and design accessible content.
Material’s writing guidelines
Guidelines for writing alt text and other best practices for accessible user interface copy.
Content Strategy + Greenlines + Accessibility
Best practices for designing accessible content experiences.
Labels
Labels allow users with screen readers to understand the purpose and behavior of a control or interactive element.
Which elements need labels?
- Interactive components that don't have visible labels
- Interactive images or icons
- Visual cues, like progress bars and error handling
- Meaningful icons, like status indicators
- Meaningful images, like diagrams and infographics
Use go/labels to check the database of existing Google icons and labels and Material's guidance for alt text to write and implement them.
Auditory
Auditory cues like alarms, warnings, and alerts can add greater context to your product and help when the visual system is busy with another task or the perceiver is visually impaired. They can increase recall of content and enhance display of information on small screens. You can learn more by checking out the deck, Auditory Cues and Accessibility Best Practices.
Voice and natural language UI
Many individuals may benefit from accessible voice user interfaces. Voice and Natural Language UIs like The Google Assistant allow people with diverse physical and cognitive abilities — as well as those at different stages of digital literacy (curb cut) — to access the internet and digital services, control their smart home devices, and communicate with others.
Examples of voice user interface types
- Dictation and Voice Typing (for example: Google Docs Dictation)
- Voice Recording (for example: Recorder, Voice Messages on communication apps)
- Augmentative and Alternative Communication devices (AAC devices)
- Real-time Voice Translation
- Voice Access Android is an example of this
- Conversational Voice User Interfaces
- Google Assistant Verbose Mode is an example of this
- Watch a Youtube video showing how to use Google Assistant verbose mode for Chromecast (Time: 2 minutes 50 seconds)
Did you know
Conversational interfaces allow people to interact with computers using natural language, which can be much easier for people with limited dexterity and other disabilities than traditional graphical user interfaces.
Get design reviews and guidance from experts
You can get early concept reviews, design reviews, or answers to questions from accessibility experts in Accessibility Office Hours. Getting feedback early and often will make your product better.
Greenlines
Create Greenlines for hand-off by following the guidance on go/greenlines. This can be done by anyone on the product team, but most often by UX or Content Designers.
Greenlines are annotations containing metadata that assistive technologies need. Attaching this metadata, like an accessibility label to an image, will enable a screen reader to verbalize a meaningful description of the image. Greenlines are part of an accessible design process and help product teams design, build, launch, and land GAR4 products.
How to create Greenlines
Add landmarks
Landmarks are semantic blocks in HTML 5 that give both the browser, extensions, and assistive tech helpful information about the page structure. ATs often use this semantic information as a tool to help a user get through a flow. When proper HTML landmarks are not an option, ARIA landmarks—attributes you add to elements to designate them as semantic landmarks – can be used instead.
Note headings
Headings communicate the organization of the content on the page. Assistive technologies can use them to provide in-page navigation.
Describe images
Visuals that add important meaning or explanation to the content should be described with a label that concisely yet meaningfully conveys their contents.
Define elements
For interactive elements, labels convey their purpose, while assigning roles offers users extra context about how to interact with them. Learn more about the Greenlines.