This guidelines specify how we design our product to accommodate users of diverse physical and cognitive limitations. We follow the <abbr title="Web Content Accessibility Guidelines">[WCAG](https://www.w3.org/TR/WCAG21/)</abbr> to make the web more accessible
for people with disabilities while also catering for the needs of users that are not captured through the lens of that document.

### Color
Here is a short video describing accessibility color standards

<div style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hiddden" class="my-8">
<iframe style="position:absolute;top:0;left:0;width:100%;height:100%" height="500" src="https://www.youtube-nocookie.com/embed/sEDnmNtEaqQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Accessibility efforts are often stopped at what WCAG offers and there is a tendency to forget are other usability concerns that can make a product more accessible for users.

Let's talk about some of those other issues.

### Using titles
When using an icon, we should include a `title` attribute. By doing so
we ensure the user is not left trying to interprete or decode the meaning of the icon.

If an icon does not use a tooltip or include a descriptive text, it should have a title:

<iframe height="362" style="width: 100%;margin-bottom: 20px" scrolling="no" title="Icons with title" src="https://codepen.io/josephrexme/embed/gOrvKjr?height=362&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/josephrexme/pen/gOrvKjr'>Icons with title</a> by Joseph Rex
  (<a href='https://codepen.io/josephrexme'>@josephrexme</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

```jsx noeditor
import Note from '../../src/_doc/Note';
<Note type="info">
Although all the icons in the example above include <span>aria-label</span> for WCAG compliance, we go an extra step by making them work great for all kinds of users.
</Note>
```

### Space and wrapping
We anticipate that any part of our interface with text (especially the ones that are filled with user generated content) can grow into a longer length.

<iframe height="568" style="width: 100%;margin-bottom: 20px" scrolling="no" title="Vertical spacing over horizontal inlining" src="https://codepen.io/josephrexme/embed/RwaQBpp?height=568&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/josephrexme/pen/RwaQBpp'>Vertical spacing over horizontal inlining</a> by Joseph Rex
  (<a href='https://codepen.io/josephrexme'>@josephrexme</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

```jsx noeditor
import Note from '../../src/_doc/Note';
<Note>
This will often lead to needing ellipsis. We believe it is always a better experience to have content visible rather than make users ponder on what the complete sentence or word might be.
</Note>
```

### Asset/Network optimization
With some of our users across the world on capped or low bandwidth internet service, we make it a priority to optimize our network requests. Learn more about how we improve experience for users in our [performance guideline](#/Guidelines/Performance).

### Responsive and Adaptive
Learn more about this in our [responsiveness guidelines](/#/Guidelines/Responsiveness).