Accessibility

Accessibility standards built into Cosmos components provide a foundation for accessible and inclusive products.

This page outlines where judgment is needed when using a Cosmos component to create a product that enhances usability for all users.

Content Structure

For groups of cards, using <ul> and <li> elements or role="list" and role="listitem" attributes helps to provide clear and meaningful structure.

<!-- A list of associated Cards -->
<div role="list">
  <cosmos-product-card role="listitem"></cosmos-product-card>
  <cosmos-product-card role="listitem"></cosmos-product-card>
  <cosmos-product-card role="listitem"></cosmos-product-card>
</div>

Logo

When adding a logo to the card, the inclusion of a logo-alt attribute should be ensured, providing a concise description that assistive technologies can effectively convey to the users.

<!-- A Card with a descriptive alternative text for the logo image -->
<cosmos-product-card logo-alt="Red Bull logo" logo="path/to/red-bull-logo.ext"></cosmos-product-card>