ID plate

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

Part	Online	Away	Offline
Plate	Ada Okafor Platform engineer Serial LD-0417-2291 Online	TR Tomás Ribeiro Support lead Serial LD-0388-1034 Away	Mei Lindqvist Security engineer Serial LD-0452-7716 Offline
Compact	Ada Okafor Platform engineer Serial LD-0417-2291 Online	TR Tomás Ribeiro Support lead Serial LD-0388-1034 Away	Mei Lindqvist Security engineer Serial LD-0452-7716 Offline

Graphite

Part	Online	Away	Offline
Plate	Ada Okafor Platform engineer Serial LD-0417-2291 Online	TR Tomás Ribeiro Support lead Serial LD-0388-1034 Away	Mei Lindqvist Security engineer Serial LD-0452-7716 Offline
Compact	Ada Okafor Platform engineer Serial LD-0417-2291 Online	TR Tomás Ribeiro Support lead Serial LD-0388-1034 Away	Mei Lindqvist Security engineer Serial LD-0452-7716 Offline

<article class="tui-id-plate" aria-labelledby="ada-n">
  <span class="tui-id-plate__clip" aria-hidden="true"></span>
  <div class="tui-id-plate__photo">
    <img src="/people/ada.jpg" alt="">       <!-- or: <span class="tui-id-plate__initials" aria-hidden="true">AO</span> -->
  </div>
  <div class="tui-id-plate__who">
    <h3 class="tui-id-plate__name" id="ada-n">Ada Okafor</h3>
    <p class="tui-id-plate__role">Platform engineer</p>
  </div>
  <div class="tui-id-plate__foot">
    <dl class="tui-id-plate__serial"><dt>Serial</dt><dd>LD-0417-2291</dd></dl>
    <p class="tui-id-plate__presence">
      <span class="tui-lamp" data-on aria-hidden="true"></span>Online
    </p>
  </div>
</article>

Needs kit.css only, no script. How to install the kit.

• The plate is labelled by the person’s name, a real heading, so a screen reader says who it is before anything else. Role and serial are text, not pictures.
• Presence is said in words, in the page, every time: “Online”, “Away”, “Offline”, in the reading order after the role and serial. The lamp is aria-hidden because the word is right beside it, and it is also lit or dark, not just green or amber, so it is not colour alone.
• The photo has empty alt text, because the name is next to it and repeating it would only make a screen reader say it twice. The initials are hidden from assistive technology for the same reason.
• In the compact plate the serial’s label is hidden visually but kept for a screen reader, so it still says “Serial” before the number.
• A long name wraps in the full plate and is cut short in the compact one, where it stays a real heading so the whole name is still read.
• There is nothing to press, so there is nothing for reduced motion to change.

One plate, drawn like the kit’s panel: a face with the bead-blast on it and a raised edge. The clip slot is a stadium cut through the top, the same recess as a field. The photo well is a recess a photograph is set into, and a rim over it shades its upper edge the way the avatar’s does, so a print looks set in, not stuck on. With no photo the initials are debossed: the letters are a shade darker than the well, the lamp catches the lower lip of every stroke and the upper wall is in shadow. Name, role and serial are engraved, which here means a light line under each letter. Corners are concentric: the 12px plate, a 4px gap and an 8px well. The compact plate is the same markup laid out again by its modifier: the foot dissolves into the row and the serial moves up under the role.