{"id":34698,"date":"2025-01-09T11:53:11","date_gmt":"2025-01-09T10:53:11","guid":{"rendered":"https:\/\/www.mtp.es\/?p=34698"},"modified":"2025-01-09T11:53:11","modified_gmt":"2025-01-09T10:53:11","slug":"que-es-tooltip-como-conseguir-sea-accesible","status":"publish","type":"post","link":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/","title":{"rendered":"Qu\u00e9 es un ‘tooltip’ y c\u00f3mo conseguir que sea accesible"},"content":{"rendered":"

En primer lugar debemos explicar qu\u00e9 es un \u2018tooltip\u2019. Un \u2018tooltip\u2019<\/strong> es un texto breve que suele aparecer en forma de ventana emergente cuando el usuario pasa el puntero del rat\u00f3n por encima de un elemento. En principio, puede adjuntarse a cualquier elemento HTML utilizando el atributo \u2018title\u2019.<\/p>\n

Ahora bien, el uso del atributo \u2018title\u2019 presenta varios problemas de accesibilidad<\/strong>. Como dijo Steve Faulkner, “si deseas ocultar contenido a usuarios m\u00f3viles y de tablets, as\u00ed como a usuarios de tecnolog\u00eda de asistencia o solo teclado, usa el atributo title<\/a>“<\/em>.<\/p>\n

Posibles barreras de accesibilidad<\/strong><\/h2>\n

Los principales problemas o barreras de accesibilidad que se presentan en este \u00e1mbito son:<\/p>\n

– Usuarios de teclado:<\/strong> Actualmente, al tabular para mover el foco por los elementos de interacci\u00f3n de la p\u00e1gina, el navegador no muestra los atributos \u2018title\u2019 de dichos elementos.<\/p>\n

– Usuarios de lectores de pantalla:<\/strong> Son capaces de leer los atributos \u2018title\u2019 siempre y cuando naveguen con tabulador por elementos de interacci\u00f3n (enlaces, botones y formularios). Ahora bien, hay que tener en cuenta que los usuarios de lector de pantallas no navegan \u00fanicamente con tabulador, pues esta tecla \u00fanicamente salta a elementos focalizables. Utilizan tambi\u00e9n las flechas para navegar y en este caso el atributo \u2018title\u2019 no se lee.<\/p>\n

– Usuarios de magnificador de pantalla:<\/strong> El uso de un magnificador de pantalla puede hacer que los \u2018tooltip\u2019 sean imposibles de leer. Los \u2018tooltip\u2019 incluidos con un atributo \u2018title\u2019 s\u00f3lo se muestran cuando el puntero del rat\u00f3n se sit\u00faa sobre el elemento que lo desencadena. Si se utiliza un magnificador de pantalla, la parte de la ventana\u00a0 que se ve puede reducirse significativamente. En esta situaci\u00f3n, los usuarios tendr\u00e1n que mover el puntero para desplazarse por el \u2018tooltip\u2019 y leer el texto completo. Sin embargo, en cuanto el puntero pase por encima del \u2018tooltip\u2019, los navegadores lo ocultar\u00e1n.<\/p>\n

Caracter\u00edsticas de un \u2018tooltip\u2019 accesible<\/strong><\/h2>\n

La propia W3C tiene la creaci\u00f3n de \u2018tooltip\u2019 accesible como un trabajo en progreso, aunque se suele estar de acuerdo en que un \u2018tooltip\u2019 accesible<\/strong> debe tener las siguientes caracter\u00edsticas:<\/p>\n

– Debe ser desplegable utilizando el teclado.<\/p>\n

– Debe de poderse leer utilizando lectores de pantallas.<\/p>\n

– El usuario debe poder descartarlo cuando lo necesite.<\/p>\n

– No debe contener informaci\u00f3n relevante. La informaci\u00f3n que muestre debe ser complementaria.<\/p>\n

– No debe repetir informaci\u00f3n para no distraer a los usuarios.<\/p>\n

Como podemos ver, utilizar un \u2018tooltip\u2019 es bastante complejo si queremos hacerlo accesible al m\u00e1ximo n\u00famero de perfiles de usuario, por lo que se recomienda evitarlo en la medida de lo posible, ya que estandarizar el componente es complejo.<\/p>\n

El \u2018TOGGLETIP\u2019, soluci\u00f3n<\/strong><\/h2>\n

Siempre que se pueda, es mejor utilizar un \u2018TOGGLETIP\u2019<\/strong> en lugar de un \u2018tooltip\u2019. De esta forma, el usuario podr\u00e1 decidir c\u00f3mo y cu\u00e1ndo mostrar la informaci\u00f3n pulsando en el elemento adecuado.<\/p>\n

Un TOGGLETIP<\/strong> es similar a un \u2018tooltip\u2019. La diferencia radica en que el elemento que lo activa es un elemento que recibe el foco de teclado y no se activa solo, sino con un clic de rat\u00f3n. Un ejemplo de TOGGLETIP es el icono de m\u00e1s informaci\u00f3n que se adjunta a algunas im\u00e1genes. Al ser un componente nativo de html (por regla general, una etiqueta \u2018button\u2019) el problema de interacci\u00f3n al enfocar queda resuelto.<\/p>\n

En MTP estamos especializados en accesibilidad digital<\/strong><\/a>, entre otras \u00e1reas del aseguramiento de productos y servicios digitales, y contamos con un servicio de certificaci\u00f3n<\/strong> que otorga el sello DInclusive<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Conseguir la accesibilidad digital requiere de un buen trabajo de dise\u00f1o y desarrollo de los productos digitales, y de todos los elementos que los conforman, con el fin de eliminar barreras. Explicamos hoy en el post que es un \u2018tooltip\u2019, los problemas que puede ofrecer y soluciones para superarlos.<\/p>\n","protected":false},"author":22,"featured_media":35928,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[205],"tags":[],"class_list":["post-34698","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accesibilidad-digital-y-ux"],"acf":[],"yoast_head":"\nQu\u00e9 es un 'tooltip' y c\u00f3mo conseguir que sea accesible<\/title>\n<meta name=\"description\" content=\"Explicamos hoy en el post que es un 'tooltip', los problemas que puede ofrecer en el \u00e1mbito de la accesibilidad digital y soluciones para superarlos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Qu\u00e9 es un 'tooltip' y c\u00f3mo conseguir que sea accesible\" \/>\n<meta property=\"og:description\" content=\"Explicamos hoy en el post que es un 'tooltip', los problemas que puede ofrecer en el \u00e1mbito de la accesibilidad digital y soluciones para superarlos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/\" \/>\n<meta property=\"og:site_name\" content=\"MTP Espa\u00f1a\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-09T10:53:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mtp.global\/es\/wp-content\/uploads\/2025\/01\/MTP-Blog-tooltip-accesibilidad.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Accesibilidad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Accesibilidad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Qu\u00e9 es un 'tooltip' y c\u00f3mo conseguir que sea accesible","description":"Explicamos hoy en el post que es un 'tooltip', los problemas que puede ofrecer en el \u00e1mbito de la accesibilidad digital y soluciones para superarlos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/","og_locale":"es_ES","og_type":"article","og_title":"Qu\u00e9 es un 'tooltip' y c\u00f3mo conseguir que sea accesible","og_description":"Explicamos hoy en el post que es un 'tooltip', los problemas que puede ofrecer en el \u00e1mbito de la accesibilidad digital y soluciones para superarlos.","og_url":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/","og_site_name":"MTP Espa\u00f1a","article_published_time":"2025-01-09T10:53:11+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2025\/01\/MTP-Blog-tooltip-accesibilidad.jpg","type":"image\/jpeg"}],"author":"Accesibilidad","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Accesibilidad","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/#article","isPartOf":{"@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/"},"author":{"name":"Accesibilidad","@id":"https:\/\/mtp.global\/es\/#\/schema\/person\/668eeb99789001b8183bcdf63a7f3689"},"headline":"Qu\u00e9 es un ‘tooltip’ y c\u00f3mo conseguir que sea accesible","datePublished":"2025-01-09T10:53:11+00:00","mainEntityOfPage":{"@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/"},"wordCount":608,"publisher":{"@id":"https:\/\/mtp.global\/es\/#organization"},"image":{"@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/#primaryimage"},"thumbnailUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2025\/01\/MTP-Blog-tooltip-accesibilidad.jpg","articleSection":["Accesibilidad digital y UX"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/","url":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/","name":"Qu\u00e9 es un 'tooltip' y c\u00f3mo conseguir que sea accesible","isPartOf":{"@id":"https:\/\/mtp.global\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/#primaryimage"},"image":{"@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/#primaryimage"},"thumbnailUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2025\/01\/MTP-Blog-tooltip-accesibilidad.jpg","datePublished":"2025-01-09T10:53:11+00:00","description":"Explicamos hoy en el post que es un 'tooltip', los problemas que puede ofrecer en el \u00e1mbito de la accesibilidad digital y soluciones para superarlos.","breadcrumb":{"@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/#primaryimage","url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2025\/01\/MTP-Blog-tooltip-accesibilidad.jpg","contentUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2025\/01\/MTP-Blog-tooltip-accesibilidad.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/mtp.global\/es\/blog\/accesibilidad-digital-y-ux\/que-es-tooltip-como-conseguir-sea-accesible\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mtp.global\/es\/home\/"},{"@type":"ListItem","position":2,"name":"Qu\u00e9 es un ‘tooltip’ y c\u00f3mo conseguir que sea accesible"}]},{"@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\/668eeb99789001b8183bcdf63a7f3689","name":"Accesibilidad","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mtp.global\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Accesibilidad"},"url":"https:\/\/mtp.global\/es\/blog\/author\/accesibilidad\/"}]}},"fimg_url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2025\/01\/MTP-Blog-tooltip-accesibilidad.jpg","_links":{"self":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts\/34698","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\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/comments?post=34698"}],"version-history":[{"count":0,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts\/34698\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/media\/35928"}],"wp:attachment":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/media?parent=34698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/categories?post=34698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/tags?post=34698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}