Creare risorse accessibili: Snippet/codice HTML

Quando aggiungi del codice HTML personalizzato o degli snippet al tuo sito web, l’accessibilità deve essere una considerazione fondamentale. Un codice mal strutturato può creare delle barriere per gli utenti che si affidano alle tecnologie assistive. Questo articolo spiega come scrivere un HTML pulito e semantico che supporti l’accessibilità. Tratta elementi come i ruoli ARIA, l’uso corretto dei tag e un design adatto alla tastiera per garantire che il tuo codice personalizzato funzioni per tutti i visitatori.

Per assicurarti che il tuo sito web, la tua landing page, il tuo modulo o il tuo messaggio soddisfino i requisiti di accessibilità, utilizza la lista di controllo disponibile qui.

Ti ricordiamo che non offriamo ulteriore assistenza per l’HTML. Assicurati di essere a tuo agio con la codifica o di avere uno sviluppatore con cui consultarti.

Requisiti

Iframe

  • L’attributo titolo dell’iframe (nella pagina madre) deve essere accurato e descrittivo.
  • La pagina sorgente di un iframe (la pagina incorporata nell’iframe) deve avere un <titolo> valido e significativo .

Punti di riferimento

  • Gli screen reader permettono agli utenti di navigare per punti di riferimento, quindi i punti di riferimento sono un modo efficace per evitare i blocchi di contenuto, come richiesto dalle WCAG 2.4.1.
  • I punti di riferimento possono essere designati con tag HTML o con i loro ruoli ARIA equivalenti (ad esempio <header> o role="banner", <nav> o role="navigation", <main> o role="main", <footer> o role="contentinfo", ecc.)

Lingua

  • La lingua principale della pagina deve essere identificata con precisione utilizzando un codice lingua standard sull’elemento, ad es:
    • <html lang="en">,
    • <html lang="fr">.
  • I cambiamenti di lingua in linea DEVONO essere identificati con un attributo lang valido.

Elenchi

  • Gli elenchi devono essere costruiti utilizzando il markup semantico appropriato, ad es:
    • <ul> o <ol> con elementi figli <li>,
    • o <dl> con elementi figli <dt> e <dd>.

Tabelle

  • Le intestazioni delle tabelle devono essere indicate con <th>.
  • Il testo dell’intestazione della tabella dati deve descrivere accuratamente la categoria delle celle dati corrispondenti.
  • Le celle dati della tabella devono essere associate alle corrispondenti celle di intestazione.
    • L’uso dell’ambito(<th scope="col"> e <th scope="row">) è altamente consigliato, anche se non sempre necessario. Se tutte le celle della prima riga sono contrassegnate come <th> senza ambito, la maggior parte dei moderni screen reader dedurrà che l’ambito è la colonna sottostante ogni cella di intestazione.
  • Le intestazioni dei gruppi di dati della tabella (se presenti) devono essere associate ai gruppi di celle corrispondenti (ad esempio, tramite scope="rowgroup" o scope="colgroup").
  • Le associazioni intestazione/dati che non possono essere designate con <th> e scope devono essere designate con gli attributi header e id.
  • Le intestazioni delle tabelle di dati e le associazioni di dati non devono essere referenziate in tabelle annidate, unite o separate.

Eccezioni

Modifiche linguistiche in linea

Sono ammesse eccezioni per:

  • nomi propri,
  • termini tecnici,
  • parole di lingua indeterminata,
  • e parole o frasi che sono entrate a far parte del linguaggio comune del testo immediatamente circostante.

Esempi

codice iframeFARE: Il titolo aggiunto all’iframe spiegherà lo scopo del contenuto.
punti di riferimento sul sito webFARE: Punti di riferimento correttamente segnalati che consentono agli utenti di navigare attraverso di essi.
esempio di codice che utilizza la voce /LangFARE: Il seguente frammento di codice illustra il codice tipico dell’utilizzo della voce /Lang per sovrascrivere la lingua predefinita del documento specificando una sequenza di contenuti contrassegnati all’interno del flusso di contenuti di una pagina.
sito web con elenchi contrassegnatiFARE: Elenco di elementi marcati correttamente.
tabella nel codice HTMLNON: In questo esempio vengono utilizzate intestazioni annidate, ma le celle del contenuto sono associate in modo errato tramite gli attributi id e headers. Tutte le celle fanno riferimento all’intestazione di primo livello “Esami”(id="e") – questo non è corretto per le ultime tre colonne che dovrebbero fare riferimento all’intestazione “Progetti”. Inoltre, il riferimento alle intestazioni delle colonne di secondo livello è stato accidentalmente scambiato, anche se in questo esempio non fa alcuna differenza perché i contenuti (1, 2, Finale) sono ripetuti.

Articoli correlati

Risorse comuni