Accessible HTML Exercise

[00:00:00]
>> All right, so let's fix some code, shall we? If you haven't already pulled down the project, this is gonna be our first example where we really go dig into the code. So our repo and our project is built with Next.js. So if we're going to look at React quite a bit today.

[00:00:16]
But anything that we do with React will apply to web accessibility in general. What we wanna focus on at the end of everything is what is rendered in a browser? What is a user going to experience? So keep that in mind, kind of regardless of the framework, the technology, we're really focused on that end user experience.

[00:00:38]
Okay, so a quick spin through our GitHub. You can clone this, you can also just follow along if you want to observe what we're doing. I'll explain everything, we'll go through all the examples. But you can clone this repository, and then there are some setup instructions in here on how to get this running on your machine.

[00:00:59]
There's also a link over here on the side, you can open up the fully built version of this including the examples in their more working states. I wouldn't say they're perfectly final because accessibility is always a work in progress, but there are more complete examples that I'll show you in a minute.

[00:01:21]
So I've got this already pulled down. I used VS Code as my text editor, so let's take a little bit of a tour through here to get started. I've got the ReadMe open right now, but over here in my File Explorer, we've got Pages, which is how the course materials are broken up.

[00:01:41]
A lot of our attention will be spent in the components directory. So this has a series of UI components that have accessibility issues built into them. And as we go through the topics, we will work on those. And the more finished versions are in the completed components directory.

[00:02:01]
So you can always look ahead, you can compare, do a diff between what we had and what we're working on. And so that's kind of the structure of how our exercises are split up. So we're on exercise 3, fix some HTML. I guess before I go over here, I'll show you what it is that we're fixing.

[00:02:24]
So we have a product for a dog float coat, in case you wanna go kayaking or stand-up paddling with your dog. They're going to need a PFD or a personal flotation device. So this product that maybe I buy somebody's dog for Christmas or something has a product page.

[00:02:44]
It's kind of in progress. It has a ton of components in it, but take a lot of time to build. But there's some varying degrees of accessibility or not built in. So our mission in this exercise is to find as much that we can improve focused on the HTML part.

[00:03:06]
We're gonna build on this in the next few examples, but let's see if we can fix some HTML that we find in here. So there's a little color picker. It's not totally hooked up to the bigger image gallery yet, but it does have these little lists of images.

[00:03:22]
We have a size picker. There is the start of a photo gallery here. So speaking of dialogues, that, hint hint, could be something that we make into a dialogue. It's basically just like the first attempt at getting a layer to cover the content. So our approach for that, we are totally open-ended what we can do with that.

[00:03:47]
That'll especially be later in our focus management section. But let's see what else. So we've got some buttons down here. We have a little quantity selector. So like how are those marked up? We can go look at those. So there are some debugging tips on here. So we want to look at keyboard controls, so that's kind of in the realm of HTML, what elements are in there that are accessible?

[00:04:14]
We'll get more advanced with focus management a little later. But headings, landmarks, and accessible names, those are all in the scope of this. So our form labels are any links, any image alt text. And we can inspect the DOM and run extensions. So this component is embedded in this page.

[00:04:39]
So I can go in here and inspect it, and go check it out. There's also a full page not in the slide deck and it is, I think this might be the more complete version of it if you want to test that. And so there's one that's like full screen.

[00:05:02]
Okay, so, let's go see where this code lives. So, product page, that's the kind of top level page component that pulls in the header. There's an image gallery. So, basically anything with the word product in it, in the component names, those are all going to affect the the component on that page.

[00:05:26]
And it is sort of the first go-around for these. So it might not be quite as sophisticated as the real site would have, but it has the start to some of the functionality. So there's the image gallery component. And if you're new to React, so we have a lot of logic and functions that are little utilities that you can call up top.

[00:05:49]
There's a little bit of TypeScript in here. And then if you scroll down, the JSX down below is basically where all of our markup lives. And so the header has multiple components in a file. There's the little banner up at the top. That gets pulled into the product header, which is a little further down, product details, and so on.

[00:06:13]
And we'll go poke around in here and make some changes. If you have any issues setting up the project, let us know and then we'll come back and code some fixes together.