Corso di HTML / Accessibilità HTML: titoli, collegamenti, immagini e tastiera

L'HTML accessibile inizia con la scelta degli elementi basata sul loro significato. Utilizzate intestazioni in ordine logico, scrivete link che rivelino la loro destinazione, fornite alle immagini alternative appropriate e assicuratevi che le persone possano effettuare le interazioni con una tastiera.

Usare i titoli per descrivere la gerarchia

Un titolo non è semplicemente un testo grande. Indica un livello nel documento: un argomento di pagina può utilizzare h1, le sezioni principali h2 e le loro sottosezioni h3. Non passate direttamente a h4 solo per ottenere la dimensione predefinita del testo; adattate l'aspetto con CSS. Qualcuno che legge solo i titoli dovrebbe essere in grado di capire la struttura della pagina. Confrontate i livelli dei titoli e dei paragrafi negli esempi di intestazioni e paragrafi.

Ad esempio, "Informazioni sulla consegna" può essere una sezione principale, con "Zone di consegna" e "Tempi di consegna" come sottosezioni. Evitate intestazioni vuote o intestazioni che non corrispondono al testo seguente. La gerarchia delle intestazioni aiuta le persone a leggere visivamente e a navigare con tecnologie assistive.

Rendere link e immagini comprensibili

Un elenco di link, tutti chiamati "qui", fornisce pochi indizi sui loro obiettivi. Indicate la destinazione nel testo del link, come in <a href="guide.html">Leggi il manuale utente</a>. Se il link scarica un file, indicate il tipo nel contesto circostante. Verificate le alternative appropriate per le immagini in base al ruolo e alle dimensioni in Immagini: img, testo alternativo e dimensioni.

Il testo alt di un'immagine informativa deve trasmettere le informazioni che essa fornisce qui. Un'immagine puramente decorativa che ripete un testo simile può usare alt="". Un'immagine usata come link deve mostrare anche l'obiettivo del link, come ad esempio "Aprire il manuale utente". Evitate di elencare ogni colore o forma visibile se la funzione è cruciale. L'albero decisionale W3C WAI per le immagini aiuta a determinare quale alternativa è appropriata.

Provare la pagina senza mouse

1. Usate Tab per navigare tra link, campi modulo e pulsanti.
2. Assicuratevi che l'elemento focalizzato sia identificato visibilmente.
3. Attivate i controlli con Invio o Spazio, a seconda del caso.
4. Se un modulo segnala un errore, leggetelo, tornate al campo, correggete il valore e inviate di nuovo.

Un div con un solo gestore di clic non acquisisce automaticamente il significato o il comportamento della tastiera di un pulsante. Usate a per la navigazione e button per le azioni. Quando un menu o un contenuto a comparsa viene aperto e chiuso, verificate dove viene spostato il focus della tastiera. Il focus non deve scomparire nei contenuti nascosti e l'ordine di navigazione dovrebbe corrispondere approssimativamente all'ordine di lettura. Verificate l'assegnazione esplicita dei nomi dei campi con l'esercizio di clic sull'etichetta in collegare correttamente label e input .

Tipicamente un link focalizzato viene aperto con Invio, mentre un pulsante viene attivato con Invio o Spazio. La selezione di un elemento che corrisponde alla navigazione o all'azione offre agli utenti da tastiera il comportamento previsto, invece di costringere un link a imitare un pulsante o viceversa.

Una piccola pagina per test manuali

Salvate il codice completo come accessible-page.html. Scaricate l'immagine di esempio con larghezza di 960 pixel e posizionatela accanto al file HTML con il suo nome originale. Il modulo è inteso per la convalida e l'ispezione dei valori GET, non per ricevere messaggi.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Esercizio di Test della Tastiera</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    img { max-width: 100%; height: auto; }
    input { max-width: 100%; font: inherit; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">Vai al contenuto principale</a>
  <header>
    <nav aria-label="In questa pagina">
      <a href="#guide">Istruzioni per la visita</a>
      <a href="#contact">Esercizio di contatto</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>Guida di Piccolo Giardino</h1>
    <section id="guide">
      <h2>Istruzioni per la visita</h2>
      <p>Prevedere scarpe comode e acqua.</p>
      <img src="html-image-sample-lake-tree-960-v1.webp"
           alt="Un albero su una piccola isola in mezzo a un lago, con montagne sullo sfondo" width="960" height="540">
    </section>
    <section id="contact">
      <h2>Esercitarsi con un campo di contatto</h2>
      <form method="get">
        <label for="practice-email">E-mail (obbligatoria)</label>
        <input id="practice-email" name="email" type="email"
               aria-describedby="email-help" required>
        <p id="email-help">Usare name@example.com invece di un indirizzo reale.</p>
        <button type="submit">Verificare i valori inseriti</button>
      </form>
    </section>
  </main>
</body>
</html>

1. Premete una volta Tab per mettere a fuoco il link di salto, quindi Invio per saltare il menu ripetuto e arrivare al contenuto principale.
2. L'elemento principale con tabindex="-1" può ricevere il focus senza aggiungere un ulteriore normale punto di tabulazione. Verificate che il movimento successivo con Tab segua un ordine di lettura logico.
3. Andate al modulo e confrontate un invio vuoto, un valore non valido come abc e un indirizzo di prova correttamente formattato. La sua etichetta e le istruzioni dovrebbero rimanere disponibili durante l'inserimento.
4. Verificate il testo, l'immagine e il campo a 390px e con lo zoom. Rinominate temporaneamente l'immagine per controllare il suo testo alternativo e poi ripristinate il nome del file.

L'HTML fornisce la semantica e le interazioni native; il CSS fornisce la disposizione e il trattamento visivo del focus. Errori personalizzati o menu complessi possono richiedere una gestione aggiuntiva dello stato e del focus tramite JavaScript. Completare questo esercizio non garantisce che la pagina soddisfi tutti i requisiti di accessibilità.

Tutorial W3C-WAI sulla struttura della pagina

Comprendere cosa possono dimostrare i test e cosa no

Un controllore automatico può rilevare alcuni errori di markup, ma non può sempre valutare se un collegamento sia comprensibile o se la descrizione di un'immagine sia utile nel contesto. Combinate i risultati degli strumenti con test da tastiera, zoom e, se necessario, un lettore di schermo. Iniziate con i percorsi utente più importanti del sito web, invece di considerare un rapporto senza errori come una garanzia. La guida MDN sull'accessibilità HTML tratta ulteriori elementi HTML nativi.