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 a menudo 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 A, AA y AAA de los Criterios de éxito de accesibilidad (en orden descendente de importancia como consideraciones de accesibilidad) de las Pautas de accesibilidad al contenido web (WCAG) 2.0 del World Wide Web Consortium (W3C) . [WCAG 1] La dificultad indica si parece fácil o no para los usuarios de Wikipedia cumplir con las pautas.
Las pautas aquí siguen esencialmente el enfoque de WCAG 2.0 y algunas fuentes acreditadas adicionales, como WebAIM , cuando sea relevante. Fue necesaria una revisión por parte de un experto en accesibilidad para garantizar que las WCAG 2.0 se interpretaran correctamente; esta revisión se realizó en septiembre de 2010. [nota 1]
Wikitexto:
{| clase = "wikitable" |+ texto del título |- ! alcance = "col" | encabezado de columna 1 ! alcance = "col" | encabezado de columna 2 ! alcance = "col" | encabezado de columna 3 |- ! alcance = "fila" | encabezado de fila 1 | datos 1 || datos 2 |- ! alcance = "fila" | 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 tienen el formato predeterminado en negrita, centrado 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á 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] Usado solo, plainrowheadershará que los encabezados parezcan similares a las celdas de datos no modificadas, excepto por el fondo más oscuro.
Para usar plainrowheaders, colóquelo (como wikitable) en el classatributo al principio de la tabla. El siguiente ejemplo muestra un encabezado de fila alineado a la izquierda y sin negrita con un estilo de fuente más grande personalizado:
Wikitexto:
{| clase = "encabezados planos wikitables" |- ! alcance = "col" | encabezado de columna 1 ! alcance = "col" | encabezado de columna 2 |- ! alcance = "fila" estilo = "tamaño de fuente: más grande;" | encabezado de fila | datos |} Produce:
El marcado de tablas proporciona 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 "cápsula" de su contenido. Si lo desea, puede considerarlos análogos, respectivamente, al título de un artículo de revista y a su resumen.
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 un encabezado de tabla y se recomienda como una mejor práctica. [2] De todos modos, normalmente necesitarías algún tipo de encabezado o descripción que introduzca una nueva tabla, y para eso existe la función de título. Los títulos de las tablas están hechos con |+. [nota 4] Un título puede diseñarse con CSS y puede incluir enlaces wiki, citas de referencia, etc. Puede colocarse explícitamente a la izquierda como otros títulos de Wikipedia style="text-align: left;"(una buena idea, especialmente en tablas anchas). Los subtítulos no se utilizan para las tablas de diseño (estos están en desuso en Wikipedia y en general, pero algunos editores recurren a ellos temporalmente hasta que los editores posteriores codifiquen en wiki cualquier cosa que estuvieran tratando de lograr).
Un caso temporal para no utilizar el |+título es en determinadas situaciones cuando se utiliza una mesa plegable . A partir de septiembre de 2010 [update], el control de colapso "[ocultar]"/"[mostrar]" debe estar dentro de un encabezado de tabla (hasta que se mejore el script de colapsabilidad) 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 el controlador de colapso puede adjuntar. [ se necesita aclaración ]
Ejemplo de un título adecuado de Tobin Bell#Filmography :
Los subtítulos deben ser concisos; Si la tabla necesita una introducción extensa, proporcione una en prosa normal de artículo y luego proporcione un título más simple. Sin embargo, los títulos de las 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 columna en el medio de una tabla para separar visualmente la tabla. Por ejemplo, un lector de pantalla que lea la celda "Stuttgart, Alemania" podría asociar la celda con los siguientes encabezados: "Lugar, en representación de la Unión Soviética, en representación de Bielorrusia". Se leen en voz alta tres encabezados. El primero y el tercero son correctos y esperados. Pero "Representar 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) #Selectores.
La primera solución donde la tabla se divide en varias subtablas.
Una alternativa que lleva un poco más de tiempo 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, utilícelo ! 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. [CMCAG 4]
Wikitexto:
{| clase = "wikitable" |- ! alcance = "col" intervalo de filas = "2" | encabezado de columna 1 ! alcance = "col" intervalo de filas = "2" | encabezado de columna 2 ! alcance = "colgroup" colspan = "2" | grupo de encabezado de columna |- ! alcance = "col" | encabezado de columna 3 ! alcance = "col" | encabezado de columna 4 |- ! alcance = "grupo de filas" intervalo de filas = "2" | grupo de encabezado de fila ! alcance = "fila" | encabezado de fila 1 | datos || datos |- ! alcance = "fila" | encabezado de fila 2 | datos || datos |- ! alcance = "fila" colspan = "2" | encabezado de fila 3 | datos || datos |} Produce:
Para 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 idun valor sin espacio 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 de "id" que describen en el orden en que un lector de pantalla debería leerlos. [WCAG 5] Por ejemplo, el siguiente marcado tiene el encabezado "Empresa" 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 usan idy headersen lugar de scopepara asociar 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 "e", si es posible, donde el texto de las celdas "d" y "e" se mueve al título de cada tabla.
Wikitexto:
{| clase = "wikitable" |- ! identificación = "a" | a ! identificación = "b" | b ! identificación = "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 = "da" | x (da) | encabezados = "db x" | dbx | encabezados = "dc x" | dcx |- ! colspan = "3" id = "e" | mi |- ! 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 muy 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 iconos pequeños son el caso principal que se encuentra en una tabla. Se dividen en dos categorías:
indica un aumento que 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 particularmente molestas para los usuarios de lectores de pantalla si no se manejan 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 contiene el ícono. El texto alternativo también se repetirá como el nombre del archivo, lo que también puede resultar una molestia si es irrelevante 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 a pie de página o un signo textual [nota 5] para mostrar que una celda tiene un significado particular.
Del calendario fiscal#Gráfico de diferentes años fiscales:
Nota: Este es un ejemplo del uso de colores en lugar de proporcionar tablas accesibles. Tener el título de la tabla en un encabezado de tabla produce una tabla no 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 el uso correcto, se puede navegar por ellas, así como cualquier otro método de codificación, para llegar a la pantalla deseada.
El principio clave en su diseño e implementación es mantener el flujo normal, es decir, garantizar que el orden del contenido en el código de la página coincida con el orden en que se presentará el contenido. Esto también se aplica a otros enfoques de codificación, como divs con estilo CSS o atributos de celda HTML de rowspan y colspan.
Anidar tablas de datos con celdas de encabezado también dificulta que los lectores de asistencia las analicen con sensatez y debe evitarse.
Las tablas anidadas pueden ser el método más apropiado cuando las celdas de la tabla principal se van a subdividir con saltos internos desiguales de fila o columna. Tenga en cuenta que cada tabla debe comenzar en una nueva línea.
En el siguiente ejemplo, se utilizan tablas anidadas para mostrar subtablas de diferentes alturas de celda:
Wikitexto:
{| clase = "wikitable" | {| clase = "wikitable" | Insertar 1 en adelante |- | Insertar 1 abajo: < br > < br > Más alto que el inserto 1up |} | {| clase = "wikitable" | < br > Insertar 2 < br > altura completa < br > |} | {| clase = "wikitable" | Insertar 3 en adelante < br > < br > Celda alta aquí |- | Insertar 3abajo |} | {| clase = "wikitable" | Insertar 4 arriba < br > |- | Insertar 4down < br > Igual que arriba |} |} Produce:
En comparación, usar rowspan no solo requeriría hacer malabarismos cuidadosos con las posiciones y los valores, sino que rompería el flujo normal, dividiendo cada subconjunto de datos e incluso causando que Insert 3down e Insert 4down se lean en el orden incorrecto:
Wikitexto:
{| clase = "wikitable" | Insertar 1 en adelante | intervalo de filas = "4" | altura completa | intervalo de filas = "3" | Insertar 3 en adelante < br > < br > Celda alta aquí | intervalo de filas = "2" | Insertar 4 arriba |- | intervalo de filas = "3" | Insertar 1 abajo: < br > < br > Más alto que el inserto 1up |- | intervalo de filas = "2" | Insertar 4down < br > Igual que arriba |- | Insertar 3abajo |} Produce:
CSS también tiene propiedades de visualización de tablas que se pueden aplicar a otros elementos, como 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 utilizar el lenguaje de estilo para representar la estructura correcta en pantalla. Es innecesario y no se recomienda.
Puede encontrar información adicional en Tutorial de tablas de datos/Pautas internas . Sin embargo, esta directriz no debe aplicarse y solo sirve 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 la comunidad tiene dificultades para comprender cómo una tabla accesible beneficia a un usuario de lector de pantalla.
scopeatributo activado td" quedará obsoleto en HTML 5. Para prepararnos para el cambio, debemos utilizar únicamente scopeel atributo activado 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 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 diferencian las WCAG 2.0 de las WCAG 1.0"