Avatar

Semántica

• Renderiza `Root` como un `<span>` con `data-scope="avatar"` y `data-part="root"`.
• Renderiza `Image` como un `<img>` con `data-scope="avatar"` y `data-part="image"`. El atributo `alt` se pasa directamente para lectores de pantalla.
• Renderiza `Fallback` como un `<span>` con `data-scope="avatar"` y `data-part="fallback"`. Se oculta cuando la imagen se carga correctamente.

ARIA

• El prop `alt` en `Image` proporciona el nombre accesible para la imagen del avatar.
• Cuando la imagen está oculta durante la carga, el contenido de `Fallback` es visible para los lectores de pantalla.
• No se agregan roles ARIA más allá de la semántica nativa de `<img>` y `<span>`.

Responsabilidades del consumidor

• Siempre proporciona un prop `alt` significativo en `Image` que describa la persona o entidad que representa el avatar.
• Proporciona contenido de reemplazo (iniciales, nombre, o icono) en `Fallback` para los casos en que la imagen no puede cargarse.
• Asegúrate de que el texto de reemplazo sea suficiente para identificar al usuario cuando la imagen no está disponible.

No aplicable

keyboard

Avatar es un elemento de presentación no interactivo sin interacciones de teclado.

focus

Avatar es un elemento de presentación no interactivo y no recibe enfoque.