Accessibility

For developers

Decorative Icons

When using icons that are purely decorative, you should add aria-hidden="true" to the icon element to ensure it is ignored by assistive technologies.

<i class="tng-icon icon-car" aria-hidden="true"></i>

Informative Icons

When using icons that convey meaning, you should provide a text alternative. This can be done in many different ways. Use whatever makes sense.

<i class="tng-icon icon-download" aria-label="Download"></i>

<button class="tng-icon-button" aria-label="Download">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
</button>