# <aihio-avatar>

A round picture of a person or entity, such as the account owner in a header, falling back to initials when there is no image or it fails to load.

Intents: `identity`, `labeling`.

## Attributes

- `src` (string): Image URL for the avatar.
- `alt` (string): Alt text for the image. Initials are derived from this if no fallback is set.
- `fallback` (string): Fallback text displayed when image is unavailable.
- `size` (`sm` | `md` | `lg`): Avatar size. Default: `md`.

## Accessibility obligations

- (error, avatar-alt) When src is set: Provide alt describing the person or entity (e.g. alt="Jane Doe"). Empty alt is only acceptable for purely decorative avatars.
- (error, avatar-fallback) When src is not set and fallback is empty: Provide alt so initials can be derived, or set fallback explicitly.

## Examples

### With an image

alt names the person for screen readers.

```html
<aihio-avatar src="/avatar.jpg" alt="Jane Doe"></aihio-avatar>
```

### Initials from the name

With no src, the initials are taken from alt.

```html
<aihio-avatar alt="Jane Doe"></aihio-avatar>
```

### Explicit initials, large

fallback sets the initials directly.

```html
<aihio-avatar fallback="JD" size="lg"></aihio-avatar>
```

## Mistakes

### Missing alt. Screen readers will announce only the filename.

Don't (aihio lint: avatar-alt):

```html
<aihio-avatar src="/u.jpg"></aihio-avatar>
```

Do:

```html
<aihio-avatar src="/u.jpg" alt="Jane Doe"></aihio-avatar>
```

### Avatar renders its own content; passed children are replaced. Use the fallback attribute instead.

Don't (aihio lint: invalid-child):

```html
<aihio-avatar>JD</aihio-avatar>
```

Do:

```html
<aihio-avatar fallback="JD" alt="Jane Doe"></aihio-avatar>
```