Counts should be semantically and visually different from the items they count.


What is an 'item or facet count'?

It is one of those little numbers found at the end of facet filters or list, telling you how many results you’ll see if you click on it.

Ah. Thanks.

np


When using item or facet counts, it is important that the count is semantically and visually different from the item counted.

Semantically this can be done be separating the count into a <span>, e.g.:

<a href=“[…]” class=“item”>
  Item description
  <span aria-label=“12 items” class=“item-count">12</span>
</a>

Visually this can be done through a combination of colour, font weight and font size. The item that has the most importance (either the label or the count), should adopt the highest visual significance:

Comments 12 // the most important is the count

Suitable for NQT 12 // the most important is the item

If it is not possible to create enough visual difference, the count can be encased in brackets: Item description (12)