Avatar Compact Group

How the Avatar Compact Group works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.

FreeReact and Vue

AAWCAG 2.2 target

1keyboard interactions

The Avatar Compact Group is a role="group" named with the total, such as "7 people", holding three labelled avatars and a +N count as plain text in a white pill. It is for dense rows, so its name should carry the count and the purpose.

Keyboard#

Tab

Passes over the group: it is not focusable. Wrap it in a button if it opens the full list.

Semantics#

role="group"

One set, with one name.

Always

aria-label

"{total} people" by default. Pass ariaLabel, such as "12 assignees", so the purpose is heard.

Always

role="img" + aria-label

Each of the three faces is still named. In a table cell where the total is enough, hide them with aria-hidden on a wrapper.

Each avatar

+N text

Plain text, read as "plus 4". The group's label already holds the total, so this is extra, not missing.

Count

Colour contrast#

Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.

4.5:1

+N count · Count

Satoshi Medium 12 to 16px in #6d6d6d on the white pill measures 5.17:1.

WCAG 1.4.3 Contrast (Minimum) ↗

Not required

Pill edge · Solid, Outline

The pill is a container, not a control, so its shadow and the Outline stroke (#f2f2f2) do not need 3:1.

WCAG 1.4.11 Non-text Contrast ↗

Motion#

The group does not animate.

Checklist#

Give it an ariaLabel with the total and the noun: "12 assignees".

In table cells and kanban cards, consider hiding the three faces from assistive tech: the total is what people need, and three names per row is a lot to hear.

The documentation says the small avatars are decorative; the preview names them. Pick one per surface and be consistent.