Accesibilidad: Buenas prácticas

accessibility Mejorando la accesibilidad
title Encabezados semánticos
Usar para encabezados
<th> en lugar de <td>
link Atributo scope
Define relación entre celdas
scope="col" o scope="row"
description Títulos descriptivos
Usar caption para contexto
<caption>Ventas Q1</caption>
bookmark Atributo headers
Asocia celdas con encabezados
headers="id1 id2"
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #576CBC;
  color: white;
  font-weight: bold;
}

caption {
  font-size: 1.2em;
  margin-bottom: 10px;
  font-weight: bold;
}
visibility Ejemplo accesible
Ventas del Primer Trimestre
Producto Enero Febrero Marzo
Laptop $5,000 $6,200 $7,100
Monitor $2,100 $2,300 $2,800
lightbulb Beneficios
• Mejor navegación con lectores de pantalla
• Contexto claro sobre los datos
• Cumplimiento de estándares WCAG
• Mejor experiencia para todos los usuarios
check_circle Herramientas de validación
  • web
    WAVE - Evaluador de accesibilidad web
  • accessibility_new
    axe DevTools - Extensión para Chrome
  • screen_reader
    Lectores de pantalla para pruebas reales