10 Errori di Accessibilità che molti commettono

❌ COSA NON FARE:

< img src="/grafico-vendite.jpg">
< img src="/grafico-vendite.jpg" alt="Grafico">

✅ COSA FARE:

❌ COSA NON FARE:

< input type="text">< input type="email">

✅ COSA FARE:

< label for="nome">Nome completo < input type="text" id="nome">< label for="email">Email< input type="email" id="email">

❌ COSA NON FARE:

.testo-elegante {color: #888888; /* Contrasto troppo basso */}

✅ COSA FARE:

.testo-accessibile {color: #333333; /* Contrasto almeno 4.5:1 */}

❌ COSA NON FARE:

< div class="menu-item" onclick="openMenu()">Servizi< /div>< div class="custom-dropdown">
    -- Elementi non focusabili --< /div>

Elementi div senza ruolo semantico e elementi custom non raggiungibili via tastiera.

✅ COSA FARE:

< button class="menu-item" onclick="openMenu()" aria-expanded="false" aria-haspopup="true">
    Servizi

< div class="custom-dropdown" role="menu" tabindex="0">
    < a href="#" role="menuitem" tabindex="0">Progettazione
    < a href="#" role="menuitem" tabindex="0">Sviluppo
< /div>

Elementi button nativi, attributi ARIA corretti e gestione del focus tramite tabindex. Oppure vedi il modo nativo che abbiamo usato su questo sito.

❌ COSA NON FARE:

< video controls>
  < source src="/presentazione.mp4" type="video/mp4">
   Il tuo browser non supporta il tag video.
< /video>

Video senza tracce testuali, nessuna alternativa per non udenti.

✅ COSA FARE:

< video controls>
    < source src="/presentazione.mp4" type="video/mp4">
    < track kind="captions" src="/sottotitoli.vtt" srclang="it" label="Italiano">
    < a href="/trascrizione.html">Leggi la trascrizione
< /video>

Aggiungi sottotitoli integrati tramite WebVTT e link a trascrizione completa.

❌ COSA NON FARE:

< h1>Titolo pagina< /h1>
< h4>Sottotitolo importante< /h4>
< h2>Sezione principale< /h2>
< h5>Contenuto secondario< /h5>
< h3>Sottosezione< /h3>

Gerarchia saltata (H1 → H4) e ordine illogico.

✅ COSA FARE:

< h1>Titolo pagina< /h1>
< h2>Sottotitolo importante< /h2>
< h3>Sezione principale< /h3>
< h2>Contenuto secondario< /h2>
< h3>Sottosezione< /h3>

Gerarchia logica e progressiva senza salti.

❌ COSA NON FARE:

.dropdown {
    display: none;
}
.menu-item:hover .dropdown {
    display: block; /* Solo hover mouse */
}

Dropdown attivati solo tramite CSS hover, impossibili da raggiungere via tastiera.

✅ COSA FARE:

.menu-item:hover .dropdown,
.menu-item:focus-within .dropdown {display: block;}
< li class="menu-item">
  < a href="#" tabindex="0">Menu 1
  < ul class="dropdown">
      < li>< a href="#" tabindex="0">Voce 1< /a>< /li>
      ...

In questo esempio la chiave è :focus-within che mantiene il dropdown aperto quando qualsiasi elemento figlio ha il focus, permettendo la navigazione completa da tastiera con Tab!

❌ COSA NON FARE:

< input type="email" id="email">
< span class="error">Email non valida< /span>
< !-- Nessun collegamento semantico -- >

Messaggio di errore non associato al campo, non annunciato dagli screen reader.

✅ COSA FARE:

< input type="email" id="email" aria-describedby="email-error" aria-invalid="true">
< span id="email-error" role="alert" aria-live="polite">
    Inserisci un indirizzo email valido
< /span>

// JavaScript per focus management
if (error) {
    input.setAttribute('aria-invalid', 'true');
    errorMessage.setAttribute('role', 'alert');
    input.focus(); // Riporta il focus sul campo
}

Associazione semantica, attributi ARIA per alert live e gestione del focus.

❌ COSA NON FARE:

< div class="carousel" 
     data-autoplay="true" 
     data-interval="3000">
    < !-- Nessun controllo per mettere in pausa -- >
< /div>

Riproduzione automatica senza controlli di pausa, velocità troppo elevata.

✅ COSA FARE:

< div class="carousel" 
     aria-roledescription="carousel" 
     aria-label="News in evidenza">
    
    < div role="group" aria-label="Slide 1 di 3">
        < img src="/slide1.jpg" alt="Novità prodotti">
    < /div>
    
    < button aria-label="Pausa carousel" 
            onclick="pauseCarousel()"> ⏸️
    < /button>
    
    < button aria-label="Slide successiva" 
            onclick="nextSlide()"> ▶️
    < /button>
< /div>

Assicurarsi che siano presenti controlli di pausa/riproduzione, etichette ARIA descriptive, navigazione da tastiera.