Titolo H1 — Trinity College London

Titolo H2 — Sezione di contenuto

Titolo H3 — Sottosezione

Titolo H4 — Elemento minore

Trinity College London è una Charity Educativa e un Ente Certificatore Internazionale che eroga esami di Lingua Inglese, Musica e Arti Performative, attivo dal 1877 e presente in oltre 80 paesi nel mondo.

Il testo normale può contenere parole in grassetto per evidenziare concetti chiave all'interno del paragrafo.

Link standard — Link visitato

Metti alla prova lo speaking dei tuoi studenti con il Diagnostic Speaking Tool.

"L'educazione è l'arma più potente che puoi usare per cambiare il mondo."

Grazie a Trinity ISE ho ottenuto il riconoscimento universitario che cercavo. Un'esperienza che ha cambiato la mia carriera.

• Primo elemento della lista
• Secondo elemento della lista
• Terzo elemento con testo più lungo per verificare l'allineamento del bullet personalizzato

• Elemento senza bullet
• Secondo elemento senza bullet
• Terzo elemento senza bullet

1. Primo passo del processo
2. Secondo passo del processo
3. Terzo passo del processo

Livello

B1, B2, C1, C2 secondo il QCER

Durata

Circa 90 minuti complessivi

• 1877 — Fondazione di Trinity College London
• 1950 — Espansione internazionale
• 2024 — Oltre 80 paesi nel mondo

Purple Lilac Lilac 20% Pink Pink 20% Yellow Yellow 20% Teal Teal 20%

Testo purple

Testo yellow

Testo pink

Testo teal

• 

  • Lingua inglese

  12 Apr 2025

  Titolo dell'articolo di notizia

• 

  • Musica

  28 Mar 2025

  Secondo articolo di esempio nella lista news

Masterclass di Pronuncia Avanzata

1. 6 maggio 2025 — ore 17:00

   Insegnare la pronuncia con metodi innovativi

   Dr. Laura Bianchi — Università di Milano

2. 20 maggio 2025 — ore 17:00

   Assessment formativo e summativo in classe

   Prof. Marco Verdi — Trinity College London

• Università degli Studi di Milano

  Riconoscimento per i corsi di laurea in Lingue e Letterature Straniere.

• Università La Sapienza di Roma

  Riconoscimento per i corsi di laurea magistrale in Scienze della Formazione.

• Politecnico di Torino

  Riconoscimento come requisito per l'ammissione ai corsi internazionali.

è partner ufficiale del Ministero dell'Istruzione.

Il link "Vai al contenuto principale" è visivamente nascosto finché non riceve il focus (Tab). Premi Tab per vederlo.

Il backend genera automaticamente il tag <picture> con sorgente WebP e fallback PNG, includendo srcset a 500w, 750w, 1000w. Nel template va fornito solo il tag <img> con questi attributi:

• src — percorso originale dell'immagine (il backend genera le miniature)
• alt — testo alternativo descrittivo (obbligatorio; vuoto alt="" solo per immagini decorative)
• class — classi CSS necessarie (es. img-fluid)
• width e height — dimensioni della miniatura di fallback usata come src
• loading — lazy per immagini fuori dal viewport iniziale; ometti o usa eager per immagini above the fold

⚠ Non scrivere mai srcset, sizes o <picture> nel template: vengono sovrascritti dal backend.

Per ogni immagine caricata il backend genera automaticamente questi formati, sia in JPG che in WebP:

Se l'immagine richiede un crop (altezza fissa), la miniatura include entrambe le dimensioni nel nome:
immagine-500x350.jpg — il crop va applicato via CSS con object-fit: cover sul tag <img>.

Il valore di src deve puntare alla miniatura più vicina alla larghezza reale del contenitore a schermo intero (max-width 1400px). Usa la tabella come riferimento rapido:

Il testo alternativo viene letto ad alta voce dai lettori di schermo al posto dell'immagine. Deve descrivere il contenuto e la funzione dell'immagine, non il suo aspetto tecnico.

Quando scrivere l'alt

• Scrivi sempre l'alt per immagini che comunicano un'informazione (foto, grafici, illustrazioni).
• Descrivi cosa mostra l'immagine e perché è lì, non come appare.
• Sii conciso: idealmente sotto i 120 caratteri.
• Non iniziare con "Immagine di…" o "Foto di…": il lettore di schermo annuncia già che si tratta di un'immagine.

Quando lasciare l'alt vuoto

• Immagini puramente decorative (sfondi, separatori, icone ornamentali): lascia alt="".
• Immagini il cui contenuto è già descritto dal testo circostante: lascia alt="" per evitare ripetizioni.

Esempi

I titoli creano la struttura della pagina. Gli utenti con lettore di schermo navigano spesso saltando di titolo in titolo per trovare la sezione che cercano — come si farebbe scorrendo visivamente una pagina.

Regole da seguire

• Ogni pagina deve avere un solo H1, che corrisponde al titolo principale della pagina.
• I titoli devono seguire una gerarchia senza salti: H1 → H2 → H3. Non si passa da H1 a H3 saltando H2.
• Non usare i titoli per ottenere effetti grafici (es. testo grande). Usa le classi CSS apposite.
• Ogni titolo deve descrivere il contenuto che introduce, non essere generico.

Esempi

Il testo di un link deve far capire dove porta o cosa fa, anche letto fuori contesto. Gli utenti con lettore di schermo ascoltano spesso la lista di tutti i link della pagina in sequenza.

Regole da seguire

• Evita testi generici come "Clicca qui", "Leggi di più", "Vai", "Scopri": non dicono nulla fuori contesto.
• Se il link apre un file (PDF, DOC), indicalo nel testo: "Scarica il programma d'esame (PDF)".
• Se il link apre una nuova scheda, il testo deve avvisare l'utente.
• Non usare lo stesso testo per link che portano a destinazioni diverse.
• Non usare URL grezzi come testo del link (www.example.com/pagina-lunga).

Esempi

Le tabelle devono essere usate solo per dati tabellari, mai per creare layout grafici. Ogni tabella deve avere intestazioni di colonna chiare.

Regole da seguire

• Usa sempre una riga di intestazione (<thead>) con celle <th>.
• Non usare tabelle per affiancare testi o immagini: usa le colonne Bootstrap.
• Se la tabella è complessa, aggiungi una didascalia (<caption>) che la descriva.
• Evita celle unite (merge) se possibile: complicano la lettura da parte dei lettori di schermo.

Struttura minima corretta

Ogni campo di un form deve avere una etichetta visibile e associata. Il placeholder da solo non è sufficiente: scompare non appena si inizia a digitare.

Regole da seguire

• Ogni campo deve avere un <label> visibile collegato tramite l'attributo for.
• I campi obbligatori devono essere indicati sia visivamente (asterisco) sia nel testo della label.
• I messaggi di errore devono essere chiari e specifici: "Inserisci un indirizzo email valido", non solo "Errore".
• Non usare il solo colore rosso per indicare un errore: aggiungi sempre un testo esplicativo.

Esempi

Quando inserisci parole o frasi in una lingua diversa dall'italiano, i lettori di schermo devono saperlo per pronunciarle correttamente. Sul sito Trinity questo riguarda spesso termini tecnici in inglese.

Regole da seguire

• Avvolgi i termini inglesi nel tag <span lang="en">.
• I nomi propri come Trinity College London e le sigle come ISE sono esenti: sono riconoscibili in italiano senza bisogno del tag.
• Vali anche per frasi intere in un'altra lingua, non solo parole singole.

Esempi

Il contrasto tra testo e sfondo deve essere sufficiente perché il contenuto sia leggibile anche da chi ha difficoltà visive o usa lo schermo in condizioni di luce intensa.

Regole da seguire

• Non modificare i colori del testo o degli sfondi al di fuori della palette definita nel design system.
• Non sovrapporre testo scuro su sfondi scuri o testo chiaro su sfondi chiari.
• Evita di inserire testo direttamente su fotografie senza un overlay scuro intermedio.
• Se hai dubbi su una combinazione di colori, usa lo strumento WebAIM Contrast Checker (si apre in una nuova finestra).

Palette approvata — combinazioni sicure

I contenuti video e audio devono essere accessibili anche a chi non può vederli o sentirli.

Regole da seguire

• Sottotitoli: ogni video con parlato deve avere sottotitoli sincronizzati. Su YouTube e Vimeo possono essere aggiunti dal pannello di gestione del video.
• Trascrizione: per contenuti audio o video importanti, fornisci una trascrizione testuale nella pagina.
• Video in autoplay: i video che partono automaticamente devono essere silenziosi (muted) e offrire all'utente la possibilità di metterli in pausa.
• Video decorativi: i video usati come sfondo (es. l'hero della homepage) devono avere aria-hidden="true" e non devono contenere informazioni rilevanti.
• Flash e animazioni veloci: evita contenuti che lampeggiano più di 3 volte al secondo — possono causare crisi epilettiche.

Checklist prima di pubblicare un video

• Il video ha i sottotitoli? Obbligatorio se c'è del parlato.
• Se il video parte in automatico, è silenziato?
• C'è un tasto per mettere in pausa o silenziare?
• Se il video è decorativo, è marcato come tale (aria-hidden="true")?
• Le informazioni nel video sono disponibili anche in forma testuale nella pagina?

Gli attributi ARIA (Accessible Rich Internet Applications) aggiungono informazioni che i lettori di schermo usano per descrivere elementi interattivi o strutturali che l'HTML da solo non riesce a comunicare chiaramente. Come redattore ti capiterà di incontrarli nel codice HTML delle pagine: è importante non rimuoverli o modificarli senza sapere cosa fanno.

Attributi che incontrerai nel CMS

aria-label

Fornisce un nome descrittivo a un elemento quando il testo visibile non è sufficiente o non esiste. Il lettore di schermo legge il valore di aria-label invece del contenuto visibile.

Quando lo trovi: su bottoni con solo un'icona, su link con testo generico, sulle sezioni principali della pagina.

aria-labelledby

Collega una sezione o un elemento al suo titolo visibile tramite l'id del titolo. Serve al lettore di schermo per annunciare "sei entrato nella sezione X" quando l'utente vi naviga.

Quando lo trovi: su ogni <section> della pagina. Il valore di aria-labelledby deve corrispondere all'id del titolo della sezione.

Cosa non fare: non cambiare l'id di un titolo senza aggiornare il corrispondente aria-labelledby, altrimenti il collegamento si rompe.

aria-hidden

Nasconde un elemento ai lettori di schermo. L'elemento rimane visibile sullo schermo, ma viene completamente ignorato dalle tecnologie assistive.

Quando lo trovi: su icone decorative, frecce, immagini già descritte dal testo circostante, video di sfondo.

Cosa non fare: non aggiungere aria-hidden="true" a elementi che contengono testo informativo o link cliccabili — li renderebbe inaccessibili da tastiera.

aria-current

Indica l'elemento attualmente attivo in un insieme — la pagina corrente nel breadcrumb, la voce attiva nel menu, la slide visibile nel carosello. Il lettore di schermo annuncia "corrente" o "pagina corrente" sull'elemento marcato.

Quando lo trovi: nel breadcrumb (aria-current="page") e negli indicatori del carosello.

aria-expanded

Comunica al lettore di schermo se un elemento a scomparsa (accordion, menu, dropdown) è aperto o chiuso. Il valore cambia automaticamente via JavaScript quando l'utente interagisce — non va modificato a mano nel template statico.

Cosa non fare: non rimuoverlo dai bottoni dell'accordion o dal toggle del menu hamburger.

aria-live

Dice al lettore di schermo di annunciare automaticamente quando il contenuto di un elemento cambia, senza che l'utente ci debba navigare sopra. Usato per notifiche, messaggi di stato, aggiornamenti del carosello.

Quando lo trovi: nei messaggi di feedback dei form, nelle notifiche "Slide X di Y" dei caroselli, negli avvisi di errore.

Cosa non fare: non aggiungere aria-live a elementi che si aggiornano di continuo (es. un timer al millisecondo) — produrrebbe un flusso di annunci che distrae l'utente.

role

Comunica ai lettori di schermo il tipo di elemento quando l'HTML nativo non è sufficiente. Ad esempio, un <div> non ha un ruolo semantico — aggiungendo role="region" lo si trasforma in una regione navigabile.

Cosa non fare: non aggiungere role a elementi HTML nativi che hanno già un ruolo implicito (<button>, <nav>, <main>) — è ridondante e può creare conflitti.

Riepilogo rapido — cosa fare e non fare