El Atributo SCOPE

El atributo scope en HTML se utiliza en tablas para definir la relación entre una celda de encabezado (<th>) y las celdas de datos (<td>) asociadas. Este atributo mejora la accesibilidad al ayudar a tecnologías asistivas (como lectores de pantalla) a entender la estructura de la tabla y la asociación entre encabezados y datos. A continuación, aprenderás cómo implementarlo correctamente.

1. Introducción al atributo scope

• Propósito:
  Especificar si un encabezado (<th>) aplica a una fila, columna, grupo de filas o grupo de columnas.

• Elementos compatibles:

  • <th> (celdas de encabezado).

• Importancia:

  • Mejora la accesibilidad para usuarios con discapacidad visual.

  • Proporciona contexto semántico a los motores de búsqueda.

2. Valores del atributo scope

3. Sintaxis básica

<table>
  <tr>
    <th scope="row">Encabezado de fila</th>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
</table>

4. Ejemplos prácticos

Ejemplo 1: Encabezado de columna (scope="col")

<table>
  <tr>
    <th scope="col">Nombre</th>
    <th scope="col">Edad</th>
    <th scope="col">País</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>28</td>
    <td>México</td>
  </tr>
</table>

Resultado:
Los encabezados "Nombre", "Edad" y "País" se asocian con sus respectivas columnas.

Ejemplo 2: Encabezado de fila (scope="row")

<table>
  <tr>
    <th scope="row">Producto A</th>
    <td>$20</td>
    <td>Disponible</td>
  </tr>
  <tr>
    <th scope="row">Producto B</th>
    <td>$30</td>
    <td>Agotado</td>
  </tr>
</table>

Resultado:
Los encabezados "Producto A" y "Producto B" se vinculan con los datos de sus filas.

Ejemplo 3: Encabezado de grupo de filas (scope="rowgroup")

<table>
  <thead>
    <tr>
      <th scope="col">Categoría</th>
      <th scope="col">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" colspan="2">Electrónicos</th>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>$1000</td>
    </tr>
  </tbody>
</table>

Resultado:
El encabezado "Electrónicos" aplica a todas las filas dentro de su grupo (<tbody>).

5. Buenas prácticas

• Usa scope siempre que sea posible: Añade claridad semántica a las tablas.

• Combina con <thead>, <tbody>, y <tfoot>: Organiza la estructura de la tabla.

• Evita valores incorrectos: Por ejemplo, no uses scope="col" en una celda que abarca filas.

• Accesibilidad:

  • Usa <caption> para describir el propósito de la tabla.

  • Combina con id y headers para tablas complejas.

6. Accesibilidad avanzada con headers

En tablas complejas (con múltiples niveles de encabezados), usa headers en <td> para asociar celdas a sus encabezados:

<table>
  <tr>
    <th id="nombre">Nombre</th>
    <th id="edad">Edad</th>
  </tr>
  <tr>
    <td headers="nombre">Luis</td>
    <td headers="edad">25</td>
  </tr>
</table>

7. Errores comunes

1. Usar scope en <td>: Solo aplica a <th>.

2. Valores incorrectos: Ejemplo: scope="fila" (debe ser scope="row").

3. Ignorar la estructura semántica: No usar <thead> o <tbody> junto con scope.

8. Compatibilidad

• Navegadores modernos: Chrome, Firefox, Safari y Edge interpretan scope correctamente.

• Lectores de pantalla: JAWS, NVDA y VoiceOver usan scope para navegar tablas.

9. Conclusión

El atributo scope es esencial para:

• Mejorar la accesibilidad en tablas HTML.

• Estructurar datos de forma clara y semántica.

• Optimizar el SEO al proporcionar contexto a los motores de búsqueda.

Ejemplo final:

<table>
  <caption>Inventario de productos</caption>
  <thead>
    <tr>
      <th scope="col">Producto</th>
      <th scope="col">Cantidad</th>
      <th scope="col">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Laptop</th>
      <td>10</td>
      <td>$1200</td>
    </tr>
    <tr>
      <th scope="row">Teléfono</th>
      <td>25</td>
      <td>$600</td>
    </tr>
  </tbody>
</table>

Recuerda:

• Usa scope para que tus tablas sean accesibles y profesionales.

• Prueba con herramientas como WAVE para verificar accesibilidad.

• ¡Combina scope con CSS para diseños atractivos! ????