Skip to content

Card

Considerations for developers

  • Make sure you have tabbing focus indicators for all elements that should be controlled.
  • 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. See the example.
  • Add an appropriate ARIA landmark role (for example, region) and an aria-label to the card if it represents an important part of the page. This allows screen reader users navigate easily between different parts of the interface. See the example.

Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.