Auditing Google Maps & NY Times

[00:00:00]
>> Marcy Sutton: Okay, so GitHub's doing pretty well, I think. It's a big site, there's a lot of features. I'm sure they have more work to do like we all do. But I think they've done a lot of really great work. And let's go look at Google Maps. So this is the Google Maps' web application, not the API.

[00:00:18]
So the the API that you might embed on your own website. The last I checked was not as accessible. But the web application, I think they're doing pretty well. So let's see if I look for a dog park, it suddenly focused directly to this input. So I can just start typing.

[00:00:34]
I can hit arrow keys to go through the items that it's suggesting to me, and it will refresh the map. And so this is pretty awesome because I can just use my keyboard and I haven't even touched the mouse yet. So Andy's Bark Park. Let's see. I can check that out.

[00:00:52]
I hit the Tab key and it sent my focus into the region of the map. And you can go pretty deep into Google Maps' accessibility features. I think it's brilliant, at least from a keyboard perspective. So there's always the keyboard component we need to consider and then the screen reader component later on.

[00:01:11]
So that's where I would start. But I think that they've done some really great work here and maps are inherently difficult. Trying to represent a map just in your mind could be very difficult. And so I think they are solving some pretty hard problems with this one. Does anyone one have a web application or website that they would like to test?

[00:01:35]
Sort of throw that out there, yeah.
>> Speaker 2: Go to newyorktimes.com.
>> Marcy Sutton: All right, let's do it, nytimes.com.
>> Marcy Sutton: Okay, page is loading. I have been shopping for origins apparently. So there's a big ad at the top, thank you, cookies. All right, so my first step, start with keyword.

[00:01:55]
The ad actually has focused elements in it, which is fun. It's kind of like a nice thing actually have ads aren't accessible because then if you have a disability and you're like, whatever, I can't even get to this ad. But sometimes if they're not accessible, it'll be like reading out an image source cuz there's no alt attribute and yeah, it can go horribly wrong.

[00:02:15]
So I'm gonna fire a voice-over to test this with a screen reader. And on a Mac you have a screen reader built-in. And I can start it on my Mac keyboard, I'm gonna hold function command F5.
>> Speaker 3: VoiceOver on Chrome, The New York Times- Breaking News, World News & Multimedia- Google Chrome, window, The New York Times- Breaking News, World News & Multimedia.

[00:02:34]
>> Marcy Sutton: And if you ever want to silence the screen reader, you can hit the Ctrl key. So if you're giving a presentation like I am, you can get it to stop reading out which is really nice sometimes. So I'm gonna try and reach interactive controls just by tabbing through this web page.

[00:02:50]
So-
>> Speaker 3: link, image, Advertisement.
>> Marcy Sutton: Get pass the ad.
>> Speaker 3: Leaving frame, Leaving frame.frame, leaving frame.
>> Marcy Sutton: So the ads are an iframe, so that's what you're hearing, leaving frame, leaving frame. And now I'm into the main body of the content. I am on a navigation button. So Sections Navigation, button, it's in the banner.

[00:03:09]
So it's in the header, which means that header has been marked up with a banner, a header. So I am on this button. I should be able to hit the Space key.
>> Speaker 3: Home Page World U.S. Politics N.Y. Business Opinion Tech Science Health Sports Arts Books Style Food-

[00:03:23]
>> Marcy Sutton: Pretty awesome. So it sent my focus into the menu when it opened and I can use the arrow keys. I might need it.
>> Speaker 3: Travel Magazine T Magazine Real-
>> Marcy Sutton: So with voice-over, with the raw keyboard I can use arrow keys. With voice-over I need to hold it like a combination and I am usually having to remember what those are, so let's see.

[00:03:43]
So voice-over.
>> Speaker 3: heading level 3, link, STYLE
>> Marcy Sutton: Nope.
>> Speaker 3: First heading, heading level 3, link, STYLE.
>> Marcy Sutton: So what happens-
>> Speaker 3: Sections, F5, VoiceOver off.
>> Marcy Sutton: It really helps to pull the cheat sheets that I have included in the application. So what you could do, you wanna make sure that you're making things that work with the keyboard and then also work with the screen reader.

[00:04:02]
And you can see how I just ran into something that I wasn't expecting which is why we need to test super often. But it also that with screen reader commands especially with voice-over, users have to learn those commands. So there's a combination of keys, the voice-over key, and usually the arrows will navigate through application or interactive components like that with the screen reader keys.

[00:04:29]
So it can be different than just a raw keyboard experience. So I'm gonna just go back and test this right now for times' sake with the keyboard and then I can go look at the screen reader experience a little bit later. So it did send my focus into the menu.

[00:04:46]
It looks like when I move my mouse it actually close it. So there's some like extra layer, interactive layers going on there, which is pretty cool. And if I hit the Enter key, it will take me to a section like the Politics section. If I hit Enter on this little search field, it sends my focus into the search field.

[00:05:06]
If I type something, it will enable the GO button, which is pretty cool so it's disabled until I actually type something. There's some skip links in here. See, really awesome, and kudos to the New York Times team for all the work that you've done on this because I have checked this before and it was not as accessible before.

[00:05:24]
All right, so thank you for that. And you can test apps out in the wild all the time and it's good practice. Obviously, I need to do more to learn voice-over command so that they're top of mind. It's also fine to have a cheat sheet next to you.

[00:05:40]
And on our application, those are right here. So that's something to keep handy, cuz not everything is going to work with Tab and work with the right arrow keys. I found that NVDA on Windows is a little bit easier because of the browse modes that it uses. Voice-over uses these key commands instead of browse modes.

[00:05:59]
So you can play around with both of those. And if you're a Mac user, I use a virtual machine to test NVDA and maybe we'll fire that up a little later. But you can get free VMs from Microsoft and use parallels and then you download NVDA for free.

[00:06:16]
And so that's how I end up testing windows on my Mac. Okay, so debugging in this Gatsby app. So I mentioned earlier and you probably saw that you can run Gatsby develop. And that way, when you're working locally, making changes, and you hit save on a file, it will refresh in the browser.

[00:06:34]
But that's the debugging mode, the development mode. So it's not actually going to do a full production build. So if you run Gatsby build and Gatsby serve in your command line, that will actually produce static web pages that do this hydration step. So that if you turn JavaScript off, that's how you get the fully built pages.

[00:06:55]
So there is a bit of a difference between Gatsby develop and Gatsby build. Just want to point that out. And if you do this Gatsby serve command, your app will be running locally at local host port 9000 instead of port 8000. And so you can debug a lot with develop mode.

[00:07:11]
But if you're testing things like progressive enhancement in particular, which we'll talk about later, that's when you would need this Gatsby build and Gatsby serve. And you need to regenerate the build if you make changes. It's not something I work with all the time, but I do build Gatsby app just to make sure that when I'm like, all right, let's deploy.

[00:07:31]
That I haven't don't have broken layouts or just quirks that sometimes you need to work out ahead of time.