{"id":24138,"date":"2026-04-20T10:50:24","date_gmt":"2026-04-20T08:50:24","guid":{"rendered":"https:\/\/www.ideat.net\/site\/marketing-digital\/marketing-digital2\/texto-alternativo-para-el-contenido-generado-desde-css\/"},"modified":"2026-04-20T10:50:24","modified_gmt":"2026-04-20T08:50:24","slug":"texto-alternativo-para-el-contenido-generado-desde-css","status":"publish","type":"post","link":"https:\/\/www.ideat.net\/site\/marketing-digital\/marketing-digital2\/texto-alternativo-para-el-contenido-generado-desde-css\/","title":{"rendered":"Texto alternativo para el contenido generado desde CSS"},"content":{"rendered":"<p><a href=\"https:\/\/accesibilidadenlaweb.blogspot.com\/\" target=\"_blank\">https:\/\/accesibilidadenlaweb.blogspot.com\/<\/a><\/p>\n<div>\nA trav\u00e9s de\u00a0<a href=\"https:\/\/www.maxdesign.com.au\/articles\/test-cases-css-content.html\">Tests for CSS generated content alternative text<\/a> he aprendido que se puede definir un texto alternativo para el contenido generado desde CSS. Este art\u00edculo analiza el uso de la propiedad content en CSS para generar contenido visual (como texto o iconos) y su implicaci\u00f3n en la accesibilidad. Cuando este contenido es relevante, deber\u00eda contar con una alternativa accesible para personas que utilizan productos de apoyo como los lectores de pantalla. Para ello, la especificaci\u00f3n de CSS permite incluir un texto alternativo mediante una barra (\/) dentro de la propiedad content, donde lo anterior a la barra se muestra visualmente y lo posterior se destina a los productos de apoyo.<\/p>\n<p>Seg\u00fan la especificaci\u00f3n, este texto alternativo debe sustituir al contenido visual en lectores de pantalla y puede ser expuesto en el \u00e1rbol de accesibilidad en navegadores compatibles.<\/p>\n<p>Pero como suele ocurrir muchas veces, una cosa es la teor\u00eda (la especificaci\u00f3n) y otra la pr\u00e1ctica (lo que realmente funciona al combinar un navegador con un lector de pantalla en un sistema operativo espec\u00edfico). Se presentan cuatro casos de prueba: (1) solo contenido generado, que generalmente se anuncia correctamente; (2) solo texto alternativo, con resultados inconsistentes seg\u00fan navegador y lector de pantalla; (3) texto alternativo vac\u00edo, donde no debe anunciarse nada; y (4) combinaci\u00f3n de contenido visual y texto alternativo, donde este \u00faltimo deber\u00eda reemplazar al primero, aunque tambi\u00e9n con inconsistencias en algunos entornos.<\/p>\n<p>En conjunto, los resultados muestran que el soporte de esta funcionalidad a\u00fan no es completamente fiable entre diferentes combinaciones de navegadores y lectores de pantalla. Por ello, se recomienda tratar esta t\u00e9cnica como experimental y, para informaci\u00f3n importante, seguir utilizando HTML sem\u00e1ntico y atributos\u00a0ARIA en lugar de depender \u00fanicamente del contenido generado por CSS para garantizar la accesibilidad.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/accesibilidadenlaweb.blogspot.com\/ A trav\u00e9s de\u00a0Tests for CSS generated content alternative text he aprendido que se puede definir un texto alternativo para el contenido generado desde CSS. Este art\u00edculo analiza el uso de la propiedad content en CSS para generar contenido visual (como texto o iconos) y su implicaci\u00f3n en la accesibilidad. Cuando este contenido es relevante, &#8230; <a title=\"Texto alternativo para el contenido generado desde CSS\" class=\"read-more\" href=\"https:\/\/www.ideat.net\/site\/marketing-digital\/marketing-digital2\/texto-alternativo-para-el-contenido-generado-desde-css\/\" aria-label=\"Leer m\u00e1s sobre Texto alternativo para el contenido generado desde CSS\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":1,"featured_media":24139,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/imgv2-1-f.scribdassets.com\/img\/document\/655212568\/original\/9efce86d80\/1704262111?v=1","fifu_image_alt":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-24138","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-digital2"],"fifu_image_url":"https:\/\/imgv2-1-f.scribdassets.com\/img\/document\/655212568\/original\/9efce86d80\/1704262111?v=1","fifu_redirection_url":"https:\/\/es.scribd.com\/document\/655212568\/Final-Alternativo-del-Cuento","_links":{"self":[{"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/posts\/24138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/comments?post=24138"}],"version-history":[{"count":0,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/posts\/24138\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/media\/24139"}],"wp:attachment":[{"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/media?parent=24138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/categories?post=24138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/tags?post=24138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}