Improving Accessibility with ArcGIS Online Web Mapping Apps

>> Welcome to the 2019 Section 508 outreach event, which is hosted by the DOI Office of the Chief Information Officer. My name is Sid Schaum, I'm a DOI Section 508 program manager, and we're very glad that you can participate in this year's event. So, let's proceed to our next presentation, Improving Accessibility with ARC GIS Online Web Mapping Apps. Please join me in welcoming Charmel Menzel. She serves as the GIS Solutions Engineer at ESRI. Welcome, Charmel.
>> Thanks, Sid. Thank you. I was thinking I did a nice, long title there. Thanks for remembering that. So, I'm also joined here with Stephen Bryce. He's the ESRI DOI Account Manager, and we'll have-- we have a table outside here in the cafeteria area, so if you can come down and visit, please do so. So, as Sid said, I am a GIS Solution Engineer, and we're going to have to really talk about accessibility in terms of web mapping. I know that there's other presentations earlier which touched a little bit about on that, but I asked Sid, I said, can I just, should I start with what is accessibility? You know, should I make the assumption that everybody understands what we're talking about? And he goes, no, don't make that assumption. Go ahead and do just a general, quick overview. And then I am going-- since I have an hour, and some time for questions and answers after that, I'm going to talk about some of the main functionalities and areas that we can focus on when we're talking about web applications that include maps. And that includes color and contrast, the text alternatives, focus and tab order on your screen, and some new technologies that are coming out with mapping for our non-sighted users. Then just tips on do it yourself accessibility testing, and plenty of additional resources. Throughout my presentation, I have links to websites and examples, and that will be made available to Sid, and he will post. But I tried to combine them all to the last few slides, so you can go there. But we might not touch on those during the presentation, just depends upon how much I talk. And we-- as I said, we will have time for questions and answers at the end. So, accessibility, as you've heard with the previous presenters today, is making the content usable for everyone, regardless of abilities. According to the World Health Organization, 10% of all adult Americans have some degree of vision loss. Now, if you think about that, that's 23.7 million Americans. And 20% of Americans are deaf or hard of hearing. that runs up to about 48 million Americans. Those are large statistics, and I'm glad that we're here to talking about this and improving the accessibility. When we talk about the disabilities, we talk about a large range of disabilities, touch, see, hear, and speak. And those have a range from permanent, temporary, or situational. So, if you think about touch, you can have a new parent, a mom, who has a child in her arm, and she just can't do an access, access your web application as she might normally do. So, there's situational, temporary, permanent, and the web, and applications should be accessible no matter what situation that you're in. So, why is accessibility important? Well, we have the American Disabilities Act, and I always have to look down, because there's dates and information there, and I don't want to mess up the ADAs. But the standards for design were in September 2010. Then the 508 government-wide IT accessibility regulations were part of the Rehabilitation Act of 1973. So, Section 508, as hopefully you know, it requires the federal agencies to make their information and communication technology accessible for everyone. But my third bullet here is knowing, it's known as universal design and inclusive design. Think about it. When the web was created, the web was created for everyone to have access to the information. So, it's taken us a long time to put these regulations in place, and I'm glad that we are, to allow people with different abilities should have equal access to the web, and just as, a little bit as I've been diving into it with our technology at ESRI and RTIS, good accessibility is good user experience. When you start working with accessibility capabilities in your applications and your webs, you're making a web application more user-friendly, the user interface improves greatly. And I also want to mention WCAG, or WCAG, depends about how you want to go about talking about it. That's the Web Content Accessibility Guidelines. So, a lot of people are nodding their head in the room. Hopefully you guys have heard about that, and if you haven't, you are becoming more familiar with it today through these presentations. So, WCAG is more of an international, it started out internationally, from other, many other countries are following the WCAG standards. It was developed by the W3C. But luckily now the US and Section 508 has incorporated WCAG 2.0 in the 508. So, WCAG is actually organized in four principles. They are perceivable, content must be perceivable. Interface elements in the content must be operable. Content and controls must be understandable. Content must be robust enough to work with the current and future technologies. I have to say that there are a lot of different business and vendors here in the cafeteria area, and if you are in the building, you should come down. There are so many options and capabilities out there. I'm very impressed. I'm going to be showing a few of them that are available, but that's not all that are available, and I do encourage you to come and see some of these capabilities. Each of these principles contain testable success criteria, the one, the four that I mentioned, and they're set at three levels. The A, the AA, and the level AAA. So, you will hear me talking a little bit about the AA, and I'll try not to add too many numbers and letters to the presentation. But I did want to get that ground basis of information. Now, what is the corporation I work for, ESRI, doing to improve accessibility? Well, we're reviewing our products. We have a lot of different products, and we're reviewing them internally for compliance. And not just our products, but also our public web applications, our websites, our help documentation. To help federal agencies, we're developing and have developed VPATs for various technologies and applications, VPAT, Voluntary Product Accessibility Template. And you might have heard about those if you came to one of the earlier presentations, I believe. Yes, the first presentation of the day. ESRI's also fixing the accessibility issues that we find. And a lot of those are found not only by our staff, but by you, the people who are utilizing the RTIS in your day to day business, and how you need to improve-- I was talking to some people out in the lobby about some of the needs that they have, and that's great feedback. And we're adding these accessibility capabilities into new versions of our products, and sharing that knowledge through events like this, but also on GeoNet. How many people have heard GeoNet, the ESRI community? If you have, or if you haven't, make sure that you go to the community that's on accessibility. We have a specific one. It's a great place to exchange ideas and best practices with the community at large, the public. And ESRI staff jump in there also, and it's a great way for us to hear and learn from each other. Now, I'm going to jump into the different aspects. Now, that's color and contrast first. I do have the WCAG requirements and links up here, but I'm not going to mention all of them. The number that I do want you to think about the contrast ratio, 4.5. We will talk about that, and I'll show you some ways of testing for that. What I love about the color contrast ratio here and talking about it is that it goes back to my roots of working on maps and cartography. Anyone who has done, created maps probably at one time had an instructor talking about the visual experience of looking at maps, including color, legends, labels, and I have to say sometimes over time we forget, we got lazy on some of the maps that I see. But we can improve that. So, not only for the user experience, just in general, but to meet the 4.5 contrast ratio. So this example here is white text on a colored background. On the left-hand side, I have three examples, a light green, light yellow, and light red, all with white text. Each of those fail the 4.5, remember, the 4.5 ratio that I want to meet. It's 3.1 and lower. But on the right-hand side, there are dark green, dark brown, and dark red with white text. Fabulous. We have 5.06 and higher. We're meeting the standards. But what does that-- how does that handle in mapping, and even in your web applications? What does the dark do when somebody is looking at your map? I'm going to focus on maps. If I have a dark red on my map, my eyes are going to go there and look at that. So, when you're looking and mapping, great, I met the ratio. But is that my intent. Is that the area that I wanted to have focus on my map? So you have to take those two things in consideration, meeting the ratio, but also what is the intent of your map? What are you trying to portray? So, I'd say maybe you can flip the colors, and you have, this sample is a light green, light yellow, light red with a dark black or dark grey color on the top. So, then that way, I'm still meeting the ratio of 4.5 and higher. In fact, I'm fabulous here. I'm at 11.07 and higher. So, I'm meeting the contrast ratio, and I'm also, in case of mapping, maybe not emphasizing that feature or that data. So, those are options, and those are things, those extra hurdles we have to think about when we are looking at creating maps. So, ArcGIS Online Map Viewer, I don't want you to assume that everybody is familiar with RTIS online or the Map Viewer, so I'm just going to describe it. It's the online capabilities of creating a 2D map, and that's all I'm going to focus on today. 2D maps, and it contains a base map and your set of data layers. You might have parks and weather, or you might have facilities, just other information that you have in your data layers. In your web maps, you can edit your data, conduct the analysis, that's the important part, and then you can share your map through a URL embedded into another website, create an app, and I'm going to be talking about that next. First we create the map, and then we're going to create an application that the map lives in. And let me just show you an example of the map viewer if you're not familiar. This is a map of the Charlotte area, and I'm signed into my RTIS online account, because I had some other features in here I wanted to show. And I just am showing interstates, US highways and such. The point that I want to show here, well, there's a couple points I'm going to be showing here, is sharing the map, and you can share the map with a link to the map, Facebook, Twitter, if you have it shared, create a web application also, which we will talk about next, and then embed it into a website, just as-is. The component that I wanted to look at now is the content. So, you may or may not know, if you are working with RTIS online and in the map viewer, that you can take the base map, and there's base maps available. And this is kind of a new feature with the vector base maps. You can take the content, sometimes those labels get in my way. They annoy me a little bit. But now we can change that. So, we have a light grey canvas reference on top of the light grey canvas base. You know, we have to talk about the color contrast here too, but maybe I don't need those labels to emphasize in my story, and that's not what I want to emphasize. So, I can click on the light grey canvas reference and set the transparency, and then my labels, the base map are a lot lighter. Yes, it's not accessible, but I might not need that for my map. It might get in the way of the story that I'm telling. So, just to let you know that you can do that capability. You might not-- you can even turn off the references, because we have to remember, when we're making a map, you're making an information product. You're making a product that's going to answer a question or meet some need. So, what's important on the map? I'm going to turn on the US tracks. This is also a color theory for mapping. When you have a color and you select a color, there are some assumptions with color selection. And we can have a whole session on cartography and color selection, but I'm just going to mention a few things. If I look at this map, what do you think that you see when you-- it's a red, red colors, four different levels. I'm not going to show you what the legend is, because then you would know what I'm talking about. But if you just look at the red, what do you think? Heat? Hot? Something's on fire? I mean, if you just see red, you might have those assumptions, if you haven't seen the legend yet. Likewise, same data. Four different classes, blue. It could be water, cold. So, you have to not only think about your color section in making the contrast ratio, but also these assumptions that come across with water. And as my mapping professors would say, do not make the water pink. Unless you maybe have an artsy kind of map, and then okay, that's a different story. But, you know, make that understandable, and make it relatable. So, there's some basic assumptions. And this is, this is a slide that relates to that. Then I want to move into the color theory that there are different-- there's ways of showing your data without color alone. Because if you think about it, in this map, one of the most visually prevalent issues is that red-green color differentiation, particularly with men. The top left on the northwest is red, on the left-hand image, and it's green on the bottom right. I have, the right-side screen has a filter in there for you to see what it looks like for those who have that red-green differentiation. And I can't really tell the difference between the red and the green if I was looking at this map without some other context. So, don't rely on color alone. And that goes hand in hand with the requirements, with WCAG requirements. So, it's perfect. So, thinking about designing maps, look at other ways of varying your labels and your color, and the right one I have three triangles, three different colors, and three different color labels. Or utilize different shapes. I have a triangle, square, circle, all in the same color, but different shapes. And you can change both, you can have-- I have triangles here, and I have large to small triangles, and I have large-- dark red to light pink. So, I am, I'm emphasizing color, because that's where we can make a difference on our maps, color, and differentiating by color, but don't do that alone. And you can use this contrast ratio calculator I'm going to show you in a minute, and utilize automated tools like axe, and selecting color-compliant palettes. So, let's go to my color demonstrations. Before-- so the first one I want to show you is the map. I was looking at the four different shades of red, and tracts in the Charlotte area. Now, how can I ensure that-- select these colors? If you were in this map viewer, you would select the colors by changing the style, and changing under options, counts and amounts color. Now, there's several symbols already defined, different selections of fill symbols, from blue to grey to green, and there's a shade of colors. What's selected here is red to beige type of color. I talked to our product teams. These colors that are selectable when you're-- are tested for the color sensitivities. But I just want to doublecheck that. So, I look at my legend, and with your legend, even though I selected that default color, I can change the symbol for each box. And I want to change the symbol, and when I open up the dialogue, I have a hexadecimal notation, a color. Well, that's pretty interesting. So maybe I want to check this color to see if it's accessible, or, you know, and in relationship to the other colors that are already selected in my list. And one way of doing that is using ColorBrewer 2.0. This is a cartography tool that's been around for a long time, and so let's go ahead and look at this. We have four classes, and I'm going to select the red classes. And I can show only colorblind-safe colors, so that's great. My-- the ones I selected are colorblind-safe, and the dark red is the same hex code as the dark red in my map. That was selected automatically. So, you can go here and make some selections, and if it wasn't, or if I want to make some differentiations, I can then change that hexadecimal code notation here for my colors of my thematic map. All right, and now I want to look at a few other color issues. I had mentioned-- yes?
>> [INAUDIBLE] I just had a question. This is really, I guess, more about best practices issue. I've heard it said that even though you could make red contrast meet the 4.5 to 1 requirement with other colors, I've heard people say that as a practice, you should try not to use red, particularly in documents, because there are some people who cannot perceive red at all. And for that reason, they would take the policy of never using red at all. What is your reaction to that?
>> If that is the case, that's fine. Don't use red. I don't have an understanding of that specific issue, but if that is your understanding, and DOI doesn't want to use red in their documents, that's great. Then select another color. I'm sorry, I don't have all-- I don't have an opinion on that.
>> No, I understand that. It's just that, the reason I bring it up is because there's a difference between what the standards require and what maybe policy choices or other factors that influence design.
>> Mm-hmm, mm-hmm, exactly. And just as-- you're right on point. He was-- just as, you know, selecting colors, if the green scale or the blue scale is perfect, it's meeting the color standards, but it might not help in the context of the map that I'm trying to portray in the information. So, you have to keep that in mind too, so that goes hand in hand. One thing that I want to mention, and this probably is a bad example, but this is a website, and I've clicked on a location, and I'm utilizing green as indicator, percent of change of population. And-- but I've added a green up arrow. So, I'm not only including green, but I'm including a symbol, an up arrow. And if I am lucky and select a county that's lost population, then I have a down arrow. So, it's a way of adding color and a symbol, something else. You don't have to have just one thing to help portray your information, and things that you're trying to say. Now, I also want to look at this bottom right-hand box. It's awful. Blue with a dark color on top of it. I'm going to open up the contrast ratio website, and this actually has the same blue with the dark grey on top. It's a 2.49. It fails. So, what do I do? I can come in here and start testing what colors I want to add. White on the top of the blue, 5.06, perfect. Maybe white's a little too bright for me, but beige, also, 5.-- I mean, 4.57. Really close. And you can swap the colors. It's a really nice way of comparing, you know, what you're doing on your site. So, the contrast ratio, I have links to these. I also can look at my web application with DQ's axe. It's a free tool, and it's accessible for development teams, and I can add this to my Chrome, Firefox, Android. I've added it to my Chrome dialogue here. So, what does that do? I will go back to the same site, and don't get scared if you're not a developer, but you go into Chrome, and you look at more tools, and you hit developer tools, and if you have access to all, then you can access it through the dialogue and analyze your site. So, it's not only testing color contrast, which we're talking about now, and it's telling me my area is bad, which we already know. It's not working. But it also tests for alt tags and other things. What's nice about axe is that it's an accessible product in and of itself, so that's pretty neat. And the other one that I want to mention as far as color contrast is ColorCube, as far as websites and colors and mapping. So, you could have your selected colors that you want to use in your map, maybe your symbols that you want to use for your features. And when you do that, then it will give you some indication if you pass or fail based on which label color you might have on top or not. All right. So, next, after color and contrast, and I know I spent a lot of time on that, but I'm going to-- that was very important, because that's a key point for mapping, is the color contrast. Next, I'm going to talk about text alternatives and the ArcGIS web applications. So, we have the map, and now we need to include the map in a web application so you can access it internally on your internet, or share it with the public. So, alternative text, alt text for short, is as you probably have heard today, is the text that you add to images. And there's a lot of images in your web applications. If the image is decorative, like a logo, or something that you don't need to identify, then just, the practice is use a blank at, alt="". So, I am going to talk about taking that web, that map, viewer map and then bringing it into a web application. And just make sure, making sure that I don't assume that everybody understands what a web application is, and some of the capabilities, but there's two ways of making a web application. You can do it with your developer tools, ArcGIS for developer, and you can do it with over 25 configurable templates for web application. And each of those are designed for specific situations. You might have story maps to tell your story. That's a very popular-- operations dashboard, you might have a crowdsourcing app where you want people to add data and bring that data inside. So, depending upon your situation, there's a template. And so you take your map viewer, and then you select your configurable app template, which is great, because you're not a web developer, this is where I live. I live in the configurable web app world. And I can change the colors, the context around my map, so that's what a configurable app template means in this case. And then I have my web app application. So, ESRI, when I said that we're working on looking at our applications, we've done a lot of looking at these templates, and improving them. And one that's done a-- one group that's been gangbusters about adding accessibility is the story maps team. So, ArcGIS story maps. Before I move on to some of the enhancements, I do want to mention, we are having, we have a beta for the ArcGIS story maps beta, and we'd love you guys to test it especially for accessibility. I tested some things, and I told the product team, I'm like, ooh, that's not working like it should. And like, yeah, it's on our list to do. And so, that's great, you know?
>> [INAUDIBLE]
>> Oh, love it, yes, perfect. Because we-- they-- you know, some things, it's a beta. So they want to add in whatever they can before it's final, and then they will continue to add improvements. They're, luckily they're right here in Arlington, so that makes it very accessible. So, the story maps, there's various, there are various templates on the story maps, and I'm not going to get into each of these, and if you've worked with them, you probably know. But I don't want to lose everybody that's in the room. But with the story maps series, there's improved keyboard navigation. You could always go through the web application with your arrow keys, but they actually have added better key, tab capturing technologies behind the scene. And when you open up a template, there's a kind of a web application right there for you. You add your map, and you can publish it to the public right there. You don't have to make any changes if you don't want to. So, that default template that you open up, that colors meet the color contrast guidelines. Now, if you change the color, then you need to test it and make sure it meets the contrast guidelines. And then there's ability to add alt text for any of your images. And improved screen reader support. So, here's an example of adding alt text to a story map that-- the life and words of Dr. Martin Luther King, Jr. This is a picture on the right-hand side, on the main side of a story map, and the alt text dialogue is there, and the alt text dialogue would then be read with a screen reader. Now, don't get crazy about the next slide, because I'm showing a little code. But just to get a little geeky behind the scenes, the alt text, the template is adding into the HTML code the area label. And it's-- that is screen readable, and it says a spotlight illuminates Dr. King as he speaks at the San Francisco Cow Palace. And that would be what is spoken through the screen reader. We heard a little bit earlier from Rav from Adobe about alt text, and I'm re-iterating what he said, and just in case you didn't see his presentation, please do, it's good, about mapping in Adobe. But the alt text needs to be concise. And don't repeat words like, this is an image of. Well, that's obvious. For the screen reader, it is an image, because it's reading to you. And include text with any image. If you a picture, and it has text within the picture, like a for sale sign, you don't say, this is a picture of my house, this is a picture of my house with a for sale sign. You know, so please add that in. And I remember that I was in Rob's presentation, and he talked about the legend. If you have information in the legend, you need to put that in the alt text. And that brings me to maps in the alt text. If it's a static map, it's just an image in your website, or in this case I'm talking about the websites and your story maps, then make sure you communicate the purpose and function. You don't have to list everything that's in the map. This is a map that's hard to see in this screen, so the color contrast ration is not working for me. But it's the ESRI Olympia office. And the alt text here is the ESRI Olympia regional office is located at 111 Market Street Northeast, Suite 250, across the street from the Farmer's Market. So you describe the map, in this case, and I don't have to list all the features that are in this map. That doesn't help, in this context. And so I'm remembering the context. This is just to give directions. And so I don't need to say that there's, you know, a waterway to, you know, on the east-- know my east from my west, west side. That doesn't help. I'm giving directions. And if there is data in your image, as far as features that you want to discuss, like maybe you have schools, and you're showing scholastic level ratings of the schools, then you need to add that information, either in alt text or in another table or chart, just so it's accessible. All right. My next feature area I'm going to talk about is the focus and the tab order in your web applications. We're working on that. Love some more testing on that capability. And so, with the regulations, or with WCAG, the elements should have clear focus. You should be able to see the box around the elements. The web browsers have that by default. Don't turn it off, if you have a web application and you're a programmer. And some people can configure that for themselves to make it bigger. But it's there. You should go through and look at the focus. The navigation, the tab order should be logical sense. We read from the top left to the bottom right. That's pretty much how your tab order should go. Just make it a logical order, intuitive. And a keyboard user should be able to use functionalities using the keyboard only. They should be able to click pull down lists, they should be able to select items. The best way is to unplug your mouse and go through your web application. It's going to make your web application more usable for everyone, and that's the key. There's power users that we have that don't even like to use the mouse. They might be hardcore programmers, they just love the keyboard, they love all the shortcut keys. This is helping them go through your web application. And then the content does not trap anybody in the keyboard focus. So, sometimes you're filling out a form, and the information, you have to give an escape code option. So, I have two demonstrations to go through, looking at these in web applications. First is a print widget, and it's just a simple map, dark grey background. One of my colleagues did this. It has graduated symbols indicating, yes-- not exciting topic, it doesn't really matter. But I am going to tab through the map and as I tab through, I am now on the zoom in button, the plus on the top left hand side. If I hit enter, I zoom in. I tab down, the blue square, hard to see on this Google, but I will zoom out. I need to configure that to be better for the presentation. I know that Rob did the pink, and I was like, oh, I should've done that before I came in here. But it's on the zoom out button, so I'm just hitting with my keyboard, not using my mouse. I can tab over, and I am now highlighted on the print widget, which is in the top right-hand side of the screen. I hit enter, and I am tabbing, it's easy to see the blue now, layout, the title, page setup. I hit enter, and I can select the page setup. I hit tab for the formats, hit enter, advanced options, hit enter, hit tab and set scale. There's a little box. I can press the enter button to-- oops, the space bar, that's my-- went away from it, space bar to go through, let me go take that one, there we go. There, hit the space bar to set scale so that I'd have the capability to set scale. And if I go backwards, I can do the shift tab, and I can go backwards and fix something that I might have missed, like the title, and type that in if I can spell. So, that is an example of testing your modality. In fact, this is an example, this is just an image. It's a plain GIF, but it's adding your address. There's a lot of web applications, map view applications that you add your address. And, you know, you've ordered things. You add in your ZIP code, and they're like, that doesn't-- that's not right, or you missed adding your phone number, and they're like, no, you've got to back. So, they want you to go back and add that information, but maybe you want to cancel out, so you have to give a cancel out option. That's what they're talking about, not allowing that endless loop, and letting people have an escape out of a dialogue. And now here's where I'm going to be brave, and I am going to turn on my screen reader for a second. And, oh, did we plug it in? The sound, will the sound work? Yay.
>> Mute toggle checkbox check. The life and words of Dr. Martin Luther King, Jr.
>> Okay, so this is a story map that I just mentioned about the life and the words of Dr. King-- Luther, Jr. And it's, I have a screen reader that's going to read for us, and I'm just going to go through the first page. But I want-- yes-- can everybody hear it? I can make the mic go down to-- I don't need to do that. He's shaking his head that everybody can hear it, even online. That's most important for everybody.
>> Slash 2017 HTTPS clickable skip to narrative button. The life--
>> So, that's one of the functionalities that we added, that skip to narrative button. That wasn't there before, so that this is for screen readers. If you don't have a screen reader, you hit tab, you wouldn't see this, but this is where the screen reader-- okay, I'm not going to be very good at this.
>> Address and search bar, the life and words of Dr. Martin Luther King, Jr. document, alert. Clickable-- set keyboard focus to media button. Current story section media, complimentary landmark return to narrative button.
>> Let's talk about the image on the right. I can return to narrative.
>> Story narrative main landmark clickable send keyboard focus, graphic clickable portrait of Dr. King with part of a quotation from his famous "I Have a Dream" speech. Throughout his brief adult life Dr. Martin Luther King--
>> Going down in the text on the left-hand side.
>> beyond preaching the gospel and pursuing the dream of-- Dr. King, one of the great orators in American history, inspired millions with his words.
>> So that is how the screen reader's going through the context and giving you some buttons to go between the narrative on the left-hand side in this case, and the image on the right-hand side. We are adding improvements to that. We're having that new beta version out, so please help us out in making that better and more accessible. The other one-- there's one more than I'm going to show you coming up. But what I should do now, just in a second, is to turn off my screen reader, because I'm going to play a video, and that would be a little confusing in a minute. The map viewer has some default navigation when you are in a map viewer, so some of your keystrokes, arrow keys up and down, and the plus and the minus key will zoom in, and the minus will zoom out. And now I wanted to move into what's coming with the map web application for non-sighted users. So, I'll get a little geeky, but there's JavaScript, and we have a new JavaScript API 4. And the JavaScript API 4 has a lot more capabilities for adding in accessibility in your web applications. And I have a video here. It's-- I have a link in the application, but I'm going to show the video. It actually will step through as a screen reader would do with the web application. And so I will just let it play for a second, a few-- a minute. Oh, I turned off my sound, so of course it's off. [INAUDIBLE] There? Let me start it over.
>> [INAUDIBLE]
>> So, that's the future of maps, and making them accessible, all keyboard accessible. So, now, granted, look at this map. If you can see the map, the contrast, color contrast, we didn't work on the color contrast. We were working on the keyboard navigation, so you can-- you know, you have to have keyboard navigation, but you've got to remember all of the 508 compliance capabilities. And with that, let me see if I wanted to just do it yourself. This is basically based on some of our lessons that we've learned as we're going through testing ours. You know, when you have an application, web application, what should I do first? There's so much to test, the color, the alt text. So, run your automated test first, whatever application that you use. There's some great options out in the lobby here. And then do your keyboard test as I mentioned. Unplug your mouse, just use your keyboard, see if you can go through your web application, and if it makes sense. The screen reader test should follow. This is just a recommendation, you might have your own order that you want to run your test. And then I end up with a manual color test, because the automated test is good. And the automated test is good, like, it might tell you, oh, you have alt text in everything. But does your alt text make sense, is where you might need to have that, you know, to read that. I mean, as we've seen, you can put some simple words for alt text, but does it help you in your information product? Whatever information you're telling, maybe in a story map, or in some other web application. So, these are recommendations that I have for you guys, and as I mentioned, there will be a couple of pages of additional resources, the GeoNet accessibility group, that's a collaborating sharing best practices with you guys and learning. Love to talk to you guys about, more about cartography and just in general, mapping. There's story map accessibility blogs, and there's great videos from DevSummit, ESRI DevSummit in 2019, just a couple months ago. I have these links, and I know Sid wants to see these. He saw the DevSummit from the previous year, and we've updated, so we have three different that were in the DevSummit. And you're like, ooh, DevSummit, that could be a little bit too more-- too much developer-y-ish. Maybe. But I-- you can learn a lot from that. And we also had a public GeoDev webinar just for anybody to attend that was in January on Web Accessibility Best Practices, and that video is also available on YouTube, and there's links here. I have to admit, I nabbed a lot of their content and information, and then changed some of the developer-y-ish discussion that they had. But these are good resources for you guys, and I have a page of a lot of other organizations, the A11Y project, Mozilla, Microsoft, Google, all have examples and practices for inclusive design in your web applications. And the bottom link here is the EPA made a website for story map guidance. So, even though you're not with the EPA, they have some guidance just for their staff who are creating story maps, because if it's anything like at DOI, that it's like at other organizations, story maps are exploding in the number that are being created, so some guidelines are useful. And alt text resources. So, and then color selection tools, some that I used, some that I did not use. I just want to mention the third one on this bullets, WCAG Luminosity Color Ratio Analyzer. It was built by ESRI Canada. I have to say that they-- other countries are ahead of us on some of these testing capabilities and tools, and so I'm very proud that they put that together. Now, I don't know, I have some time for questions and answers, and if I don't know the answer, I'll give it back, but I'd love to get you guys some feedback, you know, continue this conversation and feedback. So, I'm Charmel Menzel. My email address is cmenzel-- M-E-N-Z-E-L-- at ezri.com. Questions?
>> So, I have-- my question is about color contrast when layers are overlapping. So, a lot of times I'm representing national historic sites within a national park but it may also be within a national historic district. And so, all of those have different colors that, on paper, meet the ColorBrewer, you know, requirements, or not requirements, the test. But then when they're all overlapped, it's just, you know, brown. And I-- are there resources or are there best practices for how colors and layers should overlap to meet accessibility standards, or is it just don't overlap them, try to represent them separately?
>> Well, so in your example, are you-- is it a printed product finally, or is it a web application where you turn things on and off?
>> It's a web application where you turn things on and off, currently.
>> Right.
>> But in this example, in specifically, we're trying to show, like, proximity and overlap, so the whole point of the map is to show where things are intersecting and how they are, how close they are to one another.
>> So, there-- you know, that gets very complicated when you're talking about the mapping. There are other-- there's options. If your intent is to show the overlap, can the overlap be another feature, instead of just-- traditionally with your layers, you might have a couple greyscales. And one thing about the regulations, it's not to make just black and white and greyscale maps. It's to add color, but do it smartly. And so, if you have, you have probably thought it, since you're shaking your head, that if that's the emphasis is where are the areas overlapping, can you take that feature, that data out, and then without being technical in the terminology, and then make that itself an own layer, and then make sure that color is the most prevalent color? You might want to make it that dark green-- not green, but you know, the dark color that you-- to make sure that it has a contrast, and then the other layers, the rest of the boundaries of the parks and the other historic sites, make them lighter. So, it definitely means that, you know, the cartography of one map doesn't fit every situation, and that's why it's really nice to have features that you can change the cartography for, and that's why we're working on that with maps, because there's some, if you understand services and data services, there are some data services where you're not allowed to change the color if somebody else has provided it to you. But there are ways that they can provide the data and the service that allows people to create accessible web maps. So, thanks for the question. I hope that helps you.
>> Thanks. Yeah, yeah, thank you.
>> We do have a cartography lab, actually, that works with customers on cartography, and can, you know, come in and work on maps. They actually worked with the Army on their webpages, and the maps, and the coloration, and created a whole theme that's accessible. So--
>> On that same theme, what about the, like, putting dots or stripes with a mixture of the two colors? Is that possible?
>> Yes, yes. And yeah, he was saying that, you know, if you want to cross-hatch information, if you're laying them over, then that is traditionally how we would do it in, you know, print form. But, you know, I want to stay with color, and sometimes hash marks and such are also hard to perceive. And then you have to make a legend, so-- yeah. I'm sorry. Okay, it's hard to perceive also. A question online?
>> Yes, we've got a couple.
>> Super.
>> The short one is, can you control the speech pattern for the program?
>> Oh, the screen readers? I-- there's many different options of screen readers. Do you want to address that one?
>> Yeah, I mean, a publicly available screen reader that's free for anybody to download is Non Visual Desktop Access, NVDA. That's something that Charmel had downloaded to her computer to show you how a screen reader works with web maps. And yes, you can, you can manipulate the speech, to slow it down or speed it up, depending on your need.
>> So what do you guys use?
>> We use JAWS 2018 NVDA, we use that as well, so.
>> Okay. Yes. JAWS at cost, and then some-- I think even Apple has a free reader on their voice, voiceover. So, yes.
>> And the second question is, if an image is decorative, where you said to use alt="", for best practice, would you hide the image as well, and it continues, if it's background or an image used many times throughout, is it better to just hide it, and they then clarify, they're not speaking specifically about maps, but OLT courses.
>> OLT courses? So, oh, when I was talking about the base map? Maybe that's what they're talking about as far as hiding it. I have to say it just really depends-- it's the information that you're trying to portray. Every web application has-- can't meet every user need, I have to say, first of all. We used to have to make one application, and we'd say, everybody can use it, and everybody needs to access it. So, I-- with how easy it is to make web applications, then you can create them for specific needs. But if they want to turn off the base map because it-- or turn off the labels of the base map, because it's not enhancing and helping them with the story, that's great. I have to say that a lot of people need labels to see where they are in relationship to the data that you're showing. So, you have to weigh those and it'd be great to maybe email me, to focus a little bit more on the question if I didn't answer that correctly, or type it in again.
>> Sure, and the person's just clarified, OLT is online courses.
>> Oh, our online courses?
>> No, that's the acronym. OLT stands for online courses.
>> Okay, all right. Thanks. Any others?
>> Training. I can't read. Sorry.
>> Okay. I know, OLT, how'd you get-- how'd you get course out of T? That's okay. Yes. ESRI has online training, and that's when I said that we are working on our accessibility of our public information, and our data, and our training. So, we have a long a way to go.
>> [INAUDIBLE]
>> He asks the tough questions. I didn't hear you. No, that's okay. Sid asked can I address dynamic mapping, and accessibility? That, dynamic mapping, just to mention what that is, to make sure that we're all on the same page, is taking in data that changes quite frequently, or not so frequently. So, it could-- dynamic mapping could be some data that changes once a month, or every five seconds. So, that is when we get really tough on mapping, and information. And that's where the JavaScript API 4 is going to be our helpful indicator, where it can, you know, I envision it, it's not-- it's really not there yet, but I envision it being able to say, some new features, new features have been added. And there's one thing about dynamic data, and that's, like, sensor data. There's so much information coming in at us all the time, right? From all Twitter feeds, all this other information, people have to bring this data in, and try to analyze it and understand it. Well, you might not want-- that's a lot of noise, maybe. You don't need to know when they're talking about some other agency, only when they're talking about your agency or your information. Or you only want to know when the weather is bad in your part, that you're focusing on. So you have-- there's intelligence that you can add into the data, as the data comes in. If the data meets the certain criteria, like it's 30 degrees or below, then let me know, and give me some information on that. So, how that's going to work completely is still in development, and discussing these workflows and what you really mean by dynamic information that you could utilize, we want to have that conversation so we can start addressing that in a more cohesive and comprehensive manner. So, thanks for the question. It's a toughie. Well, great. Well, I will be here out in the hallway for rest of the day, and look forward to chatting with you out there, or send me an email.