{"id":34117,"date":"2024-09-19T11:40:37","date_gmt":"2024-09-19T09:40:37","guid":{"rendered":"https:\/\/www.mtp.es\/?p=34117"},"modified":"2024-09-19T11:40:37","modified_gmt":"2024-09-19T09:40:37","slug":"claves-para-desarrollar-una-flip-card-accesible","status":"publish","type":"post","link":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/","title":{"rendered":"Claves para desarrollar una \u2018flip card\u2019 accesible"},"content":{"rendered":"

En la era digital actual, es fundamental que el dise\u00f1o y desarrollo de web<\/em> y apps<\/em> tenga en cuenta que todos los componentes de una p\u00e1gina web puedan ser utilizados sin barreras<\/strong>. A lo largo de este art\u00edculo exploraremos las mejores pr\u00e1cticas, pautas y consideraciones clave para garantizar que nuestras flip cards<\/em><\/strong> sean accesibles y cumplan con los est\u00e1ndares de las Pautas de Accesibilidad para el Contenido Web (WCAG)<\/strong>. Adem\u00e1s de las pautas, recogemos toda la experiencia de MTP en el \u00e1mbito de la accesibilidad digital<\/a><\/strong>.<\/p>\n

\u00bfQu\u00e9 es una flip card<\/em>?<\/strong><\/h2>\n

Una flip card<\/em><\/strong> o tambi\u00e9n conocida en espa\u00f1ol como \u2018tarjeta giratoria\u2019 es un componente de la interfaz de usuario que simula el funcionamiento de una tarjeta f\u00edsica. Por lo tanto, las flip cards<\/em> son elementos interactivos que muestran contenido en ambas caras, y que para poder ver todo el contenido, tienes que interactuar con la tarjeta para darle la vuelta y as\u00ed revele la informaci\u00f3n oculta que se encuentre en la otra cara.<\/p>\n

\u00bfQu\u00e9 hay que tener en cuenta para que sea accesible?<\/strong><\/h2>\n

A la hora de desarrollar un componente que sea accesible, hay que tener en cuenta ciertas caracter\u00edsticas que veremos a continuaci\u00f3n, que garantizar\u00e1n que la flip card<\/em>, en este caso, es totalmente funcional para todos los usuarios.<\/p>\n

Este enfoque incluir\u00e1 la aplicaci\u00f3n de los criterios de accesibilidad establecidos por las <\/strong>WCAG<\/a><\/strong>, para asegurar una experiencia inclusiva y accesible<\/strong> para aquellos usuarios que puedan tener alguna discapacidad.<\/p>\n

A continuaci\u00f3n, exploramos algunos de los criterios clave<\/strong> que se deben tener en cuenta para garantizar la accesibilidad de la flip card<\/em>:<\/p>\n

– Contenido no textual (Criterio 1.1.1):<\/strong> Si la tarjeta contiene im\u00e1genes, aseg\u00farate de proporcionar texto alternativo adecuado para estas dentro de la tarjeta, especialmente si contienen informaci\u00f3n importante.<\/p>\n

– Teclado (Criterio 2.1.1):<\/strong> Aseg\u00farate de que la tarjeta se pueda operar completamente mediante el teclado para garantizar la accesibilidad para personas que no utilizan un rat\u00f3n.<\/p>\n

– Foco visible (Criterio 2.4.7):<\/strong> La tarjeta debe ser f\u00e1cilmente identificable visualmente cuando recibe el foco, permitiendo una clara percepci\u00f3n de su estado resaltado.<\/p>\n

– Cancelaci\u00f3n del puntero (Criterio 2.5.2):<\/strong> Proporciona un mecanismo claro y accesible para que los usuarios puedan cancelar la acci\u00f3n del puntero, como mover el rat\u00f3n fuera del \u00e1rea de la tarjeta antes de soltar el bot\u00f3n.<\/p>\n

– Nombre, funci\u00f3n, valor (Criterio 4.1.2):<\/strong> Revisa que la tarjeta tenga un nombre y una funci\u00f3n claramente identificables para que los usuarios comprendan su prop\u00f3sito.<\/p>\n

Buenas pr\u00e1cticas para mejorar la accesibilidad en las flip cards<\/em><\/strong><\/h2>\n

Adem\u00e1s de estos criterios espec\u00edficos de las WCAG, ten en cuenta algunas pr\u00e1cticas generales para mejorar la accesibilidad<\/strong> en las flip card<\/em>:<\/p>\n

– Sem\u00e1ntica de la tarjeta:<\/strong> Emplea la etiqueta <button> en lugar de <div> para mejorar la sem\u00e1ntica y la accesibilidad de la flip card<\/em>. Esto proporciona una estructura HTML m\u00e1s clara y ayuda a los usuarios que dependen de lectores de pantalla al indicar que el componente es interactivo y puede ser activado.<\/p>\n

– Texto y contraste:<\/strong> Se debe garantizar que la tarjeta sea legible, teniendo en cuenta el contraste de colores ente el color de la letra y el color del fondo de la tarjeta. Adem\u00e1s, se debe valorar el emplear una fuente de letra que sea clara y sencilla y un tama\u00f1o de letra que sea grande.<\/p>\n

– Enriquecer la experiencia:<\/strong> Al implementar una flip card<\/em>, es crucial aprovechar los atributos ARIA para proporcionar informaci\u00f3n adicional y mejorar la experiencia de uso para diversos usuarios. Un ejemplo destacado es el uso del atributo aria-describedby. Este atributo permite asociar informaci\u00f3n adicional a un componente sin que sea visualmente perceptible. En el contexto de una flip card<\/em>, puedes crear un texto no visible asociado al atributo aria-describedby de la etiqueta <button>. Usando JavaScript, podemos hacer que el texto cambie seg\u00fan la cara que est\u00e9 visible, de tal forma que cuando la flip card<\/em> recibe el foco mediante el teclado, los lectores de pantalla leen esta informaci\u00f3n adicional, ofreciendo una experiencia m\u00e1s explicativa y accesible, en este caso informar\u00e1 al usuario de que cara est\u00e1 mirando. Otra forma de hacerlo, ser\u00eda empleado el atributo aria-pressed, alternando su valor usando JavaScript de tal forma que avise al usuario cuando ha cambiado la cara que est\u00e1 viendo.<\/p>\n

– Gestionar la visibilidad del contenido:<\/strong> Para asegurar una experiencia uniforme, especialmente para usuarios de lectores de pantalla, emplea el atributo aria-hidden. Este atributo, gestionado mediante JavaScript, permite ocultar o mostrar contenido de manera din\u00e1mica. Se puede utilizar para ocultar la informaci\u00f3n de la cara de la tarjeta que no est\u00e1 actualmente visible. De esta manera, los lectores de pantalla no leer\u00e1n informaci\u00f3n irrelevante, mejorando significativamente la experiencia para estos usuarios sin comprometer la accesibilidad.<\/p>\n

– Notificaciones din\u00e1micas:<\/strong> Otro aspecto clave para mejorar la experiencia de usuario es la implementaci\u00f3n del atributo aria-live. Este atributo muestra notificaciones autom\u00e1ticas cuando se producen cambios en el estado de la tarjeta. Puedes emplear aria-live para informar din\u00e1micamente a los usuarios sobre la rotaci\u00f3n de la tarjeta. Al emplear este atributo, se proporciona una retroalimentaci\u00f3n inmediata y clara sobre qu\u00e9 cara de la tarjeta (frontal o trasera) est\u00e1 actualmente visible, asegurando una experiencia fluida e informativa para todos los usuarios.<\/p>\n

– Interacci\u00f3n Consistente:<\/strong> Evita utilizar los atributos hover o focus para hacer girar la tarjeta. En su lugar, permite que la tarjeta se gire cuando el usuario haga clic o bien si est\u00e1 usando teclado, cuando este componente reciba el foco y el usuario presione una tecla.<\/p>\n

Como se ha podido observar, pese a que realizar una flip card<\/em><\/strong> puede parecer algo sencillo de implementar, lo cierto es que para hacer un componente de estas caracter\u00edsticas de la forma m\u00e1s correcta posible se deben tener en cuenta diversos aspectos de la accesibilidad<\/strong> para que todos los usuarios puedan tener una experiencia positiva al interactuar con la flip card<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Conseguir el objetivo de la inclusi\u00f3n digital para todo tipo de personas requiere seguir pautas de accesibilidad aplicables a los elementos que componen las p\u00e1ginas web o las aplicaciones. Hoy vamos a hablar en este post de \u2018flip card\u2019, y de c\u00f3mo asegurar que este elemento sea accesible.<\/p>\n","protected":false},"author":9,"featured_media":34115,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[146],"tags":[],"class_list":["post-34117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seguridad-informatica"],"acf":[],"yoast_head":"\nClaves para desarrollar una \u2018flip card\u2019 accesible<\/title>\n<meta name=\"description\" content=\"La inclusi\u00f3n digital requiere seguir pautas de accesibilidad web. Hoy hablamos del elemento \u2018flip card\u2019 y c\u00f3mo hacerlo accesible con MTP.\" \/>\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\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Claves para desarrollar una \u2018flip card\u2019 accesible\" \/>\n<meta property=\"og:description\" content=\"La inclusi\u00f3n digital requiere seguir pautas de accesibilidad web. Hoy hablamos del elemento \u2018flip card\u2019 y c\u00f3mo hacerlo accesible con MTP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/\" \/>\n<meta property=\"og:site_name\" content=\"MTP Espa\u00f1a\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-19T09:40:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/09\/MTP-Blog-post-flip-card-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=\"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=\"5 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Claves para desarrollar una \u2018flip card\u2019 accesible","description":"La inclusi\u00f3n digital requiere seguir pautas de accesibilidad web. Hoy hablamos del elemento \u2018flip card\u2019 y c\u00f3mo hacerlo accesible con MTP.","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\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/","og_locale":"es_ES","og_type":"article","og_title":"Claves para desarrollar una \u2018flip card\u2019 accesible","og_description":"La inclusi\u00f3n digital requiere seguir pautas de accesibilidad web. Hoy hablamos del elemento \u2018flip card\u2019 y c\u00f3mo hacerlo accesible con MTP.","og_url":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/","og_site_name":"MTP Espa\u00f1a","article_published_time":"2024-09-19T09:40:37+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/09\/MTP-Blog-post-flip-card-accesibilidad.jpg","type":"image\/jpeg"}],"author":"MTP","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"MTP","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/#article","isPartOf":{"@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/"},"author":{"name":"MTP","@id":"https:\/\/mtp.global\/es\/#\/schema\/person\/1186350db6f59e8360dd481150654813"},"headline":"Claves para desarrollar una \u2018flip card\u2019 accesible","datePublished":"2024-09-19T09:40:37+00:00","mainEntityOfPage":{"@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/"},"wordCount":1028,"publisher":{"@id":"https:\/\/mtp.global\/es\/#organization"},"image":{"@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/#primaryimage"},"thumbnailUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/09\/MTP-Blog-post-flip-card-accesibilidad.jpg","articleSection":["Ciberseguridad"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/","url":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/","name":"Claves para desarrollar una \u2018flip card\u2019 accesible","isPartOf":{"@id":"https:\/\/mtp.global\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/#primaryimage"},"image":{"@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/#primaryimage"},"thumbnailUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/09\/MTP-Blog-post-flip-card-accesibilidad.jpg","datePublished":"2024-09-19T09:40:37+00:00","description":"La inclusi\u00f3n digital requiere seguir pautas de accesibilidad web. Hoy hablamos del elemento \u2018flip card\u2019 y c\u00f3mo hacerlo accesible con MTP.","breadcrumb":{"@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/#primaryimage","url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/09\/MTP-Blog-post-flip-card-accesibilidad.jpg","contentUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/09\/MTP-Blog-post-flip-card-accesibilidad.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mtp.global\/es\/home\/"},{"@type":"ListItem","position":2,"name":"Claves para desarrollar una \u2018flip card\u2019 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\/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\/2024\/09\/MTP-Blog-post-flip-card-accesibilidad.jpg","_links":{"self":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts\/34117","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=34117"}],"version-history":[{"count":0,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts\/34117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/media\/34115"}],"wp:attachment":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/media?parent=34117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/categories?post=34117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/tags?post=34117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}