{"id":3333,"date":"2022-07-19T09:28:37","date_gmt":"2022-07-19T09:28:37","guid":{"rendered":"https:\/\/www.lamagnetica.com\/?p=3333"},"modified":"2023-01-24T10:52:36","modified_gmt":"2023-01-24T10:52:36","slug":"10-recomendaciones-accesibilidad-web","status":"publish","type":"post","link":"https:\/\/www.lamagnetica.com\/es\/blog\/10-recomendaciones-accesibilidad-web\/","title":{"rendered":"10 recomendaciones para mejorar tu accesibilidad web"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">La <strong>accesibilidad<\/strong> es un aspecto frecuentemente olvidado tanto en fases de dise\u00f1o como de desarrollo web. Sin embargo, un sitio accesible nos ayuda a llegar a una mayor audiencia e incluso a conseguir una mejor puntuaci\u00f3n en el ranking de Google (es decir que ayuda al posicionamiento org\u00e1nico). Por \u00faltimo y no menos importante, un sitio accesible es simplemente m\u00e1s emp\u00e1tico y mejora la experiencia de todos nuestros usuarios. Es por ello que a continuaci\u00f3n te compartimos 10 recomendaciones para hacer que tu sitio web sea m\u00e1s accesible.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1 &#8211; Incluye el atributo de <strong>texto alternativo<\/strong> en las im\u00e1genes y se descriptivo. Esto ayudar\u00e1 a que los lectores de pantalla no pierdan la informaci\u00f3n que se encuentra en una imagen. Adem\u00e1s, contribuye al <strong>posicionamiento org\u00e1nico<\/strong> del sitio. Por ejemplo, un buen texto alternativo para la siguiente imagen ser\u00eda: Mujer en oficina tomando apuntes durante una reuni\u00f3n con un ordenador port\u00e1til.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/RqsZzw3hdgEVkiO38dxgJfBjdyGCPmt3A7HCPRyO0wAkPiN7zmL9SgBAPpcsTWN2F5pPLG5yrvY-K1AFV5x7GR_KlEyHD2YDj73fUOvh8c_3pg3XBXTNCl2Erik8D8yWzNqTSIQJxIwVwTztdw\" alt=\"Reuni\u00f3n ejecutiva\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2 &#8211; Comprueba que el <strong>contraste de color entre figura (textos o \u00edconos) y fondo<\/strong> es correcto. Ciertas combinaciones de colores dificultan la legibilidad de los textos, mientras que otras lo potencian. La WCAG ha establecido est\u00e1ndares que indican si dos colores \u201cpasan la prueba\u201d del contraste. Seg\u00fan los est\u00e1ndares AA:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un texto de menos de 16 p\u00edxeles debe tener una relaci\u00f3n de contraste de 4.5:1<\/li>\n\n\n\n<li>Un \u00edcono o texto grande o en negrita debe tener un contraste de 3:1<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Los est\u00e1ndares AAA son un poco m\u00e1s exigentes, ya que requieren un contraste de 7:1 y 4.5:1 respectivamente. Existen herramientas online que ayudan a medir estos n\u00fameros. En La Magn\u00e9tica usamos <a href=\"https:\/\/coolors.co\/contrast-checker\/000000-ffffff\" target=\"_blank\" rel=\"noreferrer noopener\">Coolors<\/a> o <a href=\"https:\/\/whocanuse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Who Can Use<\/a> para analizar de forma detallada diferentes anomal\u00edas existentes en torno a la percepci\u00f3n del color.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/qKOexuMXgy18CgXX5N9p_kLuB1hbyFbyWWF7fXdO89cxs0WCENYA67p9aSJzayfxcDUajV2sPlgXZoFBkSMBBUeX7S5PsOXvVH4T02LbLNWMQuXea1LaZYxleK35ISusb4fK9RMVnHvLRQMaag\" alt=\"Comparaci\u00f3n de la relaci\u00f3n de contraste\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3 &#8211; De la mano de la legibilidad, tenemos los tipos de <strong>fuentes y el tama\u00f1o de las tipograf\u00edas<\/strong>. Fuentes como Sans-serif tienen mayor legibilidad para personas con problemas de visi\u00f3n o disl\u00e9xicas. Por otro lado, depende de la tipograf\u00eda, no es recomendable usar un tama\u00f1o inferior a 16 p\u00edxeles para p\u00e1rrafos o bloques de texto grandes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4- En relaci\u00f3n a los textos, existen indicaciones de buenas pr\u00e1cticas en el <strong>interlineado y tama\u00f1o de p\u00e1rrafo<\/strong>. Para el primero se recomienda una relaci\u00f3n de 1,5 veces el tama\u00f1o de la fuente, es decir que si tenemos una fuente de 16px, el interlineado deber\u00eda ser de 24px (o 1.5 l\u00edneas). Por otro lado, para facilitar el escaneado se recomiendan p\u00e1rrafos con 700px de ancho (50 y 75 caracteres). Asimismo, los que son muy estrechos dificultan la lectura y causan cansancio visual al lector. Otras recomendaciones indican evitar el uso de may\u00fasculas y alineaciones centrales en p\u00e1rrafos grandes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/TU7yBmfhQHHH7ifu9SqxaNxRq_7hkO1qkFP6Ni-HbyKyPoXE15Dy1e-Obmw3tqX3itNwoiBGuOPa7gm1Kj0jiZdxb2EB5BvHC3TAoJOLOe7S9cJPNnH-dAHKeTtov8JpeJNxbi2jpmAmErHYaw\" alt=\"Ejemplo de texto bien escrito\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">5 &#8211; Haz uso de <strong>subt\u00edtulos y controladores en videos<\/strong>. Es importante que se pueda silenciar, pausar, subir y bajar el volumen de un video que se encuentre en nuestra web, ya que esto ayuda a usuarios con discapacidades cognitivas y a aquellos con conexiones de internet lentas o inestables. De igual manera, la WCAG indica que los usuarios deber\u00edan poder pausar carruseles y sliders con autoplay y animaciones que duren m\u00e1s de 3 segundos, para evitar una sobrecarga cognitiva de personas abrumadas ante el movimiento o efectos parpadeantes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6 &#8211; <strong>No hagas uso de texto en im\u00e1genes<\/strong>, los lectores de pantalla no son capaces de leerlos y adem\u00e1s, puede traer problemas de adaptaci\u00f3n a tu web en dispositivos m\u00f3viles.&nbsp; Por otro lado, el mensaje que quieres comunicar con im\u00e1genes se puede perder justo en el momento en que el usuario tenga problemas de conexi\u00f3n, ya que estas no se cargar\u00e1n o lo har\u00e1n de forma lenta.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7 &#8211; El <em>touch target<\/em> de botones y enlaces clickeables en mobile deber\u00eda tener un tama\u00f1o m\u00ednimo de 48 p\u00edxeles para Android y 44 p\u00edxeles para iOs para que puedan ser clickeados con facilidad por el usuario. Decimos touch targets porque un bot\u00f3n visualmente podr\u00eda tener menos altura o ancho, siempre y cuando el espacio clickeable respete los tama\u00f1os mencionados. Adem\u00e1s deber\u00edan tener un espaciado m\u00ednimo de 8 p\u00edxeles entre s\u00ed para evitar clicks err\u00f3neos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8- No reemplazar labels con placeholders en <strong>formularios<\/strong>. Los labels quedan siempre visibles y ayudan al usuario a recordar la informaci\u00f3n que deben completar en cada campo. Adem\u00e1s se recomienda que est\u00e9n posicionados sobre el input (y no por ejemplo hacia la izquierda) para facilitar la escaneabilidad del contenido por los usuarios y la lectura en formato \u201cF\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/x3n3nWvdpfQed3LRTvO-jglXSry3XZaJFs6R5KMXipoAvt09-0xo-l1LStyWfTejoeg_KDzIeP-2nKbpy_6Y6B1khp7mXU7ws98ZB4IP6aCcfNPfJBY-8mXrcSf5sEaDd1jRUFLau7H9CFi4Zw\" alt=\"Ejemplo formulario\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">9- <strong>No usar scroll infinito<\/strong>. El scroll infinito es cuando el usuario llega al \u201cfinal\u201d de una p\u00e1gina y se cargan m\u00e1s notas o productos. Normalmente se usa en blogs, peri\u00f3dicos o incluso en algunos ecommerce. Por lo general, no se recomienda ya que este efecto puede abrumar a algunos usuarios y es perjudicial para el posicionamiento org\u00e1nico.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">10- Se recomienda <strong>acompa\u00f1ar \u00edconos con textos<\/strong> siempre que sea posible. En el af\u00e1n de crear un dise\u00f1o m\u00e1s minimalista y limpio, los dise\u00f1adores suelen utilizar \u00edconos para representar determinada idea o concepto que reemplace textos m\u00e1s largos. Sin embargo, estos pueden dar lugar a m\u00e1s de una interpretaci\u00f3n, es decir ser polis\u00e9micos (o ser percibidos como tales).&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Te dejamos un ejemplo:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"167\" src=\"https:\/\/lh6.googleusercontent.com\/-ut8yfkCToQTo5xLF8Kazl1CTYnG6PS-yH1P0VPubYOanxLzd9xfiNgxa0feFGjQ1avbELQkjBpkiXHOwmYaYB7wS5kBXliM9eB4Me3s7ydpzt99aCxL74aKRQOa7EvM-CU9Q_--o1gBcdye3w\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En el tercer \u00edcono, algunos usuarios ven una gota de agua, otros una llama, etc. Incluir texto en im\u00e1genes y elementos interactuables contribuye a la transmisi\u00f3n del mensaje de forma certera y precisa. Adem\u00e1s, lo hace accesible para usuarios invidentes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Estos son solo algunos ejemplos de lo que podemos hacer para que&nbsp; la world wide web sea un lugar m\u00e1s inclusivo y democr\u00e1tico para todos. Para m\u00e1s informaci\u00f3n, te compartimos nuestros recursos favoritos para mantenernos informados sobre el tema:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/baymard.com\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">Baymard&nbsp;<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/material.io\/design\/usability\/accessibility.html#understanding-accessibility\" target=\"_blank\" rel=\"noreferrer noopener\">Google Material Design&nbsp;<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.deque.com\/\">Deque<\/a>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La accesibilidad es un aspecto frecuentemente olvidado tanto en fases de dise\u00f1o como de desarrollo web. Sin embargo, un sitio accesible nos ayuda a llegar a una mayor audiencia e incluso a conseguir una mejor puntuaci\u00f3n en el ranking de Google (es decir que ayuda al posicionamiento org\u00e1nico). Por \u00faltimo y no menos importante, un&#8230;  <a class=\"excerpt-read-more\" href=\"https:\/\/www.lamagnetica.com\/es\/blog\/10-recomendaciones-accesibilidad-web\/\" title=\"Read 10 recomendaciones para mejorar tu accesibilidad web\">Leer m\u00e1s &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[109],"tags":[],"class_list":["post-3333","post","type-post","status-publish","format-standard","hentry","category-business-intelligence"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/posts\/3333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/comments?post=3333"}],"version-history":[{"count":5,"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/posts\/3333\/revisions"}],"predecessor-version":[{"id":3735,"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/posts\/3333\/revisions\/3735"}],"wp:attachment":[{"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/media?parent=3333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/categories?post=3333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lamagnetica.com\/es\/wp-json\/wp\/v2\/tags?post=3333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}