Avatar

A person, as a photo or as initials. Always named, because an avatar identifies someone.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<!-- Initials: no photo on file -->
<span class="wsu-avatar wsu-avatar--sm" role="img" aria-label="Pat Nguyen">PN</span>

<!-- Photo: the name is the alt text -->
<span class="wsu-avatar">
  <img class="wsu-avatar__image" src="/photos/rivera.jpg" alt="Jane Rivera">
</span>

<x-wsu::avatar name="Pat Nguyen" size="sm" />

<x-wsu::avatar name="Jane Rivera" src="/photos/rivera.jpg" />

<Avatar name="Pat Nguyen" size="sm" />

<Avatar name="Jane Rivera" src="/photos/rivera.jpg" />

Why it works this way

name is required on every path. Vue validates it as a required prop; Blade and the standalone function throw rather than render an avatar for nobody, the same pattern Loading and Progress use for their own required label (1.1.1).
A photo carries the name in its alt attribute. Initials carry it in aria-label on the avatar itself, because two capital letters read aloud as two letters are not the name they stand for.
Only the first two words of the name become initials, so a long name still produces something a screen reader can announce in one breath.

Accessibility

A photo avatar is a named image (1.1.1).
An initials avatar carries role="img" and aria-label, so the letters are announced as the name behind them rather than read as two letters (1.1.1).

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
`name`	`required`	Throws if omitted, or the avatar identifies nobody (WCAG 1.1.1).
`src`	`null`	Photo url. Falls back to initials.
`size`	`'md'`	sm, md or lg.

Vue

Prop	Type and default	What it does
`name`	`String, required`	Read aloud from aria-label when there is no photo.
`src`	`String, ''`	Photo url. Falls back to initials.
`size`	`String, 'md'`	sm, md or lg.

In the markup contract

contract/markup-contract.json is extracted from the two static templates and every package tests against it. This is what it records for .wsu-avatar.

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	`span`	`aria-labelrole`	3
public apps/examples/static-html/public-app.html	`span`	`aria-labelrole`	1

Avatar ​