Progettazione dell'interfaccia accessibile: conformità WCAG

L’accessibilità digitale non è solo un obbligo giuridico, ma un diritto fondamentale. Esploriamo come creare interfacce che soddisfino le linee guida WCAG e siano veramente inclusive.

Cos'è il WCAG?

Le Linee guida per l'accessibilità dei contenuti web (WCAG) sono un insieme di raccomandazioni per rendere i contenuti web più accessibili. Sono organizzati in tre livelli:

A: Requisiti di base
AA: Requisiti intermedi
AAA: requisiti avanzati

Principi Fondamentali

1. Notevole

<!-- Exemplo de imagem acessível -->
<img 
  src="grafico-vendas.jpg" 
  alt="Gráfico de vendas do último trimestre mostrando crescimento de 25%"
  role="img"
  aria-labelledby="grafico-descricao"
/>

<div id="grafico-descricao" class="sr-only">
  Gráfico de barras mostrando vendas de janeiro a março.
  Janeiro: R$ 50.000, Fevereiro: R$ 65.000, Março: R$ 75.000.
</div>

2. Operabile

<!-- Exemplo de navegação por teclado -->
<nav role="navigation" aria-label="Menu principal">
  <ul>
    <li><a href="#home" tabindex="0">Home</a></li>
    <li><a href="#produtos" tabindex="0">Produtos</a></li>
    <li><a href="#contato" tabindex="0">Contato</a></li>
  </ul>
</nav>

<!-- Exemplo de botão acessível -->
<button 
  class="btn-primary"
  aria-label="Adicionar ao carrinho"
  role="button"
  tabindex="0"
>
  <span class="icon">🛒</span>
  <span class="text">Adicionar</span>
</button>

Implementazione pratica

1. Struttura semantica

<!-- Estrutura básica acessível -->
<header role="banner">
  <nav role="navigation" aria-label="Menu principal">
    <!-- Navegação -->
  </nav>
</header>

<main role="main">
  <article>
    <h1>Conteúdo Principal</h1>
    <!-- Conteúdo -->
  </article>
</main>

<aside role="complementary">
  <!-- Conteúdo complementar -->
</aside>

<footer role="contentinfo">
  <!-- Rodapé -->
</footer>

2. Moduli accessibili

<form role="form" aria-labelledby="form-title">
  <h2 id="form-title">Cadastro de Usuário</h2>
  
  <div class="form-group">
    <label for="nome" id="nome-label">Nome completo</label>
    <input 
      type="text" 
      id="nome" 
      name="nome"
      aria-labelledby="nome-label"
      aria-required="true"
      required
    />
    <div class="error-message" role="alert" aria-live="polite"></div>
  </div>
  
  <button 
    type="submit"
    aria-label="Enviar formulário de cadastro"
  >
    Cadastrar
  </button>
</form>

Stili e CSS

1. Contrasto e colori

/* Exemplo de variáveis CSS para acessibilidade */
:root {
  /* Cores principais com contraste adequado */
  --primary-color: #0056b3;
  --primary-text: #ffffff;
  
  /* Cores de erro e sucesso */
  --error-color: #dc3545;
  --success-color: #28a745;
  
  /* Tamanhos de fonte */
  --base-font-size: 16px;
  --heading-scale: 1.25;
}

/* Exemplo de foco visível */
:focus {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

/* Exemplo de texto alternativo */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

2. Reattività

/* Exemplo de media queries para acessibilidade */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
  }
}

JavaScript e interattività

1. Gestione della concentrazione

class FocusManager {
  private focusableElements: HTMLElement[];
  private modal: HTMLElement;
  
  constructor(modal: HTMLElement) {
    this.modal = modal;
    this.focusableElements = this.getFocusableElements();
  }
  
  private getFocusableElements(): HTMLElement[] {
    return Array.from(
      this.modal.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      )
    );
  }
  
  trapFocus(): void {
    this.modal.addEventListener('keydown', (e: KeyboardEvent) => {
      if (e.key === 'Tab') {
        const firstElement = this.focusableElements[0];
        const lastElement = this.focusableElements[this.focusableElements.length - 1];
        
        if (e.shiftKey && document.activeElement === firstElement) {
          lastElement.focus();
          e.preventDefault();
        } else if (!e.shiftKey && document.activeElement === lastElement) {
          firstElement.focus();
          e.preventDefault();
        }
      }
    });
  }
}

2. Notifiche accessibili

class AccessibleNotification {
  private container: HTMLElement;
  
  constructor() {
    this.container = document.createElement('div');
    this.container.setAttribute('role', 'alert');
    this.container.setAttribute('aria-live', 'polite');
    document.body.appendChild(this.container);
  }
  
  show(message: string, type: 'success' | 'error' | 'info'): void {
    this.container.textContent = message;
    this.container.className = `notification ${type}`;
    
    // Anuncia para leitores de tela
    this.container.setAttribute('aria-label', message);
  }
}

Test di accessibilità

1. Strumenti automatizzati

// Exemplo de configuração do axe-core
axe.configure({
  rules: [
    {
      id: 'color-contrast',
      enabled: true
    },
    {
      id: 'heading-order',
      enabled: true
    }
  ]
});

// Execução do teste
axe.run(document.body, {
  resultTypes: ['violations', 'incomplete']
}).then(results => {
  console.log(results.violations);
});

2. Lista di controllo manuale

Navigazione

Tutti i collegamenti hanno un testo descrittivo
La navigazione tramite tastiera funziona
La messa a fuoco è visibile
L'ordine di tabulazione è logico

Immagini

Tutte le immagini hanno un testo alternativo
Le immagini decorative sono contrassegnate come tali
I grafici hanno descrizioni testuali

Moduli

Tutti i campi hanno etichette
I messaggi di errore sono chiari
I campi obbligatori sono contrassegnati

Migliori pratiche

1. Cosa fare ✅

Utilizzare HTML semantico
Mantenere un contrasto adeguato
Fornire alternative testuali
Prova con lettori di schermo
Documento standard di accessibilità

2. Da non fare ❌

Non usare il colore solo per trasmettere informazioni
Evitare contenuti flash
Non dipendere solo dal mouse
Non ignorare il focus della tastiera
Non utilizzare tabelle per l'impaginazione

Strumenti consigliati

1. Test

🧪 axe-core: test automatizzati
👁️ WAVE: Valutazione visiva
🎯 Faro: audit completo

2. Sviluppo

🎨 Controllo contrasto colore
🎮 Tester di navigazione tramite tastiera
📝 Strumenti per testare i lettori di schermo

Conclusione

L’accessibilità web è essenziale per:

Inclusione digitale
Conformità legale
La migliore esperienza per tutti
SEO ottimizzato
Codice pulitore

Passaggi successivi

Controlla il tuo sito web attuale
Implementare soluzioni prioritarie
Stabilire standard di accessibilità
Formare la squadra
Mantenere un monitoraggio continuo

Vuoi condividere le tue esperienze con accessibilitàweb? Lascia un commento qui sotto!