{"id":731,"date":"2018-06-19T10:02:10","date_gmt":"2018-06-19T09:02:10","guid":{"rendered":"https:\/\/www.lucushost.com\/blog\/?p=731"},"modified":"2020-10-29T14:21:57","modified_gmt":"2020-10-29T13:21:57","slug":"diferencia-entre-usabilidad-y-accesibilidad-web","status":"publish","type":"post","link":"https:\/\/www.lucushost.com\/blog\/diferencia-entre-usabilidad-y-accesibilidad-web\/","title":{"rendered":"Diferencia entre usabilidad y accesibilidad web"},"content":{"rendered":"<p>Algunos de los conceptos en los que m\u00e1s se hace hincapi\u00e9 cuando tratamos de mejorar la experiencia de usuario de nuestra web son dos: la usabilidad y la accesibilidad. En muchas ocasiones estos conceptos se confunden o simplemente se piensa que es lo mismo, pero no. Es necesario conocer <strong>la diferencia entre usabilidad y accesibilidad<\/strong> si queremos optimizar nuestra web.<\/p>\n<p>Con el objetivo de conocer a fondo c\u00f3mo estos conceptos relacionados con el dise\u00f1o web, veremos primero qu\u00e9 es la usabilidad web, qu\u00e9 es la accesibilidad y ya, por \u00faltimo, la diferencia que existe entre estos dos conceptos. Adem\u00e1s, hablaremos de la importancia y de<strong> c\u00f3mo poder crear una web accesible y con buena usabilidad web<\/strong>.<\/p>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Tabla de contenidos:<\/p><ul class=\"toc_list\"><li><a href=\"#Que_es_la_usabilidad_web\">\u00bfQu\u00e9 es la usabilidad web?<\/a><\/li><li><a href=\"#Y_que_es_la_accesibilidad_web\">\u00bfY qu\u00e9 es la accesibilidad web?<\/a><\/li><li><a href=\"#Diferencia_entre_usabilidad_y_accesibilidad_web\">Diferencia entre usabilidad y accesibilidad web<\/a><\/li><li><a href=\"#Crear_una_web_accesible_y_con_buena_usabilidad_web\">Crear una web accesible y con buena usabilidad web<\/a><ul><li><a href=\"#7_principios_basicos_para_una_buena_usabilidad_web\">7 principios b\u00e1sicos para una buena usabilidad web<\/a><\/li><li><a href=\"#5_consejos_para_mejorar_la_accesibilidad_de_tu_web\">5 consejos para mejorar la accesibilidad de tu web<\/a><\/li><\/ul><\/li><li><a href=\"#Vale_la_pena_invertir_recursos_para_mejorar_la_usabilidad_y_accesibilidad_web\">\u00bfVale la pena invertir recursos para mejorar la usabilidad y accesibilidad web?<\/a><\/li><li><a href=\"#Recapitulando\">Recapitulando<\/a><\/li><\/ul><\/div>\n\n<h2><span id=\"Que_es_la_usabilidad_web\">\u00bfQu\u00e9 es la usabilidad web?<\/span><\/h2>\n<p>Podemos definir la usabilidad web como el <strong>grado o la facilidad de uso de una p\u00e1gina web<\/strong> cuando un usuario navega e interacta con ella. Cuando decimos que una web tiene un buen nivel de usabilidad, queremos decir que es una p\u00e1gina web clara, pr\u00e1ctica, intuitiva y que <strong><a href=\"https:\/\/www.lucushost.com\/blog\/google-chrome-marcara-todas-webs-http-como-no-seguras\/\">permite navegar de manera segura<\/a><\/strong>.<\/p>\n<p>La mejor forma de crear una web con buena usabilidad, es tener un dise\u00f1o centrado en el usuario, creado por y para \u00e9l, dejando un poco m\u00e1s de lado elementos muy originales o nuevas disposiciones que puedan descentrar o desconcertar a tus visitas.<\/p>\n<p>Por tanto, podemos <strong>asociar el concepto de usabilidad web a simplicidad o facilidad a la hora de navegar<\/strong> en una p\u00e1gina.<\/p>\n<h2><span id=\"Y_que_es_la_accesibilidad_web\">\u00bfY qu\u00e9 es la accesibilidad web?<\/span><\/h2>\n<p>La accesibilidad web es la posibilidad de que <strong>una p\u00e1gina web pueda ser utilizada por un mayor n\u00famero de personas posible<\/strong>, independientemente de las propias limitaciones de los usuarios, capacidades, los conocimientos que posea o las caracter\u00edsticas t\u00e9cnicas del dispositivo que est\u00e1 utilizando (por ejemplo, m\u00f3vil, tablet o un port\u00e1til).<br \/>\n<a href=\"\/\/aff.lucushost.com\/resources\/click\/?n=yZhgymNG&amp;aff=104&amp;landing=hosting-ssd\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/\/aff.lucushost.com\/resources\/banners\/?zoneid=4003&amp;n=yZhgymNG&amp;aff=104\" alt=\"Hosting SSD\" border=\"0\" title=\"\"><\/a><br \/>\nAunque con el paso del tiempo y el desarrollo de la web, la accesibilidad es un t\u00e9rmino que est\u00e1 cogiendo cada vez m\u00e1s fuerza, <strong>no es para nada nuevo<\/strong>.<\/p>\n<p>Para que te hagas una idea, Tim Berners-Lee, considerado como el padre de la Web por ser la primera persona en comunicar un cliente con un servidor a trav\u00e9s del protocolo HTTP, defend\u00eda que <em>The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect<\/em>. O en la lengua de Cervantes, <em>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<\/em> (Fuente: <strong><a href=\"https:\/\/www.w3.org\/Press\/IPO-announce\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">W3.org<\/a><\/strong>)<\/p>\n<p>Cuando hablamos de accesibilidad web y las propias limitaciones de un usuario, no solo nos referimos a las capacidades de uso, sino tambi\u00e9n a otros factores muy comunes como es la propia experiencia de uso o el idioma.<\/p>\n<h2><span id=\"Diferencia_entre_usabilidad_y_accesibilidad_web\">Diferencia entre usabilidad y accesibilidad web<\/span><\/h2>\n<p>Como hemos visto, la diferencia entre usabilidad y accesibilidad web no est\u00e1 totalmente clara. Incluso muchos autores como Henry afirman que <strong><a href=\"http:\/\/www.uiaccess.com\/upa2002a.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">establecer una diferencia entre estos dos conceptos es innecesaria<\/a><\/strong>.<\/p>\n<p>La accesibilidad es un aspecto clave y necesario si queremos conseguir que nuestra web tenga una buena usabilidad, es decir, que sea f\u00e1cil de utilizar e intuitiva para todos los usuarios, independientemente de sus capacidades, experiencia o el dispositivo que est\u00e1n utilizando mientras navegan en una web.<\/p>\n<p>Aunque tampoco nos podemos perder en los aspectos t\u00e9cnicos de la propia accesibilidad web, ya que probablemente estaremos dificultando la navegaci\u00f3n, o lo que es lo mismo, estaremos perdiendo usabilidad web. Es decir, <strong>necesitamos una web con accesibilidad utilizable<\/strong>.<\/p>\n<p>Pero \u00bfc\u00f3mo lograr ese t\u00e9rmino medio? \u00bfC\u00f3mo lograr que la usabilidad web y la accesibilidad se complementen?<\/p>\n<h2><span id=\"Crear_una_web_accesible_y_con_buena_usabilidad_web\">Crear una web accesible y con buena usabilidad web<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-733 size-full\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2018\/06\/usabilidad-y-accesibilidad-web.png\" alt=\"Usabilidad y accesibilidad web\" width=\"865\" height=\"340\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2018\/06\/usabilidad-y-accesibilidad-web.png 865w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2018\/06\/usabilidad-y-accesibilidad-web-300x118.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2018\/06\/usabilidad-y-accesibilidad-web-768x302.png 768w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2018\/06\/usabilidad-y-accesibilidad-web-700x275.png 700w\" sizes=\"(max-width: 865px) 100vw, 865px\" \/><\/p>\n<p>Ya vimos que realmente la<strong> usabilidad y la accesibilidad son dos t\u00e9rminos que se complementan<\/strong>, una web accesible permitir\u00e1 que sea f\u00e1cil de utilizar y, una web f\u00e1cil de utilizar o con un alto grado de usabilidad ser\u00e1 accesible para m\u00e1s personas en distintas situaciones.<\/p>\n<p>Por tanto, a la hora de dise\u00f1ar una web hay que tener siempre en mente estos dos conceptos. Al fin y al cabo, tanto la usabilidad como la accesibilidad web son dos factores muy importantes para que un usuario tenga una experiencia positiva en tu web, repita y mejoren tus conversiones. \u00a1Algo que Google tambi\u00e9n valorar\u00e1 muy positivamente!<\/p>\n<h3><span id=\"7_principios_basicos_para_una_buena_usabilidad_web\">7 principios b\u00e1sicos para una buena usabilidad web<\/span><\/h3>\n<p>Imag\u00ednate que cada vez que accedes a una web funciona cada una de forma diferente, \u00a1te volver\u00edas loco! Tienes que intentar que tu web sea f\u00e1cil de utilizar, pensando en el usuario, y que su funcionamiento sea f\u00e1cilmente predictible. Veamos un poco m\u00e1s a fondo los principios b\u00e1sicos de usabilidad web que toda p\u00e1gina deber\u00eda cumplir:<\/p>\n<ol>\n<li><strong>Dise\u00f1o claro y sencillo.<\/strong> Para que los usuarios encuentren f\u00e1cilmente la informaci\u00f3n que buscan. Imag\u00ednate una web con mil colores o un mont\u00f3n de <a href=\"https:\/\/www.lucushost.com\/blog\/7-elementos-no-pueden-faltar-pagina-web\/\"><strong>elementos en la p\u00e1gina principal<\/strong><\/a>, lo \u00fanico que conseguir\u00edas es que te saturen, que desv\u00eden su atenci\u00f3n y posiblemente podr\u00edan acabar abandonando la p\u00e1gina.<\/li>\n<li><strong>Buena organizaci\u00f3n de los elementos.<\/strong> La disposici\u00f3n del men\u00fa, de los formularios de contacto o de cualquier otro elemento de tu web es fundamental si quieres que todo siga un orden coherente y el usuario no se pierda.<\/li>\n<li><strong>Orienta al usuario.<\/strong> Por ejemplo, la utilizaci\u00f3n de una buena CTA o <strong><a href=\"https:\/\/www.lucushost.com\/blog\/llamada-a-la-accion\/\">llamada a la acci\u00f3n<\/a><\/strong> es muy efectiva para conducir al usuario por tu web. Adem\u00e1s, es una buena forma de conseguir que tus visitas realicen una acci\u00f3n determinada como, por ejmplo, descargarse un ebook.<\/li>\n<li><strong>Rapidez.<\/strong> Obviamente no puedes tener al usuario esperando 4 segundos a que se cargue una p\u00e1gina de tu web. En este sentido, un <strong><a href=\"https:\/\/www.lucushost.com\/hosting-ssd\">Hosting SSD<\/a><\/strong> te ayudar\u00e1 a mejorar los tiempos de carga y har\u00e1 que tu sitio web funcione de manera mucho m\u00e1s fluida.<\/li>\n<li><strong>Regla de los 3 clics.<\/strong> Debes conseguir que el usuario pueda navegar y encontrar r\u00e1pidamente las secciones o apartados de tu web, es decir, intenta que el usuario no tenga que hacer m\u00e1s de tres clics para encontrar lo que busca. En el caso de un ecommerce o una web con un muchas p\u00e1ginas, un buscador puede ayudarte a pon\u00e9rselo un poco m\u00e1s f\u00e1cil a tus visitas.<\/li>\n<li><strong>Utiliza referencias visuales.<\/strong> Los colores o tama\u00f1os de letra te ayudar\u00e1 a resaltar ciertas <strong><a href=\"https:\/\/www.lucushost.com\/blog\/partes-de-una-pagina-web-estructura-y-contenido\/\">partes de tu p\u00e1gina web<\/a><\/strong>. Por ejemplo, no puedes a\u00f1adir el mismo tama\u00f1o de letra que tienes en el footer que en el bot\u00f3n de \u201cSuscr\u00edbete\u201d que tienes en el formulario de suscripci\u00f3n.<\/li>\n<li><strong>Seguridad<\/strong>. Los usuarios deben sentir seguridad a la hora de navegar en tu web, introducir sus datos personales o al realizar una transacci\u00f3n.\u00a0 <strong><a href=\"https:\/\/www.lucushost.com\/certificados-ssl\">Comprar un certificado SSL<\/a><\/strong> permitir\u00e1 que tu web funcione con HTTPS, encriptando todos los datos que se transfieren desde el navegador hacia el servidor.<\/li>\n<\/ol>\n<p><a href=\"\/\/aff.lucushost.com\/resources\/click\/?n=yZhgymNG&amp;aff=104&amp;landing=hosting-ssd\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/\/aff.lucushost.com\/resources\/banners\/?zoneid=4003&amp;n=yZhgymNG&amp;aff=104\" alt=\"Hosting SSD\" border=\"0\" title=\"\"><\/a><\/p>\n<h3><span id=\"5_consejos_para_mejorar_la_accesibilidad_de_tu_web\">5 consejos para mejorar la accesibilidad de tu web<\/span><\/h3>\n<p>Conseguir una web accesible no es algo que puedas lograr de un d\u00eda para otro, pero hay algunos aspectos que te ayudar\u00e1n que tu web pueda ser utilizada por m\u00e1s gente:<\/p>\n<ol>\n<li><strong>A\u00f1ade subt\u00edtulos a los v\u00eddeos.<\/strong> Es un peque\u00f1o detalle, pero marca una gran diferencia para aquellas personas que poseen ciertas dificultades auditivas. Y no solo para ellas, imag\u00ednate t\u00fa mismo que accedes a una web y tienen un v\u00eddeo en ingl\u00e9s sobre un tema que realmente te interesa. Estoy segura que, aunque tengas un nivel intermedio de ingl\u00e9s, el hecho de tener subt\u00edtulos te ayudar\u00e1 a comprender mejor el contenido.<\/li>\n<li><strong>Tus im\u00e1genes siempre con texto alternativo.<\/strong> Si un usuario con una dificultad visual accede a tu web y posee un lector de pantalla, a\u00f1adir el texto Alt de las im\u00e1genes ayudar\u00e1 al lector a leer dicha imagen y facilitarle al usuario de manera precisa la informaci\u00f3n que hay en la web.<\/li>\n<li><strong>Define correctamente los campos de los formularios de contacto.<\/strong> Por ejemplo, si utilizas <strong><a href=\"https:\/\/www.lucushost.com\/blog\/como-crear-un-formulario-en-wordpress-con-contact-form-7\/\">Contact Form 7 en WordPress<\/a><\/strong> o cualquier otro formulario de contacto o suscripci\u00f3n, aseg\u00farate bien de definir las etiquetas Nombre, Correo electr\u00f3nico, Tel\u00e9fono, etc. Como en el caso anterior, piensa que si un usuario navega con un lector de pantalla, se lo estar\u00e1s poniendo mucho m\u00e1s f\u00e1cil.<\/li>\n<li><strong>Legibilidad y estructuraci\u00f3n del contenido.<\/strong> Trata de que la tipograf\u00eda que utilices en tu web sea f\u00e1cilmente legible. No utilices contrastes de color que puedan dificultar la lectura y estructura el contenido con las etiquetas H1, H2 y H3 de manera correcta.<\/li>\n<li><strong>Dise\u00f1o responsive.<\/strong> No solo te lo decimos nosotros, el <strong><a href=\"https:\/\/www.lucushost.com\/blog\/mobile-first-index-google-afecta-al-seo\/\">nuevo algoritmo Mobile-first Index de Google<\/a><\/strong> ya te advierte de ello. Es necesario tener un dise\u00f1o web que se adapte a todo tipo de dispositivos. La versi\u00f3n de escritorio le est\u00e1 cediendo paso a la versi\u00f3n m\u00f3vil, y esto deber\u00edas tenerlo muy en cuenta.<\/li>\n<\/ol>\n<h2><span id=\"Vale_la_pena_invertir_recursos_para_mejorar_la_usabilidad_y_accesibilidad_web\">\u00bfVale la pena invertir recursos para mejorar la usabilidad y accesibilidad web?<\/span><\/h2>\n<p><strong>\u00a1Rotundamente s\u00ed!<\/strong> No solo porque mejoras la facilidad de uso de tu web, sino porque vas a permitir que m\u00e1s gente pueda acceder a ella. Internet es libre,<strong> no hagas que tu p\u00e1gina web sea una barrera para nadie.<br \/>\n<\/strong><\/p>\n<p>Especialmente, cuando tratamos el tema de accesibilidad, no solo es importante que trabajemos en ello para facilitar a las personas con alg\u00fan tipo de discapacidad puedan navegar sin problema en la Red.<\/p>\n<p>Existen otros factores como, por ejemplo, la falta de experiencia en Internet, el propio idioma o el dispositivo que utilizamos para navegar que pueden nos lo ponen muy dif\u00edcil a la hora de buscar la informaci\u00f3n que necesitamos de una determinada p\u00e1gina web.<\/p>\n<p>Adem\u00e1s, seguro que ya sabes lo<strong><a href=\"https:\/\/www.lucushost.com\/blog\/5-tips-para-mejorar-la-experiencia-de-usuario-de-tu-web\/\"> importante que es la experiencia de usuario para SEO<\/a><\/strong>, \u00bfverdad? La usabilidad y la accesibilidad web son los principales ingredientes si quieres que tus visitas tengan una buena experiencia de usuario y puedas mejorar las oportunidades de conversi\u00f3n en tu web.<\/p>\n<h2><span id=\"Recapitulando\">Recapitulando<\/span><\/h2>\n<p>La usabilidad y la accesibilidad son dos t\u00e9rminos diferentes que se complementan y est\u00e1n estrechamente relacionados. Si quieres proporcionarle a tus visitas una web f\u00e1cil de utilizar y por la que puedan navegar sin dificultad, ten estos conceptos siempre en mente. Adem\u00e1s, te ayudar\u00e1 a posicionar mejor tu web en Google, \u00a1todos salimos ganando!<\/p>\n<p>Y t\u00fa, \u00bfqu\u00e9 otros principios o consejos aportar\u00edas para crear una web con buena usabilidad y accesible? \u00bfCrees que, especialmente la accesibilidad, es uno de los t\u00e9rminos en los que nos centraremos m\u00e1s a medio\/largo plazo? D\u00e9janos tu opini\u00f3n \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Algunos de los conceptos en los que m\u00e1s se hace hincapi\u00e9 cuando tratamos de mejorar la experiencia de usuario de nuestra web son dos: la usabilidad y la accesibilidad. En muchas ocasiones estos conceptos se confunden o simplemente se piensa que es lo mismo, pero no. Es necesario conocer la diferencia entre usabilidad y accesibilidad si queremos optimizar nuestra web. Con el objetivo de conocer a fondo c\u00f3mo estos conceptos relacionados con el dise\u00f1o web, veremos primero qu\u00e9 es la usabilidad web, qu\u00e9 es la accesibilidad y ya, por \u00faltimo, la diferencia que existe entre estos dos conceptos. Adem\u00e1s, hablaremos&#8230;<\/p>\n","protected":false},"author":3,"featured_media":732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,46],"tags":[73,49,58,47,72,63],"_links":{"self":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/731"}],"collection":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/comments?post=731"}],"version-history":[{"count":10,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/731\/revisions"}],"predecessor-version":[{"id":3966,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/731\/revisions\/3966"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media\/732"}],"wp:attachment":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media?parent=731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/categories?post=731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/tags?post=731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}