Accessibility Foundations Review

[00:00:00]
>> So let's dig into some tactical guidance on what goes into an accessible user interface. I have to start by saying that the foundations of accessibility always apply. So the basics are important. As accessibility champions, it might be a little bit tiresome to have to beat that drum on the basics, but those are the things that are getting missed over, and over, and over again.

[00:00:26]
So we have to learn the basics of accessibility and share those basics, because if we can get those right, we can really cut down the number of issues that pop up later. I mean, those really do add up. I heard someone here in class just talking about having 1,100 issues that they had to solve in three months.

[00:00:44]
So if you could anticipate some of those, you're gonna have a way smaller backlog of things. So when it comes to our UIs, it doesn't really matter how they're assembled to end users. If you're using the newest, latest, greatest JavaScript framework or you're on more of a CMS or a Vanilla web stack.

[00:01:06]
I mean, there's just so many different types of stacks out there. And really at the end of the day, it's about what's getting rendered in a browser. What is the user experiencing? We always have to keep kind of our eyes on the prize, that's what we really care about.

[00:01:23]
And so we can start by designing with access in mind. Sometimes this comes before our role even. So just know that as developers, as we discussed, you can only fix so much, visual contrast, font size, icons that are easy to understand, intuitive, interactive interfaces. Don't make me think about what is interactive.

[00:01:46]
Is that a link or not? Can I click on that? I mean, chances are if one person is confused about an interface, a lot of people are probably confused about it. And nothing is more eye-opening than watching users struggle to use the thing that you've put out in the world.

[00:02:02]
So user testing sometimes, if you need to get design stakeholders to pay attention, have them watch someone with a disability try and navigate the thing they've created. Cuz it could be really beautiful. It could really solve some customer needs, but it needs some accessibility attention. In development, we wanna watch out for using valid semantic markup with HTML and ARIA.

[00:02:28]
So that's kind of the technical foundation of any web user interface, is using HTML elements that are available to us, exhaust that list as thoroughly as you can. Because there are a lot of features on the web that we don't have to rewrite if we can use what's there.

[00:02:48]
HTML is one pillar of the web platform, with HTML, CSS, and JavaScript. JavaScript and CSS will affect your HTML, so they all go together. It's like one happy family. But we have differing amounts of all of these technologies in our applications. But HTML is always that thing that if you're putting out a web user interface, it's going to have HTML in it, probably.

[00:03:16]
So we wanna learn those basics and make sure we're using HTML elements that are available. Now, ARIA, we'll talk about more in the next section, but that is the Accessible Rich Internet Applications. That is a standard set of roles, states and properties, their attributes that you can bolt on to your HTML.

[00:03:38]
It's more of an advanced tool, as you'll find out a little bit later, so I wanna caution you when you get started because that is easy to mess up and get wrong. I've done it, we've all done it. And there may be some framework-specific quirks in how you construct your UIs, like if you're using React or Angular.

[00:03:59]
How you compile components together, there might be some extra markup that comes along with those that you wanna make sure you're testing in the browser at the end. It's like, I didn't realize that component was bringing in all this extra cruft. There's some non-standard attributes that's putting into my markup, or it's messing with my keyboard accessibility or something.

[00:04:23]
We wanna make sure we're looking at it kind of in that full rendered environment to see if CSS and JavaScript and the markup on the page, are those playing nicely together and how we expect. And we'll go into that a lot more in accessibility in JavaScript applications a little later.

[00:04:42]
Starting, though, with some semantic structure, just to kinda tip you off on elements to use. H1 through H6 headings are super foundational. They're very helpful in a screen reader, because they give you an overall outline. So we wanna pick heading levels that create an overall hierarchy of our content, and you can style them with CSS.

[00:05:05]
So you wanna pick the right heading level for the content and kinda how it fits into the overall page, not for the way it looks, cuz we can always style things with CSS. And I did find that there are some approaches, at least in React, of being able to use context to try and programmatically choose the right heading level.

[00:05:26]
So you can do things with components where you could pass a heading level in as a prop, maybe. You could look up some techniques on how to do it more programmatically using context. Sometimes we in pursuit of making something fancy, it might get overly complicated. So those are some trade-offs that you might have to consider.

[00:05:48]
But we still wanna think about that overall end user experience. What's that heading level? What are your heading levels, do they all work well together? And we'll look at some tools to test that later. We also wanna use landmark element to structure our pages, like main, nav, footer, section.

[00:06:05]
And section and nav, since we tend to have more than one, we can label those using aria-label and aria-labelledby. Use lists, ul, ol, those can group items and they will be automatically counted in screen readers. And these are all really helpful semantic things to organize and group your content together for people who rely on assistive technology.

[00:06:29]
Cuz if you can't see the overall structure, you can follow along kinda how its marked up if it's done well. For interactivity with keyboards and screen readers, this one's super critical. If a mouse user can do something, a keyboard user needs to be able to do the same thing, and screen readers piggyback on the keyboard experience.

[00:06:51]
So an example would be of using something, an HTML element, as it should be used is the button element. The button element is focusable. It has a button roll by default, it's just built into the thing, it's baked in. If you put a click event on a button, you can still fire it with keyboards.

[00:07:10]
Enter key will fire that click event. Whereas a div, sure, I can put a roll of button on it, I could put a tab index on it. It is not going to respond to that click event. I have to put a key event on it too. So the button is just, it's less work.

[00:07:27]
Everyone loves doing less work, right? [LAUGH] Question?
>> Is it better practice to use headings within section elements to define the content, or ARIA?
>> It would be best to use headings first. You always use the default HTML first, exhaust all of that, and we'll go through the rules of ARIA a little bit.

[00:07:47]
See, we always wanna try to use the HTML first, partly for support reasons. Yeah, it's just kinda one of the rules of accessibility in the web is use those first.