11.6: Diseño y Estructuración de Contenidos en Línea

Diseño y Estructura

¡No tires tus suministros de arte!

Uno de los conceptos erróneos más comunes sobre el diseño web accesible es que para que un sitio sea accesible, debe tener un diseño simple y sencillo con pocas o ninguna imagen. Otro mito es que se puede hacer un sitio adecuado y accesible proporcionando una versión “solo de texto” de un sitio web existente. Esto es una molestia de mantener, ya que requiere que no guardes una sino dos versiones de cada página.

Recuerda, ¡no todos los estudiantes discapacitados son ciegos! Las personas con problemas de movilidad o audición e incluso problemas de visión seguramente apreciarán un sitio web bien pensado y estéticamente agradable tanto como cualquiera. Como verás, muchos de tus cambios de accesibilidad estarán escondidos en el código de tus páginas, donde serán un beneficio para los usuarios discapacitados sin restarle valor a tu sitio de ninguna manera.

Figura\(\PageIndex{1}\): Tecnologías de asistencia

Estructurar su contenido

Antes de comenzar a escribir una sola línea de HTML o incluso comenzar a escribir el contenido de su curso, debe pensar en cómo se va a estructurar su curso. ¿Tendrás mucho material para leer, o solo un poco? ¿Habrá muchas páginas o subpáginas?

Cuanto más fácil puedas hacer que los estudiantes encuentren y lean el material de tu curso, más fácil será para ellos aprender.

Menús y Navegación

La forma en que planificas la navegación de tu sitio afectará la usabilidad de tu sitio para toda tu audiencia. Un buen enfoque es anotar las diferentes categorías que se aplican a cada una de tus páginas, y luego agrupar las páginas en estas categorías. La clave es encontrar un equilibrio intuitivo entre abrumar al usuario con demasiadas opciones y enterrar información importante demasiado profunda en el sitio.

Por ejemplo, si tu sitio está compuesto por estas páginas, estás corriendo el riesgo de crear una navegación muy desordenada y ocupada:

• Contenido del curso
• Lineamientos
• Plan de estudios
• Horario
• Tablón de mensajes
• Chat
• Correo
• Enviar asignaciones
• Tarea #1
• Tarea #2
• Tarea #3
• Tarea #4
• Gradaje
• Ayuda

Podrías intentar agrupar tus páginas en estas categorías y crear subcategorías dentro de esta estructura:

• Acerca del curso: al hacer clic se revelan las pautas, el plan de estudios, el horario
• Contenido del curso
• Asignaciones: al hacer clic se revelan Asignaciones #1 —4, Calificación, Enviar asignaciones
• Comunicar: al hacer clic se revela Tablero de mensajes, chat, correo
• Ayuda

Ahora sus alumnos sólo tienen que ordenar a través de cinco enlaces en lugar de catorce.

Use el sentido común al definir categorías: puede haber algunos enlaces que un estudiante podría usar varias veces al día, por lo que es posible que desee que se siente en el nivel superior para un acceso rápido y fácil. Sin embargo, tenga cuidado al hacer excepciones a sus reglas, si hace esto demasiadas veces, todo se convierte en una excepción y ¡nuevamente tiene un sitio desordenado!

Cuando diseñes tu sitio y eliges dónde colocar tu navegación, ten en cuenta estas preguntas:

• ¿Los enlaces están agrupados en un solo lugar, donde se pueden encontrar fácilmente?
• ¿Hay tantos enlaces en la página que se vuelve confuso?

Escribiendo para la Web

Por lo general, los usuarios que ven sitios web no leen el texto tan a fondo como lo hacen cuando leen texto impreso. Los monitores tienen una resolución menor que el material impreso, lo que hace que sea menos cómodo de mirar durante largos períodos de tiempo. La mayoría de los lectores en línea desarrollan el hábito de hojear la pantalla buscando puntos clave en lugar de estudiar en detalle. Si es necesario leer pasajes o papeles largos y prolijos, muchos usuarios imprimirán la información para leerla cómodamente fuera de línea.

Puedes hacer que sea más fácil para los lectores encontrar lo que necesitan al:

• Mantener sus párrafos cortos: una idea por párrafo
• Usar encabezados para anunciar y reforzar nuevos temas
• Usar listas con viñetas para agrupar ideas en un formato simple y fácil de leer

Escritura para estudiantes con discapacidad de aprendizaje

Estar discapacitado para el aprendizaje no significa que un estudiante no pueda aprender, solo puede significar que los métodos de aprendizaje tradicionales son particularmente difíciles para ese individuo. Algunos estudiantes con dificultad para leer pueden aprender el mismo material igual de bien al escucharlo, o después de ver un gráfico que explique el concepto. Por esta razón, puede ser útil explicar ideas clave de múltiples formas diferentes: texto y un gráfico o video que refuerce lo que se está enseñando.

El mismo principio se aplica a cómo pides a tus alumnos que expresen su comprensión. Para muchos estudiantes, la elección de escribir un artículo o dar una presentación oral puede marcar una gran diferencia en su capacidad para comunicar lo que han aprendido.

Una de las mayores dificultades que encuentran los estudiantes con dificultades de aprendizaje es interpretar las demandas y expectativas académicas. Esto a menudo se puede abordar construyendo puntos de control en asignaciones, como “Presentar un plan que describa cómo abordará este proyecto”. Esto permite al instructor evaluar si el alumno ha entendido lo que se espera de él, antes de que el alumno haya invertido demasiado tiempo en un proyecto que pueda estar en el camino equivocado.

Las instrucciones claras y explícitas son, por supuesto, vitales, pero ellas solas no son la solución; el estudiante debe participar activamente e interpretar las tareas y requisitos por sí mismo.

Consideraciones adicionales

Algunos estudiantes con discapacidades pueden requerir tiempo adicional para completar tareas como autoexámenes y cuestionarios. Un estudiante que usa un teclado alternativo puede no ser capaz de escribir tan rápido como sus compañeros de clase. Extender el tiempo asignado para ese estudiante, o eliminar el requisito de tiempo.

Las salas de chat suelen ser inaccesibles para los usuarios que leen lectores de pantalla. Asegúrese de que la participación en la sala de chat no sea un requisito del curso, o haga arreglos para que un estudiante discapacitado participe utilizando otros medios, como una sala de discusión.

Uso del código correcto: XHTML y CSS

HTML (Hypertext Markup Language) es el código utilizado para describir las páginas web para que puedan ser renderizadas en un navegador. Cuando se creó HTML hace muchos años, nadie podría haber predicho el tipo de páginas dinámicas e interactivas que eventualmente serían utilizadas para crear. Si bien el HTML era fácil de aprender y bastante flexible, tenía algunas limitaciones significativas: por ejemplo, los objetos no podían colocarse en ninguna parte de una página, sino que tenían que fluir de manera lineal, un elemento antes del siguiente. Los diseñadores creativos encontraron formas de evitar estas limitaciones: la etiqueta TABLE fue manipulada para permitir la colocación precisa de texto y gráficos.

Pero estas ingeniosas soluciones vinieron con su propio conjunto de problemas. Rediseñar un sitio web significaba reescribir y reconstruir cada página de HTML en el sitio. Los diseños visualmente simples a menudo requerían HTML complejo e hinchado. Si el código se escribía de manera incorrecta, el navegador web tenía que interpretar el código lo mejor que pudiera, ralentizando la renderización de la página.

Nota

• Usuarios intermedios: Recomendamos utilizar Macromedia Dreamweaver para ayudarle a escribir código accesible.
• Usuarios novatos: Si no te sientes cómodo escribiendo código HTML, te sugerimos Course Genie, un paquete de Horizon Wimba, que te permite convertir un documento de Word en un sitio web bien codificado y accesible que se puede subir a WebCT.

Para abordar estos problemas, HTML recibió un nuevo comienzo reescribiéndolo usando otro lenguaje: XML o Lenguaje de marcado extensible. El resultado se llama XHTML. Superficialmente, XHTML no es terriblemente diferente de HTML: la sintaxis es más estricta, y se han eliminado algunas etiquetas y atributos, pero gran parte es lo mismo. La clave está en lo “extensible”. XHTML esencialmente le permite definir nuevas clases de objetos.

¿Qué significa esto? Supongamos que necesita todas las imágenes relacionadas con las noticias (¡pero no otras!) estar rodeado por un borde azul de cinco píxeles. Usando HTML antiguo, harías esto envolviendo cada imagen de noticias en una etiqueta de tabla.

Ejemplo\(\PageIndex{1}\)

<table border= “5” border color= “blue” >

<tr>

<td>

<img src= “images/news.jpg” width= “200” height= “100” alt= “Top story: man bites dog” >

</td>

</tr>

</table>

Toda imagen que necesite un borde tendría que ser tratada de esta manera.

El uso de XHTML te ahorra tiempo y espacio. Primero definir una clase llamada “noticias” como tener un borde azul de cinco píxeles.

Ejemplo\(\PageIndex{2}\)

.news {

borde: azul sólido de 5px;

}

Luego agrega un atributo a cualquier etiqueta de imagen que necesite estar en la clase “noticias”.

Ejemplo\(\PageIndex{3}\)

<img src= “images/news.jpg” width= “200” height= “100” alt= “Top story: hombre muerde perro” class= “news” />

¿Cómo funciona esto? Las clases se definen dentro de Cascading Stylesheets (CSS) —hojas de estilo, porque definen el estilo de una página; en cascada, porque se pueden aplicar varias hojas de estilo. Puedes definir cualquier estilo una vez y aplicarlo en todo tu sitio.

Consejo Un sitio que puede ayudarte a visualizar este proceso es CSS Zen Garden (http://www.csszengarden.com). Cada diseño del sitio utiliza el mismo código XHTML para definir las diferentes áreas de la página. Al intercambiar solo la hoja de estilo, la apariencia del sitio cambia drásticamente.

Entonces, con un solo archivo CSS, ahora puedes definir la apariencia de un sitio web completo que consta de cientos de páginas.

¿Por qué no puedo hacer las cosas a la vieja manera?

Siéntase libre de omitir esta sección si es nuevo en la construcción de páginas web o ya está familiarizado con XHTML y CSS.

Las tablas no están pensadas para el diseño

Si alguna vez construyó un sitio web antes de que CSS fuera ampliamente aceptado, es probable que lo haya construido usando tablas. Probablemente tomaste una imagen grande y la cortabas en un programa de edición de imágenes, luego colocaste cada trozo de la imagen en una tabla sin bordes para colocarla exactamente donde querías.

La primera razón para evitar las tablas es que hará que el rediseño de tu sitio sea mucho más fácil en el futuro. Ya no tendrás que cortar nuevos diseños y recrear cada página de tu sitio, puedes hacerlo todo con un cambio de tu hoja CSS y tal vez algunos cambios en el HTML.

Pero la razón principal es que simplemente no es tan accesible. Los lectores de pantalla abordan las tablas de manera lineal; es decir, leen cada columna, de izquierda a derecha, y cada fila, de arriba a abajo. Si su diseño basado en tablas no corresponde a este modelo, es posible que los usuarios ciegos no reciban la información en el orden en que lo pretendió. Es posible que escuchen el menú leído en pedazos, entre partes de tu contenido principal, y como puedes imaginar, es muy confuso navegar por una página como esta.

Muchas etiquetas viejas han sido despreciadas

XHTML ya no contiene varias etiquetas que abordan la apariencia de un sitio. La etiqueta FONT, que solía ser la única forma de establecer la apariencia de la fuente en una página, se ha eliminado del HTML. Esto se debe a que las fuentes pueden definirse y actualizarse de manera mucho más eficiente usando CSS. De igual manera, la etiqueta CENTER se ha ido, para ser reemplazada por formato CSS.

Nota

Hay muchos recursos excelentes, tanto en línea como fuera de línea, para aprender XHTML y CSS. Aquí hay algunos tutoriales para comenzar:

• Introducción a CSS http://www.w3schools.com/css
• Introducción al XHTML www.w3schools.com/xhtml

Accesibilidad en XHTML

Para el resto de esta sección, usaremos XHTML y HTML indistintamente; los principios básicos son los mismos, y la mayoría de las diferencias están en la precisión y consistencia del código.

Texto

El texto hace que la World Wide Web gire. La mayor cantidad de contenido en la Web es el texto básico, sin formato. El texto es el formato de medios más accesible que existe; es fácil de manejar para todos los navegadores y lectores de pantalla.

Hay una gran cosa de la que debes tener más cuidado, y es la visibilidad de tu texto. Los usuarios que envejecen, las personas con mala visión o incluso las personas que usan un monitor pequeño pueden no ver el texto de tu sitio con la misma claridad que tú. Es posible que necesiten agrandar el tamaño del texto para poder leerlo mejor.

Hay algunas maneras de hacer esto. Una lupa de pantalla, como ZoomText, hará que una pantalla se comporte mucho como si se hubiera colocado una lupa gigante entre la pantalla y el usuario. Una forma aún más sencilla es usar la configuración del tamaño del texto en el navegador para aumentar el tamaño de fuente en la página.

Cuando define la apariencia de su texto en CSS, puede elegir entre tamaños de fuente absolutos o relativos.

• Los tamaños absolutos de fuente (píxeles, puntos) deben aparecer exactamente con el mismo tamaño en cada navegador y en cada configuración. El texto que se establece en “12px” aparecerá como 12 píxeles de alto. Los diseñadores suelen preferir tamaños de fuente absolutos porque tienen un mayor control sobre la apariencia del texto, y pueden dictar cuánto espacio ocupará un bloque de texto determinado.
• Los tamaños de fuente relativos (porcentajes, “em”) aparecen en un tamaño relativo a la configuración de fuentes del usuario. El texto que se establece en “90%” aparecerá en el 90 por ciento del tamaño actual del texto. Si el usuario cambia su tamaño de fuente a “mayor”, el tamaño del texto en la página aumentará.

¿Cuál es la implicación aquí? Utilice tamaños de fuente relativos en todo momento. Algunos navegadores permitirán que los tamaños de fuente absolutos se escalen con la configuración del usuario, pero no todos. Tu vista puede ser mucho mejor que la de algunos de tus usuarios, y lo que te parece bien podría causar problemas a otra persona. Asegúrate de darles el control de su pantalla.

Ejemplo

Ejemplo\(\PageIndex{4}\)

cuerpo, p {

font-family: Arial, Helvetica, sans-serif;

tamaño de fuente: 0.9em;

color: #333333;

}

Esto hará que el texto para una página 0.9 em, o 90 por ciento, de su tamaño predeterminado.

Ten cuidado con el contraste y los colores de tu texto. Ya sea que su texto sea claro sobre un fondo oscuro o oscuro sobre un fondo claro, debe asegurarse de que haya suficiente contraste entre el texto y el fondo para que los usuarios con visión más débil distingan claramente. Adicionalmente, si alguna información es transportada solo por color, refuerce la información con otro método. En el ejemplo mostrado en la Figura\(\PageIndex{2}\), los campos requeridos están marcados no sólo por un cambio de color, sino por texto en negrita y un asterisco.

Figura\(\PageIndex{2}\)

Imágenes

Texto Alt

Hay una manera muy simple e integrada de asegurarse de que sus imágenes sean accesibles: use texto ALT. La figura 11.5 se codificaría de la siguiente manera:

<img src= “images/horse.jpg” width= “240” height= “180” alt= “Racehorse warming up at track” />

Cuando un lector de pantalla encuentra un atributo alt, sustituye el texto por la imagen, leyendo el texto en voz alta. Para que esto sea lo más útil posible para tus usuarios, debes elegir texto que sea apropiadamente descriptivo de la imagen. Incluya cualquier detalle que sea necesario para que la imagen tenga sentido; no se moleste con descripciones triviales si no agregan información útil.

Figura\(\PageIndex{3}\)

Descripciones vacías

Hay algunos casos en los que una imagen no requiere una descripción en absoluto, o donde una descripción abarrotaría la lectura de audio de la página.

Las imágenes espaciadoras (o transparentes) suelen ser imágenes transparentes 1x1 que se utilizan para controlar el diseño de un sitio web basado en tablas empujando elementos del sitio en su lugar. Si tu sitio está completamente basado en CSS, realmente no los necesitarás. Sin embargo, si está trabajando en un sitio más antiguo, es posible que aún los esté usando.

Los gráficos decorativos de viñetas se utilizan a menudo en las listas para ilustrar un punto.

Figura\(\PageIndex{4}\): Gráficas decorativas en forma de bala

La figura\(\PageIndex{4}\) muestra tres balas decorativas, que muchas personas codificarían erróneamente de la siguiente manera:

<img src= “bullet.gif” width= “5” height= “5” alt= “Red bullet” />Plan de mercadotecnia<br />

<img src= “bullet.gif” width= “5” height= “5” alt= “Blue bullet” />Plan de promoción<br />

<img src= “bullet.gif” width= “5” height= “5” alt= “Yellow bullet” />Plan de licencias<br />

Con un código como este, un usuario lector de pantalla escuchará: “plan de marketing de bala roja plan de promoción de bala azul plan de licencia de bala amarilla”.

Aunque no quieras que los lectores de pantalla intenten describir estas imágenes, aún necesitas definir su texto alternativo, o el lector de pantalla leerá el nombre del archivo en su lugar. El texto alternativo en una imagen espaciadora o un gráfico decorativo debe estar vacío, es decir, alt= “”.

Consejo Los usuarios con discapacidad visual no son los únicos que se benefician del texto ALT, ¡tú también lo harás! Al describir tus imágenes, facilitarás que los motores de búsqueda como Google indexen tu contenido, y será más fácil para otros usuarios encontrar el contenido en tu sitio.

Descripciones largas

El texto alternativo es bueno para una oración corta, pero a veces un diagrama o gráfico complicado no se puede describir a fondo en una sola línea de texto. Cuando esto sucede, use el atributo ALT para un resumen rápido y el atributo LONGDESC:

<img src= “images/chart1.jpg” width= “350” height= “150” alt= “Increase in readership over past 5 years” longdesc= “chart1.html” />

El atributo longdesc es la URL de otra página web, que debe contener una descripción completa de la imagen en cuestión.

Imagemaps

Los mapas de imagen son igualmente fáciles de hacer accesibles: agregue el texto alternativo a la etiqueta AREA para cada área en la que se puede hacer clic dentro del mapa.

Enlaces

Ya hemos hablado de menús y navegación y de la importancia de pensar en los enlaces. Aquí hay algunas consideraciones adicionales:

• Tamaño del enlace: Si las imágenes son enlaces gráficos, ¿son lo suficientemente grandes para que los usuarios puedan hacer clic fácilmente en ellas, incluso si tienen un mal control del motor en sus manos?
• Texto de enlace descriptivo: Si su texto de enlace se saca de contexto, ¿tendrá sentido? Muchos lectores de pantalla permiten al usuario abrir una lista de solo los enlaces de la página. Esta es una manera útil para que un lector ciego navega, a menos que el texto de tu enlace diga “¡Haz clic aquí”! Asegúrate de que tu enlace incluya suficiente texto para definir claramente el enlace, como “Haz clic aquí para ver el horario completo” o incluso “Horario completo”.
• Nombres de enlace únicos: Del mismo modo, si el texto de su enlace se saca de contexto, ¿un usuario verá el mismo texto de enlace varias veces? Diez enlaces que todos dicen “Click aquí”, pero apuntan a diferentes páginas, serían frustrantes.
• Separadores de enlaces: El enlace en un menú debe estar separado por algo más que un espacio en blanco, para que los usuarios con discapacidad visual distingan mejor los enlaces entre sí. Además, algunos lectores de pantalla más antiguos leen incorrectamente los enlaces adyacentes como el mismo enlace.

Nota

En la Web, los enlaces suelen estar subrayados. La mayoría de los usuarios web están acostumbrados a hacer clic en enlaces subrayados. Para ello, lo mejor es no subrayar nada que no sea un vínculo a menos que el estilo convencional lo requiera.

<a href= “about.html” > <a href= “bio.html” > <a href= “contact.html” >Acerca de BioContact</a></a></a>

Esto se puede hacer usando un separador:

<a href= “about.html” >Acerca de</a> <a href= “contact.html” > |Bio <a href= “bio.html” > |Contacto</a></a>

Otra alternativa es convertir cada enlace en un elemento en una lista desordenada, y luego usar CSS para darle estilo a los enlaces. Un lector de pantalla hará una pausa entre los elementos de la lista, haciendo que los enlaces sean más “listables”.

Para ello, necesitarás este CSS:

ul {

estilo de lista: ninguno;

}

ul li {

pantalla: en línea;

padding-derecha: 10px;

}

y este HTML:

<ul>

<li><a href= “about.html” >Acerca de</a></li>

<li><a href= “bio.html” >Bio</a></li>

<li><a href= “contact.html” >Contacto</a></li>

</ul>

Al establecer el estilo de lista en “ninguno” se eliminarán las viñetas que se muestran por defecto antes de cada elemento de la lista, y al establecer la visualización en “inline” se colocarán todos los elementos de la lista en la misma línea. Puede continuar estilizando los elementos de la lista con los ajustes de margen y relleno según sea necesario.

El atributo Title

Similar al texto ALT para imágenes, el atributo TITLE se puede utilizar para hacer una URL de enlace más clara. Una persona que usa un lector de pantalla puede establecer una opción para leer los textos TITLE en voz alta en lugar del texto del enlace. La mayoría de los navegadores muestran el texto TITLE como una “descripción emergente”, o pequeña ventana emergente, que aparece durante unos segundos cuando se pasa el mouse sobre el enlace.

El atributo TITLE en realidad se puede aplicar válidamente a la mayoría de los elementos HTML, pero se admite mejor en la etiqueta A (hipervínculo).

Javascript y DHTML

A muchas personas les gustan los menús “desplegables” o desplegables, que aparecen cuando el usuario mueve el cursor sobre una categoría de nivel superior. Para muchos usuarios, son una forma rápida de saltar directamente a la página que necesitan.

Muchos de estos menús crean problemas de accesibilidad. Algunos son muy sensibles al movimiento del mouse y se “enrollarán” en el instante en que el mouse se salga de la caja, lo que puede ser un problema grave para los usuarios cuyas manos no pueden controlar el mouse con precisión. Además, algunos de los códigos Javascript y HTML dinámico (DHTML) necesarios para generar estos menús no son entendidos por los lectores de pantalla, y serán ignorados. ¡Esto puede evitar que muchos usuarios usen los menús en absoluto!

Esto no significa que no puedas usar Javascript o DHTML, pero si lo estás usando para funciones importantes como la navegación, asegúrate de tener un plan de reserva para navegadores sin Javascript. Por lo general, puedes probarlo tú mismo desactivando Javascript en tu navegador.

Ventanas Popup

Las ventanas emergentes tienen sus propósitos:

• mostrar información extra sin hacer que el usuario pierda su lugar en la página
• permitir que el usuario abra un enlace a otro sitio que pueda ver más tarde
• publicidad (a menudo no bienvenida)

Considera lo que sucede cuando un lector de pantalla encuentra una nueva ventana. Primero anunciará que la nueva ventana se ha abierto, y luego desplazará el foco a esa ventana, leyendo el nuevo contenido. Un usuario ciego no puede mirar rápidamente la nueva ventana y dejarla a un lado para después; debe escuchar el contenido, decidir si es relevante o no, y elegir en qué ventana continuar leyendo.

Las ventanas emergentes inesperadas también pueden ser un problema para los usuarios con discapacidades de aprendizaje, ya que la aparición repentina de una nueva ventana puede distraer y hacer que pierdan su lugar en la página anterior.

Como regla general, avisar al usuario si un enlace abrirá una nueva ventana emergente. Además, considere si la ventana emergente es absolutamente necesaria. Tradicionalmente, los enlaces a sitios externos se abrieron en nuevas ventanas del navegador. Esto es preferido por muchos, pero es mejor dejar que el usuario elija: casi todos los navegadores te permiten hacer clic derecho (o Control-clic, si eres usuario de Mac) un enlace para abrirlo en una nueva ventana.

Tablas de datos

Hemos establecido que no debes usar tablas para el diseño gráfico, pero eso no significa que no puedas usar tablas en absoluto. Las tablas son indispensables para su propósito original: mostrar los datos tabulares en un formato organizado y legible.

Los usuarios videntes pueden echar un vistazo fácilmente a una tabla de datos, ver dónde están los encabezados de fila y columna y encontrar la pieza de datos que buscan. Pero cuando un lector de pantalla se encuentra con una mesa, la lee de manera lineal: fila por fila, cada celda en orden. Si la mesa es muy grande, es fácil perder la pista de qué columna estás escuchando. Y si la tabla es muy compleja, con celdas fusionadas que se superponen a múltiples filas o columnas, puede que no tenga mucho sentido cuando se lea en voz alta.

La figura\(\PageIndex{5}\) da un ejemplo.

Figura\(\PageIndex{5}\): Una mesa con horario de autobús

Encabezados de tabla

Cada tabla debe tener encabezados de tabla claramente etiquetados. Muchas veces los desarrolladores lo han hecho simplemente coloreando el fondo de las celdas del encabezado o haciendo que el texto sea negrita, pero como sabemos, esta información visual se perderá cuando se ejecute a través de un lector de pantalla.

Entonces, ¿cómo podemos decirle al propio navegador dónde están los encabezados de tabla? Esto se puede hacer con la <th>etiqueta, que funciona exactamente igual que la <td>etiqueta excepto que hace la distinción de que la celda es un encabezado. Además, aún puedes darle estilo a la <th>etiqueta usando CSS para que los encabezados se vean como quieras.

Leyenda y Resumen

El <caption>atributo da a todos los usuarios una definición rápida de la tabla. El <summary>atributo proporciona más detalles para los lectores de pantalla.

<table summary= “El horario para la línea 99 B en dirección oeste, con paradas en Commercial, Clark, Main, Cambie, Willow, Granville, Macdonald, Alma, Sasamat, y UBC. ” >

<caption>Horario para la 99 B-Line</caption>

<thead>

<tr>

<th>...

Alcance

El <scope>atributo entra en un encabezado de tabla para decirle al navegador qué encabezado está asociado con una fila o columna dada. Esto ayuda a eliminar la ambigüedad y permite que el lector de pantalla brinde al usuario más información sobre la tabla dada. Dos de las opciones son scope= “row” o scope= “col”.

Tabla\(\PageIndex{1}\): Datos de egreso de alumnos

	Año de graduación	GPA
Bob Smith	2002	3.4
Sara Miller	2004	3.8

Esto estaría escrito de la siguiente manera:

<table summary= “Año de graduación y GPA por cada alumno inscrito en el programa. ” >

<caption>Cuadro 1: Datos de egreso de alumnos</caption>

<tr>

<td></td>

<th scope= “col” >Año de graduación</th>

<th scope= “col” >GPA</th>

</tr>

<tr>

<th scope= “row” >Bob Smith</th>

<td>2002</td>

<td>3.4</td>

</tr>

<tr>

<th scope= “row” >Sara Miller</th>

<td>2004</td>

<td>3.8</td>

</tr>

</table>

Mesas Complejas

Las tablas con múltiples capas de encabezados y categorías pueden llegar a ser bastante complicadas. XHTML permite una descripción más detallada de tablas complejas, incluida la agrupación de conjuntos de filas y la asociación de celdas con encabezados. Estas ideas pueden ser de interés si tienes muchas tablas de datos. Aquí hay algunos recursos para tablas complejas:

• http://www.usability.com.au/resources/tables.cfm
• http://jimthatcher.com/webcourse9.htm.

Características de Accesibilidad

La mayoría de los cambios de los que hemos hablado mejorarán la accesibilidad de tu sitio sin cambiar su funcionalidad de ninguna manera. Ahora vamos a discutir algunas cosas que puedes agregar a tu sitio que serán de beneficio extra para los usuarios discapacitados.

Saltar al contenido

Si bien muchos usuarios experimentados de lectores de pantalla escuchan sitios web a velocidades muy altas, todavía no hay audio equivalente a hojear la página. Los usuarios videntes pueden ignorar fácilmente cualquier parte de un sitio web que no les sea de interés, o algo que hayan visto antes, como la navegación.

Una característica que mejorará la usabilidad de tu sitio web es una opción de saltar al contenido. Se trata de un enlace, codificado para parecer invisible para los usuarios videntes, en el que los usuarios de lectores de pantalla pueden hacer clic para saltarse cualquier menú de navegación que ya hayan encontrado y que no necesiten en este momento.

Hay tres pasos para crear una opción de omisión de navegación.

1. Agrega un enlace de anclaje justo antes de que comience tu contenido principal:

   <a name= “maincontent” ></a>

2. Agrega una nueva clase en tu CSS:

   .skiplink {display:none}

   Ahora, cualquier cosa que asignes a la clase “skiplink” no se mostrará en el navegador.

3. Agrega este enlace justo después de la <body>declaración de tu página:

   <a class= “skiplink” href= “#startcontent” >Saltar navegación</a>

Atajos de teclado

El atributo accesskey le permite predefinir atajos de teclado a páginas específicas o campos de formulario en su sitio web. Esto es especialmente beneficioso para cualquiera que navega por tu sitio usando solo un teclado, o cuyo uso de un mouse es limitado. Las teclas de acceso son activadas por el usuario manteniendo presionada la tecla ALT y presionando la tecla especificada.

Simplemente defina la clave dentro de un enlace existente a esa página:

<a href= “about.html” accesskey= “1” >Acerca de este sitio</a>

Tenga cuidado de no anular los métodos abreviados de teclado existentes del navegador que aparecen en la barra de herramientas del navegador, como F (Archivo), E (Editar), V (Ver). Para estar seguros, use solo números como claves de acceso; es menos probable que entre en conflicto con las definiciones de accesos directos existentes. No hay listado automático de qué claves de acceso se definen en un sitio, por lo que deberá enumerar las claves que haya definido ya sea en una página separada de su sitio o junto a los enlaces correspondientes.

Hay algunos atajos convencionales:

• ALT-1: Página de inicio
• ALT-2: Saltar al contenido principal
• ALT-9: Comentarios

Aún no todos los navegadores admiten accesskey, pero los que no lo hacen simplemente ignorarán el atributo.