Logo

Il componente Logo gestisce la visualizzazione del logo del sito. Le dimensioni del logo sono definite tramite CSS e attraverso gli attributi width e height nel tag <img>.

Comportamento

Il componente può essere renderizzato come:

<a> quando è presente un link (attributo href) — logo cliccabile
<div> quando non è presente un link — logo puramente presentazionale

Varianti

Varianti di Stile

logo--main: Logo principale — utilizzato nell’header
logo--secondary: Logo secondario — utilizzato nell’header

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

href (stringa, opzionale): URL del link — se specificato, il wrapper sarà un <a>
classes (stringa, opzionale): Classi CSS aggiuntive
size (stringa, opzionale): Classi per il dimensionamento
objectFit (stringa, opzionale): Proprietà object-fit dell’immagine (cover o contain)
path (stringa, opzionale): Percorso dell’immagine del logo (default: /images/logo.png)
alt (stringa, opzionale): Testo alternativo per l’immagine (default: "ALT DA DEFINIRE" — fallback intenzionalmente esplicito per rendere visibile in sviluppo/QA un alt mancante, non un placeholder plausibile)
width (numero, opzionale): Valore dell’attributo width dell’immagine
height (numero, opzionale): Valore dell’attributo height dell’immagine
srcset (stringa, opzionale): Valore dell’attributo srcset per immagini responsive/retina
sizesAttribute (stringa, opzionale): Valore dell’attributo sizes per la gestione delle immagini responsive

Accessibilità

Il componente non è puramente decorativo: il logo può essere cliccabile (renderizzato come <a>) e contiene un’immagine che deve sempre avere un testo alternativo significativo.

WCAG 2.1

Livello AA — criteri pertinenti:

1.1.1 Contenuti non testuali — l’immagine del logo deve avere un attributo alt descrittivo; quando il logo è un link alla homepage, l’alt deve descrivere la destinazione (es. “Regione Toscana — homepage”)
2.4.4 Scopo del collegamento (nel contesto) — quando il componente è renderizzato come <a>, il testo alternativo dell’immagine funge da nome accessibile del link

Struttura e semantica

<a> — ruolo implicito link; attivabile con Enter; usare quando il logo naviga a una destinazione (es. homepage); l’alt dell’immagine funge da nome accessibile del link
<div> — nessun ruolo interattivo; usare quando il logo è puramente presentazionale e non navigabile
<img> — richiede sempre un attributo alt descrittivo. Nel contesto d’uso tipico di questo componente (logo cliccabile in header/footer che porta a una destinazione) il caso decorativo (alt="") è raro e generalmente da evitare: quando il logo è un link, l’alt è il nome accessibile del link e deve descriverne lo scopo (es. "Regione Toscana - home page", "Nome Servizio - home page")

Il nome accessibile del link (quando href è specificato) è fornito dall’attributo alt dell’immagine; non sono presenti attributi ARIA aggiuntivi nel markup
Quando il logo non è cliccabile (<div>), viene letto come immagine con il testo dell’alt

Esempi di utilizzo

<!-- Logo come link alla homepage -->
<a href="/" class="rtds-site-logo rtds-site-logo--main">
  <img
    class="rtds-w-full rtds-h-full rtds-object-left-top"
    src="/images/logo.png"
    alt="Regione Toscana - home page"
    width="180"
    height="60"
  />
</a>

<!-- Logo non cliccabile (caso raro: preferire sempre il logo come link quando è disponibile una destinazione) -->
<div class="rtds-site-logo rtds-site-logo--secondary">
  <img
    class="rtds-w-full rtds-h-full rtds-object-left-top"
    src="/images/logo-secondary.png"
    alt="Ente secondario"
    width="120"
    height="40"
  />
</div>

Note

Il parametro alt è obbligatorio a livello semantico anche se ha un fallback di default nel template; il fallback ("ALT DA DEFINIRE") è intenzionalmente visibile per segnalare in sviluppo/QA un alt dimenticato, non un valore accettabile in produzione
Quando il logo è un link, l’alt funge da nome accessibile del link (WCAG 2.4.4 Scopo del collegamento (nel contesto)): deve descrivere la destinazione, non contenere la parola “logo” né limitarsi al nome dell’ente/servizio senza indicare dove porta (formula consigliata: "Nome - destinazione", es. "Regione Toscana - home page")

Logo component: Main