{"id":20046,"date":"2026-09-16T15:37:28","date_gmt":"2026-09-16T15:37:28","guid":{"rendered":"https:\/\/academy.siteground.com\/es\/?p=20046"},"modified":"2026-09-17T10:28:48","modified_gmt":"2026-09-17T10:28:48","slug":"diseno-web-accesible","status":"publish","type":"post","link":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/","title":{"rendered":"Dise\u00f1o web accesible: hacer de la web un espacio inclusivo"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">El dise\u00f1o web accesible consiste en <strong>tomar decisiones de dise\u00f1o, contenido y navegaci\u00f3n que eliminen barreras<\/strong>, para que <strong>cualquier persona pueda percibir, comprender, navegar e interactuar con tu p\u00e1gina<\/strong>. La accesibilidad forma parte del dise\u00f1o desde el primer d\u00eda y contribuye a crear una mejor experiencia para todos tus visitantes, independientemente de sus capacidades.<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    Puntos clave\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      <strong>Principios de accesibilidad:<\/strong>\n      perceptible, operable, comprensible y robusto.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>WCAG 2.2:<\/strong>\n      versi\u00f3n vigente de las pautas de accesibilidad web, organiza 13 pautas en tres niveles de conformidad: A, AA y AAA.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>10 Best practice de un dise\u00f1o web inclusivo:<\/strong>\n      encabezados jer\u00e1rquicos, tipograf\u00eda legible, espaciado suficiente, texto alternativo,\n      enlaces descriptivos, contraste adecuado, layout escaneable, navegaci\u00f3n por teclado,\n      dise\u00f1o adaptable al zoom y subt\u00edtulos en contenidos multimedia.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Evaluaci\u00f3n:<\/strong>\n      las herramientas autom\u00e1ticas detectan una parte de los problemas de accesibilidad. El resto se descubre navegando con teclado, con zoom y con lectores de pantalla.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      <strong>Website builder:<\/strong>\n      resuelve de f\u00e1brica buena parte de las decisiones t\u00e9cnicas: estructura de encabezados,\n      dise\u00f1o adaptable, contraste y campos de texto alternativo.\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h2 id=\"h-que-es-el-diseno-web-accesible\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%c2%bfque-es-el-diseno-web-accesible\"><\/span>\u00bfQu\u00e9 es el dise\u00f1o web accesible?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La <a href=\"https:\/\/academy.siteground.com\/es\/accesibilidad-web\/\" data-type=\"post\" data-id=\"19569\" target=\"_blank\" rel=\"noopener\">accesibilidad web<\/a> es la pr\u00e1ctica de dise\u00f1ar p\u00e1ginas que puedan usarse con independencia de las capacidades sensoriales, motoras o cognitivas de quien las visita. En la pr\u00e1ctica significa tomar decisiones sobre jerarqu\u00eda, tipograf\u00eda, color, navegaci\u00f3n y contenido que no dejen fuera a nadie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si lo que buscas es el marco conceptual completo, los tipos de accesibilidad y el detalle de la normativa, lo tratamos aparte en nuestra gu\u00eda completa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">De momento, basta con decir que el est\u00e1ndar internacional que lo define son las <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/\" target=\"_blank\" rel=\"noopener nofollow\">Pautas de Accesibilidad para el Contenido Web (WCAG)<\/a>, que publica el W3C. Se apoyan en cuatro principios conocidos por el acr\u00f3nimo POUR (<em>Perceivable, Operable, Understandable, Robust<\/em>, en ingl\u00e9s):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Perceptible.<\/strong> La informaci\u00f3n debe poder percibirse por las v\u00edas sensoriales disponibles. Una imagen sin texto alternativo es muda para un lector de pantalla. Un video sin subt\u00edtulos no existe para quien no puede escucharlo.<\/li>\n\n\n\n<li><strong>Operable.<\/strong> La p\u00e1gina debe poder manejarse con distintos m\u00e9todos de entrada: teclado, lector de pantalla, comandos asistivos. Si un elemento solo responde al puntero, esa parte del sitio es una puerta cerrada.<\/li>\n\n\n\n<li><strong>Comprensible.<\/strong> El contenido tiene que leerse con claridad y la interfaz debe comportarse de forma previsible, con textos legibles y rutas de navegaci\u00f3n coherentes.<\/li>\n\n\n\n<li><strong>Robusto.<\/strong> El sitio debe funcionar hoy y con cada actualizaci\u00f3n, en navegadores, dispositivos y tecnolog\u00edas asistivas distintas.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"h-que-ventajas-ofrece-hacer-accesible-tu-pagina-web\" class=\"wp-block-heading\">\u00bfQu\u00e9 ventajas ofrece hacer accesible tu p\u00e1gina web?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las ventajas van m\u00e1s all\u00e1 del cumplimiento. Una jerarqu\u00eda de encabezados correcta, un contraste suficiente y una navegaci\u00f3n previsible:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mejoran la experiencia de cualquier visitante, especialmente en m\u00f3vil o con conexi\u00f3n lenta.&nbsp;<\/li>\n\n\n\n<li>Tienen un efecto directo en la <a href=\"https:\/\/academy.siteground.com\/es\/que-es-optimizacion-seo-on-page\/\" data-type=\"post\" data-id=\"14430\" target=\"_blank\" rel=\"noopener\">optimizaci\u00f3n SEO on-page<\/a>: los rastreadores interpretan las p\u00e1ginas de forma parecida a un lector de pantalla, as\u00ed que el HTML sem\u00e1ntico, los textos alternativos y una estructura clara los benefician igual.&nbsp;<\/li>\n\n\n\n<li>Comunica algo sobre tu marca, porque un sitio que incluye a todos proyecta responsabilidad.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"h-a-quien-afectan-las-normativas-europeas-de-accesibilidad\" class=\"wp-block-heading\">\u00bfA qui\u00e9n afectan las normativas europeas de accesibilidad?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La normativa europea de accesibilidad afecta a las administraciones p\u00fablicas y a las empresas privadas que ofrecen determinados productos y servicios digitales en la Uni\u00f3n Europea. Eso incluye a pymes, startups y grandes empresas:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/Ley-accesibilidad-UE-a-quien-afecta.jpg\" alt=\"C\u00f3mo afecta la ley de accesibilidad web de la UE a las empresas, las administraciones p\u00fablicas y las empresas privadas.\t\t\n\" class=\"wp-image-20076\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Administraciones p\u00fablicas y entidades privadas<\/strong> que prestan servicios digitales.<\/li>\n\n\n\n<li><strong>Pymes, startups y grandes empresas:<\/strong> si venden, informan o gestionan productos y servicios digitalmente dentro de la Uni\u00f3n Europea, est\u00e1n dentro del \u00e1mbito de aplicaci\u00f3n de la <a href=\"https:\/\/eur-lex.europa.eu\/eli\/dir\/2019\/882\" target=\"_blank\" rel=\"noopener nofollow\">Directiva (UE) 2019\/882<\/a> sobre requisitos de accesibilidad en estos ambitos.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Existen <strong>excepciones<\/strong> seg\u00fan el tipo y el tama\u00f1o de la empresa.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Microempresas que prestan servicios:<\/strong> est\u00e1n exentas de las obligaciones de accesibilidad de la Ley 11\/2023.<\/li>\n\n\n\n<li><strong>Microempresas que venden productos:<\/strong> tienen cargas administrativas simplificadas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Se considera <strong>microempresa<\/strong> la que emplea a menos de 10 personas y cuyo volumen de negocios anual no supera los dos millones de euros, o cuyo balance anual total no supera los dos millones de euros.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En LATAM el marco legal var\u00eda por pa\u00eds, pero las WCAG son una referencia mundial y funcionan igual de bien como est\u00e1ndar t\u00e9cnico fuera de la Uni\u00f3n Europea.<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\"><strong>\ud83d\udca1 Consejo<\/strong><br>Aunque tu empresa est\u00e9 exenta, <strong>los criterios de accesibilidad siguen siendo recomendables en cualquier caso<\/strong>, porque el beneficio en experiencia de usuario y en visibilidad no depende de si la ley te obliga.<\/p><\/div>\n\n\n\n<h2 id=\"h-como-hacer-accesible-una-pagina-web-en-10-pasos\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"como-hacer-accesible-una-pagina-web-en-10-pasos\"><\/span>C\u00f3mo hacer accesible una p\u00e1gina web en 10 pasos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Estos son los 10 pasos que cubren la mayor parte de las barreras que se encuentran en una web de negocio.&nbsp;<\/p>\n\n\n\n<h3 id=\"h-1-utiliza-encabezados-claros-y-jerarquicos\" class=\"wp-block-heading\">1. Utiliza encabezados claros y jer\u00e1rquicos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Los encabezados ayudan a organizar el contenido de la p\u00e1gina. Aqu\u00ed entran los t\u00edtulos que aparecen al comienzo de cada secci\u00f3n y las <a href=\"https:\/\/academy.siteground.com\/es\/meta-etiquetas\/\" data-type=\"post\" data-id=\"18853\" target=\"_blank\" rel=\"noopener\">meta etiquetas<\/a> HTML, que indican la estructura del documento.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ayudan a que el contenido sea m\u00e1s legible y f\u00e1cil de interpretar para los usuarios y los motores de b\u00fasqueda. Para quien usa un lector de pantalla, los encabezados ayudan a orientarse por la p\u00e1gina, pasar de una secci\u00f3n a otra y encontrar r\u00e1pidamente lo que busca. Cuanto m\u00e1s larga sea la p\u00e1gina, m\u00e1s diferencia marca una jerarqu\u00eda bien hecha.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/1.-Encabezados-jerarquicos.jpg\" alt=\"Comparaci\u00f3n entre una estructura incorrecta y una estructura correcta de encabezados en una p\u00e1gina web.\n\" class=\"wp-image-20077\" \/><\/figure>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Para conseguir una estructura de encabezados correcta:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      Usa un solo <strong>H1<\/strong> por p\u00e1gina, normalmente el t\u00edtulo principal.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      Mant\u00e9n el orden l\u00f3gico, sin pasar de un <strong>H2<\/strong> a un <strong>H4<\/strong>.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      Escribe encabezados breves y descriptivos, coherentes con lo que viene despu\u00e9s.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      No uses un encabezado solo para conseguir texto m\u00e1s grande. Si necesitas eso, es trabajo del CSS.\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h3 id=\"h-2-elige-fuentes-faciles-de-leer\" class=\"wp-block-heading\">2. Elige fuentes f\u00e1ciles de leer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Una tipograf\u00eda legible reduce el esfuerzo de lectura para personas con baja visi\u00f3n, dislexia o dificultades cognitivas, y mejora la experiencia de todos los dem\u00e1s en pantallas peque\u00f1as.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/2.-Textos-legibles.jpg\" alt=\"Comparaci\u00f3n entre una tipograf\u00eda dif\u00edcil de leer y otra m\u00e1s legible en una p\u00e1gina web.\n\" class=\"wp-image-20080\" \/><\/figure>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Qu\u00e9 funciona mejor para hacer que tu p\u00e1gina sea f\u00e1cil de leer:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      Fuentes sans-serif de formas limpias, del tipo Roboto, Open Sans o Lato.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      Evitar tipograf\u00edas muy decorativas o script en textos largos.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      Un cuerpo de texto legible sin necesidad de hacer zoom, que adem\u00e1s escale bien cuando el usuario lo ampl\u00eda.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      Una o dos tipograf\u00edas en todo el sitio. La coherencia visual reduce la carga cognitiva.\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h3 id=\"h-3-cuida-el-espaciado-y-el-tamano-de-los-elementos-interactivos\" class=\"wp-block-heading\">3. Cuida el espaciado y el tama\u00f1o de los elementos interactivos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un texto comprimido, con <strong>l\u00edneas<\/strong> apretadas y <strong>p\u00e1rrafos<\/strong> pegados, complica la lectura a quien tiene dificultades de aprendizaje o cognitivas, y a cualquiera que lea en movimiento. El espaciado deja respirar al texto y hace que cada p\u00e1rrafo cueste menos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/3.-Espaciado-y-tamano-adecuados-1.jpg\" alt=\"Comparaci\u00f3n entre botones peque\u00f1os y demasiado juntos y una disposici\u00f3n con botones m\u00e1s accesibles.\n\" class=\"wp-image-20079\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">La misma atenci\u00f3n va para los elementos clicables. <strong>Botones, iconos y enlaces<\/strong> tienen que poder identificarse y activarse sin esfuerzo, tambi\u00e9n con precisi\u00f3n motora reducida.<br><\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Tama\u00f1os concretos y exactos:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      El m\u00ednimo de nivel AA es <strong>24 \u00d7 24 p\u00edxeles CSS<\/strong>. Este criterio admite una excepci\u00f3n: si un objetivo es m\u00e1s peque\u00f1o, debe estar separado lo suficiente para que un c\u00edrculo de 24 p\u00edxeles de di\u00e1metro centrado sobre \u00e9l no se solape con otro objetivo.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      El criterio 2.5.5 corresponde al nivel AAA (una recomendaci\u00f3n m\u00e1s exigente): <strong>44 \u00d7 44 p\u00edxeles<\/strong>.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      Los enlaces que van dentro de una frase quedan exentos.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      Deja <strong>espacio entre elementos clicables consecutivos<\/strong>, sobre todo en listas y formularios, donde los toques accidentales son m\u00e1s probables.\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h3 id=\"h-4-anade-texto-alternativo-a-las-imagenes\" class=\"wp-block-heading\">4. A\u00f1ade texto alternativo a las im\u00e1genes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El texto alternativo es una descripci\u00f3n breve que se escribe en el atributo <span style=\"color: #188038\">alt<\/span> del HTML y que permite entender el contenido y la funci\u00f3n de una imagen a quien no puede verla. Como beneficio adicional, ayuda a los motores de b\u00fasqueda y a los sistemas de IA a interpretar correctamente tus im\u00e1genes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/4.-Texto-alternatuvo-contextual.jpg\" alt=\"Comparaci\u00f3n entre una estructura incorrecta y una estructura correcta de encabezados en una p\u00e1gina web accesible.\n\" class=\"wp-image-20081\" \/><\/figure>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Un buen texto alternativo:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 18px\">\n    <li style=\"margin-bottom: 10px\">\n      Es conciso.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      Describe la funci\u00f3n o la informaci\u00f3n relevante de la imagen.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      Est\u00e1 escrito en funci\u00f3n del papel que juega la imagen en la p\u00e1gina.\n    <\/li>\n  <\/ul>\n\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    Cu\u00e1ndo usarlo y cu\u00e1ndo no:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      \u2705 <strong>Im\u00e1genes informativas<\/strong>, que ilustran conceptos o a\u00f1aden significado.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      \u274c <strong>Elementos puramente decorativos<\/strong>, como bordes, iconos de estilo o fondos. Aqu\u00ed se usa <span style=\"color: #188038\"><code>alt=\"\"<\/code><\/span> y el lector de pantalla los salta.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      \u274c <strong>Im\u00e1genes complejas<\/strong> como gr\u00e1ficos o infograf\u00edas. El alt no da para tanto, hace falta una descripci\u00f3n textual extendida (ver el paso 10).\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">En lugar de un alt como \u00abFoto\u00bb, \u00abHaz clic aqu\u00ed\u00bb o \u00abLogo\u00bb, escribe \u00abEscalador en una pared de granito al amanecer\u00bb, \u00abImagen clicable de una mochila roja en un sendero\u00bb o \u00abLogo de SiteGround\u00bb. Si la imagen lleva texto incrustado, recuerda que las tecnolog\u00edas asistivas no pueden leerlo, as\u00ed que esa informaci\u00f3n debe estar disponible como texto real. En nuestra base de conocimiento explicamos <a href=\"https:\/\/www.siteground.com\/es\/kb\/anadir-texto-alt-imagenes\" target=\"_blank\" rel=\"noopener\">c\u00f3mo a\u00f1adir texto alt a las im\u00e1genes<\/a> paso a paso.<\/p>\n\n\n\n<h3 id=\"h-5-utiliza-enlaces-y-llamadas-a-la-accion-claros\" class=\"wp-block-heading\">5. Utiliza enlaces y llamadas a la acci\u00f3n claros<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Quien navega con lector de pantalla suele recorrer la lista de enlaces de la p\u00e1gina de forma aislada. Fuera de contexto, un \u00abHaz clic aqu\u00ed\u00bb o un \u00abLeer m\u00e1s\u00bb no comunica ni la acci\u00f3n ni el destino.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/5.-Enlaces-y-CTA-claros-1.jpg\" alt=\"Comparaci\u00f3n entre un CTA que no consigue convertir y otro que s\u00ed.\" class=\"wp-image-20083\" \/><\/figure>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Buenas pr\u00e1cticas de accesibilidad para enlaces y CTAs:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      <strong>S\u00e9 espec\u00edfico.<\/strong> \u00abDescargar la gu\u00eda de accesibilidad\u00bb o \u00abVer nuestros planes\u00bb en lugar de \u00abM\u00e1s informaci\u00f3n\u00bb.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Mant\u00e9n la brevedad.<\/strong> El enlace debe leerse de un vistazo.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Estilo coherente.<\/strong> Enlaces y botones tienen que ser reconocibles al instante por color, subrayado o forma.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>No uses la URL como texto.<\/strong> Es dif\u00edcil de leer y de recordar.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Usa botones para las acciones.<\/strong> Si la interacci\u00f3n env\u00eda un formulario o inicia una descarga, es un bot\u00f3n, no un enlace.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      <strong>Marca el foco<\/strong> para que se vea con claridad qu\u00e9 elemento est\u00e1 seleccionado al navegar con teclado.\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h3 id=\"h-6-asegura-un-contraste-suficiente\" class=\"wp-block-heading\">6. Asegura un contraste suficiente<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El contraste entre texto y fondo decide si tu contenido se lee o desaparece. Un texto que se funde con el fondo es invisible para quien tiene daltonismo o baja visi\u00f3n, y tambi\u00e9n para cualquiera que consulte la web a plena luz del sol.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\n          Elemento\n        <\/th><th>\n          Ratio m\u00ednimo\n        <\/th><th>\n          Criterio\n        <\/th><\/tr><\/thead><tbody><tr><td>\n          Texto normal\n        <\/td><td>\n          4,5:1\n        <\/td><td>\n          1.4.3 (AA)\n        <\/td><\/tr><tr><td>\n          Texto grande, desde 18 pt o 14 pt en negrita\n        <\/td><td>\n          3:1\n        <\/td><td>\n          1.4.3 (AA)\n        <\/td><\/tr><tr><td>\n          Componentes de interfaz y objetos gr\u00e1ficos\n        <\/td><td>\n          3:1\n        <\/td><td>\n          1.4.11 (AA)\n        <\/td><\/tr><tr><td>\n          Texto normal, nivel exigente\n        <\/td><td>\n          7:1\n        <\/td><td>\n          1.4.6 (AAA)\n        <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Quedan fuera del requisito los logotipos y el texto de componentes inactivos o puramente decorativos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/6.-Contraste-suficiente.jpg\" alt=\"Comparaci\u00f3n entre texto con poco contraste y texto con contraste suficiente.\n\" class=\"wp-image-20084\" \/><\/figure>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Otras medidas:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      El color no debe ser el \u00fanico recurso que transmite informaci\u00f3n. Si marcas un error de formulario solo en rojo, quien no distingue ese color no sabe que hay un error. A\u00f1ade un icono, una etiqueta o un mensaje de texto.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      Vigila los fondos con degradados o im\u00e1genes detr\u00e1s del texto, donde el contraste cambia seg\u00fan la zona. Utiliza superposiciones semitransparentes o fondos s\u00f3lidos detr\u00e1s del texto.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      Define una paleta de colores coherente con relaciones de contraste accesibles para los colores primarios, secundarios y de acento.\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h3 id=\"h-7-crea-un-diseno-claro-y-facil-de-escanear\" class=\"wp-block-heading\">7. Crea un dise\u00f1o claro y f\u00e1cil de escanear<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Una <a href=\"https:\/\/academy.siteground.com\/es\/estructura-paginas-web\/\" data-type=\"post\" data-id=\"19668\" target=\"_blank\" rel=\"noopener\">estructura de p\u00e1ginas web<\/a> limpia y bien organizada facilita la comprensi\u00f3n y acelera la navegaci\u00f3n, sobre todo para quien escanea el texto en lugar de leerlo. Eso incluye a personas con dificultades cognitivas o atenci\u00f3n limitada, y tambi\u00e9n a cualquiera con poco tiempo, es decir a casi todo el mundo.<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Pr\u00e1cticas que funcionan para un dise\u00f1o f\u00e1cil de escanear:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      <strong>Encabezados y subt\u00edtulos<\/strong> que dividan el contenido en secciones l\u00f3gicas y creen un mapa visual de la p\u00e1gina.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>P\u00e1rrafos cortos<\/strong>, de tres o cuatro frases, en lugar de bloques largos.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Listas<\/strong> para organizar informaci\u00f3n enumerable, que adem\u00e1s se recorren mejor con lector de pantalla.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Espaciado coherente<\/strong> entre secciones y elementos, para evitar la sensaci\u00f3n de amontonamiento.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Agrupaci\u00f3n l\u00f3gica:<\/strong> lo que est\u00e1 relacionado debe estar junto, visual y estructuralmente.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Navegaci\u00f3n previsible<\/strong>, con men\u00fas y layouts consistentes en todo el sitio.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      <strong>Sin distracciones innecesarias.<\/strong> El criterio 2.2.2 (Pausar, detener, ocultar, nivel A) exige un mecanismo para parar cualquier contenido en movimiento o actualizaci\u00f3n autom\u00e1tica que arranque solo y dure m\u00e1s de cinco segundos.\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h3 id=\"h-8-asegurate-de-que-la-web-se-puede-utilizar-con-teclado\" class=\"wp-block-heading\">8. Aseg\u00farate de que la web se puede utilizar con teclado<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hay personas que no pueden usar un rat\u00f3n por par\u00e1lisis, temblores u otras limitaciones de movilidad, otras que navegan con lector de pantalla, y otras que simplemente prefieren atajos de teclado por rapidez. Todas dependen de que la web funcione sin puntero.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/Navegacion-con-foco-visible.gif\" alt=\"Comparaci\u00f3n entre una navegaci\u00f3n con foco visible y otra sin un indicador de foco visible.\n\" class=\"wp-image-20085\" \/><\/figure>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Para que la web sea operable con teclado, comprobar:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      <strong>Orden l\u00f3gico de tabulaci\u00f3n.<\/strong> Los elementos interactivos deben recibir el foco en un orden que conserve el sentido, normalmente de arriba a abajo y de izquierda a derecha. El HTML sem\u00e1ntico mantiene esa secuencia sin trucos.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Foco visible.<\/strong> Enlaces y botones deben mostrar con claridad cu\u00e1ndo est\u00e1n seleccionados, con contornos u otras se\u00f1ales visuales.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Foco no oculto.<\/strong> Cuando un elemento recibe el foco, no puede quedar completamente escondido detr\u00e1s de un banner de cookies o una barra fija.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Sin trampas de teclado.<\/strong> Si el foco entra en un componente, tiene que poder salir de \u00e9l solo con teclado.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Enlace de \u00absaltar al contenido\u00bb.<\/strong> Permite esquivar los men\u00fas repetidos y llegar directo al contenido principal.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      <strong>Formularios etiquetados.<\/strong> Cada campo necesita su etiqueta y sus instrucciones, con mensajes de error legibles por un lector de pantalla.\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h3 id=\"h-9-disena-para-diferentes-pantallas-y-niveles-de-zoom\" class=\"wp-block-heading\">9. Dise\u00f1a para diferentes pantallas y niveles de zoom<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Una web accesible se adapta a m\u00f3viles, tablets y escritorio, y tambi\u00e9n a distintos niveles de zoom, que es el recurso habitual de quien tiene dificultades visuales.<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Para hacer que una web sea accesible desde diferentes pantallas y niveles de zoom:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      <strong>Redimensionar el texto:<\/strong> el texto debe poder ampliarse hasta el 200 % sin p\u00e9rdida de contenido ni de funcionalidad.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Reflujo:<\/strong> el contenido debe poder presentarse sin scroll en dos direcciones a la vez, con un ancho equivalente a 320 p\u00edxeles CSS, lo que corresponde a un zoom del 400 % en una ventana de 1.280 p\u00edxeles.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>Ning\u00fan scroll horizontal<\/strong> innecesario.\n    <\/li>\n\n    <li style=\"margin-bottom: 10px\">\n      <strong>El contenido de m\u00f3vil<\/strong> debe ser el mismo que el de escritorio, sin versiones resumidas que dejen fuera informaci\u00f3n.\n    <\/li>\n\n    <li style=\"margin-bottom: 0\">\n      <strong>Adapta el dise\u00f1o al contexto de uso:<\/strong> los visitantes que navegan desde dispositivos m\u00f3viles suelen echar un vistazo r\u00e1pido, realizan varias tareas a la vez o tienen una conexi\u00f3n lenta. El sitio debe ofrecer flujos sencillos, carga progresiva o contenido multimedia comprimido, navegaci\u00f3n intuitiva, iconos reconocibles y botones principales alejados de los bordes para evitar acciones involuntarias.\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h3 id=\"h-10-anade-subtitulos-y-descripciones-a-los-contenidos-multimedia\" class=\"wp-block-heading\">10. A\u00f1ade subt\u00edtulos y descripciones a los contenidos multimedia<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Los subt\u00edtulos y las descripciones textuales son lo que hace utilizable el contenido multimedia para personas con discapacidad auditiva, y tambi\u00e9n para quien no puede poner el audio en ese momento.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/7.-Subtitulos-y-descripciones.jpg\" alt=\"Comparaci\u00f3n entre un v\u00eddeo con subt\u00edtulos y otro sin subt\u00edtulos.\n\" class=\"wp-image-20086\" \/><\/figure>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n  <h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\">\n    \ud83d\udccb Qu\u00e9 subt\u00edtulos a\u00f1adir seg\u00fan el tipo de contenido:\n  <\/h3>\n\n  <ul class=\"text text--size-medium color-darkest\" style=\"padding-left: 28px;margin-bottom: 0\">\n    <li style=\"margin-bottom: 10px\">\n      <strong>V\u00eddeos:<\/strong> subt\u00edtulos sincronizados y correctos. Los generados autom\u00e1ticamente suelen fallar en nombres propios y terminolog\u00eda, as\u00ed que conviene revisarlos.\n    <\/li>\n\n<li style=\"margin-bottom: 10px\">\n  <strong>V\u00eddeos con informaci\u00f3n visual relevante:<\/strong> una audiodescripci\u00f3n o una alternativa textual que cuente lo que se ve y no se escucha (1.2.3, nivel A).\n<\/li>\n\n<li style=\"margin-bottom: 10px\">\n  <strong>Im\u00e1genes complejas o metaf\u00f3ricas:<\/strong> una leyenda breve que explique la relaci\u00f3n con el texto que las rodea.\n<\/li>\n\n<li style=\"margin-bottom: 0\">\n  <strong>Gr\u00e1ficos, tablas e infograf\u00edas:<\/strong> una descripci\u00f3n textual extendida debajo de la imagen que resuma los datos principales. Aqu\u00ed el texto alternativo no basta, porque un ratio, una tendencia y una comparaci\u00f3n no caben en una frase.<\/li><\/ul><\/div>\n\n\n\n<h2 id=\"h-como-comprobar-si-una-web-es-accesible\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%c2%bfcomo-comprobar-si-una-web-es-accesible\"><\/span>\u00bfC\u00f3mo comprobar si una web es accesible?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hacer una web accesible tambi\u00e9n implica comprobar que funciona bien en la pr\u00e1ctica, ya que muchos problemas solo aparecen cuando alguien intenta usarla de verdad. Una revisi\u00f3n completa combina siempre herramientas autom\u00e1ticas con pruebas manuales.<\/p>\n\n\n\n<h3 id=\"h-herramientas-automaticas-para-comprobar-la-accesibilidad\" class=\"wp-block-heading\">Herramientas autom\u00e1ticas para comprobar la accesibilidad<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las herramientas autom\u00e1ticas detectan r\u00e1pido los problemas m\u00e1s frecuentes: textos alternativos que faltan, contraste insuficiente, jerarqu\u00edas de encabezados rotas, campos de formulario sin etiqueta.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WAVE<\/strong>, el <a href=\"https:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noopener nofollow\">Web Accessibility Evaluation Tool<\/a> de WebAIM, superpone iconos sobre la propia p\u00e1gina para que veas d\u00f3nde est\u00e1 cada problema y a qu\u00e9 elemento corresponde. Es la m\u00e1s \u00fatil para entender visualmente qu\u00e9 est\u00e1 mal.<\/li>\n\n\n\n<li><strong>Lighthouse<\/strong>, integrado en las herramientas de desarrollo de Chrome, incluye una auditor\u00eda de accesibilidad junto a las de rendimiento y SEO, y da una puntuaci\u00f3n c\u00f3moda para comparar antes y despu\u00e9s.<\/li>\n\n\n\n<li><strong>axe DevTools<\/strong> es la m\u00e1s orientada a desarrollo. Detecta problemas t\u00e9cnicos durante la construcci\u00f3n del sitio y explica el criterio concreto que se incumple.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Estas herramientas detectan lo que se puede medir autom\u00e1ticamente, pero una imagen puede tener un <span style=\"color: #188038\">alt<\/span> perfectamente escrito desde el punto de vista t\u00e9cnico y completamente in\u00fatil desde el punto de vista humano, y ninguna herramienta te lo va a decir.<\/p>\n\n\n\n<h3 id=\"h-pruebas-manuales-de-accesibilidad\" class=\"wp-block-heading\">Pruebas manuales de accesibilidad<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Estas son las comprobaciones que hay que hacer a mano, porque simulan la experiencia real de navegar con necesidades distintas.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Qu\u00e9 probar<\/strong><\/td><td><strong>C\u00f3mo hacerlo<\/strong><\/td><td><strong>Qu\u00e9 buscas<\/strong><\/td><\/tr><tr><td><strong>Navegaci\u00f3n por teclado<\/strong><\/td><td>Recorre la p\u00e1gina solo con Tab, Shift+Tab y Enter<\/td><td>Llegar a todos los elementos interactivos y poder salir de ellos<\/td><\/tr><tr><td><strong>Visibilidad del foco<\/strong><\/td><td>Observa d\u00f3nde est\u00e1 el foco en cada salto<\/td><td>Un indicador siempre visible, nunca oculto tras cabeceras fijas o banners<\/td><\/tr><tr><td><strong>Orden del foco<\/strong><\/td><td>Compara el recorrido del foco con el orden visual<\/td><td>Que la secuencia conserve el sentido de la p\u00e1gina<\/td><\/tr><tr><td><strong>Zoom y reflujo<\/strong><\/td><td>Ampl\u00eda al 200 % y al 400 %<\/td><td>Sin solapamientos, texto cortado ni scroll horizontal<\/td><\/tr><tr><td><strong>Experiencia en m\u00f3vil<\/strong><\/td><td>Usa la web en un tel\u00e9fono real, con una mano<\/td><td>Botones alcanzables y flujos completos<\/td><\/tr><tr><td><strong>Formularios<\/strong><\/td><td>Compl\u00e9talos con teclado y provoca errores a prop\u00f3sito<\/td><td>Etiquetas claras y mensajes de error legibles y descriptivos<\/td><\/tr><tr><td><strong>Multimedia<\/strong><\/td><td>Reproduce videos sin audio<\/td><td>Subt\u00edtulos sincronizados y correctos<\/td><\/tr><tr><td><strong>Lector de pantalla<\/strong><\/td><td>Recorre la p\u00e1gina con NVDA, VoiceOver o TalkBack<\/td><td>Que el contenido se entienda escuchado, no solo le\u00eddo<\/td><\/tr><tr><td><strong>Usuarios reales<\/strong><\/td><td>Pide a personas con necesidades distintas que completen una tarea clave<\/td><td>Los problemas que las herramientas no pueden detectar<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"h-checklist-de-accesibilidad-web-para-tu-pagina\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"checklist-de-accesibilidad-web-para-tu-pagina\"><\/span>Checklist de accesibilidad web para tu p\u00e1gina<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Esta checklist recoge los criterios de las WCAG 2.2 m\u00e1s relevantes para una web de negocio, traducidos a comprobaciones que puedes hacer hoy mismo. El nivel AA suele ser una referencia pr\u00e1ctica para trabajar la accesibilidad de una web de negocio.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><\/td><td><strong>Comprobaci\u00f3n<\/strong><\/td><td><strong>Criterio WCAG 2.2<\/strong><\/td><\/tr><tr><td rowspan=\"4\"><strong>Estructura<\/strong><\/td><td>Un solo H1 por p\u00e1gina, que identifica el tema principal.<\/td><td>Buena pr\u00e1ctica (apoya 1.3.1, A)<\/td><\/tr><tr><td>Encabezados en orden l\u00f3gico, sin saltos de H2 a H4.<\/td><td>1.3.1 Informaci\u00f3n y relaciones (A)<\/td><\/tr><tr><td>Encabezados descriptivos, no usados para cambiar el tama\u00f1o del texto.<\/td><td>2.4.6 Encabezados y etiquetas (AA)<\/td><\/tr><tr><td>HTML sem\u00e1ntico para listas, tablas y regiones de la p\u00e1gina.<\/td><td>1.3.1 Informaci\u00f3n y relaciones (A)<\/td><\/tr><tr><td rowspan=\"4\"><strong>Im\u00e1genes<\/strong><\/td><td>Todas las im\u00e1genes informativas tienen texto alternativo que describe su funci\u00f3n.<\/td><td>1.1.1 Contenido no textual (A)<\/td><\/tr><tr><td>Las im\u00e1genes decorativas usan alt=&#8221;&#8221;.<\/td><td>1.1.1 Contenido no textual (A)<\/td><\/tr><tr><td>Los gr\u00e1ficos e infograf\u00edas tienen una descripci\u00f3n textual extendida.<\/td><td>1.1.1 Contenido no textual (A)<\/td><\/tr><tr><td>Ninguna informaci\u00f3n esencial vive solo dentro de una imagen con texto incrustado.<\/td><td>1.4.5 Im\u00e1genes de texto (AA)<\/td><\/tr><tr><td rowspan=\"4\"><strong>Texto<\/strong><\/td><td>Tipograf\u00eda sans-serif legible, con una o dos familias en todo el sitio.<\/td><td>Buena pr\u00e1ctica (no es criterio)<\/td><\/tr><tr><td>El texto se ampl\u00eda al 200 % sin romper el dise\u00f1o.<\/td><td>1.4.4 Redimensionar el texto (AA)<\/td><\/tr><tr><td>La p\u00e1gina aguanta interlineado de 1,5 y espaciado entre p\u00e1rrafos de 2 veces el tama\u00f1o de fuente.<\/td><td>1.4.12 Espaciado del texto (AA)<\/td><\/tr><tr><td>P\u00e1rrafos cortos y listas en lugar de bloques largos.<\/td><td>Buena pr\u00e1ctica (1.4.8, AAA, no obligatorio)<\/td><\/tr><tr><td rowspan=\"4\"><strong>Contraste<\/strong><\/td><td>Texto normal con ratio de 4,5:1 como m\u00ednimo.<\/td><td>1.4.3 Contraste m\u00ednimo (AA)<\/td><\/tr><tr><td>Texto grande y componentes de interfaz con 3:1 como m\u00ednimo.<\/td><td>1.4.3 (AA) y 1.4.11 Contraste no textual (AA)<\/td><\/tr><tr><td>El color no es el \u00fanico recurso que transmite informaci\u00f3n.<\/td><td>1.4.1 Uso del color (A) y 1.3.3 (A)<\/td><\/tr><tr><td>El texto sobre im\u00e1genes o degradados mantiene el contraste en toda su extensi\u00f3n.<\/td><td>1.4.3 Contraste m\u00ednimo (AA)<\/td><\/tr><tr><td rowspan=\"6\"><strong>Navegaci\u00f3n<\/strong><\/td><td>Toda la funcionalidad se puede usar solo con teclado.<\/td><td>2.1.1 Teclado (A) y 2.1.2 Sin trampas (A)<\/td><\/tr><tr><td>El indicador de foco es visible y no queda oculto por elementos fijos.<\/td><td>2.4.7 Foco visible (AA) y 2.4.11 Foco no oculto (AA)<\/td><\/tr><tr><td>El orden de tabulaci\u00f3n conserva el sentido de la p\u00e1gina.<\/td><td>2.4.3 Orden del foco (A)<\/td><\/tr><tr><td>Existe un enlace de \u00absaltar al contenido\u00bb.<\/td><td>2.4.1 Evitar bloques (A)<\/td><\/tr><tr><td>Los textos de enlace describen su destino sin depender del contexto.<\/td><td>2.4.4 (A)<\/td><\/tr><tr><td>Los objetivos t\u00e1ctiles miden 24 \u00d7 24 p\u00edxeles CSS o tienen separaci\u00f3n suficiente.<\/td><td>2.5.8 Tama\u00f1o del objetivo m\u00ednimo (AA)<\/td><\/tr><tr><td rowspan=\"3\"><strong>Multimedia<\/strong><\/td><td>Los videos grabados tienen subt\u00edtulos sincronizados y revisados.<\/td><td>1.2.2 Subt\u00edtulos grabados (A)<\/td><\/tr><tr><td>El contenido visual relevante cuenta con audiodescripci\u00f3n o alternativa textual.<\/td><td>1.2.3 (A) y 1.2.5 Audiodescripci\u00f3n (AA)<\/td><\/tr><tr><td>Nada se reproduce autom\u00e1ticamente con audio, o existe un control para detenerlo.<\/td><td>1.4.2 Control del audio (A)<\/td><\/tr><tr><td><\/td><td>El contenido que se mueve, parpadea o se actualiza autom\u00e1ticamente puede pausarse, detenerse u ocultarse cuando corresponde.<\/td><td>2.2.2 Pausar, detener, ocultar (A)<\/td><\/tr><tr><td rowspan=\"3\"><strong>Responsive<\/strong><\/td><td>El contenido funciona a 320 p\u00edxeles CSS de ancho sin scroll horizontal.<\/td><td>1.4.10 Reflujo (AA)<\/td><\/tr><tr><td>El contenido de m\u00f3vil es el mismo que el de escritorio.<\/td><td>Buena pr\u00e1ctica (apoya 1.4.10, AA)<\/td><\/tr><tr><td>No hay solapamientos ni elementos cortados al aplicar zoom.<\/td><td>1.4.10 (AA) y 1.4.4 (AA)<\/td><\/tr><tr><td rowspan=\"3\"><strong>Formularios<\/strong><\/td><td>Cada campo tiene etiqueta visible y asociada program\u00e1ticamente.<\/td><td>3.3.2 Etiquetas o instrucciones (A) y 4.1.2 (A)<\/td><\/tr><tr><td>Los errores se identifican en texto y explican c\u00f3mo corregirlos.<\/td><td>3.3.1 Identificaci\u00f3n de errores (A) y 3.3.3 (AA)<\/td><\/tr><tr><td>Los campos que piden datos personales declaran su prop\u00f3sito.<\/td><td>1.3.5 Identificar el prop\u00f3sito de la entrada (AA)<\/td><\/tr><tr><td rowspan=\"4\"><strong>Testing<\/strong><\/td><td>Revisi\u00f3n autom\u00e1tica pasada con WAVE, Lighthouse o axe DevTools.<\/td><td>Metodolog\u00eda de evaluaci\u00f3n<\/td><\/tr><tr><td>Recorrido manual completo con teclado y con zoom al 400 %.<\/td><td>Metodolog\u00eda de evaluaci\u00f3n<\/td><\/tr><tr><td>Prueba con al menos un lector de pantalla.<\/td><td>Metodolog\u00eda de evaluaci\u00f3n<\/td><\/tr><tr><td>Una tarea clave validada con usuarios reales.<\/td><td>Metodolog\u00eda de evaluaci\u00f3n<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 id=\"h-haz-tu-web-accesible-desde-el-principio\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"haz-tu-web-accesible-desde-el-principio\"><\/span>Haz tu web accesible desde el principio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La accesibilidad es una consecuencia de c\u00f3mo dise\u00f1as. Los 10 pasos de esta gu\u00eda se pueden resumir en unas pocas decisiones que conviene tomar desde el principio: una jerarqu\u00eda clara de encabezados, una tipograf\u00eda y un contraste f\u00e1ciles de leer, una navegaci\u00f3n que funcione sin rat\u00f3n, un contenido que se adapte a cualquier pantalla y una multimedia que no dependa \u00fanicamente del sonido o de la imagen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Corregir todo eso despu\u00e9s del lanzamiento suele llevar m\u00e1s tiempo que tenerlo en cuenta desde el principio. Y no hace falta abordarlo como un proyecto t\u00e9cnico: si tu web todav\u00eda falla en varios puntos, empieza por el contraste y los textos alternativos, que son los que m\u00e1s impacto tienen con menos trabajo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para una pyme sin equipo t\u00e9cnico, conseguir una web accesible depende muchas veces de c\u00f3mo se plantea el proyecto desde el principio. El <a href=\"https:\/\/www.siteground.es\/website-builder\" target=\"_blank\" rel=\"noopener\">SiteGround Website Builder<\/a> trae resueltas de f\u00e1brica las decisiones que m\u00e1s problemas causan despu\u00e9s: plantillas optimizadas para m\u00f3vil que se adaptan solas a cualquier pantalla y nivel de zoom, combinaciones tipogr\u00e1ficas legibles, control del contraste al elegir la paleta, campos de texto alternativo integrados en la biblioteca de im\u00e1genes y una estructura de encabezados que no se rompe al maquetar.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Plantillas optimizadas para m\u00f3vil que se adaptan solas a cualquier pantalla y nivel de zoom<\/li>\n\n\n\n<li>Combinaciones tipogr\u00e1ficas legibles<\/li>\n\n\n\n<li>Control del contraste al elegir la paleta<\/li>\n\n\n\n<li>Campos de texto alternativo integrados en la biblioteca de im\u00e1genes<\/li>\n\n\n\n<li>Estructura de encabezados que no se rompe al maquetar<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Se encarga de la parte que normalmente te llevar\u00eda a contratar a un desarrollador y te permite centrarte en lo que requiere criterio humano, como decidir qu\u00e9 dice cada texto alternativo, revisar los subt\u00edtulos o recorrer tu web con el teclado. Con las funciones de IA integradas para textos e im\u00e1genes, incluso esa parte avanza m\u00e1s r\u00e1pido. Y si te atascas, tienes soporte experto 24\/7 en espa\u00f1ol.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Crea tu web accesible con el SiteGround Website Builder y deja de dejar gente fuera.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/es.siteground.com\/website-builder\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1001\" src=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/CTA-final-.jpg\" alt=\"Llamada a la acci\u00f3n para crear una web accesible con SiteGround Website Builder.\" class=\"wp-image-20060\" \/><\/a><\/figure>\n\n\n\n<h2 id=\"h-faq-sobre-el-diseno-web-accesible\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"faq-sobre-el-diseno-web-accesible\"><\/span>FAQ sobre el dise\u00f1o web accesible<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1789555192919\"><strong class=\"schema-faq-question\"><strong>\u00bfQu\u00e9 es el dise\u00f1o accesible?<\/strong><br><\/strong> <p class=\"schema-faq-answer\">El dise\u00f1o accesible es el que elimina barreras para que cualquier persona pueda percibir, comprender, navegar e interactuar con un producto, con independencia de sus capacidades sensoriales, motoras o cognitivas. Aplicado a la web, se traduce en decisiones concretas sobre estructura, tipograf\u00eda, color, navegaci\u00f3n y contenido.<br><\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1789555212199\"><strong class=\"schema-faq-question\"><strong>\u00bfCu\u00e1les son los 4 principios de accesibilidad web?<\/strong><br><\/strong> <p class=\"schema-faq-answer\">Los cuatro principios de accesibilidad web son perceptible, operable, comprensible y robusto, conocidos por el acr\u00f3nimo POUR. Perceptible significa que la informaci\u00f3n se pueda captar por las v\u00edas sensoriales disponibles, Operable que se pueda manejar con distintos m\u00e9todos de entrada, Comprensible que el contenido y la interfaz sean claros y previsibles, y Robusto que funcione en navegadores, dispositivos y tecnolog\u00edas asistivas diferentes.<br><\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1789555226925\"><strong class=\"schema-faq-question\"><strong>\u00bfQu\u00e9 caracter\u00edsticas tiene una web accesible?<\/strong><\/strong> <p class=\"schema-faq-answer\"><br>Una web accesible tiene una jerarqu\u00eda de encabezados correcta, texto alternativo en las im\u00e1genes informativas, contraste de al menos 4,5:1 en el texto normal, enlaces que describen su destino, navegaci\u00f3n completa por teclado con foco visible, dise\u00f1o que se adapta al zoom y a cualquier pantalla, y subt\u00edtulos en sus contenidos multimedia.<br><\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1789555237621\"><strong class=\"schema-faq-question\"><strong>\u00bfCu\u00e1les son 5 herramientas de accesibilidad?<\/strong><br><\/strong> <p class=\"schema-faq-answer\">Cinco herramientas \u00fatiles para evaluar la accesibilidad de una web son WAVE de WebAIM, la auditor\u00eda de accesibilidad de Lighthouse en Chrome, axe DevTools de Deque, un comprobador de contraste de color y un lector de pantalla como NVDA o VoiceOver. Las tres primeras automatizan la detecci\u00f3n de errores frecuentes y las dos \u00faltimas sirven para verificar manualmente lo que las autom\u00e1ticas no ven.<br><\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1789555250383\"><strong class=\"schema-faq-question\"><strong>\u00bfC\u00f3mo se puede mejorar la accesibilidad de un sitio web existente?<\/strong><\/strong> <p class=\"schema-faq-answer\"><br>Para mejorar un sitio ya publicado, empieza por una auditor\u00eda autom\u00e1tica que te d\u00e9 el mapa de problemas y prioriza los de mayor impacto y menor esfuerzo: contraste de texto, textos alternativos que faltan y jerarqu\u00eda de encabezados. Despu\u00e9s aborda la navegaci\u00f3n por teclado y el foco visible, que suelen requerir cambios en plantillas. Los subt\u00edtulos y las descripciones extendidas de gr\u00e1ficos van al final, porque son trabajo de contenido y se pueden hacer de forma progresiva.<br><\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1789555264287\"><strong class=\"schema-faq-question\"><strong>\u00bfC\u00f3mo hacer que un sitio web sea accesible en WordPress?<\/strong><br><\/strong> <p class=\"schema-faq-answer\">Para hacer accesible un sitio en WordPress, elige un tema que declare conformidad con las WCAG, usa el editor de bloques para mantener una jerarqu\u00eda de encabezados correcta, rellena el campo de texto alternativo en la biblioteca de medios y revisa el contraste de la paleta del tema. Despu\u00e9s audita el resultado, porque muchos plugins y constructores visuales introducen problemas de foco y de orden de tabulaci\u00f3n que el tema no controla. Nuestra <a href=\"https:\/\/academy.siteground.com\/es\/optimizacion-wordpress\/\" data-type=\"post\" data-id=\"19180\" target=\"_blank\" rel=\"noopener\">gu\u00eda de optimizaci\u00f3n de WordPress<\/a> cubre c\u00f3mo revisar lo que a\u00f1aden los plugins.<br><\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1789555274715\"><strong class=\"schema-faq-question\"><strong>\u00bfWordPress cumple con WCAG?<\/strong><br><\/strong> <p class=\"schema-faq-answer\">WordPress como plataforma sigue unos est\u00e1ndares de accesibilidad propios en su interfaz de administraci\u00f3n y en sus temas oficiales, pero la conformidad final con las WCAG depende de tu sitio, no del CMS. El tema que elijas, los plugins que instales y el contenido que publiques determinan si tu web cumple el nivel AA. Instalar WordPress no te hace conforme, igual que crear una p\u00e1gina web con cualquier otra herramienta tampoco lo hace por s\u00ed solo.<br><\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>El dise\u00f1o web accesible consiste en tomar decisiones de dise\u00f1o, contenido y navegaci\u00f3n que eliminen barreras, para que cualquier persona pueda percibir, comprender, navegar e interactuar con tu p\u00e1gina. La accesibilidad forma parte del dise\u00f1o desde el primer d\u00eda y contribuye a crear una mejor experiencia para todos tus visitantes, independientemente de sus capacidades. Puntos &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Dise\u00f1o web accesible: hacer de la web un espacio inclusivo&#8221;<\/span><\/a><\/p>\n","protected":false},"author":68,"featured_media":20048,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-20046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creacion-de-sitios-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v28.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Dise\u00f1o web accesible: crea una web m\u00e1s inclusiva<\/title>\n<meta name=\"description\" content=\"Aprende a crear una web inclusiva con un dise\u00f1o web accesible que facilite la navegaci\u00f3n y mejore la experiencia de todas las personas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o web accesible: hacer de la web un espacio inclusivo\" \/>\n<meta property=\"og:description\" content=\"Aprende a crear una web inclusiva con un dise\u00f1o web accesible que facilite la navegaci\u00f3n y mejore la experiencia de todas las personas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/\" \/>\n<meta property=\"og:site_name\" content=\"SiteGround\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/siteground\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-16T15:37:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-17T10:28:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/ES_Accessibility_web_design_1200x600.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ana Garc\u00eda\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@siteground\" \/>\n<meta name=\"twitter:site\" content=\"@siteground\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ana Garc\u00eda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/\"},\"author\":{\"name\":\"Ana Garc\u00eda\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/#\\\/schema\\\/person\\\/e8d38113e499e4f9f156a28ce5873bba\"},\"headline\":\"Dise\u00f1o web accesible: hacer de la web un espacio inclusivo\",\"datePublished\":\"2026-09-16T15:37:28+00:00\",\"dateModified\":\"2026-09-17T10:28:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/\"},\"wordCount\":4620,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/09\\\/ES_Accessibility_web_design_1200x600.jpg\",\"articleSection\":[\"Creacion de sitios web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#respond\"]}]},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/\",\"name\":\"Dise\u00f1o web accesible: crea una web m\u00e1s inclusiva\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/09\\\/ES_Accessibility_web_design_1200x600.jpg\",\"datePublished\":\"2026-09-16T15:37:28+00:00\",\"dateModified\":\"2026-09-17T10:28:48+00:00\",\"description\":\"Aprende a crear una web inclusiva con un dise\u00f1o web accesible que facilite la navegaci\u00f3n y mejore la experiencia de todas las personas.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555192919\"},{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555212199\"},{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555226925\"},{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555237621\"},{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555250383\"},{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555264287\"},{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555274715\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#primaryimage\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/09\\\/ES_Accessibility_web_design_1200x600.jpg\",\"contentUrl\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/09\\\/ES_Accessibility_web_design_1200x600.jpg\",\"width\":1200,\"height\":600,\"caption\":\"P\u00e1gina web con diferentes recursos y ayudas para mejorar la accesibilidad web.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o web accesible: hacer de la web un espacio inclusivo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/\",\"name\":\"SiteGround Academia\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/#organization\",\"name\":\"SiteGround Espa\u00f1a\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2025\\\/01\\\/Siteground-Logo-on-white.jpg\",\"contentUrl\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2025\\\/01\\\/Siteground-Logo-on-white.jpg\",\"width\":1200,\"height\":400,\"caption\":\"SiteGround Espa\u00f1a\"},\"image\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/siteground\",\"https:\\\/\\\/x.com\\\/siteground\",\"https:\\\/\\\/www.instagram.com\\\/siteground\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@siteground\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/#\\\/schema\\\/person\\\/e8d38113e499e4f9f156a28ce5873bba\",\"name\":\"Ana Garc\u00eda\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/631f831d1daa7446ffb89410f637e9b72778199d31de149b62ea736922ca0bdd?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/631f831d1daa7446ffb89410f637e9b72778199d31de149b62ea736922ca0bdd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/631f831d1daa7446ffb89410f637e9b72778199d31de149b62ea736922ca0bdd?s=96&d=mm&r=g\",\"caption\":\"Ana Garc\u00eda\"},\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/author\\\/a-lopez\\\/\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555192919\",\"position\":1,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555192919\",\"name\":\"\u00bfQu\u00e9 es el dise\u00f1o accesible?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"El dise\u00f1o accesible es el que elimina barreras para que cualquier persona pueda percibir, comprender, navegar e interactuar con un producto, con independencia de sus capacidades sensoriales, motoras o cognitivas. Aplicado a la web, se traduce en decisiones concretas sobre estructura, tipograf\u00eda, color, navegaci\u00f3n y contenido.<br>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555212199\",\"position\":2,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555212199\",\"name\":\"\u00bfCu\u00e1les son los 4 principios de accesibilidad web?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Los cuatro principios de accesibilidad web son perceptible, operable, comprensible y robusto, conocidos por el acr\u00f3nimo POUR. Perceptible significa que la informaci\u00f3n se pueda captar por las v\u00edas sensoriales disponibles, Operable que se pueda manejar con distintos m\u00e9todos de entrada, Comprensible que el contenido y la interfaz sean claros y previsibles, y Robusto que funcione en navegadores, dispositivos y tecnolog\u00edas asistivas diferentes.<br>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555226925\",\"position\":3,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555226925\",\"name\":\"\u00bfQu\u00e9 caracter\u00edsticas tiene una web accesible?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<br>Una web accesible tiene una jerarqu\u00eda de encabezados correcta, texto alternativo en las im\u00e1genes informativas, contraste de al menos 4,5:1 en el texto normal, enlaces que describen su destino, navegaci\u00f3n completa por teclado con foco visible, dise\u00f1o que se adapta al zoom y a cualquier pantalla, y subt\u00edtulos en sus contenidos multimedia.<br>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555237621\",\"position\":4,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555237621\",\"name\":\"\u00bfCu\u00e1les son 5 herramientas de accesibilidad?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Cinco herramientas \u00fatiles para evaluar la accesibilidad de una web son WAVE de WebAIM, la auditor\u00eda de accesibilidad de Lighthouse en Chrome, axe DevTools de Deque, un comprobador de contraste de color y un lector de pantalla como NVDA o VoiceOver. Las tres primeras automatizan la detecci\u00f3n de errores frecuentes y las dos \u00faltimas sirven para verificar manualmente lo que las autom\u00e1ticas no ven.<br>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555250383\",\"position\":5,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555250383\",\"name\":\"\u00bfC\u00f3mo se puede mejorar la accesibilidad de un sitio web existente?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<br>Para mejorar un sitio ya publicado, empieza por una auditor\u00eda autom\u00e1tica que te d\u00e9 el mapa de problemas y prioriza los de mayor impacto y menor esfuerzo: contraste de texto, textos alternativos que faltan y jerarqu\u00eda de encabezados. Despu\u00e9s aborda la navegaci\u00f3n por teclado y el foco visible, que suelen requerir cambios en plantillas. Los subt\u00edtulos y las descripciones extendidas de gr\u00e1ficos van al final, porque son trabajo de contenido y se pueden hacer de forma progresiva.<br>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555264287\",\"position\":6,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555264287\",\"name\":\"\u00bfC\u00f3mo hacer que un sitio web sea accesible en WordPress?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Para hacer accesible un sitio en WordPress, elige un tema que declare conformidad con las WCAG, usa el editor de bloques para mantener una jerarqu\u00eda de encabezados correcta, rellena el campo de texto alternativo en la biblioteca de medios y revisa el contraste de la paleta del tema. Despu\u00e9s audita el resultado, porque muchos plugins y constructores visuales introducen problemas de foco y de orden de tabulaci\u00f3n que el tema no controla. Nuestra <a href=\\\"https:\\\/\\\/academy.siteground.com\\\/es\\\/optimizacion-wordpress\\\/\\\" data-type=\\\"post\\\" data-id=\\\"19180\\\" target=\\\"_blank\\\" rel=\\\"noreferrer noopener\\\">gu\u00eda de optimizaci\u00f3n de WordPress<\\\/a> cubre c\u00f3mo revisar lo que a\u00f1aden los plugins.<br>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555274715\",\"position\":7,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/es\\\/diseno-web-accesible\\\/#faq-question-1789555274715\",\"name\":\"\u00bfWordPress cumple con WCAG?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"WordPress como plataforma sigue unos est\u00e1ndares de accesibilidad propios en su interfaz de administraci\u00f3n y en sus temas oficiales, pero la conformidad final con las WCAG depende de tu sitio, no del CMS. El tema que elijas, los plugins que instales y el contenido que publiques determinan si tu web cumple el nivel AA. Instalar WordPress no te hace conforme, igual que crear una p\u00e1gina web con cualquier otra herramienta tampoco lo hace por s\u00ed solo.<br>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dise\u00f1o web accesible: crea una web m\u00e1s inclusiva","description":"Aprende a crear una web inclusiva con un dise\u00f1o web accesible que facilite la navegaci\u00f3n y mejore la experiencia de todas las personas.","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:\/\/academy.siteground.com\/es\/diseno-web-accesible\/","og_locale":"en_US","og_type":"article","og_title":"Dise\u00f1o web accesible: hacer de la web un espacio inclusivo","og_description":"Aprende a crear una web inclusiva con un dise\u00f1o web accesible que facilite la navegaci\u00f3n y mejore la experiencia de todas las personas.","og_url":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/","og_site_name":"SiteGround","article_publisher":"https:\/\/www.facebook.com\/siteground","article_published_time":"2026-09-16T15:37:28+00:00","article_modified_time":"2026-09-17T10:28:48+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/ES_Accessibility_web_design_1200x600.jpg","type":"image\/jpeg"}],"author":"Ana Garc\u00eda","twitter_card":"summary_large_image","twitter_creator":"@siteground","twitter_site":"@siteground","twitter_misc":{"Written by":"Ana Garc\u00eda","Est. reading time":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#article","isPartOf":{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/"},"author":{"name":"Ana Garc\u00eda","@id":"https:\/\/academy.siteground.com\/es\/#\/schema\/person\/e8d38113e499e4f9f156a28ce5873bba"},"headline":"Dise\u00f1o web accesible: hacer de la web un espacio inclusivo","datePublished":"2026-09-16T15:37:28+00:00","dateModified":"2026-09-17T10:28:48+00:00","mainEntityOfPage":{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/"},"wordCount":4620,"commentCount":0,"publisher":{"@id":"https:\/\/academy.siteground.com\/es\/#organization"},"image":{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#primaryimage"},"thumbnailUrl":"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/ES_Accessibility_web_design_1200x600.jpg","articleSection":["Creacion de sitios web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#respond"]}]},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/","url":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/","name":"Dise\u00f1o web accesible: crea una web m\u00e1s inclusiva","isPartOf":{"@id":"https:\/\/academy.siteground.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#primaryimage"},"image":{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#primaryimage"},"thumbnailUrl":"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/ES_Accessibility_web_design_1200x600.jpg","datePublished":"2026-09-16T15:37:28+00:00","dateModified":"2026-09-17T10:28:48+00:00","description":"Aprende a crear una web inclusiva con un dise\u00f1o web accesible que facilite la navegaci\u00f3n y mejore la experiencia de todas las personas.","breadcrumb":{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555192919"},{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555212199"},{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555226925"},{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555237621"},{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555250383"},{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555264287"},{"@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555274715"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#primaryimage","url":"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/ES_Accessibility_web_design_1200x600.jpg","contentUrl":"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2026\/09\/ES_Accessibility_web_design_1200x600.jpg","width":1200,"height":600,"caption":"P\u00e1gina web con diferentes recursos y ayudas para mejorar la accesibilidad web."},{"@type":"BreadcrumbList","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/academy.siteground.com\/es\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o web accesible: hacer de la web un espacio inclusivo"}]},{"@type":"WebSite","@id":"https:\/\/academy.siteground.com\/es\/#website","url":"https:\/\/academy.siteground.com\/es\/","name":"SiteGround Academia","description":"","publisher":{"@id":"https:\/\/academy.siteground.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/academy.siteground.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/academy.siteground.com\/es\/#organization","name":"SiteGround Espa\u00f1a","url":"https:\/\/academy.siteground.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/academy.siteground.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2025\/01\/Siteground-Logo-on-white.jpg","contentUrl":"https:\/\/academy.siteground.com\/es\/wp-content\/uploads\/sites\/3\/2025\/01\/Siteground-Logo-on-white.jpg","width":1200,"height":400,"caption":"SiteGround Espa\u00f1a"},"image":{"@id":"https:\/\/academy.siteground.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/siteground","https:\/\/x.com\/siteground","https:\/\/www.instagram.com\/siteground\/","https:\/\/www.youtube.com\/@siteground"]},{"@type":"Person","@id":"https:\/\/academy.siteground.com\/es\/#\/schema\/person\/e8d38113e499e4f9f156a28ce5873bba","name":"Ana Garc\u00eda","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/631f831d1daa7446ffb89410f637e9b72778199d31de149b62ea736922ca0bdd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/631f831d1daa7446ffb89410f637e9b72778199d31de149b62ea736922ca0bdd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/631f831d1daa7446ffb89410f637e9b72778199d31de149b62ea736922ca0bdd?s=96&d=mm&r=g","caption":"Ana Garc\u00eda"},"url":"https:\/\/academy.siteground.com\/es\/author\/a-lopez\/"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555192919","position":1,"url":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555192919","name":"\u00bfQu\u00e9 es el dise\u00f1o accesible?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"El dise\u00f1o accesible es el que elimina barreras para que cualquier persona pueda percibir, comprender, navegar e interactuar con un producto, con independencia de sus capacidades sensoriales, motoras o cognitivas. Aplicado a la web, se traduce en decisiones concretas sobre estructura, tipograf\u00eda, color, navegaci\u00f3n y contenido.<br>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555212199","position":2,"url":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555212199","name":"\u00bfCu\u00e1les son los 4 principios de accesibilidad web?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Los cuatro principios de accesibilidad web son perceptible, operable, comprensible y robusto, conocidos por el acr\u00f3nimo POUR. Perceptible significa que la informaci\u00f3n se pueda captar por las v\u00edas sensoriales disponibles, Operable que se pueda manejar con distintos m\u00e9todos de entrada, Comprensible que el contenido y la interfaz sean claros y previsibles, y Robusto que funcione en navegadores, dispositivos y tecnolog\u00edas asistivas diferentes.<br>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555226925","position":3,"url":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555226925","name":"\u00bfQu\u00e9 caracter\u00edsticas tiene una web accesible?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"<br>Una web accesible tiene una jerarqu\u00eda de encabezados correcta, texto alternativo en las im\u00e1genes informativas, contraste de al menos 4,5:1 en el texto normal, enlaces que describen su destino, navegaci\u00f3n completa por teclado con foco visible, dise\u00f1o que se adapta al zoom y a cualquier pantalla, y subt\u00edtulos en sus contenidos multimedia.<br>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555237621","position":4,"url":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555237621","name":"\u00bfCu\u00e1les son 5 herramientas de accesibilidad?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Cinco herramientas \u00fatiles para evaluar la accesibilidad de una web son WAVE de WebAIM, la auditor\u00eda de accesibilidad de Lighthouse en Chrome, axe DevTools de Deque, un comprobador de contraste de color y un lector de pantalla como NVDA o VoiceOver. Las tres primeras automatizan la detecci\u00f3n de errores frecuentes y las dos \u00faltimas sirven para verificar manualmente lo que las autom\u00e1ticas no ven.<br>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555250383","position":5,"url":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555250383","name":"\u00bfC\u00f3mo se puede mejorar la accesibilidad de un sitio web existente?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"<br>Para mejorar un sitio ya publicado, empieza por una auditor\u00eda autom\u00e1tica que te d\u00e9 el mapa de problemas y prioriza los de mayor impacto y menor esfuerzo: contraste de texto, textos alternativos que faltan y jerarqu\u00eda de encabezados. Despu\u00e9s aborda la navegaci\u00f3n por teclado y el foco visible, que suelen requerir cambios en plantillas. Los subt\u00edtulos y las descripciones extendidas de gr\u00e1ficos van al final, porque son trabajo de contenido y se pueden hacer de forma progresiva.<br>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555264287","position":6,"url":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555264287","name":"\u00bfC\u00f3mo hacer que un sitio web sea accesible en WordPress?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Para hacer accesible un sitio en WordPress, elige un tema que declare conformidad con las WCAG, usa el editor de bloques para mantener una jerarqu\u00eda de encabezados correcta, rellena el campo de texto alternativo en la biblioteca de medios y revisa el contraste de la paleta del tema. Despu\u00e9s audita el resultado, porque muchos plugins y constructores visuales introducen problemas de foco y de orden de tabulaci\u00f3n que el tema no controla. Nuestra <a href=\"https:\/\/academy.siteground.com\/es\/optimizacion-wordpress\/\" data-type=\"post\" data-id=\"19180\" target=\"_blank\" rel=\"noreferrer noopener\">gu\u00eda de optimizaci\u00f3n de WordPress<\/a> cubre c\u00f3mo revisar lo que a\u00f1aden los plugins.<br>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555274715","position":7,"url":"https:\/\/academy.siteground.com\/es\/diseno-web-accesible\/#faq-question-1789555274715","name":"\u00bfWordPress cumple con WCAG?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"WordPress como plataforma sigue unos est\u00e1ndares de accesibilidad propios en su interfaz de administraci\u00f3n y en sus temas oficiales, pero la conformidad final con las WCAG depende de tu sitio, no del CMS. El tema que elijas, los plugins que instales y el contenido que publiques determinan si tu web cumple el nivel AA. Instalar WordPress no te hace conforme, igual que crear una p\u00e1gina web con cualquier otra herramienta tampoco lo hace por s\u00ed solo.<br>","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/posts\/20046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/comments?post=20046"}],"version-history":[{"count":11,"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/posts\/20046\/revisions"}],"predecessor-version":[{"id":20127,"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/posts\/20046\/revisions\/20127"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/media\/20048"}],"wp:attachment":[{"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/media?parent=20046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/categories?post=20046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/academy.siteground.com\/es\/wp-json\/wp\/v2\/tags?post=20046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}