Accessible HTML

[00:00:00]
>> A lot of this stuff is just about using the tools that HTML already gives us. So I think one thing that's kind of cool about accessibility is that you can do a lot just by using the proper or like semantic elements in HTML for what you're trying to accomplish.

[00:00:17]
So, one pattern that we see a lot is that folks will just use, kind of divs for everything. I saw somebody on Twitter once, call it div soup. And I kind of like that where it's just like I don't know div is a perfectly good tag. It's a block level element.

[00:00:33]
It doesn't have any styles attached to it and so they just use making a header use a div making a button, use a div, making anything, just use a div for it. But what's interesting about these HTML elements is that while some of them provide purely semantic value, some of them have a lot of functionality built in.

[00:00:53]
That maybe we don't know about, or we just don't think about all that often. So, for example, some that don't have functionality, but they do have semantic, meaning our aside, footer and header. And so those might help like your SEO score, your website health score, but they don't really do anything.

[00:01:11]
They're not gonna add extra utility for screen readers, they're not gonna add anything like that. But other ones such as button input and text area provide a lot of functionality. So I think that like for an example a text area, people just use text area when they need it, right.

[00:01:27]
Like if you need a big form field, you're just gonna use that. But buttons are really tricky because they come with a lot of styling that folks don't really like the look of and so often I'll even see this in like design systems, people will just use a span or a div with a class of button and then they'll style at themselves.

[00:01:43]
And I think one thing that's tricky is understanding like how much goes into these elements that maybe we're not thinking of and the impact that it can have on users with disabilities. So, before we get into examples, kind of back to our web aim thing, the theme of the course.

[00:02:00]
So for web aim compliance, the important ones are like h1, h2, h3 are used for headings. And we'll see that later with the screen readers, I can actually show it right now. So if I go ahead and I turn my screen reader on, and again, this is voiceover, and then I go ahead and I do.

[00:02:20]
It's like option control U will bring up this thing in voiceover, but I can do things like I can look at all of the articles across the top. I can go to links and it'll read all of the links on the page. So if I wanted to like scan through the links and I can go to headings and I can then arrow key through all the headings.

[00:02:41]
So you could immediately see here how, if for example, your design system used like divs and then you use class h1, class h2, and you styled them differently. Or if you just made everything h1 or everything h2, something like that, you can see how this would make it very difficult on folks using these assistive technologies.

[00:03:01]
So properly nested use h1 at the top of the screen only have one of them than anything under that as a top level sections and h2, 3s inside things like that. So again this is like something that's relatively easy to accomplish just HTML, just making sure using the right tag, but can have a really profound impact on people.

[00:03:18]
And so again, if you have style considerations, I would encourage you always use the proper tags. So use an h3 and make it bigger if you need to Again, anything you do in CSS won't affect screen readers. So if you really want a big label, but it's technically the third nested heading, use the proper heading then add a class to it.

[00:03:38]
Then do whatever you want in CSS to make it look the way that you'd like it to look. But don't just use different elements for those styles and the same with a button, which we'll get into in a minute. If you need a button, use a button don't use a div and style as much better to use a button and then add a class and then style that class.

[00:03:56]
Yeah, the webAIM's Recommendations, especially on the h1s, uls, ols, blockquotes, things like that. Those have meaning. They can be really helpful for accessibility assistive device users to use. Text labels for form input elements, we'll get into that in a minute. But again, making sure that when you're using a screen reader, it'll read aloud what the user is supposed to do in that form field.

[00:04:20]
And then the reading and navigation order to determine by the code order is logical and intuitive. So again, just thinking about for an example on this page like this is an h1 because it's kind of like the top level description. Any high level elements under that will be an h2.

[00:04:34]
Then if I had a couple sections under that, that would be h3 is just thinking about it that way.