Avatar

Подписи

Если изображение аватара передаёт идентичность, текст alt должен описывать представленную сущность. Если аватар декоративный, окружающая композиция должна обращаться с ним как с декоративным.

Avatar не добавляет роль или подпись своему корню, потому что правильная семантика зависит от содержимого и окружающей композиции.

• Аватар с изображением получает доступное имя из alt у AvatarImage, например alt='Jane Doe'.
• Аватар с инициалами или иконкой, который идентифицирует человека, получает role='img' и aria-label на Avatar, например <Avatar role='img' aria-label='Jane Doe'>. Добавьте aria-hidden к AvatarFallback, чтобы инициалы не зачитывались отдельно. AvatarIcon уже скрыт от вспомогательных технологий.
• Декоративный аватар рядом с видимым именем получает alt='' на AvatarImage или aria-hidden на Avatar, если показывает инициалы или иконку.

Поведение клавиатуры

• Статичным аватарам обычно не нужен фокус.
• Если аватар становится интерактивным, семантикой должен владеть окружающий компонент.

Поведение фокуса

• Неинтерактивные аватары не должны участвовать в порядке табуляции.

Семантика для скринридеров

• У информативных аватаров с изображением должен быть осмысленный текст alt.
• Декоративные аватары не должны создавать лишних объявлений.
• Инициалы в запасном варианте должны оставаться понятными в контексте.

Семантика форм

• Avatar не является элементом формы.

Риски доступности

• Отсутствующий или бессмысленный текст alt.
• Декоративные аватары озвучиваются так, будто они информативны.
• Текст запасного варианта слишком загадочен, чтобы понять его в контексте.