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-person-card role="listitem"></cosmos-person-card>
<cosmos-person-card role="listitem"></cosmos-person-card>
<cosmos-person-card role="listitem"></cosmos-person-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-person-card favorite-aria-label="Add to favorites" favoritable></cosmos-person-card>
<cosmos-person-card favorite-aria-label="Remove from favorites" favoritable favorited></cosmos-person-card>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-person-card logo-alt="Red Bull logo" logo="path/to/red-bull-logo.ext"></cosmos-person-card>