{"id":2302,"date":"2024-04-17T07:29:17","date_gmt":"2024-04-17T07:29:17","guid":{"rendered":"https:\/\/userway.org\/es\/?p=2302"},"modified":"2024-11-05T10:40:47","modified_gmt":"2024-11-05T10:40:47","slug":"alt-text","status":"publish","type":"post","link":"https:\/\/userway.org\/es\/blog\/alt-text\/","title":{"rendered":"Atributo alt text: im\u00e1genes accesibles a trav\u00e9s de buenas pr\u00e1cticas"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-flat ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<span class=\"ez-toc-title\" style=\"cursor:inherit\">\u00cdndice de contenido<\/span>\n<label for=\"ez-toc-cssicon-toggle-item-69ee4c77846f7\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69ee4c77846f7\"  aria-label=\"Alternar\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/userway.org\/es\/blog\/alt-text\/#%C2%BFQue_es_un_atributo_alt_text_definicion_y_usos\" >\u00bfQu\u00e9 es un atributo alt text?\u00a0definici\u00f3n y usos<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/userway.org\/es\/blog\/alt-text\/#Buenas_practicas_para_anadir_el_alt_de_imagen\" >Buenas pr\u00e1cticas para a\u00f1adir el alt de imagen<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/userway.org\/es\/blog\/alt-text\/#Ejemplos_correctos_e_incorrectos_de_imagenes_con_alt\" >Ejemplos correctos e incorrectos de im\u00e1genes con alt<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/userway.org\/es\/blog\/alt-text\/#UserWay_alt_text_para_mejorar_la_accesibilidad_de_su_web\" >UserWay: alt text para mejorar la accesibilidad de su web<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/userway.org\/es\/blog\/alt-text\/#Preguntas_frecuentes\" >Preguntas frecuentes<\/a><\/li><\/ul><\/nav><\/div>\n<p><span>El mundo digital destaca por el uso de im\u00e1genes y elementos visuales que captan la atenci\u00f3n de los usuarios, bien con objetivos de marketing o bien para transmitir informaci\u00f3n de una forma m\u00e1s creativa. Lo que se desconoce por parte de las personas que no desarrollan la web es que el atributo <\/span><span>alt text<\/span><span> posibilita a las personas con discapacidad visual obtener toda la informaci\u00f3n de forma textual.<\/span><\/p>\n<p><span>El <\/span><span>alt text<\/span><span> permite que las im\u00e1genes de un sitio web sean m\u00e1s accesibles para todas las personas y es un dato necesario que debe incluirse para cumplir con las pautas de accesibilidad web.<\/span><\/p>\n<p><span>En el siguiente art\u00edculo conoceremos qu\u00e9 es el <\/span><span>alt text<\/span><span>, las buenas pr\u00e1cticas para a\u00f1adir el <\/span><span>atributo alt<\/span><span> y por qu\u00e9 mejora la accesibilidad e incluso el posicionamiento de nuestro sitio web.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_un_atributo_alt_text_definicion_y_usos\"><\/span><b>\u00bfQu\u00e9 es un atributo <\/b><b>alt text?<\/b><b>\u00a0definici\u00f3n y usos<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span>El <\/span><span>alt text<\/span><span> o texto alternativo es un campo descriptivo que se a\u00f1ade a las im\u00e1genes de cualquier documento digital para que las personas con <\/span><span>discapacidad visual<\/span><span> obtengan una descripci\u00f3n de ese elemento. Desde documentos de texto, presentaciones de diapositivas, documentos PDF, p\u00e1ginas web, correos electr\u00f3nicos, etc. Cualquier imagen que incluyamos en estos formatos deben ser <\/span><span>im\u00e1genes con atributos \u201calt\u201d<\/span><span>.<\/span><\/p>\n<h3><b>\u00bfC\u00f3mo se aplica el <\/b><b>alt de imagen<\/b><b>?<\/b><\/h3>\n<p><span>En funci\u00f3n del software o documento digital que se utilice, el atributo alt se a\u00f1adir\u00e1 de una forma diferente:<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><span>Los programas de procesadores de texto permiten editar las opciones de las im\u00e1genes y a\u00f1adir la descripci\u00f3n de forma intuitiva a nivel usuario. Actualmente existen muchos editores que <\/span><span>mejoran la accesibilidad mediante inteligencia artificial<\/span><span>, incluyendo el <\/span><span>alt text<\/span><span> de forma autom\u00e1tica y con una descripci\u00f3n muy apropiada.<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><span>En p\u00e1ginas web que funcionen bajo un gestor de contenidos tambi\u00e9n se pueden modificar las opciones de los elementos visuales y cambiar el <\/span><span>img alt<\/span><span> desde la interfaz de usuario de una manera sencilla.\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><span>Desde el c\u00f3digo HTML de cualquier p\u00e1gina web es posible incluir el <\/span><span>atributo alt<\/span><span> en el elemento img. Si inspecciona el c\u00f3digo de una web, encontrar\u00e1 este atributo en cada imagen ya sea vac\u00edo o completado con una descripci\u00f3n.<\/span><\/li>\n<\/ul>\n<h3><b>\u00bfQui\u00e9n puede utilizar el <\/b><b>alt text<\/b><b>?<\/b><\/h3>\n<p><span>El texto alternativo es una opci\u00f3n de mejora de la accesibilidad para las personas con discapacidad visual, como ceguera o baja visi\u00f3n, para que puedan acceder a la informaci\u00f3n de la imagen. Es habitual que utilicen tecnolog\u00edas accesibles como el <\/span><a href=\"https:\/\/userway.org\/es\/blog\/lector-de-pantalla\/\"><span>lector de pantalla<\/span><\/a><span> que lee toda la informaci\u00f3n de la web o documento digital, incluyendo el <\/span><span>img alt<\/span><span>. Los usuarios de lector de pantalla acceden a diario a los textos alternativos de las im\u00e1genes y de cualquier otro elemento no textual.<\/span><\/p>\n<p><span>El <\/span><span>alt de imagen<\/span><span> tambi\u00e9n sirve para que los buscadores como Google tengan m\u00e1s contenido en la web donde rastrear. Por este motivo, el <\/span><span>alt text<\/span><span> mejora el posicionamiento web, ya que es informaci\u00f3n que se utilizar\u00e1 en los resultados de b\u00fasqueda de los navegadores.<\/span><\/p>\n<p><span>Adem\u00e1s, con el <\/span><span>atributo alt<\/span><span> facilitamos el acceso a usuarios cuya velocidad de internet no es elevada. En caso de que no sea posible cargar todos los elementos web debido a la conexi\u00f3n, el navegador mostrar\u00e1 el texto de las <\/span><span>im\u00e1genes con alt<\/span><span> en el lugar en que est\u00e9n ubicadas.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Buenas_practicas_para_anadir_el_alt_de_imagen\"><\/span><b>Buenas pr\u00e1cticas para a\u00f1adir el <\/b><b>alt de imagen<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span>Existen numerosos tipos de im\u00e1genes y cada una se utiliza en la web con un prop\u00f3sito diferente. Podemos transmitir informaci\u00f3n adicional con una gr\u00e1fica o infograf\u00eda o simplemente a\u00f1adir decoraci\u00f3n con una imagen de fondo.\u00a0<\/span><\/p>\n<p><span>Las im\u00e1genes que s\u00ed suman datos al contenido deben tener el <\/span><span>atributo alt<\/span><span> relleno con una descripci\u00f3n. Sin embargo, aquellas que son decorativas no tendr\u00e1n texto en el <\/span><span>alt text<\/span><span>. A continuaci\u00f3n se explica c\u00f3mo definirlas de forma correcta en web.<\/span><\/p>\n<h3><b>\u00bfC\u00f3mo definir <\/b><b>im\u00e1genes con alt<\/b><b> descriptivo?<\/b><\/h3>\n<p><span><strong>1.<\/strong> El atributo <\/span><span>alt text<\/span><span> de una imagen debe ser <\/span><b>conciso<\/b><span>: se aconseja no superar los 150 caracteres en la descripci\u00f3n para que los usuarios de lector de pantalla no escuchen demasiada informaci\u00f3n de la misma imagen, que en muchos casos puede ser irrelevante.<\/span><\/p>\n<p><span><strong>2.<\/strong> El <\/span><span>alt de imagen<\/span><span> debe ser <\/span><b>claro<\/b><span>: una explicaci\u00f3n evidente de lo que muestra la imagen y lo que ven las personas a trav\u00e9s de sus ojos.<\/span><\/p>\n<h3><b>\u00bfC\u00f3mo definir im\u00e1genes decorativas?<\/b><\/h3>\n<p><span>En una p\u00e1gina web todos los elementos img deben tener el <\/span><span>atributo alt<\/span><span> y en el caso de las im\u00e1genes decorativas el contenido estar\u00e1 vac\u00edo. De esta forma, el lector de pantalla reconocer\u00e1 que esa imagen se ha marcado como decorativa y no leer\u00e1 nada en voz alta, continuar\u00e1 la lectura con el elemento siguiente.<\/span><\/p>\n<h3><b>\u00bfC\u00f3mo definir el <\/b><b>alt text<\/b><b> de una imagen dentro de un enlace?\u00a0<\/b><\/h3>\n<p><span>En la mayor\u00eda de p\u00e1ginas web se utilizan botones, iconos e incluso fotograf\u00edas que sirven como enlace para navegar a otro sitio web o realizar una acci\u00f3n.\u00a0<\/span><\/p>\n<p><span>Un ejemplo es un men\u00fa de navegaci\u00f3n formado solo por iconos, como la pesta\u00f1a Inicio con un icono de una casa. Este icono debe tener en el <\/span><span>atributo alt<\/span><span> la acci\u00f3n que realiza al hacer clic: \u201cInicio\u201d.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplos_correctos_e_incorrectos_de_imagenes_con_alt\"><\/span><b>Ejemplos correctos e incorrectos de <\/b><b>im\u00e1genes con alt<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>1. Describir una fotograf\u00eda<\/b><\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-2168\" src=\"https:\/\/userway.org\/es\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-300x169.jpg\" alt=\"Celebremos el Di\u0301a Internacional de las Personas con Discapacidad\" width=\"300\" height=\"169\" srcset=\"https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-300x169.jpg 300w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-1024x576.jpg 1024w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-768x432.jpg 768w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-1536x864.jpg 1536w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-75x42.jpg 75w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-102x57.jpg 102w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-204x115.jpg 204w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-635x357.jpg 635w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad-276x155.jpg 276w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/01\/Celebremos-el-Di\u0301a-Internacional-de-las-Personas-con-Discapacidad.jpg 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><b>Alt text<\/b><b> incorrecto<\/b><span>: foto-web.jpg<\/span><\/p>\n<p><b>Alt text<\/b><b> correcto<\/b><span>: Dos personas sonrientes con confetti a su alrededor. Una est\u00e1 sentada en silla de ruedas y eleva los brazos y la otra est\u00e1 detr\u00e1s manejando la silla<\/span><\/p>\n<p><span>Es esencial no utilizar el nombre del archivo de la imagen como texto alternativo.<\/span><\/p>\n<h3><b>2. Describir una imagen funcional<\/b><\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2303 size-full\" src=\"https:\/\/userway.org\/es\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-16.25-1.jpg\" alt=\"Logo de UserWay junto a un bot\u00f3n azul que dice 'Iniciar Prueba Gratuita\" width=\"683\" height=\"100\" srcset=\"https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-16.25-1.jpg 683w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-16.25-1-300x44.jpg 300w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-16.25-1-75x11.jpg 75w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-16.25-1-102x15.jpg 102w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-16.25-1-204x30.jpg 204w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-16.25-1-310x45.jpg 310w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/p>\n<p><b>Alt text<\/b><b> incorrecto<\/b><span>: Tres l\u00edneas horizontales<\/span><\/p>\n<p><b>Alt text<\/b><b> correcto<\/b><span>: Abrir men\u00fa principal de navegaci\u00f3n<\/span><\/p>\n<p><span>Se trata de un icono con la funci\u00f3n de desplegar el men\u00fa de navegaci\u00f3n, por tanto no se puede dejar el <\/span><span>alt de imagen<\/span><span> vac\u00edo ni indicar su aspecto visual. En estos casos hay que describir la acci\u00f3n.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2304 size-thumbnail\" src=\"https:\/\/userway.org\/es\/wp-content\/uploads\/2024\/04\/Frame-1000002202-150x150.jpg\" alt=\"\u00cdcono de accesibilidad con figura humana blanca sobre fondo circular azul y morado \" width=\"150\" height=\"150\" srcset=\"https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Frame-1000002202-150x150.jpg 150w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Frame-1000002202-300x300.jpg 300w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Frame-1000002202-75x75.jpg 75w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Frame-1000002202-65x65.jpg 65w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Frame-1000002202-115x115.jpg 115w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Frame-1000002202-357x357.jpg 357w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Frame-1000002202-155x155.jpg 155w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Frame-1000002202.jpg 564w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/p>\n<p><b>Alt text<\/b><b> incorrecto<\/b><span>: Icono persona<\/span><\/p>\n<p><b>Alt text<\/b><b> correcto<\/b><span>: Abrir men\u00fa de accesibilidad<\/span><\/p>\n<p><span>Esta imagen es un bot\u00f3n que activa el men\u00fa de accesibilidad al hacer clic sobre \u00e9l. Se debe indicar al usuario la funci\u00f3n que va a ejecutar.<\/span><\/p>\n<h3><b>3. Describir una imagen decorativa<\/b><\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2305 size-full\" src=\"https:\/\/userway.org\/es\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-14.27.34.jpg\" alt=\"\" width=\"875\" height=\"250\" srcset=\"https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-14.27.34.jpg 875w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-14.27.34-300x86.jpg 300w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-14.27.34-768x219.jpg 768w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-14.27.34-75x21.jpg 75w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-14.27.34-102x29.jpg 102w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-14.27.34-204x58.jpg 204w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-14.27.34-760x217.jpg 760w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-14.27.34-310x89.jpg 310w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><\/p>\n<p><b>Alt text<\/b><b> incorrecto<\/b><span>: lo incorrecto en este caso ser\u00eda no incluir el <\/span><span>atributo alt<\/span><span> en el elemento img o a\u00f1adir el <\/span><span>atributo alt<\/span><span> con texto dentro.<\/span><\/p>\n<p><b>Alt text<\/b><b> correcto<\/b><span>: Las im\u00e1genes decorativas no necesitan descripci\u00f3n. En HTML la forma correcta de indicar que una imagen es decorativa se har\u00eda dejando el <\/span><span>img alt<\/span><span> vac\u00edo:<\/span><\/p>\n<p><span>&lt;img src=\u201dfondo-pantalla.jpg\u201d <\/span><b>alt=\u201d\u201d<\/b><span>\/&gt;<\/span><\/p>\n<h3><b>4. Describir una imagen de texto<\/b><\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2306\" src=\"https:\/\/userway.org\/es\/wp-content\/uploads\/2024\/04\/sssss.jpg\" alt=\"Texto amarillo y blanco &quot;APRENDAMOS Texto Narrativo&quot; sobre fondo verde \" width=\"400\" height=\"228\" srcset=\"https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/sssss.jpg 702w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/sssss-300x171.jpg 300w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/sssss-75x43.jpg 75w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/sssss-102x58.jpg 102w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/sssss-202x115.jpg 202w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/sssss-627x357.jpg 627w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/sssss-272x155.jpg 272w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p><b>Alt text<\/b><b> incorrecto<\/b><span>: En esta imagen aparece escrito el texto \u201cAprendamos texto narrativo\u201d.<\/span><\/p>\n<p><b>Alt text<\/b><b> correcto<\/b><span>: Aprendamos texto narrativo<\/span><\/p>\n<p><span>Es redundante decir que se trata de una imagen donde hay texto, el lector de pantalla navega de forma lineal por el contenido y le indica al usuario que el elemento enfocado es una imagen.<\/span><\/p>\n<h3><b>5. Describir un grupo de im\u00e1genes<\/b><\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2307\" src=\"https:\/\/userway.org\/es\/wp-content\/uploads\/2024\/04\/1-300x300.jpg\" alt=\"Oso caminando seguido por dos oseznos en un sendero del bosque.\" width=\"250\" height=\"250\" srcset=\"https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/1-300x300.jpg 300w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/1-150x150.jpg 150w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/1-75x75.jpg 75w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/1-65x65.jpg 65w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/1-115x115.jpg 115w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/1-357x357.jpg 357w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/1-155x155.jpg 155w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/1.jpg 600w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/> <img decoding=\"async\" class=\"alignnone wp-image-2308\" src=\"https:\/\/userway.org\/es\/wp-content\/uploads\/2024\/04\/2-300x300.jpg\" alt=\"Oso apoyando sus patas en un \u00e1rbol en un bosque frondoso. \" width=\"250\" height=\"250\" srcset=\"https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/2-300x300.jpg 300w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/2-150x150.jpg 150w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/2-75x75.jpg 75w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/2-65x65.jpg 65w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/2-115x115.jpg 115w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/2-357x357.jpg 357w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/2-155x155.jpg 155w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/2.jpg 600w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/> <img decoding=\"async\" class=\"alignnone wp-image-2309\" src=\"https:\/\/userway.org\/es\/wp-content\/uploads\/2024\/04\/3-300x300.jpg\" alt=\"Oso en un bosque mirando directamente a la c\u00e1mara.\" width=\"250\" height=\"250\" srcset=\"https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/3-300x300.jpg 300w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/3-150x150.jpg 150w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/3-75x75.jpg 75w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/3-65x65.jpg 65w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/3-115x115.jpg 115w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/3-357x357.jpg 357w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/3-155x155.jpg 155w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/3.jpg 600w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/p>\n<p><b>Alt text<\/b><b> incorrecto<\/b><span>: Osos pardos.<\/span><\/p>\n<p><b>Alt text<\/b><b> correcto<\/b><span>: Osa con sus oseznos caminando por el bosque buscando alimento y escalando en los \u00e1rboles<\/span><\/p>\n<p><span>En una secuencia de im\u00e1genes se debe dar una visi\u00f3n global de lo que ocurre en ellas, no s\u00f3lo describir una de ellas, ya que el usuario pierde mucha informaci\u00f3n.<\/span><\/p>\n<h3><b>6. Describir un mapa<\/b><\/h3>\n<p><b><img decoding=\"async\" class=\"alignnone wp-image-2310\" src=\"https:\/\/userway.org\/es\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-15.38.01.jpg\" alt=\"Mapa colorido de Italia con nombres de regiones y puntos de referencia destacados, y el t\u00edtulo &quot;Mapa de Italia&quot; en la parte superior derecha\" width=\"500\" height=\"399\" srcset=\"https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-15.38.01.jpg 752w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-15.38.01-300x239.jpg 300w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-15.38.01-75x60.jpg 75w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-15.38.01-81x65.jpg 81w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-15.38.01-144x115.jpg 144w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-15.38.01-447x357.jpg 447w, https:\/\/userway.org\/es\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-16-at-15.38.01-194x155.jpg 194w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/b><\/p>\n<p><b>Alt text<\/b><b> incorrecto<\/b><span>: Mapa de Italia<\/span><\/p>\n<p><b>Alt text<\/b><b> correcto<\/b><span>: Ruta circular recomendada por Italia alternando tren y coche desde la regi\u00f3n de Campania, pasando regiones como por Lazio, Toscana, Piemonte, Lombardia o Marche<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"UserWay_alt_text_para_mejorar_la_accesibilidad_de_su_web\"><\/span><b>UserWay: <\/b><b>alt text<\/b><b> para mejorar la accesibilidad de su web<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span>Es esencial que cada imagen disponga de <\/span><span>alt text<\/span><span> y cualquier persona conozca la informaci\u00f3n que transmiten. Por ello, UserWay es la <a href=\"https:\/\/userway.org\/es\/\">soluci\u00f3n que le facilitar\u00e1 mejorar la accesibilidad<\/a> y apostar por la inclusi\u00f3n.\u00a0<\/span><\/p>\n<p><span>Dentro del conjunto de herramientas que ofrece UserWay para mejorar la accesibilidad web, puede encontrar el generador de <\/span><span>alt de imagen<\/span><span> mediante IA. Este generador forma parte del <\/span><a href=\"https:\/\/userway.org\/es\/widget\/\"><span>Widget UserWay<\/span><\/a><span> y permite gestionar los errores de accesibilidad detectados. Podr\u00e1 localizar las im\u00e1genes sin <\/span><span>alt text<\/span><span> y generar una descripci\u00f3n autom\u00e1tica con inteligencia artificial, con su posterior revisi\u00f3n de forma manual.<\/span><\/p>\n<p><span>Todo momento es bueno para comenzar a cumplir con las pautas de accesibilidad y los requisitos de las WCAG, <\/span><a href=\"https:\/\/userway.org\/es\/?e=popup-demo\"><span>solicite ahora una prueba gratuita de UserWay<\/span><\/a><span> y descubra su potencial permitiendo acceso a su web a muchas m\u00e1s personas.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span><b>Preguntas frecuentes<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>\u00bfEs necesario traducir el <\/b><b>alt text<\/b><b>?<\/b><\/h3>\n<p><span>El <\/span><span>img alt<\/span><span> en HTML es contenido textual y debe estar escrito en el mismo idioma que el idioma definido en la p\u00e1gina a trav\u00e9s del atributo lang de la etiqueta html. Si la p\u00e1gina o sitio web dispone de varios idiomas, este texto al igual que el resto del contenido de la web debe traducirse, de este modo si el usuario selecciona un idioma diferente, el lector de pantalla leer\u00e1 el <\/span><span>alt text<\/span><span> correctamente y el usuario no perder\u00e1 informaci\u00f3n.<\/span><\/p>\n<h3><b>\u00bfQu\u00e9 ocurre si el <\/b><b>atributo alt<\/b><b> es muy extenso?<\/b><\/h3>\n<p><span>En caso de incluir demasiada informaci\u00f3n en el <\/span><span>alt text<\/span><span> de una imagen se podr\u00eda producir una mala experiencia de usuario. Por ejemplo, la persona que acceda a la imagen a trav\u00e9s de un lector de pantalla o teclado Braille podr\u00eda saturarse y escuchar durante demasiado tiempo contenido relevante, pues el <\/span><span>alt de imagen<\/span><span> se considera contenido importante y el lector de pantalla siempre lee el texto descriptivo.<\/span><\/p>\n<h3><b>\u00bfQui\u00e9n debe a\u00f1adir el <\/b><b>alt de imagen<\/b><b>?<\/b><\/h3>\n<p><span>De forma general todo el mundo que disponga de un sitio web, ya sea personal o para su negocio, debe a\u00f1adir todas las <\/span><span>im\u00e1genes con alt<\/span><span>. De forma espec\u00edfica, ser\u00e1n los desarrolladores web o quien gestione la informaci\u00f3n del sitio quien deba a\u00f1adir esa descripci\u00f3n textual en el <\/span><span>img alt<\/span><span>. Un sitio web donde todos los elementos no textuales dispongan de <\/span><span>alt text<\/span><span>, ser\u00e1 mucho m\u00e1s accesible y conseguir\u00e1 un mayor tr\u00e1fico de usuarios.<\/span><\/p>\n<p><script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [{\n    \"@type\": \"Question\",\n    \"name\": \"\u00bfEs necesario traducir el alt text?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"El img alt en HTML es contenido textual y debe estar escrito en el mismo idioma que el idioma definido en la p\u00e1gina a trav\u00e9s del atributo lang de la etiqueta html. Si la p\u00e1gina o sitio web dispone de varios idiomas, este texto al igual que el resto del contenido de la web debe traducirse, de este modo si el usuario selecciona un idioma diferente, el lector de pantalla leer\u00e1 el alt text correctamente y el usuario no perder\u00e1 informaci\u00f3n.\"\n    }\n  },{\n    \"@type\": \"Question\",\n    \"name\": \"\u00bfQu\u00e9 ocurre si el atributo alt es muy extenso?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"En caso de incluir demasiada informaci\u00f3n en el alt text de una imagen se podr\u00eda producir una mala experiencia de usuario. Por ejemplo, la persona que acceda a la imagen a trav\u00e9s de un lector de pantalla o teclado Braille podr\u00eda saturarse y escuchar durante demasiado tiempo contenido relevante, pues el alt de imagen se considera contenido importante y el lector de pantalla siempre lee el texto descriptivo.\"\n    }\n  },{\n    \"@type\": \"Question\",\n    \"name\": \"\u00bfQui\u00e9n debe a\u00f1adir el alt de imagen?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"De forma general todo el mundo que disponga de un sitio web, ya sea personal o para su negocio, debe a\u00f1adir todas las im\u00e1genes con alt. De forma espec\u00edfica, ser\u00e1n los desarrolladores web o quien gestione la informaci\u00f3n del sitio quien deba a\u00f1adir esa descripci\u00f3n textual en el img alt. Un sitio web donde todos los elementos no textuales dispongan de alt text, ser\u00e1 mucho m\u00e1s accesible y conseguir\u00e1 un mayor tr\u00e1fico de usuarios.\"\n    }\n  }]\n}\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El mundo digital destaca por el uso de im\u00e1genes y elementos visuales que captan la atenci\u00f3n de los usuarios, bien con objetivos de marketing o bien para transmitir informaci\u00f3n de una forma m\u00e1s creativa. Lo que se desconoce por parte de las personas que no desarrollan la web es que el atributo alt text posibilita [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":2390,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-2302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comprension-de-accesibilidad"],"acf":[],"_links":{"self":[{"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/posts\/2302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/comments?post=2302"}],"version-history":[{"count":10,"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/posts\/2302\/revisions"}],"predecessor-version":[{"id":2394,"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/posts\/2302\/revisions\/2394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/media\/2390"}],"wp:attachment":[{"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/media?parent=2302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/categories?post=2302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/userway.org\/es\/blog\/wp-json\/wp\/v2\/tags?post=2302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}