Acessibilidade
WCAG
UX
Design
Frontend

Diseño de interfaz accesible: cumplimiento de WCAG

Diseño de interfaz accesible: cumplimiento de WCAG

La accesibilidad digital no es sólo una obligación legal, sino un derecho fundamental. Exploremos cómo crear interfaces que cumplan con las pautas WCAG y sean verdaderamente inclusivas.

¿Qué son las WCAG?

Las Pautas de accesibilidad al contenido web (WCAG) son un conjunto de recomendaciones para hacer que el contenido web sea más accesible. Están organizados en tres niveles:

  • A: Requisitos básicos
  • AA: Requisitos intermedios
  • AAA: Requisitos avanzados

Principios fundamentales

1. Notable

<!-- 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. Operable

<!-- 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>

Implementación práctica

1. Estructura semántica

<!-- 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. Formularios accesibles

<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>

Estilos y CSS

1. Contraste y colores

/* 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. Capacidad de respuesta

/* 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 interactividad

1. Gestión del enfoque

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. Notificaciones accesibles

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);
  }
}

Pruebas de accesibilidad

1. Herramientas automatizadas

// 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 de verificación manual

Navegación

  • [] Todos los enlaces tienen texto descriptivo
  • [] La navegación por teclado funciona
  • [] El enfoque es visible
  • [] El orden de tabulación es lógico

Imágenes

  • [] Todas las imágenes tienen texto alternativo.
  • Las imágenes decorativas están marcadas como tales.
  • [] Los gráficos tienen descripciones textuales.

Formularios

  • [] Todos los campos tienen etiquetas
  • [] Los mensajes de error son claros
  • Los campos obligatorios están marcados

Mejores prácticas

1. Qué hacer ✅

  • Utilice HTML semántico
  • Mantener un contraste adecuado
  • Proporcionar alternativas textuales.
  • Prueba con lectores de pantalla.
  • Documento accesibilidad estándares

2. Lo que no se debe hacer ❌

  • No utilices sólo el color para transmitir información.
  • Evite el contenido parpadeante
  • No dependas sólo del ratón
  • No ignores el foco del teclado
  • No utilizar tablas para el diseño.

Herramientas recomendadas

1. Pruebas

  • 🧪 axe-core: pruebas automatizadas
  • 👁️ WAVE: Evaluación visual
  • 🎯 Faro: Auditoría completa

2. Desarrollo

  • 🎨 Comprobador de contraste de color
  • 🎮 Probador de navegación por teclado
  • 📝 Herramientas de prueba de lectores de pantalla

Conclusión

La accesibilidad web es esencial para:

  1. Inclusión digital
  2. Cumplimiento legal
  3. La mejor experiencia para todos
  4. SEO optimizado
  5. Código de limpieza

Próximos pasos

  1. Audite su sitio web actual
  2. Implementar correcciones prioritarias
  3. Establecer estándares de accesibilidad
  4. Entrena al equipo
  5. Mantener un seguimiento continuo

¿Quieres compartir tus experiencias con accesibilidad web? ¡Deja un comentario a continuación!

Lea también

GitHub
LinkedIn
X
youtube