BH A B

AI Prompt

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Avatar component in HTML, CSS, and minimal vanilla JavaScript.

Requirements:
- Use semantic HTML (img for image avatars, div/span with aria-label for initials/icons).
- Design: Clean, modern aesthetic with support for different sizes (small, medium, large) and shapes (circle, rounded square). Include fallback styles (e.g., initials or default icon) when an image fails to load.
- Interaction: Include an optional notification badge or status indicator (e.g., online, offline) positioned at the bottom right or top right corner.
- Accessibility: Must be fully screen reader friendly. Include appropriate alt text for images.
- Provide a single HTML file containing all necessary styles and scripts.