{"id":6602,"date":"2026-08-27T07:00:00","date_gmt":"2026-08-27T05:00:00","guid":{"rendered":"https:\/\/volcanicinternet.com\/com-fer-accessibles-les-taules-complexes\/"},"modified":"2026-08-26T11:45:15","modified_gmt":"2026-08-26T09:45:15","slug":"como-hacer-accesibles-las-tablas-complejas","status":"publish","type":"post","link":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/","title":{"rendered":"C\u00f3mo hacer accesibles las tablas complejas"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Las tablas <abbr title=\"HyperText Markup Language\" lang=\"en\">HTML<\/abbr> tienen mala fama. A menudo se las considera malas para la accesibilidad, mala pr\u00e1ctica y anticuadas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esta fama solo es justa cuando usamos las tablas para maquetaci\u00f3n. La mayor\u00eda de los sitios web modernos no lo hacen, pero la mayor\u00eda de los correos electr\u00f3nicos s\u00ed. Las tablas tienen valor sem\u00e1ntico (significado) y comportamiento funcional. Las tablas funcionan bien para datos en filas y columnas. No funcionan bien para maquetaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes usar <code>role=\"presentation\"<\/code> para eliminar el valor sem\u00e1ntico y el comportamiento funcional de una tabla. Aun as\u00ed, el orden del contenido en el <abbr title=\"Document Object Model\" lang=\"en\">DOM<\/abbr> debe seguir teniendo sentido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos un ejemplo de una tabla con informaci\u00f3n de inventario de una peque\u00f1a panader\u00eda:<\/p>\n\n\n\n<style data-wp-block-html=\"css\">\ntable {\n    border-collapse: collapse;\n  }\n  caption, th, td {\n    border: 1px solid #666 !important;\n    padding: 0.5rem 0.75rem !important;\n    text-align: left !important;\n    vertical-align: top !important;\n  }\n  caption,\n  table:nth-of-type(1) tr:nth-child(1) td[colspan=\"7\"] {\n    border-bottom: none !important;\n    font-size: 1.25rem !important;\n  }\n  table:not(:has(thead)) tr:nth-child(1) td,\n  table:not(:has(thead)) tr:nth-child(2) td,\n  table:not(:has(thead)) tr:nth-child(3) td,\n  table:not(:has(thead)) tr:nth-child(n+2) td:nth-child(1),\n  table:not(:has(thead)) tr td[rowspan] + td:nth-child(2),\n  caption,\n  table tr th {\n    color: #FF700E !important;\n    font-weight: bold !important;\n  }\n<\/style>\n\n<figure class=\"has-custom-css\"><table class=\"has-fixed-layout\"><tbody><tr><td colspan=\"7\">Inventario semanal por categor\u00eda<\/td><\/tr><tr><td rowspan=\"2\">Categor\u00eda<\/td><td rowspan=\"2\">Art\u00edculo<\/td><td colspan=\"2\">Precios<\/td><td colspan=\"2\">Stock<\/td><td rowspan=\"2\">Estado<\/td><\/tr><tr><td>Coste unitario<\/td><td>Precio de venta<\/td><td>En stock<\/td><td>Nivel de reposici\u00f3n<\/td><\/tr><tr><td rowspan=\"3\">Panes<\/td><td>Baguette<\/td><td>$0.65<\/td><td>$3.25<\/td><td>42<\/td><td>20<\/td><td>OK<\/td><\/tr><tr><td>Pan de masa madre<\/td><td>$0.90<\/td><td>$4.75<\/td><td>15<\/td><td>18<\/td><td>Bajo<\/td><\/tr><tr><td>Pan de centeno<\/td><td>$0.85<\/td><td>$4.50<\/td><td>27<\/td><td>15<\/td><td>OK<\/td><\/tr><tr><td rowspan=\"2\">Boller\u00eda<\/td><td>Croissant de mantequilla<\/td><td>$0.55<\/td><td>$2.95<\/td><td>60<\/td><td>25<\/td><td>OK<\/td><\/tr><tr><td>Danesa de cereza<\/td><td>$0.70<\/td><td>$3.50<\/td><td>8<\/td><td>12<\/td><td>Bajo<\/td><\/tr><tr><td rowspan=\"2\">Tartas<\/td><td>Porci\u00f3n de tarta de zanahoria<\/td><td>$1.10<\/td><td>$4.95<\/td><td>18<\/td><td>10<\/td><td>OK<\/td><\/tr><tr><td>Porci\u00f3n de tarta de queso<\/td><td>$1.25<\/td><td>$5.25<\/td><td>22<\/td><td>10<\/td><td>OK<\/td><\/tr><tr><td colspan=\"2\">Totales<\/td><td>\u2014<\/td><td>\u2014<\/td><td>192 unidades<\/td><td>110 unidades<\/td><td>2 art\u00edculos bajos<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">No se ve mal, \u00bfverdad? El <abbr title=\"Cascading Style Sheets\" lang=\"en\">CSS<\/abbr> hace que las partes sean f\u00e1ciles de distinguir, y la maquetaci\u00f3n tiene sentido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ese es el problema principal. Informaci\u00f3n importante, como las relaciones y la estructura, depende \u00fanicamente de los estilos visuales y la posici\u00f3n. Las personas que usan tecnolog\u00eda de asistencia no pueden acceder a esa informaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al final de este art\u00edculo, encontrar\u00e1s la misma tabla con todo lo que le falta a la primera versi\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos paso a paso.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Celdas de encabezado<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Este es el cambio m\u00e1s f\u00e1cil de hacer. Todas las celdas de la primera tabla usan la etiqueta de celda de datos, <code>&lt;td&gt;<\/code>. Pero HTML tambi\u00e9n tiene una etiqueta de celda de encabezado, <code>&lt;th&gt;<\/code>, para las celdas que act\u00faan como encabezados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Usa el atributo <code>scope<\/code> para marcar una celda de encabezado como encabezado de columna (<code>scope=\"col\"<\/code>) o encabezado de fila (<code>scope=\"row\"<\/code>). Esto te da encabezados en la parte superior de cada columna y un encabezado al inicio de cada fila.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Grupos de filas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una tabla puede tener tanto grupos de columnas como grupos de filas. El atributo scope tambi\u00e9n acepta los valores <code>colgroup<\/code> y <code>rowgroup<\/code> para estos casos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hay 3 grupos de filas principales: la cabecera de la tabla (<code>&lt;thead&gt;<\/code>), el cuerpo de la tabla (<code>&lt;tbody&gt;<\/code>) y el pie de la tabla (<code>&lt;tfoot&gt;<\/code>). Son especialmente \u00fatiles para tablas grandes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En nuestro ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Los encabezados superiores van en la cabecera de la tabla.<\/li>\n\n\n\n<li>Los datos de los productos van en el cuerpo de la tabla.<\/li>\n\n\n\n<li>Los totales van en el pie de la tabla.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Esto facilita la navegaci\u00f3n entre las partes principales.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">T\u00edtulo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Esta parte importa. Un t\u00edtulo (caption) describe el contenido de la tabla para que las personas puedan decidir si necesitan o quieren leer los datos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes varias opciones. Puedes usar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un <code>&lt;caption&gt;<\/code> (o <code>&lt;figcaption><\/code> si la tabla est\u00e1 dentro de un <code>&lt;figure><\/code>)<\/li>\n\n\n\n<li>Texto, como un p\u00e1rrafo, colocado antes de la tabla<\/li>\n\n\n\n<li>Texto en otro elemento, vinculado con el atributo <code>aria-describedby<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Estos m\u00e9todos funcionan igual de bien. Usa solo uno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Una ventaja de <code>&lt;caption&gt;<\/code>: puedes anidar un elemento <code>&lt;details&gt;<\/code> dentro de \u00e9l, con informaci\u00f3n adicional en un desplegable <code>&lt;summary&gt;<\/code>, o a\u00f1adir texto que est\u00e9 oculto visualmente pero que los lectores de pantalla puedan seguir leyendo. Us\u00e9 este segundo enfoque en el ejemplo al final del art\u00edculo. Le da a todo el mundo una etiqueta corta y visible, y a los usuarios de lectores de pantalla un texto m\u00e1s largo con m\u00e1s contexto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nota: el atributo <code>summary<\/code> en el elemento <code>&lt;table&gt;<\/code> est\u00e1 obsoleto en el HTML <span lang=\"en\">Living Standard<\/span>. No lo uses.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Encabezados multinivel<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Esta parte marca la mayor diferencia para las personas que usan tecnolog\u00eda de asistencia, especialmente en tablas complejas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En nuestro ejemplo, tanto las columnas como las filas tienen varios niveles de encabezado. Esto puede parecer complicado, pero la soluci\u00f3n es sencilla.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Primero, a\u00f1ade un atributo <code>id<\/code> \u00fanico a cada celda de encabezado. Luego a\u00f1ade un atributo <code>headers<\/code> a cada celda de datos. Enumera todas las celdas de encabezado con las que se relaciona, tanto de columna como de fila, en todos los niveles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por ejemplo, la celda con el precio de venta de la baguette incluye: <code>headers=\"row-breads row-baguette col-pricing col-retail\"<\/code>. Esto permite que los lectores de pantalla anuncien todos los encabezados relacionados con esa celda.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Las tablas accesibles no son dif\u00edciles de construir. El marcado puede volverse detallado, ya que est\u00e1s vinculando muchas celdas con muchos encabezados. Pero es sencillo de implementar. Y convierte una experiencia lenta y frustrante \u2014desplazarse por datos interminables sin contexto\u2014 en una fuente de informaci\u00f3n clara y utilizable.<\/p>\n\n\n\n<figure class=\"has-custom-css\"><table class=\"has-fixed-layout\">\n  <caption id=\"inventory-caption\">\n    Inventario semanal por categor\u00eda\n    <span id=\"inventory-desc\" class=\"screen-reader-text\">\n      Enumera el coste unitario, el precio de venta, las existencias actuales\n      y el nivel de reposici\u00f3n de cada art\u00edculo de la panader\u00eda, agrupados por\n      categor\u00eda de producto, con los totales en la \u00faltima fila.\n    <\/span>\n  <\/caption>\n  <thead>\n    <tr>\n      <th id=\"col-category\" rowspan=\"2\" scope=\"col\">Categor\u00eda<\/th>\n      <th id=\"col-item\" rowspan=\"2\" scope=\"col\">Art\u00edculo<\/th>\n      <th id=\"col-pricing\" colspan=\"2\" scope=\"colgroup\">Precios<\/th>\n      <th id=\"col-stock\" colspan=\"2\" scope=\"colgroup\">Stock<\/th>\n      <th id=\"col-status\" rowspan=\"2\" scope=\"col\">Estado<\/th>\n    <\/tr>\n    <tr>\n      <th id=\"col-unitcost\" headers=\"col-pricing\" scope=\"col\">Coste unitario<\/th>\n      <th id=\"col-retail\" headers=\"col-pricing\" scope=\"col\">Precio de venta<\/th>\n      <th id=\"col-instock\" headers=\"col-stock\" scope=\"col\">En stock<\/th>\n      <th id=\"col-reorder\" headers=\"col-stock\" scope=\"col\">Nivel de reposici\u00f3n<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <th id=\"row-breads\" rowspan=\"3\" scope=\"rowgroup\">Panes<\/th>\n      <th id=\"row-baguette\" scope=\"row\">Baguette<\/th>\n      <td headers=\"row-breads row-baguette col-pricing col-unitcost\">$0.65<\/td>\n      <td headers=\"row-breads row-baguette col-pricing col-retail\">$3.25<\/td>\n      <td headers=\"row-breads row-baguette col-stock col-instock\">42<\/td>\n      <td headers=\"row-breads row-baguette col-stock col-reorder\">20<\/td>\n      <td headers=\"row-breads row-baguette col-status\">OK<\/td>\n    <\/tr>\n    <tr>\n      <th id=\"row-sourdough\" scope=\"row\">Pan de masa madre<\/th>\n      <td headers=\"row-breads row-sourdough col-pricing col-unitcost\">$0.90<\/td>\n      <td headers=\"row-breads row-sourdough col-pricing col-retail\">$4.75<\/td>\n      <td headers=\"row-breads row-sourdough col-stock col-instock\">15<\/td>\n      <td headers=\"row-breads row-sourdough col-stock col-reorder\">18<\/td>\n      <td headers=\"row-breads row-sourdough col-status\" class=\"low-stock\">Bajo<\/td>\n    <\/tr>\n    <tr>\n      <th id=\"row-rye\" scope=\"row\">Pan de centeno<\/th>\n      <td headers=\"row-breads row-rye col-pricing col-unitcost\">$0.85<\/td>\n      <td headers=\"row-breads row-rye col-pricing col-retail\">$4.50<\/td>\n      <td headers=\"row-breads row-rye col-stock col-instock\">27<\/td>\n      <td headers=\"row-breads row-rye col-stock col-reorder\">15<\/td>\n      <td headers=\"row-breads row-rye col-status\">OK<\/td>\n    <\/tr>\n    <tr>\n      <th id=\"row-pastries\" rowspan=\"2\" scope=\"rowgroup\">Boller\u00eda<\/th>\n      <th id=\"row-croissant\" scope=\"row\">Croissant de mantequilla<\/th>\n      <td headers=\"row-pastries row-croissant col-pricing col-unitcost\">$0.55<\/td>\n      <td headers=\"row-pastries row-croissant col-pricing col-retail\">$2.95<\/td>\n      <td headers=\"row-pastries row-croissant col-stock col-instock\">60<\/td>\n      <td headers=\"row-pastries row-croissant col-stock col-reorder\">25<\/td>\n      <td headers=\"row-pastries row-croissant col-status\">OK<\/td>\n    <\/tr>\n    <tr>\n      <th id=\"row-danish\" scope=\"row\">Danesa de cereza<\/th>\n      <td headers=\"row-pastries row-danish col-pricing col-unitcost\">$0.70<\/td>\n      <td headers=\"row-pastries row-danish col-pricing col-retail\">$3.50<\/td>\n      <td headers=\"row-pastries row-danish col-stock col-instock\">8<\/td>\n      <td headers=\"row-pastries row-danish col-stock col-reorder\">12<\/td>\n      <td headers=\"row-pastries row-danish col-status\" class=\"low-stock\">Bajo<\/td>\n    <\/tr>\n    <tr>\n      <th id=\"row-cakes\" rowspan=\"2\" scope=\"rowgroup\">Tartas<\/th>\n      <th id=\"row-carrot\" scope=\"row\">Porci\u00f3n de tarta de zanahoria<\/th>\n      <td headers=\"row-cakes row-carrot col-pricing col-unitcost\">$1.10<\/td>\n      <td headers=\"row-cakes row-carrot col-pricing col-retail\">$4.95<\/td>\n      <td headers=\"row-cakes row-carrot col-stock col-instock\">18<\/td>\n      <td headers=\"row-cakes row-carrot col-stock col-reorder\">10<\/td>\n      <td headers=\"row-cakes row-carrot col-status\">OK<\/td>\n    <\/tr>\n    <tr>\n      <th id=\"row-cheesecake\" scope=\"row\">Porci\u00f3n de tarta de queso<\/th>\n      <td headers=\"row-cakes row-cheesecake col-pricing col-unitcost\">$1.25<\/td>\n      <td headers=\"row-cakes row-cheesecake col-pricing col-retail\">$5.25<\/td>\n      <td headers=\"row-cakes row-cheesecake col-stock col-instock\">22<\/td>\n      <td headers=\"row-cakes row-cheesecake col-stock col-reorder\">10<\/td>\n      <td headers=\"row-cakes row-cheesecake col-status\">OK<\/td>\n    <\/tr>\n  <\/tbody>\n  <tfoot>\n    <tr>\n      <th id=\"row-totals\" colspan=\"2\" scope=\"row\">Totales<\/th>\n      <td headers=\"row-totals col-pricing col-unitcost\">\u2014<\/td>\n      <td headers=\"row-totals col-pricing col-retail\">\u2014<\/td>\n      <td headers=\"row-totals col-stock col-instock\">192 unidades<\/td>\n      <td headers=\"row-totals col-stock col-reorder\">110 unidades<\/td>\n      <td headers=\"row-totals col-status\">2 art\u00edculos bajos<\/td>\n    <\/tr>\n  <\/tfoot>\n<\/table>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Las tablas HTML tienen mala fama. A menudo&#8230;<\/p>\n","protected":false},"author":5,"featured_media":6606,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"wpce_document_language":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"categories":[29],"tags":[],"class_list":["post-6602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accesibilidad"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tablas HTML accesibles: gu\u00eda de sem\u00e1ntica y lectores de pantalla<\/title>\n<meta name=\"description\" content=\"Aprende a crear tablas HTML accesibles con encabezados, grupos de filas, t\u00edtulos y relaciones multinivel para lectores de pantalla.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tablas HTML accesibles: gu\u00eda de sem\u00e1ntica y lectores de pantalla\" \/>\n<meta property=\"og:description\" content=\"Aprende a crear tablas HTML accesibles con encabezados, grupos de filas, t\u00edtulos y relaciones multinivel para lectores de pantalla.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/\" \/>\n<meta property=\"og:site_name\" content=\"Volcanic Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/volcanicinternet\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-27T05:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/volcanicinternet.com\/app\/uploads\/2026\/08\/Making-complex-tables-accessible.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fran Rosa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@volcanictech\" \/>\n<meta name=\"twitter:site\" content=\"@volcanictech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fran Rosa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/\"},\"author\":{\"name\":\"Fran Rosa\",\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/#\\\/schema\\\/person\\\/409c516eedd21dff3ffd020f75ba42fe\"},\"headline\":\"C\u00f3mo hacer accesibles las tablas complejas\",\"datePublished\":\"2026-08-27T05:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/\"},\"wordCount\":896,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/volcanicinternet.com\\\/app\\\/uploads\\\/2026\\\/08\\\/Making-complex-tables-accessible.png\",\"articleSection\":[\"Accesibilidad\"],\"inLanguage\":\"es-ES\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/\",\"url\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/\",\"name\":\"Tablas HTML accesibles: gu\u00eda de sem\u00e1ntica y lectores de pantalla\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/volcanicinternet.com\\\/app\\\/uploads\\\/2026\\\/08\\\/Making-complex-tables-accessible.png\",\"datePublished\":\"2026-08-27T05:00:00+00:00\",\"description\":\"Aprende a crear tablas HTML accesibles con encabezados, grupos de filas, t\u00edtulos y relaciones multinivel para lectores de pantalla.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/#breadcrumb\"},\"inLanguage\":\"es-ES\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/#primaryimage\",\"url\":\"https:\\\/\\\/volcanicinternet.com\\\/app\\\/uploads\\\/2026\\\/08\\\/Making-complex-tables-accessible.png\",\"contentUrl\":\"https:\\\/\\\/volcanicinternet.com\\\/app\\\/uploads\\\/2026\\\/08\\\/Making-complex-tables-accessible.png\",\"width\":1000,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/como-hacer-accesibles-las-tablas-complejas\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo hacer accesibles las tablas complejas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/\",\"name\":\"Volcanic Internet\",\"description\":\"P\u00e0gines web, aplicacions m\u00f2bils, desenvolupament a mida, Implantaci\u00f3 Claude\",\"publisher\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-ES\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/#organization\",\"name\":\"Volcanic Internet\",\"url\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/volcanicinternet.com\\\/app\\\/uploads\\\/2026\\\/08\\\/volcanic_logo.png\",\"contentUrl\":\"https:\\\/\\\/volcanicinternet.com\\\/app\\\/uploads\\\/2026\\\/08\\\/volcanic_logo.png\",\"width\":642,\"height\":80,\"caption\":\"Volcanic Internet\"},\"image\":{\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/volcanicinternet\",\"https:\\\/\\\/x.com\\\/volcanictech\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/volcanic-internet\"],\"description\":\"Implantaci\u00f3n de IA con Claude, desarrollo web y accesibilidad digital\",\"areaServed\":[\"ES\",\"EU\",\"LATAM\"],\"knowsAbout\":[\"Claude IA\",\"Desarrollo Web\",\"Accesibilidad Web\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/#\\\/schema\\\/person\\\/409c516eedd21dff3ffd020f75ba42fe\",\"name\":\"Fran Rosa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1d51829327994fc3b0c6f1d6d853c8242a493a21590d75432104e00e4425ba2b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1d51829327994fc3b0c6f1d6d853c8242a493a21590d75432104e00e4425ba2b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1d51829327994fc3b0c6f1d6d853c8242a493a21590d75432104e00e4425ba2b?s=96&d=mm&r=g\",\"caption\":\"Fran Rosa\"},\"description\":\"Senior developer and advocate focused on peope-first development\",\"url\":\"https:\\\/\\\/volcanicinternet.com\\\/es\\\/author\\\/fran-rosa\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tablas HTML accesibles: gu\u00eda de sem\u00e1ntica y lectores de pantalla","description":"Aprende a crear tablas HTML accesibles con encabezados, grupos de filas, t\u00edtulos y relaciones multinivel para lectores de pantalla.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/","og_locale":"es_ES","og_type":"article","og_title":"Tablas HTML accesibles: gu\u00eda de sem\u00e1ntica y lectores de pantalla","og_description":"Aprende a crear tablas HTML accesibles con encabezados, grupos de filas, t\u00edtulos y relaciones multinivel para lectores de pantalla.","og_url":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/","og_site_name":"Volcanic Internet","article_publisher":"https:\/\/www.facebook.com\/volcanicinternet","article_published_time":"2026-08-27T05:00:00+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/volcanicinternet.com\/app\/uploads\/2026\/08\/Making-complex-tables-accessible.png","type":"image\/png"}],"author":"Fran Rosa","twitter_card":"summary_large_image","twitter_creator":"@volcanictech","twitter_site":"@volcanictech","twitter_misc":{"Written by":"Fran Rosa","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/#article","isPartOf":{"@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/"},"author":{"name":"Fran Rosa","@id":"https:\/\/volcanicinternet.com\/es\/#\/schema\/person\/409c516eedd21dff3ffd020f75ba42fe"},"headline":"C\u00f3mo hacer accesibles las tablas complejas","datePublished":"2026-08-27T05:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/"},"wordCount":896,"commentCount":0,"publisher":{"@id":"https:\/\/volcanicinternet.com\/es\/#organization"},"image":{"@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/#primaryimage"},"thumbnailUrl":"https:\/\/volcanicinternet.com\/app\/uploads\/2026\/08\/Making-complex-tables-accessible.png","articleSection":["Accesibilidad"],"inLanguage":"es-ES","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/","url":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/","name":"Tablas HTML accesibles: gu\u00eda de sem\u00e1ntica y lectores de pantalla","isPartOf":{"@id":"https:\/\/volcanicinternet.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/#primaryimage"},"image":{"@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/#primaryimage"},"thumbnailUrl":"https:\/\/volcanicinternet.com\/app\/uploads\/2026\/08\/Making-complex-tables-accessible.png","datePublished":"2026-08-27T05:00:00+00:00","description":"Aprende a crear tablas HTML accesibles con encabezados, grupos de filas, t\u00edtulos y relaciones multinivel para lectores de pantalla.","breadcrumb":{"@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/#breadcrumb"},"inLanguage":"es-ES","potentialAction":[{"@type":"ReadAction","target":["https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/"]}]},{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/#primaryimage","url":"https:\/\/volcanicinternet.com\/app\/uploads\/2026\/08\/Making-complex-tables-accessible.png","contentUrl":"https:\/\/volcanicinternet.com\/app\/uploads\/2026\/08\/Making-complex-tables-accessible.png","width":1000,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/volcanicinternet.com\/es\/como-hacer-accesibles-las-tablas-complejas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/volcanicinternet.com\/es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo hacer accesibles las tablas complejas"}]},{"@type":"WebSite","@id":"https:\/\/volcanicinternet.com\/es\/#website","url":"https:\/\/volcanicinternet.com\/es\/","name":"Volcanic Internet","description":"P\u00e0gines web, aplicacions m\u00f2bils, desenvolupament a mida, Implantaci\u00f3 Claude","publisher":{"@id":"https:\/\/volcanicinternet.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/volcanicinternet.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-ES"},{"@type":"Organization","@id":"https:\/\/volcanicinternet.com\/es\/#organization","name":"Volcanic Internet","url":"https:\/\/volcanicinternet.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/volcanicinternet.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/volcanicinternet.com\/app\/uploads\/2026\/08\/volcanic_logo.png","contentUrl":"https:\/\/volcanicinternet.com\/app\/uploads\/2026\/08\/volcanic_logo.png","width":642,"height":80,"caption":"Volcanic Internet"},"image":{"@id":"https:\/\/volcanicinternet.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/volcanicinternet","https:\/\/x.com\/volcanictech","https:\/\/es.linkedin.com\/company\/volcanic-internet"],"description":"Implantaci\u00f3n de IA con Claude, desarrollo web y accesibilidad digital","areaServed":["ES","EU","LATAM"],"knowsAbout":["Claude IA","Desarrollo Web","Accesibilidad Web"]},{"@type":"Person","@id":"https:\/\/volcanicinternet.com\/es\/#\/schema\/person\/409c516eedd21dff3ffd020f75ba42fe","name":"Fran Rosa","image":{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/secure.gravatar.com\/avatar\/1d51829327994fc3b0c6f1d6d853c8242a493a21590d75432104e00e4425ba2b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1d51829327994fc3b0c6f1d6d853c8242a493a21590d75432104e00e4425ba2b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1d51829327994fc3b0c6f1d6d853c8242a493a21590d75432104e00e4425ba2b?s=96&d=mm&r=g","caption":"Fran Rosa"},"description":"Senior developer and advocate focused on peope-first development","url":"https:\/\/volcanicinternet.com\/es\/author\/fran-rosa\/"}]}},"taxonomy_info":{"category":[{"value":29,"label":"Accesibilidad"}]},"featured_image_src_large":["https:\/\/volcanicinternet.com\/app\/uploads\/2026\/08\/Making-complex-tables-accessible.png",1000,500,false],"author_info":{"display_name":"Fran Rosa","author_link":"https:\/\/volcanicinternet.com\/es\/author\/fran-rosa\/"},"comment_info":0,"category_info":[{"term_id":29,"name":"Accesibilidad","slug":"accesibilidad","term_group":0,"term_taxonomy_id":29,"taxonomy":"category","description":"","parent":0,"count":19,"filter":"raw","cat_ID":29,"category_count":19,"category_description":"","cat_name":"Accesibilidad","category_nicename":"accesibilidad","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/posts\/6602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/comments?post=6602"}],"version-history":[{"count":3,"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/posts\/6602\/revisions"}],"predecessor-version":[{"id":6624,"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/posts\/6602\/revisions\/6624"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/media\/6606"}],"wp:attachment":[{"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/media?parent=6602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/categories?post=6602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/volcanicinternet.com\/es\/wp-json\/wp\/v2\/tags?post=6602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}