Entity mark — accessibility

Keyboard

  • Not focusable and not interactive. When it leads a row or sits in a chip, that host is the control.

ARIA

  • The mark is aria-hidden="true": the tone and glyph are a compressed rendering of a type that the surrounding text already states — the section it sits in, the byline, or the type word in a header. Announcing "green briefcase" before "Fotovoltaika — Fialka Group" would be noise.
  • title carries the record name (or the type label when no name is given), which surfaces on hover for a sighted mouse user. It is not a substitute for the name being present as text.
  • Consequence: a mark must be accompanied by the record name in text. On its own it is invisible to a screen reader, by design.
  • The person and company branches inherit the avatar's rules — see avatar.

Focus

  • Nothing focusable, so no focus ring. The row, chip or button around it keeps the foundation ring from ds.css.

Contrast

Computed from packages/ui/src/tokens/tokens.css:

  • The glyph is white on a solid --ic-* ground. Measured against the seven tones, the white drawing clears 3:1 on blue, purple, green, rose and grey; amber and lime sit lower, which is why they carry the lightest glyph load in the vocabulary (a calendar and a car, not fine detail).
  • The mark is decoration, not information: the type is always available as text nearby, so a reader who cannot resolve the glyph loses nothing.
  • Tone is never the only carrier — two types share a tone by design (a world), and the glyph separates them.

Known limits

  • Seven tones for twenty-seven types means a tone identifies a world, never a single type. Anyone reading colour alone will land on the group, not the record.
  • The glyph is small: at inline 16 the drawing is 12 px, which is a shape, not a diagram. Types whose glyphs differ only in fine detail should not sit in the same world.
  • Colour is not announced and cannot be perceived by a user who cannot distinguish the tones — again, nothing is lost, because the tone carries no information the text does not.

Source: docs/avatar/entity-mark.a11y.md · GitLab