AEO NIUEXA

Controlli su media e accessibilità

Peso 15% Guida ai controlli Priorità in base al risultato

Questa guida ai controlli spiega come lo scanner valuta immagini, grafiche, video e audio di una pagina: se sono accompagnati da un testo che persone e software possono leggere, e se le immagini mantengono la pagina leggera e stabile. Questa dimensione vale il 15% del tuo Punteggio AEO.

Perché i media contano: screen reader, motori di ricerca e strumenti che leggono il tuo HTML ricevono il testo che accompagna i media, non l'immagine né il suono: testo alternativo, etichette, sottotitoli e trascrizioni. La maggior parte di questi controlli cerca quel testo; gli altri guardano a come le immagini incidono sul peso e sul layout della pagina.
Come viene valutata la dimensione Media. Il punteggio è la media, pesata per importanza, di sette controlli: Image Accessibility (0,35), Image Optimization (0,20), Video Accessibility (0,15), Responsive Images (0,10), SVG Accessibility (0,10), Figure/Figcaption Usage (0,05) e Audio Accessibility (0,05). Tutti e sette si basano su prove ufficiali o confermate da più fonti, quindi contano per intero. Un controllo che non ha nulla da esaminare (niente immagini, video, SVG o audio) è N/A e resta fuori, come un controllo che non è stato possibile eseguire. Una pagina senza immagini, video, SVG né audio non ha un punteggio Media: la dimensione non viene misurata e le altre cinque vengono ripesate per coprire il suo 15%.

Alternative testuali

Testo alternativo ed etichette dicono a screen reader, motori di ricerca e strumenti basati sul testo che cosa mostra un'immagine o una grafica.

Image Accessibility

Alto
Cosa controlla
Esamina fino ai primi 50 elementi <img>. Le immagini che sembrano decorative restano fuori: un alt="" vuoto esplicito, oppure un indirizzo del file con parole come spacer, divider, bullet, arrow, icon-, bg-, background o pattern. Per le altre misura quante hanno un testo alternativo e quanto è buono quel testo.
Perché conta
Il testo alternativo descrive un'immagine a chi usa uno screen reader e ai motori di ricerca, che non possono vederla. Le WCAG lo richiedono per ogni immagine che porta informazioni.
Come viene valutato
Per il 60% dalla quota di immagini non decorative con testo alternativo, per il 40% dalla qualità media di quel testo (vedi sotto). Si supera da 70 in su.
Superato: 70 o più Non superato: sotto 70 (alto sotto 50) N/A: nessuna immagine, o solo immagini decorative
Come correggere
Dai a ogni immagine significativa una breve frase che dica cosa mostra e perché è lì. Usa un alt="" vuoto per le immagini decorative. Una regola Auto-Fix può aggiungere il testo alternativo nel browser dei visitatori, ma la maggior parte dei sistemi AI che scaricano le pagine non esegue gli script: usa "Copia la correzione permanente" per inserirlo nel tuo HTML.
Esempio
<!-- Content image - needs descriptive alt -->
<img src="ceo-headshot.jpg"
     alt="Jane Smith, CEO of TechCorp, smiling in professional attire">

<!-- Product image - include key details -->
<img src="blue-sneakers.jpg"
     alt="Nike Air Max 90 in royal blue, side view">

<!-- Decorative image - empty alt -->
<img src="decorative-line.svg" alt="" role="presentation">
Come si valuta la qualità del testo alternativo
Ogni testo alternativo parte da 100 e perde punti se ha meno di 10 caratteri (30) o più di 125 (20), se ripete le stesse parole (25: più di cinque parole, meno del 60% diverse tra loro), se è un segnaposto come "image", "photo", "icon" o "untitled" (30), se è un nome di file come IMG_4521.jpg (40), se comincia con "image of", "picture of" o "photo of" (10), o se contiene sequenze come "__" o "--" (15). Sulle pagine in italiano valgono anche i segnaposto italiani come "immagine" e "foto di". 
<!-- BAD: Generic or unhelpful -->
<img src="chart.png" alt="image">
<img src="team.jpg" alt="photo">
<img src="product.jpg" alt="IMG_4521.jpg">
<img src="ceo.jpg" alt="Image of a person">

<!-- GOOD: Descriptive and contextual -->
<img src="chart.png" alt="Bar chart showing 40% increase in Q3 revenue">
<img src="team.jpg" alt="Marketing team collaborating in conference room">
<img src="product.jpg" alt="Red leather handbag with gold buckle, front view">
<img src="ceo.jpg" alt="Sarah Chen, CEO, speaking at TechConf 2024">

SVG Accessibility

Medio
Cosa controlla
Trova le grafiche SVG della pagina: gli elementi <svg> inline (le copie identiche contano una volta sola, le definizioni dentro <defs> o <symbol> restano fuori), i file <img> che finiscono in .svg e i file .svg in <object> o <embed>. Per ogni SVG inline verifica che contenga un <title>, oppure role="img", aria-label o aria-labelledby.
Perché conta
Un'etichetta testuale dà a un'icona o a una grafica disegnata nel codice un significato che screen reader e altri strumenti possono leggere. Un'informazione che esiste solo come forme disegnate non si può leggere ad alta voce né citare.
Come viene valutato
Non è superato quando meno della metà degli SVG inline ha un titolo o un'etichetta. Il punteggio parte da 70, sale con la quota di SVG inline etichettati e con l'uso degli sprite SVG (<symbol> e <use>), e scende per le grafiche molto complesse e per ogni problema trovato. Gli SVG decorativi segnati con aria-hidden="true" qui contano comunque come non etichettati, anche se nasconderli è la scelta giusta per gli screen reader.
Superato: almeno metà degli SVG inline etichettati Non superato: meno della metà etichettati N/A: nessun SVG nella pagina
Come correggere
Dai agli SVG significativi role="img" e un <title> o un aria-label; segna quelli puramente decorativi con aria-hidden="true". Quando un grafico o un'infografica contiene dei numeri, riportali anche nel testo.
Modelli di SVG accessibili
<!-- Meaningful SVG - needs accessibility -->
<svg role="img" aria-label="Company growth chart"
     viewBox="0 0 100 100">
  <title>Company Growth Chart</title>
  <desc>A line chart showing revenue growing 45% year over year</desc>
</svg>

<!-- Decorative SVG - hide from assistive tech -->
<svg aria-hidden="true" class="decorative-divider">
  <!-- Decorative pattern -->
</svg>

Ottimizzazione delle immagini

Formati moderni, dimensioni dichiarate e lazy loading mantengono veloci e stabili le pagine ricche di immagini mentre si caricano.

Image Optimization

Alto
Cosa controlla
Sui primi 50 elementi <img> al massimo: quanti usano loading="lazy", quanti sono WebP o AVIF (in base all'indirizzo del file), quanti dichiarano sia la larghezza sia l'altezza, e se qualcuno è un file BMP, TIFF o RAW. Lo scanner non scarica le immagini, quindi non misura né il peso dei file né la qualità della compressione.
Perché conta
Le immagini sono spesso la parte più pesante di una pagina. Formati moderni, dimensioni dichiarate e lazy loading mantengono la pagina veloce ed evitano che il layout salti mentre le immagini si caricano.
Come viene valutato
Parte da 100 e perde 15 punti se meno del 30% delle immagini usa il lazy loading, 20 se meno del 20% è in WebP o AVIF, 15 se meno della metà dichiara larghezza e altezza, e 10 se c'è almeno un'immagine BMP, TIFF o RAW. Si supera da 70 in su: con uno solo di questi problemi il controllo risulta comunque superato.
Superato: 70 o più Non superato: sotto 70 N/A: nessuna immagine
Come correggere
Usa WebP o AVIF, indica larghezza e altezza di ogni immagine, aggiungi loading="lazy" alle immagini sotto la prima schermata (mai all'immagine principale in alto) e comprimi le immagini, per esempio con Squoosh o ImageOptim. Questi attributi vanno nel tuo HTML: Auto-Fix non modifica le immagini.
Checklist per ottimizzare le immagini
<!-- Before: Unoptimized image -->
<img src="photo-original.jpg"> <!-- 2.4MB -->

<!-- After: Optimized image -->
<img src="photo-optimized.webp"
     width="800" height="600"
     loading="lazy"
     alt="Product showcase"> <!-- 95KB -->

# CLI tools for optimization
# ImageMagick - resize and compress
convert input.jpg -resize 800x600 -quality 85 output.jpg

# cwebp - convert to WebP
cwebp -q 80 input.jpg -o output.webp
Formati moderni con un'alternativa
Il controllo legge solo l'indirizzo in <img src>. Un'immagine servita con <picture>, con sorgenti WebP o AVIF e un JPEG come alternativa, conta come JPEG, e lo stesso vale per un WebP che una CDN serve da un indirizzo che finisce in .jpg. Lo schema qui sotto resta comunque valido per i visitatori. 
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero banner" width="1200" height="600">
</picture>
Larghezza e altezza evitano gli spostamenti del layout
<!-- Width and height let the browser reserve the space before the image loads -->
<img src="product.jpg" width="800" height="600" alt="Red leather handbag, front view">

<!-- Responsive layout: keep the attributes and let CSS scale the image -->
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>

Immagini responsive

File più piccoli per gli schermi più piccoli.

Responsive Images

Medio
Cosa controlla
Conta gli elementi <img> con un srcset (le immagini sotto i 50 × 50 pixel secondo gli attributi width e height vengono saltate), verifica che un srcset con descrittori di larghezza come 800w abbia l'attributo sizes, e cerca elementi <picture> e art direction (<source media>).
Perché conta
Avere l'immagine in più dimensioni permette ai telefoni di scaricare un file piccolo invece dell'immagine completa pensata per il desktop: si risparmiano dati e la pagina si carica prima.
Come viene valutato
Con tre immagini o meno il punteggio è 80 se almeno un'immagine usa srcset, altrimenti 70. Con più immagini parte da 50 e aggiunge fino a 25 punti per la quota di immagini con srcset, 15 quando ogni srcset con larghezze ha sizes (10 quando ce l'ha la maggior parte), 10 per un elemento <picture> e 5 per l'art direction. In entrambi i casi ogni problema trovato toglie 5 punti. Il punteggio conta nella dimensione che il controllo risulti superato o no.
Non superato: più di tre immagini, meno di una su cinque con srcset e un srcset con larghezze senza sizes Superato: in tutti gli altri casi N/A: nessuna immagine
Come correggere
Offri più larghezze in srcset, aggiungi sizes perché il browser possa scegliere il file giusto, e usa <picture> quando schermi diversi richiedono un taglio diverso.
Esempio di srcset
<img srcset="product-400w.jpg 400w,
             product-800w.jpg 800w,
             product-1200w.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            600px"
     src="product-800w.jpg"
     alt="Premium leather wallet in brown">

Elementi semantici per i media

Elementi HTML che legano un'immagine al testo che la spiega.

Figure/Figcaption Usage

Basso
Cosa controlla
La quota di elementi <img> della pagina che si trovano dentro un <figure>. Se la figura ha un <figcaption> viene riportato, ma non è richiesto.
Perché conta
Una didascalia accanto a un'immagine dà a lettori e motori di ricerca il contesto di ciò che mostra.
Come viene valutato
Il doppio della quota di immagini dentro una figura, fino a 100 (il massimo si raggiunge con metà delle immagini). Conta ogni <img>, compresi loghi e icone, quindi le pagine con molte immagini piccole ottengono un punteggio più basso.
Superato: 30% o più delle immagini in una figura Non superato: sotto il 30% N/A: nessuna immagine
Come correggere
Racchiudi in un <figure> le immagini che hanno bisogno di contesto, come grafici, schemi e foto di prodotto, con un <figcaption> che dica cosa mostra l'immagine o perché è importante.
Esempio di figure/figcaption
<figure>
  <img src="chart-revenue.png"
       alt="Q3 2024 revenue breakdown by region">
  <figcaption>
    Figure 3: Q3 2024 Revenue by Region.
    North America led with 45% of total revenue.
  </figcaption>
</figure>

Accessibilità di video e audio

Sottotitoli e trascrizioni rendono leggibile il parlato a chi non può sentirlo e agli strumenti basati sul testo.

Video Accessibility

Alto
Cosa controlla
Per ogni elemento <video> nell'HTML: se ha una traccia di sottotitoli (<track kind="captions"> o kind="subtitles"), oppure un aria-label o un aria-describedby. I player incorporati, come gli iframe di YouTube, non vengono controllati.
Perché conta
I sottotitoli permettono di seguire il video a chi non può sentirlo e danno a motori di ricerca e strumenti basati sul testo le parole pronunciate. Le WCAG richiedono i sottotitoli per i video preregistrati con audio.
Come viene valutato
Il punteggio è la quota di video con sottotitoli o un'etichetta.
Superato: l'80% dei video o più Non superato: sotto l'80% (alto) N/A: nessun elemento <video>
Come correggere
Aggiungi una traccia di sottotitoli a ogni video, lascia visibili i controlli del player ed evita la riproduzione automatica con l'audio. Pubblica anche una trascrizione nella pagina: il controllo non la cerca, ma persone e strumenti basati sul testo possono leggerla.
Video con sottotitoli
<video controls preload="metadata" poster="thumbnail.jpg">
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="captions-en.vtt"
         srclang="en" label="English" default>
  <track kind="captions" src="captions-es.vtt"
         srclang="es" label="Spanish">
</video>
Video con trascrizione
<article>
  <h2>Product Demo Video</h2>
  <video controls poster="demo-thumbnail.jpg">
    <source src="demo.mp4" type="video/mp4">
    <track kind="captions" src="demo-en.vtt" srclang="en" default>
  </video>

  <details class="video-transcript">
    <summary>View Full Transcript</summary>
    <div class="transcript-content">
      <p><strong>[00:00]</strong> Welcome to our product demo...</p>
      <p><strong>[00:15]</strong> First, let me show you...</p>
    </div>
  </details>
</article>

Audio Accessibility

Alto
Cosa controlla
Trova gli elementi <audio> e i player incorporati dei servizi di podcast (Spotify, SoundCloud, Anchor, Podbean, Buzzsprout, Transistor, Simplecast). Verifica che ogni <audio> abbia i controlli e cerca una trascrizione: la parola "transcript" nel testo della pagina, oppure un elemento con una classe che contiene "transcript" (sulle pagine in italiano anche "trascrizione").
Perché conta
Una trascrizione permette alle persone sorde di seguire l'audio e dà a motori di ricerca e strumenti AI un testo da leggere e citare. Le WCAG richiedono un'alternativa testuale per i contenuti solo audio.
Come viene valutato
Il punteggio parte da 70, sale con i controlli del player, una trascrizione e le tracce di sottotitoli, e scende di 20 punti per la riproduzione automatica con l'audio e di 5 per ogni problema trovato. Quando nessun <audio> ha i controlli la gravità è alta, negli altri casi media.
Superato: controlli su ogni <audio> e una trascrizione (o un solo contenuto audio) Non superato: un <audio> senza controlli, o più contenuti audio senza trascrizione N/A: nessun audio
Come correggere
Aggiungi l'attributo controls a ogni <audio>, pubblica nella pagina una trascrizione completa con i nomi di chi parla e non avviare mai la riproduzione automatica con l'audio.
Podcast con trascrizione
<article class="podcast-episode">
  <h2>Episode 42: The Future of AI</h2>
  <p class="episode-meta">Duration: 45 min | Published: Oct 15, 2024</p>

  <audio controls preload="metadata">
    <source src="episode-42.mp3" type="audio/mpeg">
  </audio>

  <section class="transcript">
    <h3>Full Transcript</h3>
    <p><strong>Host (Sarah):</strong> Welcome to Tech Talk...</p>
    <p><strong>Dr. Chen:</strong> Thanks for having me, Sarah.</p>
  </section>
</article>