Accessibility
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-default-card role="listitem"></cosmos-default-card>
<cosmos-default-card role="listitem"></cosmos-default-card>
<cosmos-default-card role="listitem"></cosmos-default-card>
</div>Favorite Button
When the card is favoritable, adding a descriptive favorite-aria-label attribute for the favorite button will help indicating the intended action.
<!-- Cards with descriptive aria-labels for favoriting/unfavoriting -->
<cosmos-default-card favorite-aria-label="Add to favorites" favoritable></cosmos-default-card>
<cosmos-default-card favorite-aria-label="Remove from favorites" favoritable favorited></cosmos-default-card>Logo
When adding a logo to the card, the inclusion of a logo-alt attribute should be ensured, providing a concise description that assitistive technologies can effectively convey to the users.
<!-- A card with a descriptive alternative text for the logo image -->
<cosmos-default-card logo-alt="Red Bull logo" logo="path/to/red-bull-logo.ext"></cosmos-default-card>