We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

A Journey Towards More Accessible Maps

00:00

Formal Metadata

Title
A Journey Towards More Accessible Maps
Title of Series
Number of Parts
52
Author
License
CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
Emma's talk was the third talk in the "Web Mapping / Map Design" session at FOSS4G SotM Oceania 2019, organised by OSGeo Oceania and held at The National Library in Wellington, New Zealand from November 12-15 2019. FOSS4G SotM Oceania is the coming together of Oceania's geospatial open source and open data community - with four days of workshops, presentations, a community sprint and social events.
Library catalogOpen sourceSoftware frameworkWeb browserMereologyMIDIKeyboard shortcutContent (media)outputMaxima and minimaFunction (mathematics)Electric currentPhysicsOnline helpNavigationTangentEndliche ModelltheorieDigital signalMenu (computing)Pattern languageNumbering schemeContrast (vision)ImplementationVector potentialGame theoryExecution unitFocus (optics)Pressure volume diagramModal logicTouchscreenRectangleControl flowPrice indexGreatest elementAsynchronous Transfer ModeLink (knot theory)Diffuser (automotive)Personal digital assistantRaster graphicsSubject indexingMaizeSoftware testingCodeNumbering schemeGraph coloringUser interfaceTexture mappingNatural languageQuicksortWebsiteWeb-DesignerComputer-assisted translationPoint (geometry)Contrast (vision)Associative propertyData conversionSoftware testingWeb 2.0Address spaceEmailMultiplication signAsynchronous Transfer ModeCASE <Informatik>Selectivity (electronic)NumberElement (mathematics)Inclusion mapLine (geometry)Right angleGoogolMappingFocus (optics)Flow separationTrailSquare numberExterior algebraSoftware frameworkMaxima and minimaLatent heatKeyboard shortcutOpen sourceInformationPolygonLibrary catalogSystem callGraphical user interface1 (number)Key (cryptography)Arrow of timeVideoconferencingTouchscreenPointer (computer programming)Vector potentialService (economics)Uniform resource locatorArithmetic progressionInternetworkingServer (computing)Computing platformGroup actionWeb applicationMobile appAreaElectric generatorZoom lensProjective planeTable (information)Arithmetic meanMusical ensembleMachine visionDescriptive statisticsLevel (video gaming)Software developerProduct (business)SpreadsheetPosition operatorDifferent (Kate Ryan album)Observational studyRepresentation (politics)Bus (computing)MetreBitMathematicsMereologyLoop (music)Error messageTouch typingData managementRoundness (object)WaveExtension (kinesiology)PlanningPattern languageExpert systemContent (media)SatelliteTask (computing)Range (statistics)Complete metric spacePresentation of a groupState of matterSet (mathematics)Goodness of fitBoundary value problemSlide ruleCodeSieve of EratosthenesSuite (music)CodeProcess (computing)Internet forumMoving averageGraph (mathematics)Operator (mathematics)Speech synthesisArmPauli exclusion principleWordFile formatSpacetimeType theoryPie chartWorld Wide Web ConsortiumCausalityArchaeological field surveyOcean currentFundamental theorem of algebraNP-hardCoefficient of determination
Transcript: English(auto-generated)
Hello, everyone. So who in this room does any sort of web mapping? Excellent. Well, this dog is for you. So my journey towards more accessible maps started when I first laid eyes on national maps and I fell in love.
So this is my favorite place in the world. This is Rottnest Island, which is just off the coast of Perth. Yeah, WA represent. And yes, so this is beautiful satellite imagery, which everyone in this room, if you go to nationalmap.gov.au, you can access. And the platform that national map runs off is Terrier.
So Terrier, you may have heard of us. We're an open source framework for web-based geospatial catalog explorers. We use Cesium for our 3D engine and we use Leaflet for our 2D engine. And Terrier is part of Data61, which is part of CSIRO.
And I'm in Sydney, but our team are also in Canberra and Melbourne. And yeah, our website is terrier.io. So yes, I won't talk much more about Terrier, but if you're interested, check it out. So this is a very hard scientific pie chart
of this talk. It's mostly a case study because I wanted to share my experiences of making maps more accessible. And I thought, good for them. About a quarter of it is like tips on where to start, because that's the hardest bit is figuring out what to work on first and how to get the ball rolling.
And it's about 25% inspirational speech because this stuff is hard and everyone needs a bit of a pep talk every now and again. I know I do. So the first thing I did was I asked an expert. So I have the good luck to work with Liz Gilleran, who is a UX designer and researcher at Data61. And I said, hey, Liz, how do I make Terrier more accessible?
And she'd already done some research. She's like my invisible second presenter. You can't see her, but she's here in spirit. This talk would not exist without her. I wouldn't be able to do this project without her. She did a really fantastic talk on accessibility for MVPs, which you should check out later. And she also pointed me to this Microsoft resource
on inclusive design, that if you're new to this, if you're not really sure who you're making things accessible for or how to approach it, I really recommend it. She also pointed me to WCAG. We affectionately call it WCAG, the Web Content Accessibility
Guidelines. I won't read out this entire slide. But basically, if you want to make something accessible, you kind of have to know what that looks like. And W3C has helpfully put these together. When it comes to maps, the hardest one, I think,
is perceivability, because maps are primarily visual medium. They're pictures most of the time. So making it sort of text alternative for a map or an audio alternative for a map is really, really tricky. I'm hoping in the future we can use natural language
generation. So to generate like a text description of what you're seeing on the screen, and then that could be read potentially by a screen reader. There's been some research into using music and audio to represent data, like tabular or graph data. But people aren't very good at absorbing information
in a sort of musical format, or we're not very used to it. So that's still fairly early stage. But yeah, the future is bright, but the present state is a bit tricky. But we can approve it. So one of the big things, you probably know someone who's colorblind.
There actually could well be someone who's colorblind in this room. And a lot of choropleth maps only use color to differentiate between different polygons, different data points. And you can use patterns. Trello does this really well. So they have a colorblind friendly mode. And if you activate it, all of your labels, your color labels,
now have patterns. But you can also use color schemes. Colorblindness is not usually complete colorblindness. It's usually trouble distinguishing between certain colors. And there are color schemes that are easier for larger groups of people to distinguish.
So yeah, Google them. There are plenty of them. They're quite pretty, too. Make sure your app works at high zoom levels, because people with low vision who might not be completely blind could perhaps use your app if you can zoom all the way in. And make sure there's sufficient contrast
between your text and the background. You can use contrast checkers. I believe there's a WCAG one. Don't just eyeball it. Actually check, because what might be visible to you might not be visible to other people. So that kind of brings me to one of the main themes of this talk, which is when it comes to making your maps more accessible,
start with what you can do right now. So if improving the perceivability of your map is too hard, if you can't make fancy NLG maps or you can't turn your maps into music, don't do that first. Do something else rather than giving up and being paralyzed, which I know I've been in that position
not so much here, but in previous jobs where I didn't know what to do, so I didn't do anything. Pick something simple and work from there. So in the spirit of that, rather than tackling perceivability, I started with keyboard access, because it was the problem that I could solve. I'm a developer. I write code.
I like design. I'm interested in design, but I'm not a designer or an accessibility specialist. It also has a high potential for impact. So people who might struggle with fine motor control, who might not be able to use a mouse, or even people with temporary injuries. So if you break your arm, that
makes it a bit tricky to use a mouse sometimes. As well as moving towards making Terrier more accessible for visually impaired people, they often use a keyboard alongside a screen reader, rather than the mouse. And it kind of falls under the WCAG principle of operability that we saw on a previous slide.
So this is a before shot. Now, I had a lovely video, but PowerPoint killed it. So just pretend this is animated. But basically, the current state of Terrier is if you want to add data to the map, you can tab through it, but you can't actually see which element of the user interface
you've currently got highlighted or focused. So that makes it a bit tricky. Also, the only way that you can look at feature data, so those little points, these are all cap sites. If you click on one, you can see all sorts of information on it, but if you can't click, then that information is completely inaccessible to you.
So I decided to do something about it. So here's an after shot. So we have a little orange polygon that you can control with the arrow keys, and you can zoom in and zoom out as well with the arrow keys. And I've also improved the focus highlighting.
So you can see the Add Data button has a little white line around it. So that means that which element is currently selected should have a white line around it. So yeah, making that more obvious so people can actually tell where the selection highlighter is.
I also improved the, when you click the Add Data button or press Enter on it, you get a catalog pop up. And it used to be if you kept on hitting Tab, you would hit all the buttons that have been nicely put in the background. So I made a keyboard trap. And now if you tabbed the end of this modal,
it wraps back around the beginning so that you don't have to press Tab for several years. And so how this little orange square works is when you move it around, if it goes over one of the points on the map, it also works for polygons. You can see the actual feature information there.
And you can have a look if you so choose just by tabbing through and hitting Enter on the right thing. And if there are multiple things in your little square, it shows you all the things in your little square. So yeah, this is just a quick summary of the main changes I made.
It only took me about two days, which in the land of software development is not too bad. It's not quite finished. There are a few edge cases and corner cases that I need to clean up a little bit to make it production ready. So that will take me an extra day or so. But it's actually, I feel like this was a very good use of my time.
Because sometimes you have a mark on these things and you're like, oh my gosh, I don't know. This is going to take me several weeks. And my manager goes, oh. But no, so this wasn't as scary as I thought it was going to be. This is my future changes. There are a lot of them.
This is nowhere near done yet. So I'm not going to read them all out. Hopefully, I'm planning on adding them to Terrier incrementally. Rather than waiting until everything is perfect and done and then adding it all at once, I want to do it in little pieces. Because that's how I get things done.
Because if a task is too big, then I tend to go, oh my gosh, this is too big. Where do I start? What do I do? This is going to take me several years. Ah! So yeah, one thing at a time. And one of the most important things, actually, when you're making your web maps more accessible,
and this is actually, several UX designers have said this to me, is please, please, please test if you possibly can. Which is obviously tricky if you're an open source project with zero dollars and a handful of pocket lint worth of funding.
But they're friendly people. They tend to care about these things. You may be able to find a kindly one to volunteer because you have to be really aware of the ethics of your testing. There are ethical issues with finding your blind friend and being like, test my website, please, for no money. It's not necessarily automatically a terrible thing,
but you want to be sensitive about these things. And putting my developer hat on again, at the same time, even though it's hard, you don't know something works until you've tested it. I test, hopefully, I test my code before putting it into production because that's how I know that I haven't broken things.
And similarly, particularly if you are building something for people with different user interface needs than yourself, you kind of need to know if it works for them rather than not you because that's kind of the point. So yeah, if at all possible, please, please, please, please test your more accessible maps.
Now, this is my call to action. If you possibly can, please, please, please, go forth and make your maps more inclusive. I know this is like a really sort of light introduction and not super detailed heavy, but if you want more pointers, please email me.
I can maybe put you in touch with, I'm not an expert, but I know people who know people. You don't have to be an expert. I think that's one of the big things is you don't have to know everything and have all the answers before you get started. Pick something that you know you can do
and try and get that working. And once you've got that working, try to get the next thing working and the next thing. And suddenly, hopefully, a more diverse range of people with more diverse needs will be able to use your map. Thank you very much.
Thank you for the talk. As a cyclist, I can't actually see red. No red lights anywhere.
12% of males are actually colorblind. So it is a fairly important area to look at. Have you considered using a table at the top so that they can actually export it out to a CSV or Excel spreadsheet? Yes. So let me find it.
There's a little button down in the corner of these tables which appear for most feature information on our maps that let you download the table, but particularly also for CSV datasets, which this isn't. This is actually GeoJSON. You can download the whole dataset if that suits you.
Yes. Here's one I prepared earlier. Yeah, awesome talk. You talked a little bit about how important it is to UX test, but I wasn't clear on what actual UX testing you did
and what you learned from that. Zero. So this, I haven't done it yet. So actually, when I, this code's not merged yet, but when it is merged, when I get back to Sydney and talking to our UX team, you know, that's what we're gonna do. We are going to test this. So not only is this like, you know,
the next step for other people once they finish is the next step for me once I finish. Well, finish for some definition of finished anyway. Do you have any examples of musical maps? I don't.
So actually, the person to email about that is Liz Gilloran. She has the same email address as me, except it says Liz Gilloran. Or you could email me and I'll email her. Cause she, yeah, so she actually produced a great big research document, which was too long to present here and I didn't want to present her work.
She could present her work. But yeah, it's really interesting and quite cool. Okay, so I must have put my first map on the web in 1996, right?
And around that time, we started talking about what we were gonna do about accessibility. And the same issues came up about five years later when I launched a service for the Ordnance Survey in the UK. We don't seem to be making much progress on actually coming up with a way of doing, and I'm not sure the audio stuff would, to be honest, work.
So I think, I guess my comment would be we don't seem to be able to get the funding to do this kind of, and I'm looking at my colleague here. We don't. We still get any funding. That's right, so I'm, you know, and you know, the numbers are quite high, right? And you're kind of making a start, but it's like going over the same sorts of grounds we've gone over before.
We've not really got into actually solving the fundamental problem here. And even people like Google who you kind of think might have an interest in this. I've not seen them sort of say, we put up all these, you know, Google Maps, Bing, Max, but nobody's actually really trying to crack this problem. So it's not a question as a commentary, right? That we've been around this loop a lot and we still don't seem to have made much progress.
You are absolutely right. You know, I absolutely agree. That's sort of, I think, my goal for Terrier is to try and get the sort of tried and tested basics working and then to experiment a little because we do have the expertise within Data61 to do that
because I think the next possibility, particularly for visually impaired people, is natural language generation. So to actually try and generate descriptions of data. It's quite hard with maps, but like, you know, audio summaries of, you know, generated audio summaries
of what people are actually seeing, which I figure is not necessarily perfect, but it might be better than nothing. But yeah, I haven't done any research on that. So I would need to do that. But yeah, I think we have to sort of, I'm not an academic, but I kind of think we have to take it into our own hands somewhat and, you know, make sure we've got the basics down
and then try things, test them in the community and see if they work. Ethically, of course. All research should be ethical. Sorry, I'm doing the comment thing.
I just wanted to respond to that suggestion that, for example, Google Maps doesn't do accessibility because what I've heard is from, for some blind people, it's actually an amazing solution. Like, the primary use case for Google Maps on a phone for most people is navigating and it actually works really well. You don't actually need to visually see a map for the navigation to work. You say, here's where I'm going to. It says, walk 100 meters down this road,
turn left across the street, get on a bus. You know, there are lots of use cases where the accessibility solution is don't rely on a visual map. Instead, focus on what's the actual problem the person's trying to solve and do it all with text. So for example, I worked on a product that lets people look up the school boundary
for their address and we sort of accidentally made it accessible because on mobile, there wasn't space for the map and it turned out you kind of didn't need the map anyway. You type in your address and it tells you with words the name of the school that is, you know, for the boundary that you live next to and there was this whole side panel where you can switch to the map
and it turns out you don't need it. Like, you know, sighted people don't need it, blind people don't need it. On desktop, it's just kind of eye candy that, I mean, us map lovers like it but it doesn't actually, it doesn't really add a lot to the use of the map for the primary use case. Sorry, another comment. Good news is WCAG 2.0 is, so last year,
it's now WCAG 2.1. So you should really, if you're gonna be doing any work, be trying to reach 2.1, which is subtly different. But if you can hit 2.0, that's great.
Would you like to respond to either of those not questions? No, I'm incredibly honoured to have been here to discuss these things. You know, it's really important that people talk about these things and it's lovely to have these conversations happening at Phosphorgy Oceania. I've got one final question,
unless there was anybody else, was where would you say, if you were to look into this, other than obviously review the associated video with this talk, where would be the pointers that you'd have about the methodologies that you're using or the methodologies that you looked into? Like, is there any particular locations
people can actually start looking at it in a low sort of browsing internet over the lunchtime and then maybe have ideas later on kind of? Yeah, so the Microsoft design inclusivity introduction, I thought was really, really powerful because it kind of, it starts with empathy,
which I think should be the groundwork for this sort of stuff, is that you should start with having empathy for people who aren't like you and try to build that empathy into your work. So you can just Google it. It's completely free and I really, really like it. Also, yeah, it's, I find it really hard to read
kind of ironically, but the W3C actually has lots of resources. So if, you're not necessarily working with maps, like if you're a web developer, there are things like you can put ARIA labels in your HTML to make it screen reader friendly and that sort of thing.
So there's quite a few resources. I would focus on sort of, yeah, the W3C ones are probably a really good place to start and then from there, I would try and find things that are written by people with disabilities or people with specific accessibility needs that aren't met elsewhere, rather than listening
to people like me who don't really have, like I can use a mouse and I can see and hear well enough for most everyday things. So yeah, that would be my advice. Yes, you probably know what.
If you wanna do one thing is download the Chrome extension wave and have a look at your website and fix your errors. And that would be the simplest thing because you'll learn what you need to learn sooner rather than later. It's nice to have someone who knows
what they're doing more than I do in the room. I think based on your talk, you're definitely underselling yourself. If you'd all join me in thanking our speaker, Emma.