SVG inline: role img e un title
Dare un nome significativo alla grafica per gli screen reader
SVG inline: role img e un title è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Un'immagine senza parole
Un SVG inline disegna forme piacevoli alla vista, ma un lettore di schermo vede un insieme di tracciati e non ne comunica alcun significato utile. 🖼️
Significativo o solo decorativo?
Prima di assegnargli un nome, si ponga una domanda: questa grafica è significativa o puramente decorativa? Tutta la scelta del markup dipende dalla risposta.
Indichi al browser che è un'immagine
Per una grafica significativa, aggiunga role="img" così la tecnologia assistiva tratta l'intero SVG come un'unica immagine invece che come forme separate.
<svg role="img" viewBox="0 0 24 24">
<path d="M12 2 L22 22 H2 Z" />
</svg>Le assegni un nome con title
Un <title> all'interno dell'SVG fornisce il nome accessibile che un lettore di schermo leggerà ad alta voce per la grafica.
<svg role="img" viewBox="0 0 24 24">
<title>Warning</title>
<path d="M12 2 L22 22 H2 Z" />
</svg>Metta title per primo
Inserisca <title> come primo figlio dell'SVG. Alcuni lettori di schermo lo riconoscono in modo affidabile solo quando precede le forme.
Lo colleghi con aria-labelledby
Per un supporto più affidabile, assegni un id al title e vi faccia riferimento con aria-labelledby sull'elemento svg.
<svg role="img" aria-labelledby="t1">
<title id="t1">Search</title>
<path d="..." />
</svg>aria-label come scorciatoia
Ha poco markup? Un aria-label sull'svg gli assegna direttamente un nome, senza bisogno di un title figlio. Inoltre sovrascrive il testo di qualsiasi title interno.
<svg role="img" aria-label="Home">
<path d="M3 11 L12 3 L21 11" />
</svg>Indichi il significato, non le forme
Scriva il nome in base allo scopo della grafica, ad esempio Download, non in base alle sue parti visive, come una freccia rivolta verso il basso sopra una linea.
desc aggiunge dettagli più lunghi
Serve più di un nome breve? Un elemento <desc> contiene una descrizione più lunga, associata tramite aria-describedby per fornire ulteriore contesto.
<svg role="img" aria-labelledby="t2" aria-describedby="d2">
<title id="t2">Sales chart</title>
<desc id="d2">Revenue rose each quarter in 2025.</desc>
</svg>focusable crea problemi con le versioni obsolete di IE
I browser meno recenti consentivano agli SVG di ricevere il focus da tastiera. Aggiungendo focusable="false" si mantiene una grafica non interattiva fuori dall'ordine di tabulazione.
<svg role="img" focusable="false" aria-label="Star">
<path d="..." />
</svg>Verifichi nell'Inspector
Apra il pannello di accessibilità del browser e confermi che l'SVG venga visualizzato come un'immagine con il nome esatto desiderato.
Verifica rapida
Vuole che un SVG inline significativo venga annunciato come un'unica immagine con un nome pronunciato. Quale combinazione lo consente?
Riepilogo: dia un nome agli elementi significativi
Gli SVG significativi ricevono role="img" più un title o aria-label che ne indica lo scopo. Effettui un'ispezione per confermare il risultato: finalmente le Sue grafiche parlano. ✅
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «SVG inline: role img e un title» è gratuita?
Sì — il testo completo di «SVG inline: role img e un title» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «SVG inline: role img e un title»?
Dare un nome significativo alla grafica per gli screen reader Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «SVG inline: role img e un title»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- SVG inline: role img e un title
- Nascondere le icone decorative con aria-hidden
- Pulsanti con icone che hanno comunque un nome
- Font di icone e problemi di accessibilità