Regione Toscana Design System — Servizi Design System Core

Sr Only Page Heading H 1 

<!-- SR-ONLY PAGE HEADING H1 - general markup. If the CMS provides another way to set a sr-only visibile hidden heading, use that instead. -->
<h1 class="rtds-sr-only"></h1>
 
<!-- SR-ONLY PAGE HEADING H1 - general markup. If the CMS provides another way to set a sr-only visibile hidden heading, use that instead. -->
<h1 class="rtds-sr-only">
    {%- if title -%}
        {{ title|safe }}
    {%- endif -%}
</h1>
 
/* No context defined. */

SR-Only Page Heading H1

Componente per il titolo di pagina visivamente nascosto. Garantisce la presenza di un <h1> accessibile anche quando il design non prevede un’intestazione visibile.

Comportamento

Il componente viene renderizzato come <h1 class="rtds-sr-only">. Il testo è visibile solo alle tecnologie assistive; visivamente occupa 1px e non influisce sul layout.

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.

  • title (stringa, obbligatorio): Testo del titolo di pagina nascosto

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — <h1> fornisce la struttura gerarchica primaria della pagina
  • 2.4.2 Titolo della pagina — ogni pagina deve avere un titolo descrittivo; questo componente contribuisce alla struttura dei heading quando non esiste un titolo visibile
  • 2.4.6 Intestazioni ed etichette — il testo del <h1> descrive l’argomento principale della pagina

Struttura e semantica

  • Il componente è renderizzato come <h1> — livello di heading più alto, annunciato dagli screen reader come intestazione principale della pagina
  • La classe rtds-sr-only nasconde visivamente il contenuto senza rimuoverlo dall’albero di accessibilità

Screen reader

  • Gli screen reader annunciano l’elemento come “intestazione di livello 1” seguito dal testo del titolo
  • Gli utenti che navigano tramite elenco degli heading trovano l’<h1> come primo punto di riferimento della pagina

Stili CSS

Classi Base

  • .rtds-sr-only: Nasconde visivamente l’elemento mantenendolo accessibile agli screen reader (posizione assoluta, dimensione 1×1 px, overflow hidden, clip)

Esempi di utilizzo

<!-- Titolo di pagina nascosto -->
<h1 class="rtds-sr-only">Titolo della pagina</h1>

Note

  • L’<h1> deve essere sempre presente in ogni pagina, anche se nascosto visivamente. È preferibile avere un’intestazione visibile; questo componente è la soluzione di fallback quando il CMS o il design non lo consentono.
  • Se il CMS fornisce un meccanismo nativo per impostare un titolo nascosto (es. classe sr-only applicata a un campo dedicato), usare quello invece di questo componente.