MacBook Pro 16"
€2.499
4.8/5 (127 recensioni)Immagini e Media Accessibili
Rendere i contenuti visivi comprensibili per tutti gli utenti
Testo alternativo per le immagini
Esempio negativo
4.8/5 (127 recensioni)
Ordine confermato!<!-- ❌ Negativo: testi alt non descrittivi -->
<img src="laptop.jpg" alt="image" />
<img src="star-icon.svg" alt="star.png" />
<img src="success-icon.svg" alt="success.svg" />Esempio positivo
MacBook Pro 16"
€2.499
Valutazione di4.8/5 stelle, basata su(127 recensioni) Ordine confermato!<!-- ✅ Positivo: testi alt descrittivi -->
<img src="laptop.jpg"
alt="MacBook Pro 16 pouces, vue de face,
écran ouvert montrant l'interface macOS" />
<!-- Icona decorativa: alt vuoto, .sr-only per il contesto -->
<img src="star-icon.svg" alt="" />
<span>
<span class="sr-only">Note de </span>4.8/5
<span class="sr-only"> étoiles</span> (127 avis)
</span>
<!-- Icona decorativa nella notifica -->
<img src="success-icon.svg" alt="" />
<span>Commande confirmée !</span>Spiegazione: Il testo alternativo consente agli screen reader di descrivere le immagini. Dovrebbero essere descrittivi per immagini informative, vuoti per immagini decorative.
Video accessibile
Esempio negativo
Presentazione del prodotto
📹 Video demo
(Riproduzione automatica, nessun sottotitolo)
(Riproduzione automatica, nessun sottotitolo)
<!-- ❌ Negativo: video con riproduzione automatica -->
<video width="100%" height="200" autoplay loop muted>
<source src="demo.mp4" type="video/mp4">
Votre navigateur ne supporte pas la vidéo.
</video>Esempio positivo
Presentazione del prodotto
📹 Video demo MacBook Pro
(Controlli accessibili, sottotitoli disponibili)
(Controlli accessibili, sottotitoli disponibili)
Video di 2 minuti che presenta le caratteristiche del MacBook Pro da 16 pollici. Sottotitoli in italiano disponibili.
<!-- ✅ Positivo: video accessibile con sottotitoli e controlli -->
<video width="100%" height="200"
controls
preload="metadata"
aria-describedby="video-description">
<source src="demo.mp4" type="video/mp4">
<!-- Sottotitoli per non udenti -->
<track kind="captions"
src="captions.vtt"
srclang="fr"
label="Français"
default>
<!-- Descrizioni audio per non vedenti -->
<track kind="descriptions"
src="descriptions.vtt"
srclang="fr"
label="Description audio">
<!-- Fallback con link alla trascrizione -->
Votre navigateur ne supporte pas la vidéo.
<a href="transcript.html">Consulter la transcription</a>
</video>
<div id="video-description">
Vidéo de 2 minutes présentant les fonctionnalités du MacBook Pro.
Sous-titres en français disponibles.
</div>Spiegazione: I video devono avere sottotitoli, controlli accessibili da tastiera e non riprodursi automaticamente.
Grafici e dati visivi
Esempio negativo
Vendite trimestrali
<!-- ❌ Negativo: grafico senza descrizione o dati alternativi -->
<svg width="300" height="150" viewBox="0 0 300 150">
<rect
x="50"
y="100"
width="40"
height="40"
fill="#3b82f6"
/>
<rect
x="110"
y="80"
width="40"
height="60"
fill="#3b82f6"
/>
<rect
x="170"
y="60"
width="40"
height="80"
fill="#3b82f6"
/>
<rect
x="230"
y="40"
width="40"
height="100"
fill="#3b82f6"
/>
</svg>Esempio positivo
Vendite trimestrali
| Trimestre | Vendite (k€) | Evoluzione |
|---|---|---|
| Q1 2025 | 40 | - |
| Q2 2025 | 60 | +50% |
| Q3 2025 | 80 | +33% |
| Q4 2025 | 100 | +25% |
<!-- ✅ Positivo: grafico accessibile con dati alternativi -->
<svg width="300" height="150"
role="img"
aria-labelledby="chart-title"
aria-describedby="chart-desc">
<title id="chart-title">Graphique en barres des ventes trimestrielles</title>
<desc id="chart-desc">
Évolution croissante des ventes sur 4 trimestres :
Q1: 40k€, Q2: 60k€, Q3: 80k€, Q4: 100k€
</desc>
<!-- Barre del grafico -->
<rect
x="50"
y="100"
width="40"
height="40"
fill="#3b82f6"
/>
<rect
x="110"
y="80"
width="40"
height="60"
fill="#3b82f6"
/>
<rect
x="170"
y="60"
width="40"
height="80"
fill="#3b82f6"
/>
<rect
x="230"
y="40"
width="40"
height="100"
fill="#3b82f6"
/>
<!-- Etichette accessibili -->
<text x="70" y="130">Q1</text>
<text x="130" y="130">Q2</text>
<text x="190" y="130">Q3</text>
<text x="250" y="130">Q4</text>
</svg>
<!-- Tabella alternativa con tutti i dati -->
<table>
<caption>Données détaillées des ventes trimestrielles</caption>
<thead>
<tr>
<th scope="col">Trimestre</th>
<th scope="col">Ventes (k€)</th>
<th scope="col">Évolution</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Q1 2025</th>
<td>40</td>
<td>-</td>
</tr>
<!-- ... altre righe -->
</tbody>
</table>Spiegazione: I grafici devono essere accompagnati da descrizioni testuali e dati alternativi per gli utenti che non possono vederli.