{"id":17401,"date":"2020-08-17T11:44:46","date_gmt":"2020-08-17T11:44:46","guid":{"rendered":"https:\/\/www.conectasoftware.com\/?p=17401"},"modified":"2023-06-23T10:22:29","modified_gmt":"2023-06-23T10:22:29","slug":"mejorar-la-accesibilidad-de-tu-sitio-web","status":"publish","type":"post","link":"https:\/\/www.conectasoftware.com\/magazine\/mejorar-la-accesibilidad-de-tu-sitio-web\/","title":{"rendered":"Mejora la accesibilidad de tu sitio web"},"content":{"rendered":"<p>Entendemos por <strong>accesibilidad web<\/strong> al conjunto de tecnolog\u00edas, normas de aplicaci\u00f3n y dise\u00f1o que facilitan y mejoran la utilizaci\u00f3n de los sitios Web siguiendo las pautas del \u00ab<strong>dise\u00f1o para todos<\/strong>\u00ab. El fundamento para desarrollar una web accesible radica en comprender que las personas acceden a Internet de modos diferentes y por eso es muy importante que se tenga en cuanta en la creaci\u00f3n de p\u00e1ginas web su accesibilidad web.<br \/>\nPara mejorar la experiencia de todos, podemos centrarnos en la usabilidad de la web a trav\u00e9s de cuatro amplios par\u00e1metros:<\/p>\n<ul>\n<li><strong>Visual<\/strong>: haz que sea f\u00e1cil de ver<\/li>\n<li><strong>Auditivo<\/strong>: facilita la audici\u00f3n<\/li>\n<li><strong>Motor<\/strong>: facilita la interacci\u00f3n<\/li>\n<li><strong>Cognitivo<\/strong>: hazlo f\u00e1cil de entender<\/li>\n<\/ul>\n<h2>Tipo de usuario a tener en cuenta<\/h2>\n<ul>\n<li><strong>Con ceguera total <\/strong>que usan un programa lector de pantalla para acceder al contenido del navegador.<\/li>\n<li><strong>Usuarios con poca visibilidad, visi\u00f3n parcial o ceguera al color<\/strong>, que emplean sistemas de ampliaci\u00f3n de la pantalla, recurren al aumento del tama\u00f1o de las letras o requieren un contraste efectivo de color entre el texto y el fondo.<\/li>\n<li><strong>Con limitaci\u00f3n motriz en sus manos<\/strong>, que no pueden utilizar el rat\u00f3n y acceden al contenido web exclusivamente mediante el teclado de su ordenador o lo hacen mediante sistemas de reconocimiento de voz, navegando mediante instrucciones verbales que dan a su ordenador.<\/li>\n<li><strong>Usuario con sordera total <\/strong>que requieren de alternativas textuales a elementos multimedia sonoros.<\/li>\n<li><strong>Con un lenguaje de compresi\u00f3n y entendimiento muy limitado<\/strong>, como es el caso de personas con discapacidad intelectual.<\/li>\n<li><strong>Usuarios de conexiones lentas a Internet.<\/strong><\/li>\n<\/ul>\n<blockquote><p>El poder de la Web est\u00e1 en su universalidad. El acceso por cualquier persona, independientemente de la discapacidad que presente es un aspecto esencial.<\/p><\/blockquote>\n<h2><strong>\u00bfQui\u00e9n debe ser responsable de crear contenido accesible?<\/strong><\/h2>\n<p>Una de las razones por las que la accesibilidad queda a un lado a la hora de desarrollar un proyecto de sitio web es que nadie est\u00e1 seguro de <strong>qui\u00e9n debe ocuparse de ello<\/strong>. \u00bfDeber\u00eda el departamento de RRHH asumir este papel? \u00bfO es el departamento legal?<br \/>\nLa realidad es que la accesibilidad del contenido debe ser un <strong>esfuerzo conjunto<\/strong> entre los vendedores, desarrolladores, dise\u00f1adores, control de calidad, etc. En otras palabras, si tiene alg\u00fan control sobre el contenido publicado en su sitio web o en su aplicaci\u00f3n, se debe asegurar\u00a0 el cumplimiento de las pautas.<br \/>\nAdem\u00e1s de interiorizar dicha responsabilidad, lo m\u00e1s recomendables contar con profesionales externos para revisar su sitio web.<\/p>\n<h2><strong>5 cosas a tener en cuenta al evaluar la accesibilidad del contenido<\/strong><\/h2>\n<h3><strong>1. Escritura y Legibilidad<\/strong><\/h3>\n<p>Escribir un texto excelente es m\u00e1s que buena ortograf\u00eda, gram\u00e1tica y texto en un orden coherente. Eso no significa que no debamos cuidarlos. Los mejores sitios tienen contenido que es comprensible, \u00fatil y apropiado para su audiencia. Un lenguaje claro, simple y conciso hace que el texto sea m\u00e1s accesible.<br \/>\nEmplea frases y p\u00e1rrafos cortos y listas con vi\u00f1etas para facilitar que las personas con dificultades cognitivas y de aprendizaje consuman tu contenido.<br \/>\n<a href=\"https:\/\/www.conectasoftware.com\/apps\/yoast-seo\/\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20869\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2020\/08\/legibilidad-en-seo-de-yoast.png\" alt=\"legibilidad en seo de yoast\" width=\"750\" height=\"342\" \/><\/a><br \/>\n<a href=\"https:\/\/www.conectasoftware.com\/apps\/yoast-seo\/\">SEO de YOAST<\/a> es un plugin para WordPress que cuenta con indicadores de legibilidad. Tiene en cuenta la distribuci\u00f3n de subt\u00edtulos, la facilidad de lectura Flesch-Kincaid (indican la facilidad de comprensi\u00f3n de un documento), la longitud de frases y parrafos y la densidad de palabras de transici\u00f3n.<\/p>\n<p><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20870\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2020\/08\/legibilidad-en-hemingway-app.png\" alt=\"legibilidad en hemingway app\" width=\"750\" height=\"480\" \/><br \/>\nLa <a href=\"https:\/\/hemingwayapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Hemingway App<\/a> es otra herramienta que puntua el texto por legibilidad, el uso de adverbios (cuanto menos, mejor), el uso de la voz pasiva, enunciados dif\u00edciles de leer y s\u00ed hay alternativas m\u00e1s simples.<\/p>\n<h3><strong>2.La tipograf\u00eda<\/strong><\/h3>\n<p>La tipograf\u00eda puede mejorar a\u00fan m\u00e1s la legibilidad del texto. La accesibilidad radica en mantener el texto lo m\u00e1s legible posible. La familia de fuentes, el tama\u00f1o y la altura de l\u00ednea influyen en el resultado.<br \/>\nAdem\u00e1s, hay <strong>tipos de letra especializados<\/strong> dise\u00f1ados para ayudar a los lectores j\u00f3venes y a las personas que tienen dificultades para leer.<br \/>\nEs recomendable utilizar fuentes comunes, ya que esto aumentar\u00e1 la probabilidad de que el equipo del usuario lo tenga instalado y pueda mostrarlo. Times New Roman, Arial, Calibri, Helvetica y Tahoma son ejemplos de fuentes conocidas.<br \/>\nDebe contrastar con el fondo y tener un tama\u00f1o m\u00ednimo de 16 px con la posibilidad de que los usuarios puedan cambiar el tama\u00f1o del texto sin tener que desplazarse horizontalmente. Es habitual hacer zoom en pantallas tactiles, por lo que es recomendable no bloquear la opci\u00f3n de zoom.<br \/>\nLas l\u00edneas deben estar separadas por al menos un espacio y medio, y el texto nunca debe alinearse justificado.<\/p>\n<h3><strong>3. Jerarqu\u00eda de contenido<\/strong><\/h3>\n<p>Estructura el contenido en un flujo l\u00f3gico con un t\u00edtulo H1 (t\u00edtulo principal) en la parte superior de la p\u00e1gina, seguido de t\u00edtulos H2 (subt\u00edtulo) y, si es necesario, t\u00edtulos H3 y H4 (subt\u00edtulos secundarios) debajo de ellos.<\/p>\n<h3><strong>4. Navegaci\u00f3n<\/strong><\/h3>\n<p>Haz que tu sitio sea navegable a trav\u00e9s del teclado, ya que algunas personas con discapacidades visuales o motoras prefieren usar el teclado a el rat\u00f3n.<\/p>\n<h3><strong>5. Multimedia<\/strong><\/h3>\n<p>Crea versiones alternativas de todo el contenido multimedia, o mej\u00f3ralas para garantizar que las personas con diferentes tipos de discapacidades puedan consumirlas. Adem\u00e1s, aseg\u00farate de agregar texto alternativo a las imagen para ayudar a los usuarios con discapacidad visual que conf\u00edan en los lectores de pantalla.<\/p>\n<h2 id=\"firstHeading\" class=\"firstHeading\" lang=\"es\">W3C &#8211; World Wide Web Consortium<\/h2>\n<p>El \u00a0<a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener\"><b>World Wide Web Consortium<\/b>\u00a0(<b>W3C<\/b>)<\/a>, es un consorcio internacional. El objetivo del W3C es\u00a0<b>uniformar las especificaciones t\u00e9cnicas y establecer directrices<\/b>\u00a0para el desarrollo de tecnolog\u00edas web, de forma que se mantenga la idea b\u00e1sica de la World Wide Web. Tecnolog\u00edas como\u00a0HTML,\u00a0XML,\u00a0CSS, otros lenguajes de\u00a0marcado\u00a0y servicios web son utilizados diariamente por millones de usuarios.<br \/>\n<img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/e\/ed\/W3C%C2%AE_Icon.svg\/1200px-W3C%C2%AE_Icon.svg.png\" alt=\"World Wide Web Consortium - Wikipedia, la enciclopedia libre\" width=\"264\" height=\"180\" \/><\/p>\n<h2>Recomendaciones para hacer una web accesible<\/h2>\n<p>Hacer accesible la web es permitir su uso y navegaci\u00f3n al mayor n\u00famero de personas posibles. Teniendo en cuenta unas sencillas recomendaciones, conseguiremos hacer m\u00e1s accesible nuestra web, y en muchos casos, dichas recomendaciones tambi\u00e9n nos ayudan con el SEO y posicionamiento de la web.<br \/>\nPodemos aprovechar las herramientas y t\u00e9cnicas como un copywriting claro, una arquitectura de la informaci\u00f3n bien estructurada, HTML significativo y dise\u00f1o reflexivo para crear un conjunto s\u00f3lido de mejores pr\u00e1cticas.<br \/>\nHay que tener en cuenta, que muchos usuarios con discapacidad intelectual o sensorial, o problemas de diversidad funcional utilizan equipos de apoyo o herramientas adaptadas para facilitarles el uso de sus equipos inform\u00e1ticos. Salvado este primer obst\u00e1culo,\u00a0 los usuarios con discapacidad se suelen encontrar con webs que suponen una barrera digital para el uso de Internet, por lo que los esfuerzos por hacer la inform\u00e1tica e Internet accesible se quedan muchas veces a mitad de camino.<br \/>\nSiguiendo las siguientes recomendaciones conseguir\u00e1s que m\u00e1s personas puedan usar tu web. Puedes tom\u00e1rtelo como parte de las normas de dise\u00f1o, que incluyen:<\/p>\n<ul>\n<li>La inclusi\u00f3n de <strong>texto alternativo<\/strong> en las im\u00e1genes, para facilitar la compresi\u00f3n web sobre todo a las personas ciegas o que tienen limitada su capacidad visual.<\/li>\n<li>El uso de <strong>encabezados para las tablas de datos<\/strong>, que sirven de introducci\u00f3n informativa y ayudan a hacer m\u00e1s comprensible los datos y su interpretaci\u00f3n.<\/li>\n<li><strong>Etiquetar los campos de formularios con nombres autoexplicativos<\/strong> del tipo de dato que se requieren en cada uno de ellos.<\/li>\n<li><strong>Usar textos de enlace explicativos <\/strong>y que informen del contenido del destino del enlace, evitando textos del tipo \u201cpincha aqu\u00ed\u201d, \u201cm\u00e1s informaci\u00f3n\u201d que no ofrecen informaci\u00f3n suficiente y espec\u00edfica del objeto de cada enlace.<\/li>\n<li><strong>Activar subt\u00edtulos en los v\u00eddeos<\/strong> que posibiliten a las personas sordas acceder al mensaje de audio contenido en el mismo.<\/li>\n<li><strong>No utilizar s\u00f3lo el color para resaltar elementos.<\/strong> Se utilizar\u00e1n elementos como las microanimaciones para estimular la interacci\u00f3n del usuario, as\u00ed como signos de exclamaci\u00f3n para modificar el tono de voz en las herramientas de narraci\u00f3n por voz que utilizan las personas ciegas.<\/li>\n<li>En la redacci\u00f3n de los textos se tomar\u00e1 la <strong>prueba de legibilidad Flex<\/strong> como indicativo.<\/li>\n<li>Se utilizar\u00e1n <strong>fuentes tipo Serif <\/strong>para los p\u00e1rrafos, ya que son m\u00e1s legibles y con <strong>tama\u00f1os de texto no inferiores a los 14px<\/strong>.<\/li>\n<li>Se har\u00e1 un <strong>uso limitado de las variaciones de la fuente<\/strong> como cursiva, negrita, may\u00fasculas u otros m\u00e9todos de dise\u00f1o que pueden hacer dif\u00edcil de leer el contenido.<\/li>\n<li><strong>T\u00edtulos \u201cH\u201d bien diferenciados<\/strong> y con tama\u00f1os de fuente escalados.<\/li>\n<li><strong>Limitar el uso de texto dentro de las im\u00e1genes<\/strong>, que no es legible por parte de las herramientas de narraci\u00f3n.<\/li>\n<li><strong>Evitar el uso de tonos claros del color gris<\/strong><\/li>\n<li>Priorizar el <strong>uso de colores s\u00f3lidos<\/strong> y textos sobre colores que generen <strong>un alto contraste<\/strong>.<\/li>\n<li><strong>Evitar los espacios excesivos entre palabras<\/strong>, por lo que se evitar\u00e1 utilizar los ajustes de p\u00e1rrafo que alinean los lados derechos e izquierdo. Para ello se utilizar\u00e1 el ajuste de p\u00e1rrafo a la izquierda.<\/li>\n<\/ul>\n<p>Estas son alguna de las recomendaciones m\u00e1s importantes. Como ves, no es tan dif\u00edcil aplicarlas durante el dise\u00f1o de la web. Tenlas presentes a modo de manual de dise\u00f1o y har\u00e1s tu web mucho m\u00e1s inclusiva.<\/p>\n<p><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20797\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2020\/05\/screenshot-3.jpg\" alt=\"accesibilidad web\" width=\"810\" height=\"526\" \/><\/p>\n<h2>Plugin Accesibilidad SOGO para WordPress<\/h2>\n<p>Este complemento contribuye a mejorar la \u00a0accesibilidad de las web dise\u00f1adas con WordPress. Agrega una serie de funciones de accesibilidad \u00fatiles y que se pueden deshabilitar de acuerdo con las necesidades de la web. \u00a0Entre ellas, una barra que permite aplicar filtros para alto contraste o aumentar el tama\u00f1o de la fuente entre otras funcionalidades.<br \/>\nSi dise\u00f1as tu web en WordPress, esta es una soluci\u00f3n f\u00e1cil y pr\u00e1ctica que ayuda a hacer m\u00e1s usable tu web para las personas con alg\u00fan tipo de discapacidad.<br \/>\nPuedes <a href=\"https:\/\/es.wordpress.org\/plugins\/sogo-accessibility\/\" target=\"_blank\" rel=\"noopener noreferrer\">descargar el plugin aqu\u00ed.<\/a><\/p>\n<p>Art\u00edculos Relacionados:<br \/>\n<a href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/25-anos-de-diseno-web-tendencias-y-soluciones\/\">25 a\u00f1os de dise\u00f1o web. Tendencias y Soluciones<\/a><br \/>\n<a href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/diseno-web-minimalista-tendencia\/\">El dise\u00f1o web minimalista<\/a><\/p>\n<div class=\"wpb_content_element \">\n<div id=\"ut_sb_5f64be1eb946b\" class=\" clearfix clearfix\">\n<div class=\"ut-info\"><a class=\"ut-service-box-link \" title=\"10 principios del buen dise\u00f1o de Dieter Rams\" href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/los-10-principios-del-buen-diseno-de-dieter-rams\/\" target=\"_self\" rel=\"noopener noreferrer\">+ 10 Principios Del Buen Dise\u00f1o De Dieter Rams<\/a><\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<div class=\"wpb_content_element \">\n<div id=\"ut_sb_5f64be1eb94d9\" class=\" clearfix clearfix\">\n<div class=\"ut-info\"><a class=\"ut-service-box-link \" title=\"Inspiraci\u00f3n de 25 a\u00f1os de dise\u00f1o web\" href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/25-anos-de-diseno-web-tendencias-y-soluciones\/\" target=\"_self\" rel=\"noopener noreferrer\">+ Inspiraci\u00f3n De 25 A\u00f1os De Dise\u00f1o Web<\/a><\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<div class=\"wpb_content_element \">\n<div id=\"ut_sb_5f64be1eb9544\" class=\" clearfix clearfix\">\n<div class=\"ut-info\"><a class=\"ut-service-box-link \" title=\"Cuando cambiar el dise\u00f1o de la web\" href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/migrar-la-web-corporativa\/\" target=\"_self\" rel=\"noopener noreferrer\">+ Cuando Cambiar El Dise\u00f1o De La Web<\/a><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Entendemos por accesibilidad web al conjunto de tecnolog\u00edas, normas de aplicaci\u00f3n y dise\u00f1o que facilitan y mejoran la utilizaci\u00f3n de los sitios Web siguiendo las pautas del \u00abdise\u00f1o para todos\u00ab. El fundamento para desarrollar una web accesible radica en comprender que las personas acceden a Internet de modos diferentes y por eso es muy importante [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":20895,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[23],"tags":[],"class_list":{"0":"post-17401","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-diseno-web"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/17401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/comments?post=17401"}],"version-history":[{"count":2,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/17401\/revisions"}],"predecessor-version":[{"id":37453,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/17401\/revisions\/37453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/20895"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=17401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/categories?post=17401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/tags?post=17401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}