{"id":80651,"date":"2017-12-07T08:13:16","date_gmt":"2017-12-07T08:13:16","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/new-accessibility-features-in-story-map-journal\/"},"modified":"2021-04-29T08:01:17","modified_gmt":"2021-04-29T15:01:17","slug":"new-accessibility-features-in-story-map-journal","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/sharing-collaboration\/new-accessibility-features-in-story-map-journal","title":{"rendered":"Accessibility features in Story Map Journal and Story Map Series"},"author":5441,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37131,37511],"tags":[28911,34901,24861,34921,103402],"industry":[],"product":[36551,36611],"class_list":["post-80651","blog","type-blog","status-publish","format-standard","hentry","category-constituent-engagement","category-sharing-collaboration","tag-accessibility","tag-december-2017-release","tag-story-map-journal","tag-whats-new-december-2017","tag-whats-new-june-2018","product-arcgis-online","product-story-maps"],"acf":{"short_description":"Learn about the accessibility features available in Map Journal and Map Series.","flexible_content":[{"acf_fc_layout":"content","content":"

Note<\/strong>: This blog covers the classic Esri Story Maps. Story authors are encouraged to use the new\u00a0ArcGIS StoryMaps<\/a> to create stories; however, Esri will continue to maintain the classic templates for your use. For more information, see the Product road map<\/a>.<\/p>\n"},{"acf_fc_layout":"sidebar","content":"

As of the June 2018 release, the accessibility features described below are now available in Story Map Series as well as Story Map Journal.<\/em><\/strong><\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Right","spotlight_image":false},{"acf_fc_layout":"content","content":"

Accessibility is an important goal at Esri<\/a>, and in the last two ArcGIS Online updates (September and December 2017), the Story Map Journal app received significant enhancements related to accessibility. Read on to learn more about these new features and how they work to help you create accessible stories.<\/p>\n

***<\/span><\/p>\n

What is accessibility?<\/h2>\n

If something is\u00a0accessible<\/em>\u00a0it means that people with disabilities can use it. Just like a public building can be made accessible by the installation of an entrance ramp, web content, such as a story map, can also be made accessible by the addition of some key pieces of infrastructure.<\/p>\n

Most organizations have accessibility guidelines for web content, and many are required by law to adhere to certain accessibility requirements. For example, web content published by\u00a0US federal government agencies is subject to\u00a0Section 508 standards<\/a>. The World Wide Web Consortium (W3C) also publishes guidelines for web accessibility known as the\u00a0Web Content Accessibility Guidelines (WCAG)<\/a>.<\/p>\n

***<\/span><\/p>\n

Alternative Text<\/h2>\n

Alternative text<\/a> — or “alt text,” as it is often called — provides a textual alternative to web content such as images, maps, videos, charts, and other visual media. You can now use the Map Journal builder to attach alt text to media in the main stage and side panel of your stories. This includes media that appears in the main stage via a story action<\/a>.<\/p>\n

Alt text can be added to a new story as you author it, or it can be added to stories you’ve already published. Just add a concise description of the media to the\u00a0Alternative Text<\/em>\u00a0box when you are adding or editing it in the Map Journal builder.<\/p>\n

\n

Check out\u00a0this blog post<\/a>\u00a0for more information about how to add alternative text to your Map Journal stories.<\/p>\n<\/blockquote>\n

\"\"<\/p>\n

***<\/span><\/p>\n

Keyboard Navigation<\/h2>\n

Readers have always been able to scroll the side panel in Journal stories using the arrow keys or PAGE UP\/PAGE DOWN keys, but Journal now supports additional keyboard navigation that particularly helps people with motor and visual disabilities who may exclusively use the keyboard to navigate.<\/p>\n

The TAB key can be used to move forward through interactive elements of the story, and SHIFT-TAB moves focus in the reverse direction. SPACE or ENTER activates the focused element (the equivalent of clicking on the button or link).<\/p>\n

Journal stories also have several new hidden buttons that won’t be seen by most readers. But if a reader initiates keyboard navigation using the TAB key these buttons become visible. A Skip to narrative<\/strong> button appears after TAB is first pressed that lets readers skip over the section navigation and header areas of the page and get right to the story. Having the Skip to narrative<\/strong> button appear immediately also lets disabled readers know that the story map has been designed with keyboard accessibility in mind.<\/p>\n

\"Skip<\/p>\n

If a reader continues tabbing (instead of pressing SPACE or ENTER to skip to the narrative), keyboard focus moves through the section navigation dots on the far left and then through the links and sharing buttons in the story header at the top of the narrative panel. After the header, keyboard focus will move into the story narrative.<\/p>\n

At the top of each narrative section, just below the section title, is a hidden button to\u00a0Send keyboard focus to media<\/strong>. This lets readers navigate into the main stage of the current section so they can access the media’s alt text and navigate and use any interactive elements using TAB. For example, readers can play a video, zoom or pan the map, trigger the <BACK<\/strong> button to undo a story action, or interact with a web page.<\/p>\n

Within the main stage, there is a Return to narrative<\/strong> button that can be used to send keyboard focus back to the narrative panel. For videos and web pages, where there may be many elements to tab through, there are\u00a0Return to narrative<\/strong> buttons at the beginning and end of the content. As a shortcut, if the media is an image or map, readers can use the ESC key to return focus to the narrative.<\/p>\n

\"\"<\/p>\n

Following the last section of the story, there is a Go to beginning of narrative<\/strong> button that provides an easy way to get send focus back to the beginning of the story. Continuing to TAB will also return focus to the home section of the story.<\/p>\n

\"Go<\/p>\n

***<\/span><\/p>\n

Semantic Structure<\/h2>\n

As readers navigate a Journal story with a screen reader they will notice the story title and section titles now identify themselves as headings. Journal stories are now formatted with HTML tags that report semantic structure of the text to screen readers and other assistive technologies. The story title (the title of the home section) is a level 1 heading <h1> and the subsequent section titles are level 2 headings <h2>.<\/p>\n

Landmark roles<\/a> have also been built into Journal so assistive technologies can enable easy movement between different parts of the page. There are four main areas in a Journal:<\/p>\n