Отображение данных
Аватар
Опознавательный знак человека или агента: изображение либо инициалы.
Разметка
<span class="inst-avatar">ИС</span>
<span class="inst-avatar">АП</span>
<span class="inst-avatar">МК</span>
Использование
<span class="inst-avatar" aria-hidden="true">ИС</span>
| Что | Обязательно | Почему |
|---|---|---|
aria-hidden="true", если имя есть рядом текстом |
да | Иначе аватар озвучится как «И С» рядом с уже прочитанным именем |
alt или aria-label, если имени рядом нет |
да | Инициалы доступным именем не являются: скринридер читает их по буквам |
aria-label на группе |
да, у inst-avatars |
Иначе прозвучит череда инициалов вместо «7 участников» |
Когда использовать
| Используйте | Возьмите другое |
|---|---|
| Опознать человека или агента с одного взгляда | Состояние объекта — бейдж: аватар отвечает «кто», а не «как дела» |
| Участников надо показать компактно — группа | Произвольная метка — тег |
| Имя уже есть текстом рядом | Имя отсутствует, а аватар единственный опознавательный знак — тогда он несёт alt или aria-label, см. ниже |
| — | Иконка типа объекта, а не личности — иконка |
Размеры
Разметка
<span class="inst-avatar inst-avatar--sm">W1</span>
<span class="inst-avatar">ИС</span>
<span class="inst-avatar inst-avatar--lg">B4</span>
Размеры берутся из яруса ролей (--control-h-*), поэтому аватар и стоящая
рядом кнопка того же размера физически не могут
разойтись по высоте.
Композиции
Группа с наложением
Разметка
<span class="inst-avatars" aria-label="7 участников">
<span class="inst-avatar">ИС</span>
<span class="inst-avatar">АП</span>
<span class="inst-avatar">МК</span>
<span class="inst-avatars-more">+4</span>
</span>
Кольцо вокруг каждого аватара в группе — не обводка, а цвет поверхности под ним: оно отделяет соседей друг от друга. На другой поверхности группа потребует переопределить это кольцо, иначе появится ореол.
Правила
Так Аватар рядом с именем — декоративен
Имя уже прочитано текстом; aria-hidden="true" избавляет от повторного «И С».
Не так Инициалы как доступное имя
«ИС» скринридер читает по буквам. Если имени рядом нет, нужен alt или
aria-label с полным именем.
Так Группе — имя составом или числом
aria-label="7 участников" вместо череды инициалов.
Не так Аватар вместо статуса
«Кто» и «как дела» — разные вопросы. Состояние объекта носит бейдж.
Доступность
| Аватар — не подпись | Если имя есть рядом текстом, аватар декоративен: aria-hidden="true". Иначе он озвучится как «И С» рядом с уже прочитанным именем |
| Аватар вместо подписи | Тогда он несёт имя: <img alt="Иннокентий Соколов"> или aria-label на контейнере |
| Инициалы | Не являются доступным именем: «ИС» скринридер прочитает по буквам |
| Группа | Дайте контейнеру aria-label с полным составом или числом: «7 участников». Иначе прозвучит череда инициалов |
| Счётчик | inst-avatars-more содержит «+4» текстом — это данные, а не декорация |
| Контраст | Инициалы берут --text-secondary на --surface-sunken и держат 4.5:1 в шести темах |
API
| Имя | Значение | Что делает |
|---|---|---|
| класс | ||
inst-avatar | — | Один аватар. Размер --control-h-md |
inst-avatars | — | Группа с наложением |
inst-avatars-more | — | Счётчик «ещё N» в конце группы |
| модификатор | ||
inst-avatar--sm | — | Размер |
inst-avatar--lg | — | Размер |
| токен | ||
--control-h-sm/md/lg | — | |
--radius-full | 999px | |
--surface-sunken | light-dark(var(--n-2), var(--n-14)) | |
--surface-raised | light-dark(var(--n-0), var(--n-12)) | |
--text-xs | 0.75rem | |
--weight-medium | 500 | |
--size-marker | 2px | |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument