{"id":2427392,"date":"2024-08-26T16:50:05","date_gmt":"2024-08-26T23:50:05","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2427392"},"modified":"2025-04-24T12:22:08","modified_gmt":"2025-04-24T19:22:08","slug":"improving-the-accessibility-of-your-dashboard","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/data-management\/improving-the-accessibility-of-your-dashboard","title":{"rendered":"Improving the accessibility of your dashboard"},"author":353902,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23851],"tags":[28911,763002,764382],"industry":[],"product":[36671],"class_list":["post-2427392","blog","type-blog","status-publish","format-standard","hentry","category-data-management","tag-accessibility","tag-dashboard-authoring","tag-dashboard-layout","product-ops-dashboard"],"acf":{"authors":[{"ID":357842,"user_firstname":"Sandra","user_lastname":"Luken","nickname":"Sandra Luken","user_nicename":"sluken","display_name":"Sandra Luken","user_email":"SLuken@esri.com","user_url":"","user_registered":"2024-06-05 13:59:00","user_description":"Sandra is a senior product engineer on the ArcGIS Dashboards team. She has over 15 years of GIS experience in professional services, instruction, and database management. Since joining Esri in 2018, she has focused on making dashboards easier for everyone to create and use.","user_avatar":""},{"ID":353902,"user_firstname":"FNU","user_lastname":"Leann Mary Kurias","nickname":"Leann Kurias","user_nicename":"lkurias","display_name":"Leann Kurias","user_email":"lkurias@esri.com","user_url":"","user_registered":"2024-02-28 19:54:35","user_description":"Leann develops technical content for the ArcGIS Dashboards team, bringing together strong analytical expertise and creative problem-solving to support data-driven decision-making. With a Master's in Business Analytics and Economics, she is passionate about using data to drive business solutions.","user_avatar":""}],"short_description":"Learn more about building accessible dashboards. ","flexible_content":[{"acf_fc_layout":"content","content":"

Designing an effective <\/span>dashboard<\/span><\/a> is not only about clear and meaningful data visualization, but also about making the dashboard digitally accessible to all users.<\/span> Creating an accessible dashboard ensures that the information is clear and understandable to all users including those that might be using assistive technologies.<\/span> \u00a0<\/span><\/p>\n

In this blog, we\u2019ll share what you as a dashboard author can do today to make your dashboard more accessible to a wider audience. These new features and capabilities were introduced with the June 2024 ArcGIS Online update and will be available in the ArcGIS Enterprise 11.4 release. <\/span>\u00a0<\/span><\/p>\n

We will start exploring the configuration settings of <\/span>this dashboard<\/span><\/a> and you can <\/span>create your own copy<\/span><\/a> to follow along.\u00a0<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2444842,"id":2444842,"title":"Capture","filename":"Capture.png","filesize":199639,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/analytics\/navigating-arcgis-dashboards-with-a-keyboard\/capture-32","alt":"Forestry Service Calls Dashboard","author":"353902","description":"","caption":"Forestry Service Calls Dashboard","name":"capture-32","status":"inherit","uploaded_to":2434692,"date":"2024-07-24 19:33:51","modified":"2024-08-19 20:24:22","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":1913,"height":1032,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture.png","medium-width":464,"medium-height":250,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture.png","medium_large-width":768,"medium_large-height":414,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture.png","large-width":1913,"large-height":1032,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-1536x829.png","1536x1536-width":1536,"1536x1536-height":829,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture.png","2048x2048-width":1913,"2048x2048-height":1032,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-826x446.png","card_image-width":826,"card_image-height":446,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture.png","wide_image-width":1913,"wide_image-height":1032}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Here are some of the features implemented in this dashboard to improve accessibility.<\/span>\u00a0<\/span><\/p>\n

Headings\u00a0<\/span><\/h3>\n

We will start at the top of the dashboard with the <\/span>header panel<\/span><\/a> that includes a short but descriptive title. This gives context to your dashboard and is the first thing that will be read by screen readers. The header panel title is automatically styled as Heading 1 (<h1>) and should be the only H1 heading on the page.\u00a0<\/span>\u00a0<\/span><\/p>\n

Continuing with headings, each element or data visualization includes a visible and descriptive title styled using Heading 2 or Heading 3. Use the formatting options or add <h2> and <h3> using <\/span>HTML<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2445812,"id":2445812,"title":"dt side","filename":"dt-side.png","filesize":32756,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/dt-side.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/data-management\/improving-the-accessibility-of-your-dashboard\/dt-side","alt":"Dashboard headings","author":"353902","description":"","caption":"Dashboard headings","name":"dt-side","status":"inherit","uploaded_to":2427392,"date":"2024-07-25 21:58:41","modified":"2024-08-19 20:24:48","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":1034,"height":391,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/dt-side-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/dt-side.png","medium-width":464,"medium-height":175,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/dt-side.png","medium_large-width":768,"medium_large-height":290,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/dt-side.png","large-width":1034,"large-height":391,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/dt-side.png","1536x1536-width":1034,"1536x1536-height":391,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/dt-side.png","2048x2048-width":1034,"2048x2048-height":391,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/dt-side-826x312.png","card_image-width":826,"card_image-height":312,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/dt-side.png","wide_image-width":1034,"wide_image-height":391}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Tip \u2013\u00a0 If you add a subtitle, use the below <\/span>option<\/span> so it appears on the second row beneath the title. Subtitles are automatically styled as Heading 2 (<H2>) so will follow the proper heading hierarchy.<\/span><\/span>\u00a0<\/span><\/span>If space is limited, it’s recommended not to decrease the font size. Instead, use the description area to include additional text.<\/span>\u00a0<\/span><\/p>\n

Accessible Name<\/span><\/h3>\n

The <\/span>Accessible name<\/span><\/a> property for the elements is updated with a short description that is specific to the data being featured. This allows individuals using assistive technology to identify the content and it can \u00a0read by a screen reader. <\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2445862,"id":2445862,"title":"aname","filename":"aname.png","filesize":31499,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/aname.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/data-management\/improving-the-accessibility-of-your-dashboard\/aname","alt":"Accessible name property","author":"353902","description":"","caption":"Accessible name property","name":"aname","status":"inherit","uploaded_to":2427392,"date":"2024-07-25 22:01:27","modified":"2024-08-19 20:25: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":696,"height":578,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/aname-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/aname.png","medium-width":314,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/aname.png","medium_large-width":696,"medium_large-height":578,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/aname.png","large-width":696,"large-height":578,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/aname.png","1536x1536-width":696,"1536x1536-height":578,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/aname.png","2048x2048-width":696,"2048x2048-height":578,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/aname-560x465.png","card_image-width":560,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/aname.png","wide_image-width":696,"wide_image-height":578}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Notice that when this dashboard is viewed, all information is visible without the need to switch between <\/span>stacked elements<\/span><\/a> or expand the <\/span>sidebar<\/span><\/a>.\u00a0<\/span>Having all the information about the contents of the dashboard visible supports individuals with cognitive impairments and can support be<\/span>tter understanding for all.<\/span><\/p>\n

Color\u00a0<\/span><\/h3>\n

Although all dashboard themes meet minimum color contrast requirements, the new Enhanced contrast <\/span>theme<\/span><\/a> was selected for this dashboard to support better color contrast and low vision considerations. <\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2445892,"id":2445892,"title":"cc","filename":"cc.png","filesize":24558,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/cc.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/data-management\/improving-the-accessibility-of-your-dashboard\/cc","alt":"Color contrast checker","author":"353902","description":"","caption":"Color contrast checker","name":"cc","status":"inherit","uploaded_to":2427392,"date":"2024-07-25 22:04:49","modified":"2024-08-19 20:26:07","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":439,"height":295,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/cc-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/cc.png","medium-width":388,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/cc.png","medium_large-width":439,"medium_large-height":295,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/cc.png","large-width":439,"large-height":295,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/cc.png","1536x1536-width":439,"1536x1536-height":295,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/cc.png","2048x2048-width":439,"2048x2048-height":295,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/cc.png","card_image-width":439,"card_image-height":295,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/cc.png","wide_image-width":439,"wide_image-height":295}},"image_position":"center","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"

Tip \u2013 When selecting custom colors be sure to check the legibility for the color contrast ratio.<\/span>\u00a0<\/span><\/p>\n

Tables<\/span><\/h3>\n

This sample dashboard also includes four(4) filters or <\/span>selectors<\/span><\/a> to control the information displayed in the <\/span>table<\/span><\/a>. The same presentation style makes keyboard navigation <\/span>easier and the descriptive titles give clarity on the purpose of the filters.<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2445932,"id":2445932,"title":"SLECETORS","filename":"SLECETORS.png","filesize":23979,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/SLECETORS.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/data-management\/improving-the-accessibility-of-your-dashboard\/slecetors","alt":"filters in tables","author":"353902","description":"","caption":"Filters in tables","name":"slecetors","status":"inherit","uploaded_to":2427392,"date":"2024-07-25 22:09:21","modified":"2024-08-19 20:26:44","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":368,"height":492,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/SLECETORS-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/SLECETORS.png","medium-width":195,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/SLECETORS.png","medium_large-width":368,"medium_large-height":492,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/SLECETORS.png","large-width":368,"large-height":492,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/SLECETORS.png","1536x1536-width":368,"1536x1536-height":492,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/SLECETORS.png","2048x2048-width":368,"2048x2048-height":492,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/SLECETORS-348x465.png","card_image-width":348,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/SLECETORS.png","wide_image-width":368,"wide_image-height":492}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

A <\/span>table<\/span><\/a> is used to visualize data as it\u2019s one of the more accessible and familiar options available in a dashboard. As there are many configuration options available, here are a few features that were reviewed for accessibility and either enabled or disabled accordingly.\u00a0<\/span>\u00a0<\/span><\/p>\n

a. Table size \u2013 Increased size from the default of Medium to Large.<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2463602,"id":2463602,"title":"2024-08-19_12-12-16","filename":"2024-08-19_12-12-16.png","filesize":11579,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-12-16.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/data-management\/improving-the-accessibility-of-your-dashboard\/2024-08-19_12-12-16","alt":"Sizing in tables","author":"353902","description":"","caption":"Sizing in tables","name":"2024-08-19_12-12-16","status":"inherit","uploaded_to":2427392,"date":"2024-08-19 19:13:16","modified":"2024-08-19 20:31:10","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":440,"height":169,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-12-16-213x169.png","thumbnail-width":213,"thumbnail-height":169,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-12-16.png","medium-width":440,"medium-height":169,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-12-16.png","medium_large-width":440,"medium_large-height":169,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-12-16.png","large-width":440,"large-height":169,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-12-16.png","1536x1536-width":440,"1536x1536-height":169,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-12-16.png","2048x2048-width":440,"2048x2048-height":169,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-12-16.png","card_image-width":440,"card_image-height":169,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-12-16.png","wide_image-width":440,"wide_image-height":169}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

b. Header row \u2013 Included and updated column headers for proper capitalization and spacing.<\/span>\u00a0<\/span><\/p>\n

c. Summary row \u2013 For aggregated or grouped values, include the summary row for clarity. (this is not shown in the sample dashboard)<\/span>\u00a0<\/span><\/p>\n

d. Values<\/span><\/a> \u2013 Kept the default theme color and text decoration settings.<\/span>\u00a0<\/span><\/p>\n

e. Advanced formatting<\/span><\/a> – Use sparingly and with consideration for color, images and overall styling. For example, avoid presenting information only visually, such as distinguishing rows by color. (this option is not used in the sample dashboard).<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2463612,"id":2463612,"title":"Advanced formatting","filename":"2024-08-19_12-15-33.png","filesize":40456,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-15-33.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/data-management\/improving-the-accessibility-of-your-dashboard\/2024-08-19_12-15-33","alt":"Advanced formatting","author":"353902","description":"","caption":"","name":"2024-08-19_12-15-33","status":"inherit","uploaded_to":2427392,"date":"2024-08-19 19:16:33","modified":"2024-08-19 20:31:38","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":837,"height":367,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-15-33-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-15-33.png","medium-width":464,"medium-height":203,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-15-33.png","medium_large-width":768,"medium_large-height":337,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-15-33.png","large-width":837,"large-height":367,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-15-33.png","1536x1536-width":837,"1536x1536-height":367,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-15-33.png","2048x2048-width":837,"2048x2048-height":367,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-15-33-826x362.png","card_image-width":826,"card_image-height":362,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/08\/2024-08-19_12-15-33.png","wide_image-width":837,"wide_image-height":367}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Details<\/span><\/h3>\n

Users of this dashboard will also have the option to select a row in the table and filter the Complaint <\/span>Details<\/span> information. The details<\/a> element is largely configured outside of the dashboard as it uses the same formatting as the <\/span>pop-up<\/span><\/a>. Care should be taken here too for the color, font, images and media included. We have also included a message to indicate this relationship which also serves to hide the details until that information is requested.\u00a0<\/span><\/p>\n