"},{"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 navigating a dashboard with a keyboard.","flexible_content":[{"acf_fc_layout":"content","content":"Esri is committed to creating accessible technology and working to improve our products for people with disabilities and situational limitations. With this, it\u2019s important that we explore and understand what it means for a dashboard to be accessible, and what you as an author can do to help.\u00a0<\/span>\u00a0<\/span><\/p>\n To explore the very large topic of designing an accessible dashboard to meet local requirements, this blog series is divided into several topics. This first part will cover keyboard navigation concepts.\u00a0<\/span>\u00a0<\/span><\/p>\n A <\/span>dashboard<\/span><\/a> is a presentation of your data that allows you to monitor events, make decisions, inform others, and understand trends. Dashboards are designed to display multiple visualizations, such as charts, lists<\/span>,<\/span> and tables, that work together and offer a comprehensive view of your data. Dashboards are supported on both desktop and mobile devices and will occupy 100% of the screen.\u00a0<\/span>\u00a0<\/span><\/p>\n The <\/span>dashboard layout<\/span><\/a> is comprised of an optional fixed panel at the top and along one side, with the remaining area customizable to the type, size<\/span>,<\/span> and number of data visualizations and other content.\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":" Dashboards can be static or interactive through weblinks or <\/span>actions<\/span><\/a> used to filter data visualizations such as charts, tables<\/span>,<\/span> and maps. The map can also be repositioned through actions, for example, centered on a selected feature or features.\u00a0\u00a0<\/span>\u00a0<\/span><\/p>\n Now that we understand what can be interactive in a dashboard, we can look at how to navigate this using only a keyboard. <\/span>\u00a0<\/span><\/p>\n Keyboard navigation is an important feature as it is the foundation for many assistive technologies as well as it supports having multiple options for navigating. The standard keys used for navigation are Tab, Shift+Tab, Enter, Escape (Esc) and the Arrow keys. They are used as follows with a dashboard.<\/span>\u00a0<\/span><\/p>\n When navigating a dashboard using a keyboard, the keyboard focus <\/span>indicates<\/span> the current area on the page. Typically, the focus is shown as a border that highlights the <\/span>area<\/span>.<\/span> This allows the user to see which <\/span>area<\/span> they can interact with using the keyboard.<\/span><\/span> In the example dashboard, the yellow border <\/span>shows<\/span> the keyboard focus. <\/span><\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2460482,"id":2460482,"title":"2024-08-14_14-36-43","filename":"2024-08-14_14-36-43.png","filesize":214291,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-08-14_14-36-43.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/analytics\/navigating-arcgis-dashboards-with-a-keyboard\/2024-08-14_14-36-43","alt":"","author":"353902","description":"","caption":"Keyboard focus highlighted in the dashboard.","name":"2024-08-14_14-36-43","status":"inherit","uploaded_to":2434692,"date":"2024-08-14 21:38:07","modified":"2024-08-14 21:38:46","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":1898,"height":1020,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-08-14_14-36-43-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-08-14_14-36-43.png","medium-width":464,"medium-height":249,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-08-14_14-36-43.png","medium_large-width":768,"medium_large-height":413,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-08-14_14-36-43.png","large-width":1898,"large-height":1020,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-08-14_14-36-43-1536x825.png","1536x1536-width":1536,"1536x1536-height":825,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-08-14_14-36-43.png","2048x2048-width":1898,"2048x2048-height":1020,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-08-14_14-36-43-826x444.png","card_image-width":826,"card_image-height":444,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-08-14_14-36-43.png","wide_image-width":1898,"wide_image-height":1020}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" To improve the overall efficiency and experience when navigating, dashboards have two levels of navigation \u2013 top level between panels and elements, and a secondary level within these areas.\u00a0<\/span>\u00a0<\/span><\/p>\n When the dashboard is first opened, pressing the Tab key will generally move the focus following a top to bottom and left to right flow, though the header, sidebar, all elements and the dashboard reset button if present.\u00a0<\/span>\u00a0<\/span><\/p>\n When a dashboard includes a <\/span>splash screen<\/span><\/a>, the focus will be on the first interactive item, whether this is a link to another site or the button to dismiss the window. If there are multiple links, using the Tab key will move between them and the Enter key to select. <\/span>\u00a0<\/span><\/p>\n Let\u2019s explore how top-level navigation functions in <\/span>this dashboard example<\/span><\/a> including the tab focus order when the dashboard incorporates a header, sidebar, and various elements. You can <\/span>create your own copy<\/span><\/a> to follow along.\u00a0<\/span>\u00a0<\/span><\/p>\n Since this dashboard features a splash screen, the initial focus will be on the first interactive item, which is the link. Press Enter to open the link in a new tab. Otherwise, use the Tab key to highlight the Dismiss option. Press Enter to dismiss the splash screen.<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2444912,"id":2444912,"title":"Capture","filename":"Capture-2.png","filesize":205854,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/analytics\/navigating-arcgis-dashboards-with-a-keyboard\/capture-34","alt":"tab movement for splash screen","author":"353902","description":"","caption":"The navigation path using the Tab key for splash screen.","name":"capture-34","status":"inherit","uploaded_to":2434692,"date":"2024-07-24 19:49:37","modified":"2024-08-14 21:34:19","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":1043,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-2.png","medium-width":464,"medium-height":252,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-2.png","medium_large-width":768,"medium_large-height":417,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-2.png","large-width":1920,"large-height":1043,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-2-1536x834.png","1536x1536-width":1536,"1536x1536-height":834,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-2.png","2048x2048-width":1920,"2048x2048-height":1043,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-2-826x449.png","card_image-width":826,"card_image-height":449,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/Capture-2.png","wide_image-width":1920,"wide_image-height":1043}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" Following the dismissal of the splash screen, <\/span>pressing the <\/span>Tab <\/span>key<\/span> focuses on the <\/span><\/span>header<\/span><\/span><\/a> then on the <\/span><\/span>sidebar<\/span><\/span><\/a>. <\/span>From there, it moves to the <\/span><\/span>table<\/span><\/span><\/a> followed by the <\/span><\/span>indicators<\/span><\/span><\/a> below it, and finally to the <\/span><\/span>details<\/span><\/span><\/a> element on the right.<\/span><\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2460432,"id":2460432,"title":"2024-07-24_13-07-18","filename":"2024-07-24_13-07-18.png","filesize":238472,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-07-24_13-07-18.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/analytics\/navigating-arcgis-dashboards-with-a-keyboard\/2024-07-24_13-07-18","alt":"The navigation path when using the Tab key on the keyboard to move between elements.","author":"353902","description":"","caption":"The navigation path when using the Tab key on the keyboard to move between elements. ","name":"2024-07-24_13-07-18","status":"inherit","uploaded_to":2434692,"date":"2024-08-14 21:28:30","modified":"2024-08-14 21:28:43","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":1042,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-07-24_13-07-18-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-07-24_13-07-18.png","medium-width":464,"medium-height":252,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-07-24_13-07-18.png","medium_large-width":768,"medium_large-height":417,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-07-24_13-07-18.png","large-width":1920,"large-height":1042,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-07-24_13-07-18-1536x834.png","1536x1536-width":1536,"1536x1536-height":834,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-07-24_13-07-18.png","2048x2048-width":1920,"2048x2048-height":1042,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-07-24_13-07-18-826x448.png","card_image-width":826,"card_image-height":448,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/07\/2024-07-24_13-07-18.png","wide_image-width":1920,"wide_image-height":1042}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" The second level of keyboard navigation is <\/span>within <\/span><\/i>a panel, element or window. Using the Tab key, focus can quickly be placed on the area of interest and then pressing the Enter key will move focus into the area. From there, the Tab, Arrow and Enter keys can be used to move focus throughout the interactive areas such as the data points, next and previous feature buttons, weblinks or option to download data. Continuing to press Tab will move focus out of the area to the next area or eventually outside the dashboard.\u00a0<\/span>\u00a0<\/span><\/p>\nArcGIS Dashboards introduction and structure<\/span><\/h2>\n
Keyboard navigation <\/span>\u00a0<\/span><\/h3>\n
\n
\n
\n
\n
Focus state<\/span>\u00a0<\/span><\/h3>\n
Navigation levels<\/span>\u00a0<\/span><\/h2>\n
Top level navigation<\/span>\u00a0<\/span><\/h3>\n
Second level navigation<\/span>\u00a0<\/span><\/h3>\n