Course Overview

[00:00:00]
>> Marcy Sutton: So accessibility. To me, this is all about making the web more inclusive with and for people with disabilities. So including people with disabilities and our user testing and our design reviews, working with people so that we're making the most accessible projects we can. And, all the time, trying to make things accessible regardless of whether we are working with people with disabilities but that should be your goal.

[00:00:26]
And a resource that I really like to learn about how accessibility applies to all of us is Microsoft's Inclusive Design Toolkit. And I have a link in the slides, it is a PDF download at bit.ly/microsoft-inclusive-toolkit. And what I like about this resource is they have a series of personas that talk about how accessibility can apply to someone who has a permanent disability.

[00:00:50]
Maybe you're blind from birth, or maybe you break your arm or you had eye surgery, so more of a situational or temporary disability. An inclusive design is the practice that we're designing for all of these different scenarios and personalities and just all the different ways of life that humans have.

[00:01:11]
And so being able to bake that into our designs and our websites and our web applications, to me is amazing. Technology can be a big equalizer. But unfortunately, it is not always top of mind. I hear a lot of people say, it's not something we're strong at, and I'm pretty optimistic.

[00:01:28]
I think we can learn and we can do better with every commit and every pull request and every project that we work on. So, don't get discouraged, just do it a little bit as you go along, try and get better and we'll make a big difference that way.

[00:01:45]
>> Marcy Sutton: So JavaScript applications, they're everywhere whether we like them or not. So, some key aspects of JavaScript applications are that they're client-rendered. So, where the application is taking over from the browser in a lot of cases, so that there is no traditional page reload. That means JavaScript handling a lot of routing, doing a lot of interactions.

[00:02:07]
If you think of Facebook, if you click a like button, it doesn't refresh the whole page. And users have come to expect that sort of interaction. And that's really common with JavaScript applications. And there's accessibility implications with that. A lot of these apps are built with frameworks like React, Vue, Ember, Angular.

[00:02:26]
They're sometimes rendered on the server as well. There might be a server rendering component that we call hydration. What that means is that you have an application that you can render without JavaScript on. And then when JavaScript is available and the scripts download, it will actually hydrate your app into a full web application.

[00:02:46]
And that's what Gatsby does, and we'll look a little bit at that later on. But I think of JavaScript applications as being both challenges and opportunities. There's plenty of challenges, but there's also opportunity. So, we're gonna focus on the opportunities today, and a lot of the mechanics and some of the basic patterns that you should be considering in your web applications.

[00:03:07]
We definitely can't get to all of it and we could go much, much deeper into a lot of these patterns. But I wanna show you the concepts that you need to know if you're building an application for accessibility.
>> Marcy Sutton: So here's what we're gonna cover in this course.

[00:03:22]
We'll start with accessibility debugging to set you up for the rest of the things that we'll do during the day. We'll get into accessibility in JavaScript applications, and the big parts of that that I'm covering are focused management, announcements for screen readers. Semantic HTML, unobtrusive motion and animation, progressive enhancement.

[00:03:42]
And then we'll do a bit of automated testing later on with unit tests and integration tests. So that if you're doing all this work for accessibility, you can ensure that it's baked in your application. And, either a co-worker won't break it or you won't break it in case you forgot how that feature worked.

[00:03:57]
It's a bit of a contract that you can build in your applications, and accessibility has a big part of that. And then we'll do some Q&A I think throughout but then especially at the end