Our approach
Refer to the Our approach section in Anatomy.
Color
Refer to the Color usage section in Anatomy.
Heading elements
Refer to the Heading elements section in Anatomy.
Images and videos
Text for calls-to-action
For more information on CTAs, refer to the Button component page.
Unique text
A call-to-action (CTA) should have unique and descriptive wording. This is so users know exactly what will happen if the act on the CTA, and so users who navigate our site with screenreaders can tell CTAs apart. It can include keywords, but it does not have to.
An example of a non-unique CTA would be “Read more”. If there is more than one “Read more” CTA on the page, it becomes difficult to tell what will happen when the user clicks a “Read more”. But if we adjust the CTA to be more unique, for example, “Read more about Core Components”, then the user can tell what content the CTA is attached and what they can expect on click of that CTA.
If adding unique CTAs becomes too cumbersome or lengthy, we can use non-unique wording in a CTA as long as there is a redundant CTA with unique wording that the user can fall back on. This scenario generally occurs while using the Teaser card style or for the Download component, as both components usually have similar content and may appear multiple times on a page.
Link text
Link text (text that links to another page, part of the same page, or an external page) should be descriptive enough for the user to know where the link leads just by reading it. It can include keywords, but it doesn't have to. Don’t use the same link text for different URLs on the same page.
Focus, tab, and content order
Refer to the Focus, tab, and content order section in Anatomy.
A solution for reordering content across breakpoints while maintaining a logical tab order unfortunately does not exist.
Content Reordering by Rachel Andrew has some great visuals and interactive demos, and Accessibility Insights for Web is a great browser extension that reveals the tab order of a page.
Since reordering content across breakpoints negatively impacts accessibility, we should avoid this practice.
In most situations, thinking responsively will help prioritize content and determine the layout across all breakpoints. Also, since Google switched to mobile-first indexing in early 2021, this approach will boost SEO too.