ID plate

A staff badge for a person. An engraved metal plate with a clip slot cut through its top edge, a photo well and the name, role and serial engraved beneath. With no photo, the initials are debossed into the well. A lamp shows whether they are online, away or offline, and the word is always printed beside it. A compact plate does the same in one line, for lists.

Pure markup: nothing here runs. The lamp and its word are two ways of saying the same thing.

• 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.