settings
Atributos para accesibilidad
link
scope
Define la relación entre celdas
scope="col" o scope="row"
bookmark
headers
Asocia celdas con sus encabezados
headers="id1 id2"
short_text
abbr
Abreviatura del contenido
abbr="N°"
sort
sortable
Indica columna ordenable
sortable
<table>
<tr>
<th scope="col" id="nombre">Nombre</th>
<th scope="col" id="edad">Edad</th>
</tr>
<tr>
<td headers="nombre">María</td>
<td headers="edad">28</td>
</tr>
</table>
<tr>
<th scope="col" id="nombre">Nombre</th>
<th scope="col" id="edad">Edad</th>
</tr>
<tr>
<td headers="nombre">María</td>
<td headers="edad">28</td>
</tr>
</table>
accessibility
Beneficios para accesibilidad
-
screen_reader
Mejora la navegación con lectores de pantalla
-
record_voice_over
Proporciona contexto sobre las relaciones de datos
-
keyboard
Facilita la navegación por teclado
-
search
Mejora el SEO y la indexación de contenido
lightbulb
Buena práctica
Usar siempre atributos de accesibilidad en tablas complejas con múltiples encabezados
code
Ejemplo con abbr
<th abbr="N°">Número</th>
<th abbr="DNI">Documento Nacional de Identidad</th>
<th abbr="DNI">Documento Nacional de Identidad</th>