Este tutorial es una guía que, como parte del Manual de estilo de Wikipedia , tiene como objetivo ayudar a quienes crean tablas de datos (o, más frecuentemente, listas ) a garantizar que el contenido sea accesible para todos . Para obtener más información sobre cómo crear y editar tablas, consulte Ayuda:Tabla .
Las pautas de esta página están ordenadas principalmente por prioridad y luego por dificultad. Los niveles de prioridad están determinados por las clasificaciones de Criterios de Éxito de Accesibilidad A, AA y AAA (en orden descendente de importancia como consideraciones de accesibilidad) de las Pautas de Accesibilidad al Contenido Web (WCAG) 2.0 del Consorcio World Wide Web (W3C) . [WCAG 1] La dificultad indica si parece fácil o no para los usuarios de Wikipedia cumplir con las pautas.
Las pautas que se describen aquí siguen básicamente el enfoque de WCAG 2.0 y algunas fuentes adicionales de confianza, como WebAIM , cuando es pertinente. Fue necesaria una revisión por parte de un experto en accesibilidad para garantizar que WCAG 2.0 se interpretara correctamente; esta revisión se realizó en septiembre de 2010. [nota 1]
Wikitexto:
{| class = "wikitable" |+ caption text |- ! scope = "col" | encabezado de columna 1 ! scope = "col" | encabezado de columna 2 ! scope = "col" | encabezado de columna 3 |- ! scope = "row" | encabezado de fila 1 | datos 1 || datos 2 |- ! scope = "row" | encabezado de fila 2 | datos 3 || datos 4 |} Produce:
|+) ! )scope="col"y scope="row")Como se puede ver en el ejemplo anterior, los encabezados de fila se formatean de forma predeterminada como negrita, centrados y con un fondo más oscuro. Este es el comportamiento común en Internet y la representación predeterminada en la mayoría de los navegadores. En algunas circunstancias, puede ser conveniente aplicar un estilo personalizado para un caso específico. La clase plainrowheadersaplicará un formato alineado a la izquierda y de peso normal para que los editores no sientan la necesidad de anular el formato del encabezado con declaraciones CSS en línea para cada celda. [nota 3] Si se usa por sí sola, plainrowheadershará que los encabezados se vean similares a las celdas de datos sin modificar, excepto por el fondo más oscuro.
Para utilizar plainrowheaders, colóquelo (como wikitable) en el classatributo al comienzo de la tabla. El siguiente ejemplo muestra un encabezado de fila alineado a la izquierda y sin negrita con un estilo de fuente personalizado más grande:
Wikitexto:
{| class = "wikitable plainrowheaders" |- ! scope = "col" | encabezado de columna 1 ! scope = "col" | encabezado de columna 2 |- ! scope = "row" style = "font-size: largest;" | encabezado de fila | datos |} Produce:
El marcado de tablas permite incluir títulos y resúmenes , ambos de gran utilidad para hacer que las tablas sean accesibles. El título proporciona un encabezado descriptivo para la tabla y el resumen proporciona una "resumen" de su contenido. Si lo desea, puede pensar en ellos como análogos, respectivamente, al título y al resumen de un artículo de revista.
Todas las tablas de datos necesitan un título que describa sucintamente de qué se trata la tabla. [WCAG 2] Desempeña el papel de encabezado de tabla y se recomienda como una buena práctica. [2] De todos modos, normalmente necesitaría algún tipo de encabezado o descripción que presente una nueva tabla, y para eso existe la función de título. Los títulos de tabla se crean con |+. [nota 4] Un título se puede diseñar con CSS y puede incluir enlaces wiki, citas de referencia, etc. Se puede colocar explícitamente a la izquierda como otros títulos de Wikipedia con style="text-align: left;"(una buena idea especialmente en tablas anchas). Los títulos no se utilizan para tablas de diseño (están en desuso en Wikipedia y en general, pero algunos editores recurren a ellos temporalmente hasta que los editores posteriores codifican en wiki lo que sea que estaban tratando de lograr).
Un caso temporal para no usar el |+título es en ciertas situaciones cuando se utiliza una tabla plegable . A partir de septiembre de 2010 [update], el control de colapso "[hide]" / "[show]" tiene que estar dentro de un encabezado de tabla (hasta que se mejore el script de colapso), y debe ser lo suficientemente grande como para contenerlo. Si la tabla no tiene encabezado, o solo tiene un encabezado muy pequeño, una solución común ha sido colocar el texto del título en un encabezado de tabla al que se puede adjuntar el controlador de colapso. [ aclaración necesaria ]
Ejemplo de un título apropiado de Tobin Bell#Filmografía :
Los títulos deben ser concisos; si la tabla necesita una introducción extensa, proporciónela en prosa normal de un artículo y luego incluya un título más simple. Sin embargo, los títulos de tablas que consisten en una sola palabra como "Actor", "Película" o "Televisión" (como en una revisión anterior de la filmografía de Tobin Bell) son inadecuados, ya que no son lo suficientemente descriptivos.
No coloque encabezados de columnas en el medio de una tabla para separarla visualmente. Por ejemplo, un lector de pantalla que lea la celda "Stuttgart, Alemania" podría asociar la celda con los siguientes encabezados: "Lugar, Representando a la Unión Soviética, Representando a Bielorrusia". Se leen en voz alta tres encabezados. El primero y el tercero son correctos y esperados. Pero "Representando a la Unión Soviética" no se aplica a la mitad inferior de la tabla y una máquina no lo entiende. Por lo tanto, una máquina no podrá asociar el encabezado y las celdas correctamente y proporcionará información engañosa sobre la estructura de la tabla al usuario.
En la mayoría de los casos, la solución más sencilla es dividir la tabla en varias subtablas con subtítulos explicativos (segundo ejemplo).
De Vasiliy Kaptyukh y producido por {{ AchievementTable }} :
Se pueden encontrar otros ejemplos similares en Yvonne van Gennip, Masters Athletics World Records y Comparación de motores de diseño (hojas de estilo en cascada)#Selectors.
La primera solución donde la tabla se divide en varias subtablas.
Una alternativa que requiere un poco más de tiempo para implementar es agregar una columna para la representación.
A diferencia de las tablas simples, que solo tienen encabezados que abarcan una columna ( ! scope="col" | ) o una fila ( ! scope="row" | ), algunos encabezados pueden abarcar varias columnas o filas con el uso de los atributos colspano rowspan. Para definir claramente las relaciones y evitar problemas de accesibilidad, utilice ! scope="colgroup" colspan="2" | cuando un encabezado de columna abarque dos columnas y ! scope="rowgroup" rowspan="2" | cuando un encabezado de fila abarque dos filas, ajustando el número si abarca más. [WCAG 4]
Wikitexto:
{| class = "wikitable" |- ! scope = "col" rowspan = "2" | encabezado de columna 1 ! scope = "col" rowspan = "2" | encabezado de columna 2 ! scope = "colgroup" colspan = "2" | grupo de encabezado de columna |- ! scope = "col" | encabezado de columna 3 ! scope = "col" | encabezado de columna 4 |- ! scope = "rowgroup" rowspan = "2" | grupo de encabezado de fila ! scope = "row" | encabezado de fila 1 | datos || datos |- ! scope = "row" | encabezado de fila 2 | datos || datos |- ! scope = "row" colspan = "2" | encabezado de fila 3 | datos || datos |} Produce:
Para las tablas con encabezados más complejos, se recomienda simplificar la tabla o dividirla en tablas más pequeñas. Cuando esto no sea posible, debe asociar cada celda a sus respectivos encabezados utilizando los atributos idy headersen lugar de scope. En los encabezados, establezca iden un valor sin espaciar que sea único en la página. En las celdas que se describen mediante encabezados, establezca los "encabezados" en una lista espaciada de los valores "id" descriptivos en un orden en el que un lector de pantalla debería leerlos. [WCAG 5] Por ejemplo, el siguiente marcado tiene el encabezado "Compañía" que describe la empresa "ABC" ( ! id="col1" | Companyy | headers="col1" | ABC).
A continuación, se muestra un ejemplo de una tabla compleja con encabezados que no son visualmente claros, pero que utiliza idy headersen lugar de scopepara asociar los encabezados de columnas y filas a celdas individuales. Nuevamente, se recomienda simplificar la tabla para que los encabezados sean visualmente claros dividiéndola en una tabla "d" y una "e" si es posible, donde el texto en las celdas "d" y "e" se mueve al título de cada tabla.
Wikitexto:
{| clase = "wikitable" |- ! id = "a" | a ! id = "b" | b ! id = "c" | c | - ! colspan = " 3 " id = " d " | d |- ! id = " w " encabezados = " d a " | w ( da) | encabezados = "db w" | dbw | encabezados = "dc w" | dcw |- ! id = "x" encabezados = "d a" | x (da) | encabezados = "db x" | dbx | encabezados = "dc x" | dcx |- ! colspan = "3" id = "e" | e |- ! id = "y" encabezados = "e a" | y (ea) | encabezados = "eb y" | eby | encabezados = "ec y" | ecy |- ! id = "z" encabezados = "e a" | z (ea) | encabezados = "eb z" | ebz | encabezados = "ec z" | ecz |} Produce:
Tenga en cuenta que los colores y las imágenes con contraste que cumplan con los requisitos de accesibilidad se imprimirán bien en escala de grises como efecto inducido (entre otros beneficios).
Las imágenes dentro de una tabla deben cumplir con los requisitos generales de Wikipedia:Texto alternativo para imágenes . Sin embargo, los íconos pequeños son el caso principal que se encuentra en una tabla. Se dividen en dos categorías:
indica un aumento, tiene |alt=increase);|link=|alt=). Cuando no se puedan desvincular, bastará con un texto alternativo mínimo.Tenga en cuenta que las imágenes en los encabezados pueden resultar especialmente molestas para los usuarios de lectores de pantalla si no se utilizan correctamente. Si la imagen no cumple con los criterios anteriores, el nombre del archivo formará parte del título del encabezado. El nombre del archivo se leerá en voz alta en cada celda debajo del encabezado que contenga el icono. El texto alternativo también se repetirá como el nombre del archivo, lo que también puede resultar molesto si no es relevante para el tema o es demasiado largo.
Los colores dentro de una tabla deben cumplir con los requisitos de color .
Pero lo más importante es que la información no debe transmitirse únicamente mediante el color. La información también debe estar disponible en forma textual. También se puede utilizar una nota al pie o un signo textual [nota 5] para indicar que una celda tiene un significado particular.
Del Calendario fiscal#Cuadro de diferentes años fiscales:
Nota: Este es un ejemplo de uso de color en lugar de proporcionar tablas accesibles. Si el título de la tabla se incluye en el encabezado de la tabla, la tabla no será accesible.
Leyenda: las celdas marcadas con " ✓ " están incluidas en el año fiscal.
De Dwain Chambers (con título y estructura de tabla mejorados, pero el uso original del color es bueno):
Las tablas anidadas pueden resultar confusas para los usuarios de lectores de pantalla ; sin embargo, con un uso correcto, se puede navegar por ellas tan bien como con cualquier otro enfoque de codificación hasta obtener la visualización deseada.
El principio clave en su diseño e implementación es mantener un flujo normal, es decir, garantizar que el orden del contenido en el código de la página coincida con el orden en el que se presentará el contenido. Esto también se aplica a otros enfoques de codificación, como los divs con estilo CSS o los atributos de celda HTML rowspan y colspan.
La anidación de tablas de datos con celdas de encabezado también dificulta que los lectores asistentes las analicen de manera sensata, y se debe evitar.
Las tablas anidadas pueden ser el método más adecuado cuando las celdas de la tabla principal se deben subdividir con saltos de fila o columna internos desiguales. Tenga en cuenta que cada tabla debe comenzar en una nueva línea.
En el siguiente ejemplo, se utilizan tablas anidadas para mostrar subtablas con diferentes alturas de celda:
Wikitexto:
{| class = "wikitable" | {| class = "wikitable" | Insertar 1up |- | Insertar 1down: < br > < br > Más alto que insertar 1up |} | {| class = "wikitable" | < br > Insertar 2 < br > altura completa < br > |} | {| class = "wikitable" | Insertar 3up < br > < br > Celda alta aquí |- | Insertar 3down |} | {| class = "wikitable" | Insertar 4up < br > |- | Insertar 4down < br > Igual que el anterior |} |} Produce:
En comparación, el uso de rowspan no solo requeriría un cuidadoso manejo de las posiciones y los valores, sino que interrumpiría el flujo normal, dividiendo cada subconjunto de datos e incluso provocando que Insert 3down e Insert 4down se lean en el orden incorrecto:
Wikitexto:
{| class = "wikitable" | Insertar 1up | rowspan = "4" | altura completa | rowspan = "3" | Insertar 3up < br > < br > Celda alta aquí | rowspan = "2" | Insertar 4up |- | rowspan = "3" | Insertar 1down: < br > < br > Más alto que insertar 1up |- | rowspan = "2" | Insertar 4down < br > Igual que arriba |- | Insertar 3down |} Produce:
CSS también tiene propiedades de visualización de tablas que se pueden aplicar a otros elementos, como los divs, y se pueden usar para crear el diseño con el flujo normal correcto. Pero requiere una hoja de estilo personalizada que defina las distintas clases de entidad sustituta. Además, rompe la separación formal entre la estructura HTML y el estilo CSS al usar el lenguaje de estilo para representar la estructura correcta en la pantalla. No es necesario y no se recomienda.
Puede encontrar información adicional en Tutorial de tablas de datos/Pautas internas . Sin embargo, estas pautas no están destinadas a ser aplicadas y solo sirven como recurso para los miembros de WikiProject Accessibility.
Estos son ejemplos de tablas leídas en voz alta por lectores de pantalla. Pueden ser útiles como ejemplos concretos para mostrar a la comunidad, cuando esta tenga dificultades para comprender cómo una tabla accesible beneficia a un usuario de lector de pantalla.
scopeattribute on td" quedará obsoleto en HTML 5. Para prepararnos para el cambio, debemos usar únicamente scopeattribute on th.<caption>Caption here</caption><table summary="Summary text here.">El sistema actual reemplaza el sistema WCAG 1.0 de 1999 de niveles de conformidad (también A, AA y AAA) con una lista de verificación de recomendaciones de Prioridad 1, 2 y 3; si bien estas corresponden aproximadamente a los niveles de éxito actuales A, AA y AAA, la versión 2.0 ha agregado muchos criterios que no estaban presentes en la versión 1.0. Consulte "En qué se diferencia la versión WCAG 2.0 de la versión WCAG 1.0"