Card
Considerations for developers
- Make sure that all interactive elements are focusable and the focus is visible.
- Use buttons instead of interactive icons whenever possible. Refer to Settings and Hide widget buttons in our examples.
- Ensure all text within the card is in the reading order and accessible to screen reader users.
- If the card has a title, make sure that the title has the appropriate heading level. For example, if your card follows an
<h2>
heading, the title of the card should use an<h3>
tag. Refer to our example. - Add an appropriate ARIA landmark role (for example,
region
) and anaria-label
to the card if it represents an important part of the page. This allows screen reader users navigate quickly between different parts of the interface. Refer to our example. - If the card has several elements that are loaded dynamically and announced using
aria-live
androle="status"
attributes, make sure these updates are announced only when all elements have finished updating. You can do this by adding thearia-busy="true"
attribute to theCard
component during the loading and setting it tofalse
when it's finished.
Other recommendations
Find more accessibility recommendations in the common Accessibility guide.