{"id":93,"date":"2022-07-12T05:34:14","date_gmt":"2022-07-12T05:34:14","guid":{"rendered":"http:\/\/34.172.140.203\/wordpress\/?p=93"},"modified":"2022-10-26T16:21:50","modified_gmt":"2022-10-26T16:21:50","slug":"mejor-accesibilidad-en-maps-javascript-api","status":"publish","type":"post","link":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/2022\/07\/12\/mejor-accesibilidad-en-maps-javascript-api\/","title":{"rendered":"Mejor accesibilidad en Maps JavaScript API"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/strapi_bucket-1\/1_a102a8336c\/1_a102a8336c.png\" alt=\"foto\"\/><\/figure>\n\n\n\n<p>En conmemoraci\u00f3n del D\u00eda Mundial de Concientizaci\u00f3n sobre Accesibilidad en la Web &nbsp;(GAAD por sus siglas en ingl\u00e9s (Global Accessibility Awareness Day) que sucede cada 20 de mayo, Google nos da a conocer las nuevas actualizaciones que mejoran la accesibilidad en las APIs Maps JavaScript y Maps Embed.&nbsp;<\/p>\n\n\n\n<p>El equipo de Google Maps menciona que ya desde 2021 su foco ha sido centrarse en mejoras fundamentales de la API Embed, incluyendo dar \u00f3rdenes con la tecla de tabulaci\u00f3n, la interactividad del teclado y el lector de la pantalla, la adici\u00f3n de etiquetas de accesibilidad y el incremento en el contraste de color de varios controles de mapa. Estas actualizaciones permiten la inclusi\u00f3n en su uso para personas con problemas de visi\u00f3n, asi como cualquier persona que use un lector de pantalla o navegue con el teclado. En los siguientes p\u00e1rrafos se profundizar\u00e1 en estas mejoras.&nbsp;<\/p>\n\n\n\n<p>La orden de tabulaci\u00f3n es de izquierda a derecha y de arriba hacia abajo, la barra espaciadora activa botones y el contraste es mejor.&nbsp;<\/p>\n\n\n\n<p><strong>Visibilidad de la UI (interfaz de usuario) en modo de alto contraste<\/strong><\/p>\n\n\n\n<p>Se mejor\u00f3 el modo de alto contraste en los mapas para ayudar a que algunos botones y casillas de verificaci\u00f3n sean m\u00e1s f\u00e1ciles de ver e interactuar. Para ello se hicieron cambios en el CSS del c\u00f3digo base, lo que result\u00f3 en que ahora hay una mejor adaptaci\u00f3n de los mapas en escenarios de alto contraste de color.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/tCSiHGv6OHGLaol1VxvAjVt1AwgQfPywf9BGo2tCSBnShwL2YFvO9QxoRrPXEjGmD3xBV0JD4AHB42ij8n-tlWzZDq2NDdsBQvENB0FC5JijF7pAJ_5GXA4ddW-b-9c88VJ2CwqG8kX3a2BikAo\" alt=\"\"\/><\/figure>\n\n\n\n<p>Botones y casillas de revisi\u00f3n son visibles en el modo de alto contraste.&nbsp;<\/p>\n\n\n\n<p><strong>&nbsp;<\/strong><strong>Mejoras en la InfoWindow<\/strong><\/p>\n\n\n\n<p>Tambi\u00e9n se ha continuado mejorando uno de los componentes m\u00e1s utilizados: la InfoWindow, esta es una ventana emergente sobre el mapa, tipo globo de di\u00e1logo, la cual est\u00e1 atada a un marcador. Esta interfaz de usuario ahora tiene la capacidad de tener etiquetas de accesibilidad y los desarrolladores pueden automatizar el comando de foco cuando dichas ventanas se vuelven visibles.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/jc7oDO7148SkERUCiNpVoO0-EaDGV4hHwlu5PM-hqtPXIq7AtzlXhMgBTq_dIDXWM5U8LCKCK3uqH2f4OXXUjR8eJm1eCyDQo4davupO1hKTBtJtZxuBSixYpjb2MkyNTefvJqD-SGBS_ZkfCnM\" alt=\"\"\/><\/figure>\n\n\n\n<p>A\u00f1adir etiquetas de accesibilidad para la InfoWindow y automatizar el foco cuando se vuelve visible.<\/p>\n\n\n\n<p><strong>Instrucciones de marcadores para lectores de pantalla<\/strong><\/p>\n\n\n\n<p>Finalmente, agregaron instrucciones para lectores de pantalla en la navegaci\u00f3n del teclado para marcadores. Esto es especialmente \u00fatil para usuarios nuevos que no conocen de antemano como navegar a trav\u00e9s de los marcadores interactivos usando el teclado.&nbsp;<\/p>\n\n\n\n<p>Para m\u00e1s informaci\u00f3n al respecto puede consultar la gu\u00eda &#8220;<a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/markers#accessible\">Como hacer marcadores accesibles<\/a>\u201d&#8221; y un<a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/marker-accessibility\">&nbsp;c\u00f3digo de ejemplo<\/a>. &nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/HM2YVfuHbruewAFKlPfx88v__PLxQ-thFsdhMmNRNVnq-EzW3HpziAw1pTyHH7I3Mc_sAcdB2hhnfXoVJnVplXlj3acEdYmlrEM7CP3flaS2wbN4g4_JQ_gMt8w01Ke7heZh4kvPZbimDTau-zI\" alt=\"\"\/><\/figure>\n\n\n\n<p>Instrucciones para lectores de pantallas de navegaci\u00f3n de marcadores con el teclado.<\/p>\n\n\n\n<p>Para ver este texto en su nota original, visite el&nbsp;<a href=\"https:\/\/cloud.google.com\/blog\/products\/maps-platform\/latest-accessibility-updates-maps-javascript-api\">blog de Google Maps Platform<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En conmemoraci\u00f3n del D\u00eda Mundial de Concientizaci\u00f3n sobre Accesibilidad en la Web &nbsp;(GAAD por sus siglas en ingl\u00e9s (Global Accessibility Awareness Day) que sucede cada 20 de mayo, Google nos da a conocer las nuevas actualizaciones que mejoran la accesibilidad en las APIs Maps JavaScript y Maps Embed.&nbsp; El equipo de Google Maps menciona que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":168,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-93","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-noticias"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":1,"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"predecessor-version":[{"id":94,"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/93\/revisions\/94"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/media\/168"}],"wp:attachment":[{"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog-esource.daxosline.com.co\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}