{"id":2734492,"date":"2025-04-04T08:00:31","date_gmt":"2025-04-04T15:00:31","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2734492"},"modified":"2025-04-04T09:03:16","modified_gmt":"2025-04-04T16:03:16","slug":"optimize-your-popups-for-accessibility-and-internationalization","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/arcade\/optimize-your-popups-for-accessibility-and-internationalization","title":{"rendered":"Optimize Your Popups for Accessibility and Internationalization"},"author":309572,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[777102,22941],"tags":[28911,779042],"industry":[],"product":[36551],"class_list":["post-2734492","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-mapping","tag-accessibility","tag-internationalization","product-arcgis-online"],"acf":{"authors":[{"ID":309572,"user_firstname":"Kitty","user_lastname":"Hurley","nickname":"Kitty Hurley","user_nicename":"khurley","display_name":"Kitty Hurley","user_email":"khurley@esri.com","user_url":"https:\/\/www.github.com\/geospatialem","user_registered":"2022-05-04 21:30:59","user_description":"Kitty is a Principal Product Engineer with Calcite Design System, passionate about expanding access to the web and maps for broader audiences. She is dedicated to creating inclusive, user-friendly web experiences that connect people and places through innovative design and technology. Outside of work, Kitty enjoys exploring the wilderness of Minnesota and has a goal to visit every major league baseball stadium across America.","user_avatar":""}],"short_description":"Learn how to adopt internationalization and accessibility into popups to improve your UI\/UX supporting locales, regions, and a wider audience.","flexible_content":[{"acf_fc_layout":"image","image":{"ID":2747432,"id":2747432,"title":"","filename":"Squirrel-wide-updated.png","filesize":761985,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Squirrel-wide-updated.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/arcade\/optimize-your-popups-for-accessibility-and-internationalization\/squirrel-wide-updated","alt":"","author":"309572","description":"","caption":"","name":"squirrel-wide-updated","status":"inherit","uploaded_to":2734492,"date":"2025-04-03 22:17:24","modified":"2025-04-03 22:17:30","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Squirrel-wide-updated-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Squirrel-wide-updated.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Squirrel-wide-updated.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Squirrel-wide-updated.png","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Squirrel-wide-updated-1536x864.png","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Squirrel-wide-updated.png","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Squirrel-wide-updated-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Squirrel-wide-updated.png","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Arcade’s<\/a> expression language enables feature data to be dynamically populated to support more locales and technologies, providing a more inclusive experience. In considering internationalization and accessibility in our popups, we can improve the popup’s UI\/UX and reach wider audiences. Before diving into the “how” to dynamically populate popup content, it’s important to consider the “why”, or purpose and intent of the data.<\/p>\n

This all started with the squirrels I saw on my daily walks. I wanted to identify the areas in my neighborhood where different squirrel morph colors resided and share the data with others. To reach a wider audience, the data needed to be available in multiple languages and interpretable by assistive technologies, such as screen-readers.<\/p>\n

To work towards a more inclusive popup design, I outlined the project\u2019s goal into steps that considered map visualization strategies, including:<\/p>\n

    \n
  1. Adding custom symbology to the squirrel data<\/strong>, so that the points would stand out on the map and encourage popup interaction<\/li>\n
  2. Creating dynamic popups<\/strong>\u00a0based on the squirrel data collection points<\/li>\n
  3. Providing support for the Spanish<\/strong>\u00a0(\u201ces\u201d) locale<\/li>\n
  4. Formatting dates<\/strong>\u00a0for the different locales<\/li>\n
  5. Conditionally adding popup content<\/strong>,\u00a0so that data attributes would only display when containing values<\/li>\n
  6. Providing alternative text for photos<\/strong>\u00a0to ensure non-visual context for those accessing the content through alternative methods<\/li>\n
  7. Formatting the popup\u2019s content in a table<\/strong>\u00a0to improve navigation for screen-readers<\/li>\n<\/ol>\n

     <\/p>\n"},{"acf_fc_layout":"content","content":"

    Squirrel data collection<\/h2>\n

    First, data collection structure \u2014 squirrel observations were collected daily and included:<\/p>\n