Course Materials Setup

[00:00:00]
>> Marcy Sutton: So our app for today. It's built with Gatsby and React. And you'll learn a little bit about how Gatsby works if you're not familiar with that. Some things I like about Gatsby is that it has this server rendering built in. So it's building with NodeJS, you do a build.

[00:00:17]
It will render these static pages. And then it has this client-rendering component that will do that hydration. To turn these static web pages into a React application. So it's great for interaction, sites where you have a lot of interactivity, but you want that fast performance. It's a pretty great medium for that.

[00:00:35]
So the output of HTML pages by default was what won me over personally because not everyone has JavaScript turned on or wants it. And we can have a good argument about how much JavaScript is okay to require. I think for a lot of static websites, you really want some of those static pages.

[00:00:55]
And something else about this app is that this slide deck is part of it. So once you pull it down, it includes the application that we'll use as sort of a test sandbox and the slide deck.
>> Marcy Sutton: So it is now install time. I have this application up on GitHub, it is github.com/marcysutton/js-a11y-workshop.

[00:01:19]
So we'll take a few minutes, follow the steps to download if you haven't already. Once you have this set up locally, you can make changes and have it live reload. And then you can even play with the slides if you want, to see how those work. The slides will always be available on GitHub as well.

[00:01:36]
So, some common issues that I think may have come up for folks. If you are working with an older version of node. You'll want to upgrade that, probably to the latest. And when you do that, if you delete your node modules folder and the package locked JSON file that it, just delete it.

[00:01:52]
Then regenerate with MPM install. That should work out some of those kinks. But we did all hit NPM to download Cyprus at the same time so it might take a little while. Okay, so once you've got it up running. If you run NPX Gatsby develop in the project directory, you can open it locally at localhost:8000 and I'll talk a little bit later about a different command we can run.

[00:02:17]
But you can always reference the slides online at marcysutton.github.io/js-a11y-workshop. In case you're having trouble, you can follow along there. And a quick note that a11y is a numeranim for accessibility. So the 11 letters in between the a and the y. If you see that reference, that's what that stands for.

[00:02:40]
So, we're going to get a couple of more tools. For any Windows users, I don't see any here in the room, but for folks tuning into the course remotely, if you're a Windows user getting the NVDA screen reader, we have one in front, two, okay. Okay, we do have Windows and it's super common.

[00:02:59]
So if you are running Windows, getting NVDA is a really great tool to have. It's a free and open source screen reader built with Python. It's used by a lot of people with disabilities and it's a fantastic testing tool to have. So if you can start downloading that.

[00:03:16]
Also some extensions, the axe Chrome and Firefox extensions are great to download. A very similar tool is the Accessibility Insights extensions from Microsoft. That actually runs axe under the hood. So we'll do some debugging with those tools. And on the landing page of the application bundled in this project, there is a bunch of more testing tools that you can go and play around with.

[00:03:42]
So to show you that page, this is the app that's running at localhost port 8000. So the landing page has a bunch of resources, there's testing tools. Screen reader cheat sheets, if you're new to that. Some accessibility docs for frameworks, so specific frameworks like React, Ember, Angular has a new one, it's amazing.

[00:04:03]
React native, and Ionic Mobile Framework if you are in the native accessibility space. We're not really going into that today. But I do have a link in the resources for mobile accessibility at the W3C. If you're curious about how accessibility applies to native mobile, you can learn about that.

[00:04:19]
And I've got some books and other resources that I keep around just because people always want to know, where can I go to learn more? So you have a bunch of resources here. And if we look around this application in the sidebar, we have a number of demos.

[00:04:34]
You will see that there are the sort of bad implementations, the things that I see out in the wild quite often. And then the better regions are blank, because that's where we will fill in more accessible examples, as much as we can in the amount of time. Creating a production-ready component takes quite a bit of time, so we'll get as far as we can.

[00:04:55]
But I have the concepts listed here as well just to have that in our minds, of like, okay, I should be keeping those things in mind. So if you don't want to work with React, I have a couple of options for you. You can play with a tool called Parcel, and I love it for prototyping.

[00:05:13]
So you can clone a scaffolding project that I've set up. It's github.com/marcysutton/parcel-prototype-scaffold. And it will pull in Parcel for you and it gives you the HTML file and script. And what I love about it is you can go into the script in there and just run NPM or NPM install from your command line.

[00:05:36]
And then in the script, you can import Angular, or import View, and you can also use projects like create react app if you like. But this I love for prototyping because you can pull in view libraries, like React, without the whole build system components so you can get a little bit simpler.

[00:05:56]
And so for prototyping, it's just nice to keep it simple and know exactly what you've installed and what you have going on. It will live reload. So if you make an edit to the index HTML file or the script, it will just reload it in your browser. Makes it pretty nice.

[00:06:12]
Alternatively, you could use something like Codepen or Codesandbox to not even worry about doing any of this install. A lot of our examples that are the non React examples I have are on Codepen. So prototyping I think is a really important part of working in JavaScript applications because a lot of times the build systems are so complex, and a lot of the tooling around it, that it's sort of hard to just play around with a UI.

[00:06:38]
And I think accessibility we should be doing early on, especially if you can prototype with a designer, maybe you pair up. And you can just work through an accessible user interface in a prototype fashion. So I'm a big proponent of that, especially because we can work with people who are stronger in HTML and CSS, by having this prototyping, these roles on our teams.