{"id":17995,"date":"2018-09-18T12:41:42","date_gmt":"2018-09-18T10:41:42","guid":{"rendered":"http:\/\/www.mtp.es\/?p=17995"},"modified":"2018-09-18T12:41:42","modified_gmt":"2018-09-18T10:41:42","slug":"errores-comunes-accesibilidad-web","status":"publish","type":"post","link":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/","title":{"rendered":"Errores comunes de accesibilidad en sitios web"},"content":{"rendered":"<p><em>Las grandes empresas est\u00e1n apostando por ofrecer <a href=\"https:\/\/mtp.global\/es\/experiencia-de-usuario\/evaluacion-de-accesibilidad-web\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>sitios Web accesibles<\/strong><\/a> a todas las personas, independientemente de sus condiciones f\u00edsicas, sensoriales, cognitivas o tecnol\u00f3gicas.<\/em><\/p>\n<p>A la hora de dise\u00f1ar y desarrollar un sitio Web debemos tener en cuenta una serie de principios y modelos marcados por el <strong>World Wide Consortium<\/strong> (W3C) en las <strong>Pautas de Accesibilidad para el Contenido Web<\/strong> (WCAG) 2.1.<\/p>\n<p>Cada pauta nos indica las condiciones que debe cumplir el contenido de un sitio Web para que sea accesible por personas con diversidad funcional.<\/p>\n<p>Se ha observado en diferentes an\u00e1lisis de <strong>accesibilidad de sitios Web<\/strong> un conjunto de errores que se repiten con relativa asiduidad tales como:<\/p>\n<ul>\n<li>Im\u00e1genes con informaci\u00f3n relevante para el usuario sin una correcta alternativa textual (alt). Se debe prestar atenci\u00f3n a la descripci\u00f3n de esta alternativa textual para que los usuarios de asistentes t\u00e9cnicos conozcan qu\u00e9 representan las im\u00e1genes.<\/li>\n<li>Im\u00e1genes decorativas no marcadas como tal, deben tener la alternativa textual vac\u00eda (alt=\u201d\u201d), utilizar el atributo WAI-ARIA aria-hidden=\u201dtrue\u201d o ser embebidas en el HTML a trav\u00e9s del CSS.<\/li>\n<li>Los medios \u201ctempodependientes\u201d no proporcionan alternativas como subt\u00edtulos, audiodescripciones o<\/li>\n<li>En los formularios, las etiquetas &lt;label&gt; no son asociadas a su correspondiente elemento &lt;input&gt; mediante los atributos \u201cfor\u201d e \u201cid\u201d, respectivamente y de manera expl\u00edcita, es decir, colocando la etiqueta &lt;label&gt; sin englobar al &lt;input&gt;. La posici\u00f3n en la que se coloca la etiqueta &lt;label&gt; tambi\u00e9n es importante. Por ejemplo, en los \u201ccheckbox\u201d o \u201cradio button\u201d la etiqueta &lt;label&gt; se coloca a continuaci\u00f3n. Si esta asociaci\u00f3n no se realiza correctamente, cuando el foco del teclado se posiciona en un campo de entrada, los asistentes t\u00e9cnicos no leer\u00e1n la descripci\u00f3n de la etiqueta &lt;label&gt; al usuario.<\/li>\n<li>Los &lt;inputs&gt; sin una etiqueta visible asociada suelen no tener ninguna descripci\u00f3n. Para ello, se debe utilizar el atributo WAI-ARIA aria-label. Si no se hace as\u00ed, los usuarios de asistentes t\u00e9cnicos no sabr\u00e1n qu\u00e9 dato introducir en cada campo de entrada.<\/li>\n<li>El color se usa como \u00fanico medio visual para transmitir la informaci\u00f3n. Por ejemplo, al indicar solamente con el color que hay un enlace dentro de un p\u00e1rrafo, personas con daltonismo o baja visi\u00f3n podr\u00edan tener problemas para identificar el enlace.<\/li>\n<li>El color de los textos no tiene un contraste m\u00ednimo de al menos 4,5:1 respecto al color del fondo.<\/li>\n<li>El tama\u00f1o de los textos se encuentra en medidas absolutas (px o pt), impidiendo as\u00ed al usuario poder aumentar el tama\u00f1o del texto.<\/li>\n<li>Se emplean im\u00e1genes de texto como enlaces o botones. Los asistentes t\u00e9cnicos no pueden interpretar el texto que se encuentra en las im\u00e1genes.<\/li>\n<li>Todo el contenido del sitio Web no es accesible a trav\u00e9s del teclado o el foco del teclado no es visible. En ocasiones, al utilizar una hoja de estilos denominada reset.css o similar para mejorar la consistencia de visualizaci\u00f3n en los diferentes navegadores, el contorneado del foco del teclado desaparece al tener la propiedad \u201coutline\u201d definida como \u201coutline:none or 0;\u201d.<\/li>\n<li>Los carruseles o sliders no pueden ser parados o pausados.<\/li>\n<li>Se utiliza el atributo \u201ctabindex\u201d modificando el orden coherente y significativo del foco del teclado.<\/li>\n<li>Los enlaces no tienen una descripci\u00f3n que identifique el prop\u00f3sito del elemento o es demasiada ambigua, provocando confusi\u00f3n en el usuario al navegar por la p\u00e1gina a trav\u00e9s de un asistente t\u00e9cnico.<\/li>\n<li>El contenido no se encuentra estructurado en encabezados siguiendo una jerarqu\u00eda lineal y coherente con descripciones adecuadas. Por lo menos, cada p\u00e1gina de un sitio Web debe tener un encabezado principal o H1 diferente que la identifique. Lo mismo ocurre con el t\u00edtulo de la p\u00e1gina (&lt;title&gt;). En muchos sitios Web todas las p\u00e1ginas suelen tener la misma descripci\u00f3n. Estructurando la p\u00e1gina en encabezados se evita que haya grandes bloques de contenido sin un mecanismo para poder ser saltados con un asistente t\u00e9cnico.<\/li>\n<li>No se indica el idioma del sitio Web mediante el atributo \u201clang\u201d o los cambios de idioma.<\/li>\n<li>No se informa al usuario de errores en la introducci\u00f3n de datos de entrada, como indicar el formato admitido en el campo de entrada o asociar el error a su correspondiente campo de entrada mediante el atributo WAI-ARIA aria-describedby.<\/li>\n<li>En ocasiones se desea ocultar informaci\u00f3n visiblemente, pero no para los usuarios de asistentes t\u00e9cnicos. Para ello se utilizan los atributos \u201cdisplay:none;\u201d o \u201cposition:absolute, left:-9999px, top:-9999px;\u201d. Es preferible utilizar las siguientes propiedades de CSS:<\/li>\n<\/ul>\n<p><em>.hidden {<\/em><\/p>\n<p><em>\u00a0\u00a0\u00a0\u00a0\u00a0 border: 0; <\/em><\/p>\n<p><em>\u00a0\u00a0\u00a0\u00a0\u00a0 clip: rect(0 0 0 0); <\/em><\/p>\n<p><em>\u00a0\u00a0\u00a0\u00a0\u00a0 height: 1px; <\/em><\/p>\n<p><em>\u00a0\u00a0\u00a0\u00a0\u00a0 margin: -1px;<\/em><\/p>\n<p><em>\u00a0\u00a0\u00a0\u00a0\u00a0 overflow: hidden;<\/em><\/p>\n<p><em>\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 0;<\/em><\/p>\n<p><em>\u00a0\u00a0\u00a0\u00a0\u00a0 position: absolute;<\/em><\/p>\n<p><em>\u00a0\u00a0\u00a0\u00a0\u00a0 width: 1px;<\/em><\/p>\n<p><em>\u00a0\u00a0\u00a0 <\/em><em>}<\/em><\/p>\n<ul>\n<li>Los cambios de contenido que se producen autom\u00e1ticamente no son anunciados al usuario mediante los atributos WAI-ARIA correspondientes.<\/li>\n<li>Se utilizan etiquetas de HTML y atributos o roles WAI-ARIA de forma equivocada, es decir, con una funcionalidad diferente a la que han sido establecidos.<\/li>\n<\/ul>\n<p>Por lo tanto, si revisamos en nuestro sitio Web estos deslices, seguramente logremos reducir en gran medida el n\u00famero de errores de accesibilidad existentes, mejorando as\u00ed la <a href=\"https:\/\/mtp.global\/es\/experiencia-usuario-ux\">experiencia de usuario<\/a> al navegar por el mismo.<\/p>\n<p style=\"text-align: right;\">Delia Casta\u00f1o<\/p>\n<p style=\"text-align: right;\"><strong>Equipo Experiencia de Usuario MTP<\/strong><\/p>\n<p><!-- end HubSpot Call-to-Action Code --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las grandes empresas est\u00e1n apostando por ofrecer sitios Web accesibles a todas las personas, independientemente de sus condiciones f\u00edsicas, sensoriales, cognitivas o tecnol\u00f3gicas. A la hora de dise\u00f1ar y desarrollar un sitio Web debemos tener en cuenta una serie de principios y modelos marcados por el World Wide Consortium (W3C) en las Pautas de Accesibilidad [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":17999,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[204],"tags":[143],"class_list":["post-17995","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-archivo","tag-experiencia-de-usuario-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Accesibilidad Web: Errores comunes de accesibilidad en sitios web<\/title>\n<meta name=\"description\" content=\"Accesibilidad Web: descubre los errores comunes de accesibilidad en sitios web. Mejora la experiencia de usuario mejorando la accesibilidad de tu sitio web.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accesibilidad Web: Errores comunes de accesibilidad en sitios web\" \/>\n<meta property=\"og:description\" content=\"Accesibilidad Web: descubre los errores comunes de accesibilidad en sitios web. Mejora la experiencia de usuario mejorando la accesibilidad de tu sitio web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/\" \/>\n<meta property=\"og:site_name\" content=\"MTP Espa\u00f1a\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-18T10:41:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mtp.global\/es\/wp-content\/uploads\/2018\/09\/errores-accesibilidad-web.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1346\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"MTP\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"MTP\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accesibilidad Web: Errores comunes de accesibilidad en sitios web","description":"Accesibilidad Web: descubre los errores comunes de accesibilidad en sitios web. Mejora la experiencia de usuario mejorando la accesibilidad de tu sitio web.","robots":{"index":"noindex","follow":"follow"},"og_locale":"es_ES","og_type":"article","og_title":"Accesibilidad Web: Errores comunes de accesibilidad en sitios web","og_description":"Accesibilidad Web: descubre los errores comunes de accesibilidad en sitios web. Mejora la experiencia de usuario mejorando la accesibilidad de tu sitio web.","og_url":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/","og_site_name":"MTP Espa\u00f1a","article_published_time":"2018-09-18T10:41:42+00:00","og_image":[{"width":1920,"height":1346,"url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2018\/09\/errores-accesibilidad-web.jpg","type":"image\/jpeg"}],"author":"MTP","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"MTP","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/#article","isPartOf":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/"},"author":{"name":"MTP","@id":"https:\/\/mtp.global\/es\/#\/schema\/person\/1186350db6f59e8360dd481150654813"},"headline":"Errores comunes de accesibilidad en sitios web","datePublished":"2018-09-18T10:41:42+00:00","mainEntityOfPage":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/"},"wordCount":905,"publisher":{"@id":"https:\/\/mtp.global\/es\/#organization"},"image":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/#primaryimage"},"thumbnailUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2018\/09\/errores-accesibilidad-web.jpg","keywords":["Experiencia de Usuario UX"],"articleSection":["Archivo"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/","url":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/","name":"Accesibilidad Web: Errores comunes de accesibilidad en sitios web","isPartOf":{"@id":"https:\/\/mtp.global\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/#primaryimage"},"image":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/#primaryimage"},"thumbnailUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2018\/09\/errores-accesibilidad-web.jpg","datePublished":"2018-09-18T10:41:42+00:00","description":"Accesibilidad Web: descubre los errores comunes de accesibilidad en sitios web. Mejora la experiencia de usuario mejorando la accesibilidad de tu sitio web.","breadcrumb":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/#primaryimage","url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2018\/09\/errores-accesibilidad-web.jpg","contentUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2018\/09\/errores-accesibilidad-web.jpg","width":1920,"height":1346,"caption":"errores accesibilidad web"},{"@type":"BreadcrumbList","@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-comunes-accesibilidad-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mtp.global\/es\/home\/"},{"@type":"ListItem","position":2,"name":"Errores comunes de accesibilidad en sitios web"}]},{"@type":"WebSite","@id":"https:\/\/mtp.global\/es\/#website","url":"https:\/\/mtp.global\/es\/","name":"MTP Global","description":"","publisher":{"@id":"https:\/\/mtp.global\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mtp.global\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/mtp.global\/es\/#organization","name":"MTP Global","url":"https:\/\/mtp.global\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mtp.global\/es\/#\/schema\/logo\/image\/","url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/07\/MTP-global.png","contentUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/07\/MTP-global.png","width":1200,"height":400,"caption":"MTP Global"},"image":{"@id":"https:\/\/mtp.global\/es\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/mtp.global\/es\/#\/schema\/person\/1186350db6f59e8360dd481150654813","name":"MTP","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mtp.global\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9f80fcebb065607a1066a38846083841707346cf76ca0c1df24aea7a0c5d4047?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9f80fcebb065607a1066a38846083841707346cf76ca0c1df24aea7a0c5d4047?s=96&d=mm&r=g","caption":"MTP"},"url":"https:\/\/mtp.global\/es\/blog\/author\/marketing\/"}]}},"fimg_url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2018\/09\/errores-accesibilidad-web.jpg","_links":{"self":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts\/17995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/comments?post=17995"}],"version-history":[{"count":0,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts\/17995\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/media\/17999"}],"wp:attachment":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/media?parent=17995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/categories?post=17995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/tags?post=17995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}