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

A common technique for users of assistive technology is to navigate a document by headlines. By default, a Cosmos Text component renders ap (paragraph) element. To structure a document with headlines consider adding semantic meaning to the Text component using the tag attribute. It will decide which HTML element is used to mount the given text to the HTML document to create clear and seamless content structures that can be easily navigated.

<!-- The Text will use a headline of level 2 -->
<cosmos-text tag="h2">
  The quick brown fox jumps over the fence
</cosmos-text>

There are two important aspects to keep in mind when working with headlines to structure a document:

Ideally, there is just on h1 (headline of level 1) on a page

A document should be seamlessly structured and no headline levels should be skipped.

Rich Formatting

When formatting a text, consider using <strong> and <em> tags instead of <b> and <i> tags to provide more semantic meaning to assistive technologies.

<cosmos-text>
  The <strong>quick</strong> brown fox <em>jumps</em> over the fence
</cosmos-text>