Accessibility

For developers

Chips are <button> elements. Use aria-pressed to communicate the toggled state to assistive technologies.

<button class="tng-chip" aria-pressed="false">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Electric</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

<button class="tng-chip is-selected" aria-pressed="true">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Electric</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

When chips are used as a filter group, wrap them in a role="group" element with an aria-label to give the group a name.

<div role="group" aria-label="Filter by fuel type">
  <button class="tng-chip" aria-pressed="false">…</button>
  <button class="tng-chip" aria-pressed="false">…</button>
</div>

Both icons inside the chip (icon-check and icon-close) should carry aria-hidden="true" — the label text conveys the meaning on its own.