User Avatar

Componente per visualizzare l’immagine del profilo utente in formato circolare.

Comportamento

Il componente viene renderizzato come un <div> contenitore con un <img> interno. L’immagine viene ritagliata in forma circolare tramite border-radius: 50% e overflow: hidden.

Varianti

Varianti di Stile

• default: Avatar con immagine singola
• with-srcset: Avatar con immagine responsive tramite attributo srcset

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

• path (stringa, obbligatorio): Percorso dell’immagine dell’avatar (es. /images/user-placeholder.png)
• alt (stringa, obbligatorio): Testo alternativo dell’immagine. Lasciare vuoto ('') se l’avatar è puramente decorativo e il nome utente è già visibile altrove nell’interfaccia
• srcset (stringa, opzionale): Valore dell’attributo srcset per immagini responsive (es. /images/avatar@2x.png 2x, /images/avatar.png 1x)

Accessibilità

Componente non interattivo. Non richiede navigazione da tastiera né attributi ARIA aggiuntivi oltre all’alt dell’immagine.

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.1.1 Contenuti non testuali — l’immagine richiede un testo alternativo adeguato al contesto
• 1.4.5 Immagini di testo — l’avatar non contiene testo

Struttura e semantica

• Il componente è renderizzato come <div> contenitore con un <img> interno
• Il <div> è puramente presentazionale; non ha ruolo semantico
• L’<img> richiede sempre l’attributo alt: vuoto (alt="") se l’immagine è decorativa, descrittivo se è l’unica rappresentazione dell’utente

Screen reader

• Se l’avatar accompagna un nome utente già leggibile nell’interfaccia, usare alt="" per nasconderlo agli screen reader (immagine decorativa)
• Se l’avatar è l’unica rappresentazione dell’utente, fornire un alt descrittivo (es. "Foto profilo di Mario Rossi")

Stili CSS

Classi Base

• .rtds-user-avatar: Contenitore circolare — flex-none, dimensione 56×56px (w-14 h-14), border-radius: 50%, overflow: hidden

Classi Elementi (BEM)

• .rtds-user-avatar__image: Immagine interna — width: 100%, height: 100%, object-fit: cover, object-position: center

Esempi di utilizzo

<!-- Avatar base -->
<div class="rtds-user-avatar">
  <img
    alt="Foto profilo di Mario Rossi"
    width="56"
    height="56"
    src="/images/user-placeholder.png"
    class="rtds-user-avatar__image"
  >
</div>

<!-- Avatar decorativo (nome già visibile) -->
<div class="rtds-user-avatar">
  <img
    alt=""
    width="56"
    height="56"
    src="/images/user-placeholder.png"
    class="rtds-user-avatar__image"
  >
</div>

<!-- Avatar responsive con srcset -->
<div class="rtds-user-avatar">
  <img
    alt="Foto profilo di Mario Rossi"
    width="56"
    height="56"
    src="/images/user-placeholder.png"
    srcset="/images/user-placeholder@2x.png 2x, /images/user-placeholder.png 1x"
    class="rtds-user-avatar__image"
  >
</div>