Día 19: Usar cabeceras de tabla reales

Si tiene un calendario en su sitio de Internet, debe ser creado como una tabla en HTML. Han habido unos cuantos intentos de crear calendarios hechos completamente en CSS. Esto es desafortunado; ya que los calendarios son tablas de datos, y deben ser marcados como tal.

Lo más importante acerca de los datos de una tabla es marcar las cabeceras de manera correcta. En el caso de un calendario, esto significa que los días de la semana deben ir en la parte superior. Definitivamente debe incluir cabeceras para los días de la semana; si no quiere que sean visibles puede hacerlos invisibles con CSS. (Hago esto en mi propio registro de apuntes). Pero las cabeceras deben estar hay como quiera, porque los lectores de pantalla cuentan con esto para ayudar a los usuarios ciegos a navegar a través de la tabla sin que se pierdan.

El asunto con un calendario (y con cualquier tabla de datos, realmente, pero hoy vamos a hablar de calendarios principalmente) es que es muy fácil de usar si puede verla completamente, pero muy difícil de usar di solo puede ver un numero a la vez. Imagine que tenga un calendario diario en su escritorio, pero cada pagina enlista solamente el día del mes, sin el día de la semana. Una pagina tras otra, 1, 2, 3, 4, 5, 6, 7. Hoy estamos a 4, y esto seguro de que es jueves. Ahora salte al 11, 12, 13. Rápidamente, dígame que día de la semana es el 13. La página no se lo dice; tiene que llevar la cuenta por sus propios medios.

Así es como un usuario ciego debe navegar por un calendario sin las cabeceras apropiadas. Tiene un paquete de números, pero ningún contexto para llevar la cuenta de estos. Añadir cabeceras apropiadas al calendario permite a las aplicaciones de lectura de pantalla asociar la cabecera de la tabla (el día de la semana) con los datos de la tabla (día del mes), y leerlos en conjunto. "jueves 4, jueves 11, viernes 12, sábado 13". Oh, es sábado.

Note que dije cabeceras apropiadas. Poner los días de la semana en etiquetas de celdas de tabla (<td>) en la primera fila no es suficiente. Deben usarse etiquetas de cabeceras de tabla (<th>) en su lugar. La mayoría de las plantilla de los registros de apuntes (weblog) fallan en esto, pero es muy sencillo arreglarlo, y su calendario se vera exactamente igual en los navegadores visuales cuando termine.

Quién se beneficia?

  1. Jackie se beneficia. Cuando ella se encuentra con su calendario, JAWS primero lee el encabezado, luego anuncia las cabeceras, y después Jackie puede mantener presionado Control + ALT y moverse por el calendario con las teclas de flechas. Mientras se mueve, JAWS anuncia la cabecera (el día de la semana) y los datos de la celda (el día del mes).

    Todos los lectores de pantalla importantes permiten este tipo de navegación. Home Page Reader permite a los usuarios cambiar a un modo llamado "Table Navigation" (Navegación por Tablas,ALT+T), y luego moverse por el calendario sin mantener apretadas teclas adicionales. El Home Page Reader va un paso más allá que el JAWS. Como veremos en un minuto, usted puede definir un titulo mas corto (o mas largo) para cada cabecera de tabla (más o menos como añadir un titulo a un vinculo), y Home Page Reader leerá este titulo en vez del texto original de la cabecera. Esto significa que puede mostrar visualmente sus días de la semana como "Dom", "Lun", "Mar", pero decirle a Home Page Reader que lo lea como "Domingo", "Lunes", "Martes". Genial.

Como hacerlo

Si todavía no lo ha hecho, asegúrese de que su calendario tenga un encabezado real. La etiqueta <caption> debe ser la primera después de la etiqueta de tabla <table>, y las etiquetas de fila de cabecera <th> deben ser las primeras después de esas.

En Movable Type, encuentre su calendario en su Plantilla de Indice Principal (Main Index Template) (De nuevo, haciendo una búsqueda por "calendarhead" probablemente lo encontrará). Inmediatamente después de la etiqueta <caption>, vera los días de la semana definidos así:

<tr>
<td align="center"><span class="calendar">Dom</span></td>
<td align="center"><span class="calendar">Lun</span></td>
<td align="center"><span class="calendar">Mar</span></td>
<td align="center"><span class="calendar">Mie</span></td>
<td align="center"><span class="calendar">Jue</span></td>
<td align="center"><span class="calendar">Vie</span></td>
<td align="center"><span class="calendar">Sab</span></td>
</tr>

Cámbielo a esto:

<tr>
<th abbr="Domingo" align="center"><span class="calendar">Dom</span></th>
<th abbr="Lunes" align="center"><span class="calendar">Lun</span></th>
<th abbr="Martes" align="center"><span class="calendar">Mar</span></th>
<th abbr="Miércoles" align="center"><span class="calendar">Mie</span></th>
<th abbr="Jueves" align="center"><span class="calendar">Jue</span></th>
<th abbr="Viernes" align="center"><span class="calendar">Vie</span></th>
<th abbr="Sábado" align="center"><span class="calendar">Sab</span></th>
</tr>

Aquí hay dos cosas importantes: todas las etiquetas de celdas (<td>)cambian a etiquetas de cabecera (<th>), y a todas se les pone el atributo "abbr" para especificar el nombre completo del día de la semana (El atributo "abbr" puede servir un doble propósito. Para cabeceras muy largos, puede servir como una abreviación; de ahí si nombre. Pero para cabeceras de tabla muy cortos, sirve como una versión más larga, que es lo que estamos haciendo aquí).

En Radio, el procedimiento es similar al que hizo ayer, al poner un encabezado real (caption) a una tabla.

  1. En Radio, primero abra la aplicación actual. En Windows, haga clic derecho en el pequeño icono de Radio en su área de notificación y seleccione "Open Radio" (Abrir Radio).
  2. Bajo el menú "Tools" (Herramientas), seleccione "Developers" (Desarrolladores), luego "Jump..." (Saltar.)(Control+J). Salte a "system.verbs.builtins.radio.weblog.drawCalendar" (sin las comillas).

  3. Ahora vaya al menú "Edit" (Edición), "Find and Replace" (Buscar y Reemplazar), "Find..." (Buscar.)(Control+F) y busque "addDayName". Esto debe revelar y resaltar la función addDayName. Haga doble clic en el triangulo para revelar el código de la función, que debe verse como este:

    on addDayName (name)
      add ("<td width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</td>")

  4. Cámbielo a esto:

    on addDayName (name, fullname)
      add ("<th abbr=\"" + fullname + "\" width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</th>")

  5. Ahora haga doble clic en la línea "for i = 1 to 7" justamente debajo para ver esto:

    for i = 1 to 7
      addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + i))

  6. Y cámbielo por esto:

    for i = 1 to 7
      addDíaName (radio.string.getLocalizedString ("dayOfWeekShort." + i), radio.string.getLocalizedString ("dayOfWeek." + i))

Nota muy importante para tablas usadas para disposición

Las tablas usadas para presentación visual tienen un conjunto de reglas totalmente distintas. No use etiquetas de cabecera (<th>) en tablas para disposición. Además de ajustar sus tablas para presentar su contenido principal inicialmente, hay muy pocas cosas que necesita hacer para sus tablas sean accesibles. Discutiremos un pequeño detalle mañana.

Lectura añadida

Si necesita marcar tablas de datos más complejas que un calendario (como tablas con múltiples niveles de cabeceras y sub-cabeceras), está por su cuenta. He aquí algunos puntos de inicio:

 
<< Día 18: Dar a su calendario un encabezado real | Contenido | Día 20: Proveer un resumen para las tablas >>