Badge

A count or a dot anchored over another element. The badge is decoration: it is hidden from assistive technology, and badgeLabel is what is heard instead - read with its child and, over one element,...

Accessibility

  • The visible badge is aria-hidden: a count heard as a bare number says little.
  • badgeLabel is a visually hidden text after the child. Over one element it also becomes that element's aria-describedby (added to what it has), so a button reads "Inbox, 4 unread".
  • No label is rendered for a badge that is not drawn.