Accessible JavaScript In Action

LECTURER:
Hello, everybody. My name is Andrew Olson. I'm a Frontend software engineer, and you're here to learn about accessible JavaScript in action. I'm really excited to be at MidCamp in person this year. I gave this talk at Florida camp and was able to add a few more slides for it. And also I'll be giving this talk. I'm really excited about it at AccesU, which is an accessibility conference in Austin, Texas. So, a little bit more about myself. I have red hair. I'm wearing dark-rimmed glasses. As if this picture does show like, cover it. So I could use this picture. I have long red hair that comes past my shoulders. I used to have kind of a Viking-esque beard, but when my hair is down, definitely Viking-esque. Frontend developer in Chicago suburbs. I've been working with Drupal since about 2008. The team I was joining and said, "We use Drupal." And I was like, "Oh my gosh, I better figure this out to fit in." And a fun fact about me, I love playing music and I played in a band at Lollapalooza back in 2008 as well, as quite an exciting year.

You get into Drupal, you play Lollapalooza, good times. I can be found in the Drupal verse as Andrew Ozone. Not really much on Twitter anymore. That's a whole other thing. So, I'm also really excited. I am a proud member of AllyTalks. So, we put on monthly talks about accessibility and digital. We have a YouTube channel. You can go there and watch. We live stream monthly. So, I encourage you to join the live stream. If you have questions, we take them and we also are completely non-profit and funded and we want to do really exciting things like pay our speakers. We sell really cool. I'm wearing actually an AllyCat t-shirt. We sell t-shirts if you join the club, this is fresh off. We're gonna be having these really cool stickers for only the people that support our group. So, please become an AllyCat Club member and we have live captioning during our events. So, it's all live streamed and we have a human captioner that does it. And yeah, we are open for a variety of speakers, so we're very inclusive and it's exciting and I love our content and it's a really great group of people.

So, today we're gonna talk about modals. Modals are also called pop-ups or pop-ins. Next, we're gonna talk about menus, specifically mega menus. And then lastly, we'll talk a little bit about TypeAhead, also called autocomplete, and then we'll wrap up. So before I get started, I have a comic here. And as I was putting this talk together, I was reading the Sunday paper, and I'm a big fan of this comic. It's called Pearls Before Swine. And so, I'm gonna go through and read the panels here. So, Pearls before Swine is, there's a very caustic rat that's very pessimistic about the world. And then there's pig who is very naive. And so, a lot of these comics are just the interaction between the two. So, in the first panel, there's rat and pig, and they're climbing up this hill and there's a sign with an arrow that says Wise Ass On The Hill. So, pig climbs at the top, rat stays at the bottom, and pig says, "At the very top of the hill there is a donkey," hence the Wise Ass. And pig says, "Oh, great Wise Ass, I need help with a problem." And the Wise Ass says, "What is it my son?" And pig says, "I try something new and I fail and I quit.

So, I try something else new and I fail and I quit and try something else new. And fail, and fail, and fail." And then the wise says, "So, you try something only once you naturally fail and you immediately quit and try something new. Don't you think the problem is rather obvious?" And pig in the next panel screams at the top of his lungs. "Trying is the root of all failure."

STUDENT:
(LAUGHING)

LECTURER:
And in the very last panel, pig is at the bottom of the hill talking to Rat. And he says, "Then he cried and jumped off the mountain."

STUDENT:
(LAUGHING)

LECTURER:
So, I was like, "This is perfect for this talk. This is how I feel about accessibility. This is how I feel about Drupal, in general, is trying and trying and failing." So, that was my inspiration and I hope you enjoyed it. So, what I wanted to do is if you notice in that last panel, pig was nude, right? So, I thought it would be great if we could all pick a nice T-shirt for pig. And what I wanna do is go through an example here. So, after I read that comic, I went online shopping to buy a shirt and I noticed these interactions and it was a really great example. So, I wanna caveat this with threadless.com, I really like threadless.com. I'm not picking on them in any way here. And actually what we'll find is they're doing some really interesting, great stuff. But what I wanna do is I wanna go through the arc of more (UNKNOWN) a marketing campaign. So, we as Drupal, as we as site builders, we as technologists have to work with the marketing team, the analytics team, as well as to develop something and pull this off, right?

So, what I want to do is we're gonna walk through the Threadless site and kind of see these interactions in just like pay attention to that, and then we're going to go through it again and again and really pick it apart. So, to get pick this t-shirt, we go to threadless.com, and about three seconds in, imagine this, this modal pops in. Right? So, this is my first time at the site and I'm like, "Well I just came here and all of a sudden I just get this interruption," right? So, I'm gonna click to dismiss. I want to keep shopping. I don't even know if I like these T-shirts, but I'm just gonna keep going. So, I go through the site on a few things and I notice something in the lower left corner. Does anybody else see like something? I'm like, Something's following me along, and sure enough, there it is. It's spin to win. That was the first pop-in that came in. So, at this point, I thought the T-shirts are pretty cool. So, you got me. I kind of want that discount, right? So, I go ahead and click on the OK, Spin to Win, and bam, it unlocks 20%.

Hey, that's not too bad. And then it's like, "Yay, you have 20%, but you got to give us an email." And I'm like, "Ooh, OK, Sure. That makes sense. I got to get this." But then the modal refreshes actually stays in that same modal. It doesn't pop and go away and come back. They said, "Oh, we actually really need your phone number as well so we can send you this code." And I'm like, "I really want that t-shirt. Sure, let's do this. 20% is pretty good." So, it finally says, "Check your text." OK, and send it to my phone. It beeped in at boot. So, I went to my phone and skimmed and I clicked a link from this random contact. Granted, I had some context because I ordered the shirt and or I ordered the. I wanted that coupon code. So, I just get from 8043 and I just click that link, and then I'm opening up the browser on my telephone and there it is, there's the code. So, I can copy it and do with it what I want. So, then I go back to the site because I'm going to complete shopping and then I don't see Spin to Win anymore.

So, that's great. So, I went through this whole arc as a sighted user that can use my hands. I use a keyboard and mouse and that's how I experienced it. But let's rewind and go through that flow again with somebody that can only use a keyboard. So, what does that look like? So, let's go through this. So, I go to Threadless's first page, about three seconds in, this pops into the page. So, what's really cool about this is they're using a keyboard trap, and if I'm just using my Tab key, that immediately focuses on the ability to close it or I can tab over and do the spin to win. So, just a little bit about that. If you haven't done keyboard navigation, you use the tab key to go to the next actionable element, and ideally or you can shift-tab to go. You go tab to go forward, shift-tab to go backward. And also. So, I can either tab to the X and close or I can hit the escape key and that actually dismisses the modal. So, that's actually a really good interaction for modals is the ability to focus and close and then to stay inside of that because what happens if I tab outside of it, this thing is still in the way, right?

And so, as a keyboard user, I'm now focusing on things behind it and I want it to get out of my way. So, that's a. They're doing a really good thing here with modals. So, I work with this really. I worked at Bounteous prior to this and my friend Steve Woodson made this really cool website that I'm gonna go to right now and it talks about previous focus and it talks about keyboard trap. And so, what he's done is he has a before of what the problem is, and then an after. So, you can actually experience this like on your own using these examples. And then he has the code comparison here. So, you can see the exact code that he has. We'll skip past the styles, but really in the JavaScript, what he'll show you is the good stuff that you can add to your modals to make it more accessible. And what's really cool about this, I won't go completely through this again. Steve's and all the great work with the code examples, but the two things that I wanna point out here is this prior focus. So, what he's doing is he's setting this variable in JavaScript of the prior focus, and what he's done is he's taken the document.active element.

So, that was the thing that opened that modal. And some of you might think, "Hey, sometimes it's a button that opens up that modal." And so, then that prior focus would need after I close it to go back to that button. But in the case of Threadless, it just interrupted me. It just came in at a certain time. So, there is no prior focus. So, at that point, as a developer, you can make a decision to say, "What should I do for that prior focus? Should I just put it on the first actionable item in the body?" Wherever I wanna do that, but what you need to do is just be cognizant that if there was an action to open a modal and you close it, you really should go back to that previous action or have kind of a backup plan for when it closes to just help the person that's experiencing the site to move on from that because you interrupted them. The last part about this, too, that I really like about the code was he's getting all the focus of all items in that modal area. So, he is setting up here, sorry, up here, we'll go through this quick.

He's saying, "Hey, this modal label is the ID of that modal." And so, what he's doing is saying, "Give me every single thing that can take focus inside of that modal." And it's kind of a laundry list of things. And there's another example, Deque does it a little bit more. There's a Deque example. So, I like Steve's example because it's very explicit. You're saying, "I want a[href], which is a link or a select or, form items. So, you can be pretty explicit in what you want. And then once you get all those things, you put them in an array and then that allows you as you hit the shift, the tab or the shift-tab, it allows you to go through that. So, it's the first stop. So, it's looking at that array and saying, "Go to the first, second and third, fourth, fifth." And then at the very end, the last tab stop is to then go back to the beginning. So, it's a really cool way of putting previous focus back and staying inside of that modal, it's a really good trick. Thanks, Steve. You're awesome.

So, this is the other example that I was saying is Deque University. There's a lot more stuff in this code. What I liked about Steve's is it was very clear as to what changed in there, but Deque, this is a rock solid, simple AlertDialog, so definitely check that out as well. So, you might ask yourself, "Hey, why do we have to use JavaScript for these things? Doesn't HTML have that already?" The answer is, "Yes, but it's not quite ready." There's some really great links in here. Oh, I should have started out. I have all these slides out on my session page on the MidCamp site, so definitely go to that PDF, download it because these links are outstanding. But as you can see here, it's missing a few features for the dialogue. So, someday we'll get to the point where we don't have to write this JavaScript, but until then it's just not quite ready yet. So, that was great as a keyboard user, right? So, what happens for somebody that needs to use a screen reader? So, how do they experience that?

So, what I'd like to do now is kind of pseudo live demo (INAUDIBLE), but I have my volume turned up here and I'm gonna bring up the Threadless site. It's changed since I first built this for the AccessUH conference. So, let me just go to threadless.com because I did visit it today and they've changed their homepage, so it'll be a little bit different. Let me turn on VoiceOver. So, to turn on VoiceOver, a little bit about VoiceOver. VoiceOver is the screen reader. That's default. If you all have a Mac, you have this available to you. There's a shortcut because I have that lovely smart bar, not so smart bar. So, I have to hold the command key down and hit the power three times and that'll turn VoiceOver on. So, a few more things about VoiceOver is it works best with Safari. So, that's why I'm bringing Safari. You get more consistent results with screen reader, VoiceOver, and Safari, but you can use it with Chrome or whatever, but that's why I'm using Safari here. Again, that's in my experience.

I think I read that somewhere, but I don't have a source to cite. But when I do VoiceOver and I do voiceOver testing, I use Safari. So, let's turn on VoiceOver.

SPEAKER:
The VoiceOver on Safari, Start page Window, Toolbar. You are currently on a toolbar to interact with the items on this toolbar, shop graphic (INAUDIBLE) 50% loaded 19%. Sign up via text for offers frame. You are currently on a scroll area inside of web content, to begin it.

LECTURER:
So, I went to the site and it lets me know that this. It was kind of. It kind of went kind of fast. But what I'm gonna do now is that modal opened and I'm gonna hit the tab key and you can't see the focus state but let me hit the tab Key.

SPEAKER:
Sign up via text for offers. Threadless, web dialog entering Sign up via text (UNKNOWN).

LECTURER:
So, that's good right? The modal opened. I'm now. This is first time I hit the tab key there.

SPEAKER:
Spin button. You are currently on a button to.

LECTURER:
So, I'm now hitting the tab key again.

SPEAKER:
Close button.

LECTURER:
So, great I'm trapped. So, this is pretty cool. So, it read out. It was kind of. It went kind of fast, but as the page loaded, this modal opened up and it read aloud that I had a way to win to get a 20% off discount. So, let's actually spin it.

SPEAKER:
Spin button. You are currently on a button to click this button (INAUDIBLE). Heading level sign up via text for offers frame. You are currently on a frame, to (INAUDIBLE) sign up via text for off-link (UNKNOWN), heading Level two Sign U, 20% off, your order. Your.

LECTURER:
So, what I'm doing now is I'm not using my tab key. I'm using the arrow keys which actually read out content.

SPEAKER:
20% off UNLOCK, 20% YOUR ORDER. Edit a text email field. New line, you are currently on a button. To ignore, thanks, Close button. You are currently.

LECTURER:
So, what I'm doing now is I just hit the tab key. So again, now it's, the modal is changed, but I'm still trapped inside of there. So, if I hit tab.

SPEAKER:
Email address, required at a text email field with autofill menu. To open it, Continue button. NO THANKS button, you close button, email address required at a text email field with autofill menu.

LECTURER:
So, there's a couple of things that could have been a little bit better about this, right. The page refresh, it didn't really tell me until I started tabbing again. So, there's probably a way. And the cool thing about Drupal is we have Drupal announce. So, that's a way that it's, this feels kind of very (UNKNOWN) where it didn't do a full page refresh. So, there's probably an opportunity where as the context of the page changes, they could announce that and let us know. But overall, they're doing a lot of pretty interesting, great things. I'm not gonna sign up for another coupon code, but I just wanted to point out how easy it is to just kind of turn this on, take some practice. So, I highly suggest playing around with it. There's some really great tutorials. I think I have that on the next slide, so I'm getting a little ahead of myself, but let me turn off VoiceOver.

SPEAKER:
VoiceOver off.

LECTURER:
And let's go back to the slides. So, one thing as. So again, trying out Safari and VoiceOver, there's a really good protip that I have here. So, if you go into the Safari advanced features, I like to have the checkbox of Press Tab to highlight each item on a web page. I don't know why that's not default, but there's probably some reason for it. But that allows you to tab. Because when I first did this, I'm like, "The tab key is not working." You have to tell it, "I wanna stop at all the tab-tappable actionable things on the page." And then I like the show develop menu in the menu bar so I can inspect it and take a look at some things. So as we experienced, the Spin to Win was pretty good. You'll notice that they're using an aria-modal and aria-label and that's what read out. So, actually if we were to go back, it would say sign up via text for offers, Threadless. So, that's what's read out. Moving on from that, there are some outstanding code examples from the ARIA Authoring Practices Guide.

So, go to this link. On there It says not for production use, but it's just. It's really good solid code. So, that's another really good place to see examples of good modals. So, we experienced this a few times. On the screen you'll see I have an image here where it looks like a couple standing there and it says, "Passion led us here." And I cross it off and I said, "Marketing led us here."

STUDENT:
(LAUGHS)

LECTURER:
So, as we go through this as developers, we have to work together. We have to work with marketing that has their sales needs and their ideas. We have to work with analytics, which tells us who's coming to the site, how are they experiencing the site. And it would be ideal to ask real users to see, are we getting in their way? But I was fortunate enough to work on something like this for a client. Again, I just use Threadless as an example, but we were able to build something like this in Drupal Admin. So, we worked with marketing, we worked with analytics over time to kind of provide these choices as we build this in Drupal. So, the first choice that we gave the marketers was to Select a Time to Pop. So, we set hours for five seconds, as you saw, Threadless headed for three seconds. So, that was really great. If there's some pages where they wanted them to experience it or they're anticipating that they're gonna scroll down and then pop, they can play with that timing, look at analytics and see what's working and what's not.

The next thing that we did was, you notice that after I did interact with that, I didn't see it anymore. So, you're not just constantly interrupting them. And so, we used cookies for that. But with a GDPR, people, you have to be clear about what cookies. And granted it's tracking cookies, but still people can be funny about cookies. In this way, if we set that cookie, we're actually trying to help you out. So, we're not always interrupting you. But another great way to do that is Browser Local Storage. I'm a big fan of Browser Local Storage, but again, if somebody is incognito browsing the site, that kind of blows away. And unfortunately, that's a part of analytics, is that if we're constantly having these ads on the page, people might be bailing, right? The last. The other things that we did was we just gave them a black box of whatever was in that modal, right? So, in this case it was Salesforce forums. But let's say that you had some other application that was like a random Coupon Generator, whatever.

We're just like, "This is a modal, it's gonna behave, it's gonna take all the actionable things like whatever you put inside of it." And so, we felt that was pretty robust and gave marketing a lot of powers. We hope they use them wisely. A few other things we did display by URL path. So, in this example, it was a lot of different sports. So, it was like football, basketball, golf. And so, we could say, I want anything. Anytime somebody goes into golf, I want a golf coupon versus that. So, that allowed them each different marketer to have different plans for different content. Special URLs from newsletters. We were able to kind of strip that from the top and then maybe not pop it. So, we did some interesting things there. Another thing too, was being able to set locale. This was a multilingual site. So, they were able to market in their locale, talking dollars, talking pesos, whatever. And the last part was because of analytics, right? There was a high abandonment rate. Like what happened to this page?

Everybody's leaving. They hate this. And they're like, "Oh, maybe we shouldn't pop it on this page, but we'll pop it in this context." So again, work with your analytics team because we can build these powerful tools, if they use them in a bad way, there's a real impact. But again, I'll just say a little joke here. That Spin to Win was only for desktop. And that was another thing too for mobile. We made the decision that we didn't wanna pop or interrupt people on mobile. They already have enough going on. They're pretty focused on what they're doing. So, we made a decision to say, "Don't do this on mobile." But I said or making a joke here from 2001, a Space Odyssey (INAUDIBLE). Maybe they profiled me enough that they knew I was on my phone. They knew that I did this on desktop. But whatever. We live in strange times of tracking. But what are. Do we have to interrupt the user? We talked about we didn't even really cover cognitive load of interrupting somebody that's actually going to shop on your site.

So, can we do this a different way? Does it have to be like this? I found some decent examples on some other sites where in the footer, they're very clear. They say subscribe. They're not tricking me into the phone number and email. They're saying, "Save 10% on your next order." Like, that's pretty clear. It doesn't have to interrupt me, but it's always there in the footer. Another one on the home page, they just tell me right away. They say, "Use code free ship for free shipping." Unfortunately, on this site, they didn't have alt text on this. They use an image. Sad Panda. But hey, they're trying. They're not, that's one option. And then this is another. I think a really great option is we're advertising. We can give them coupon codes in context. So, they're in that shopping experience. We can actually have it in that shopping experience. Do we have to pop or interrupt them during their flow? So, that is Pop-Ins and modals. See how I'm doing on time. Alright. Next up, I'm gonna talk about menus.

And when I talk about menus, again, that mega menu. So, what you see on the screen here is an example of a mega menu. And this is a client that is using a module, Drupal module that I helped co-maintain, and it's called the TB Mega menu module, in a sense for the best mega menu module. So, as you go here. If you hover over so on the screen, you see a logo on the left with a bunch of top-level navigation items. If you hover over new, you will see a tray opens up underneath it and then there's more items inside of that. So, what I'm gonna do now is, yeah, the TB mega menu. And what's really cool about it is we have this where it's keyboard navigable. I said that right. And I'm gonna do a little live demo, but as you tab. So, as you open up the menu, you can tab into it. You can use up, down, left, right arrows to navigate it to. But we have this documented on our lovely module site. So, as I go to the Holly Hunt site, I'm just gonna start keyboard navigating. I'm hitting the tab key, I'm highlighting the logo.

And as soon as I tab focus into new, it immediately opens up and expands the menu. If I hit tab again, I'm just cruising across that top-level. Some menus, you'd have to drop into the menu and then tab all the way through those links before you get to that next item. So, we've done a really cool thing where all top menu items you can just tab across and just kind of way find a little bit easier. If I want to get into that menu, I hit the down arrow and now I'm in that first column. If I keep hitting down or now I could actually hit Tab two because I'm now focused in this area. And so, you can go up, down. If I use the right arrow, I'm gonna go to the next column over if I go back. So again, keyboard navigation, I'm able to kind of cruise in wayfind without being trapped into having to make selections all the way through and have it read out all those things. Just save time. I'm not gonna turn on VoiceOver, but that's kind of how it goes. Is new is the first child in the menu. The second level, sorry, the parent.

The first level is the parent. And then you have first child, which is the shop by category and under shop by category, we have a third level. For TV mega menu. And I think in general, I think three levels of Nav is probably enough. We don't really support four and five. If you're really doing that, kind of ask yourself some hard questions about what you're doing. But that's kind of how it works. So yeah, if you just kind of, I'm just hitting the right arrow and whenever I want to go in, I can go into it and kind of cruise across it. And then if I want to get out of it too, I hit Escape. And when I escape, I'm focused back to the parent item in there. So, (INAUDIBLE) focus states aren't the best on here, but if I go to the tab to the next. So again, wall covering. If I hit escape I'm on wall covering and if I hit tab again, I will go to rugs. So again, we're pretty proud of this, this module. It's pretty great. And we think that's a good way to keyboard navigate. That was the live demo portion.

On the screen, you'll see a picture of my cat Mikan, who was trying to be helpful. But yeah, that's just me being silly about the fear of a live demo. And yeah, (UNKNOWN) is a funny, funny, furry man. Menus are really complicated. TV is just one way to do it. Olivero Mike Herschel. Him and a bunch of other really great people in the Drupal community built a really great Olivero menu that's very accessible. Mike wrote this Smashing magazine article, highly suggest reading it and checking it out. It talks a lot about the concepts that I just went through. You can also watch the session because he's a funny gentleman as well and just kind of see the features of what we get by default just by using Drupal and that theme, the Olivero theme. Another great thing. Back to these examples, this website that I'm very fond of is the ARIA Authoring Practices guide. Again, not for production, but they give you some really good examples and they talk through this keyboard navigation like space and enter, right arrow, left arrow.

So, what I wanna point out here is that there's two different examples, right? It's kind of the first example is what we're doing as well, is where you're going in. It's on focus, it's going to open up. But there's kind of a problem with that, right, is if I go to that first focus and go to open it, I can't really go to a new page, right? So, that's kind of the issue with mega menus. And there's another pattern that's out there that's called the Disclosure button. And so, this gives a really good example. So, as I was saying is there isn't really a new page or a rugs page on that Holly Hunt site. But we could if we did this, we're about on the screen? I'm on the Disclosure button page and I have about now highlighted and then if I tab again it's a Disclosure button telling me that there's sub items inside of here and I can open it and close it and make decisions about that. And again, it allows me to cruise across the top. I don't have to go into each item. But once again they explain like how to interact with it and then they give you the code and examples and it's a really good starting point.

The last thing I'll say about menus is I find them with every team. UX has an idea of what they want. Design has an idea of what they want. Imagine this your stakeholder is gonna say, "That's not how I thought the menu would work." So, you got to have these conversations, having these examples, and get everybody to agree upon it. Otherwise, you're gonna build something and they're gonna say, "I hate this disclosure button. What is this thing?" You have some options and here's some really great code examples as that basic starting point to make those decisions. Moving on from menus is TypeAhead. So, we're on the last part here. So, when I talk about TypeAhead on the screen, what you'll see here is input box that says Country. And as I go to the next screen, I start typing uni. And what that does is it gives me, it fetches and gives me five different countries that start with U and I. And then as I keep typing united, I went down from five, down to three options. And then finally, I was able to find and select United States.

So, that's what I mean by autocomplete, and that's a typical interaction for TypeAhead. There is a great site that has a demo and has code for you, again, as a really great starting point. So it's the GOV.UK Design System has this already for you. So, if you're tasked with building an autocomplete, this is a really great place to go. And check it out. And there's different options too. I'm gonna go to the demo site really quick. So, there's some options here, for example, this will. So, imagine I'm using that screen reader and every time I type it reads it out. Imagine if we give the user feedback that A and then it says, "Here's a list of 100 countries. Let me start reading them off for you." (LAUGHING) And after every single time you type. So, there's ways to say only start getting me results after I type two characters to kind of limit that cognitive load. There's an overlay example auto-select. So, they already have these, there's a default value. So, if you wanted to use localization, say they're probably shopping in the US, we probably shouldn't have to make them scroll all the way to the bottom of a country's list to get that.

So, check out this site. It's really great. A code example is out there, so all these resources are really good starting points for you when you have these interactions and also to share with your stakeholders. So everybody's going, "Yes, we like how this autocomplete is working." We're all here because it's a Drupal conference. Drupal has this really cool thing called Drupal Announce and it's an ARIA live element on the page and it's read aloud by screen reader. So, as that page changes, we can tell people what is happening on there. So again, back to that Threadless example of Spinning to Win, and then the page refreshed. There was an opportunity there where they could give me some feedback. You as Drupal (UNKNOWN) have this at your fingertips, so you just make this aria live region and it'll read it out at the completion of whatever task. And there's a link here for the documentation on it, which is pretty good. I can't say enough about this. I gave this presentation at Florida DrupalCamp and then the next session was by Andy Blum from Lullabot.

Going over a better example of Drupal Announce. So, I kind of took that part out and I'm like, just watch his examples. And I linked to his examples because he did a really great job as 10 most useful libraries in Drupal 10 core. Outstanding session. Check it out. You can check out the slides. There's a really good demo where you can check it out. There's also a really cool article that I found by Jules hong talking about Drupal announce and screen readers. And once again, my buddy Steven Woodson. He's an amazing person and he really does love coffee that much, I will say that.

STUDENT:
(LAUGHING)

LECTURER:
Super passionate about coffee. But he also on his site has a really cool place where it's not just in Drupal. You can just play around with how aria-live regions work. So, what are some concerns, right, when we have an auto-complete? So, we already talked about those number of results return being way verbose, limiting it. So, there might be 100, but maybe we should only limit that to the top five or something and then let them know that there's still much more. One of the things is talk to your users, please, please, please. Because you might be saying, "I can tell them all the things of what's going on in this page." And they really probably don't care. And I might be getting in the way of their tasks that they're trying to accomplish. So, you can be two verbose. You could also just not have enough information on there. So, it's a really tough balance providing context for those results. So, if it's just numbers, it's probably good. If I'm shopping for like a number of flights or dollars, like provide that context.

Don't just say 20 when it reads it back. Give them that context for the results. And then just cognitive load. As I said, it can be pretty overwhelming. And just talk to your users.

STUDENT:
(COUGHS)

LECTURER:
That is it. And I'm open for some questions. I think I have a little bit of time, but does anybody have any questions? Yes, sir.

STUDENT:
About accessibility (INAUDIBLE).

LECTURER:
Yeah. So, the question was, what level of accessibility? So, there's WCAG criteria and there's level A, which is basic, must have. Double A is, should have, and triple A. I'm gonna get, I'm totally getting this wrong. But basically, you should shoot for double A and that's on the sites that I work for, work on. We aim for double A. Triple A is the nice to have but A is base level must. Double A is really what we should all be aiming for. And then triple A is if you have users and requirements for it. Does that help answer it? So, when we're talking about these components, you absolutely need to test that and go through WCAG criteria. I didn't really scrub these against like the interaction versus WCAG failure just because they're complex here. That would probably be a good add to this, is to say when this happens, you're failing this criteria. Right? But. So, I'm not like addressing it. All the things that I code and all these examples are really aiming towards that double A I would say, interactions.

STUDENT:
(INAUDIBLE)

LECTURER:
For testing? Yeah.

STUDENT:
(INAUDIBLE)

LECTURER:
Yeah.

STUDENT:
Plug in.

LECTURER:
Plug plugin. There's some really great there's wave. The cool thing about Chrome is it comes shipped with (UNKNOWN) which is a testing tool. So, those are things that you can run in the browser. But manual testing is always a good way, like just keyboard-tabbing through and making sure. There's some quick check websites too. There's plenty of resources. Actually, if you give me your information, I could share some resources with you, but there's plenty of browser plug-ins to help run it through. But those aren't enough. Like just saying, "Oh, it passes 100%, you're still gonna miss some criteria," but they're a great guideline. I use those and I'm very humbled. Like I still feel very new to accessibility, but using those tools, I'm like, "Oh sure, I forgot some alt text here." I just had a placeholder and it catches me and keeps me honest through it. So using those tools are great and iteratively, whenever you're gonna go ship something, you wanna ship that assessable code. Any other questions?

Yes, sir.

STUDENT:
(INAUDIBLE) examples. I always like, (INAUDIBLE) idea by doing the right. But whenever trying to redesign for site, I just want to try to future-proof it enough that I'm not always doing a library then, "Oh now it's using some old 100 lines code to get out 10." So, it's kind of what is wrong specifically with using the dialogue (INAUDIBLE) keyboard tracking. This was one attribute versus a whole bunch of scripting. So, good to use. (INAUDIBLE) six months a year until first (INAUDIBLE)

LECTURER:
The question is when should I use, you want to stay on the front of you want to stay ahead of shipping accessible code? Like when is it safe to use what feature? And I have a good answer. Analytics. So, look at your analytics and see what those users are using and use that as a guide post. What I showed on there is that it's not ready yet is due to some of the browser support. So, that would be it. The other thing about accessibility is there's not one solution. Do you notice I didn't just like have a GitHub to say this is how you do modals all the time because really depends on what you're trying to accomplish. So, what I wanted to do is challenge you with I have these really great code examples as I was building things that were really good guideposts, but talking to UX designers, talking to the stakeholders, they might want something that's a little bit different. And then I have to scrub that, make sure I'm passing AA WCAG standards. So, there's always a wrinkle in there. It's never code here.

This is my modal. It's gonna work right over here. Even the TB mega menu module, it has opinions on it. So, like for a mega menu, we're opinionated on it, but we don't have that disclosure button as an option. So, long answer to it is it's always a moving target. You're gonna read an article and be like, "Oh my gosh, I just did that last week." And they're saying, "You shouldn't do it this way." And you're like, "They're absolutely right. I didn't think about this condition," but hopefully, I broke down kind of some of the basics of like modals, how you're interrupting people, how to dismiss them in a safe way. Same with menus. Oh, I forgot to mention, there was a really good talk yesterday in Accessible Talk by Jan Wilde. She talked about mobile criteria and so some of the things that were on there was like a mega menu covers, covers some things. And if you just left that open, you would never see the content underneath it. So, that she also has some very mobile-specific failures. And it was a really great session.

So, I highly recommend checking out that session. But that's another one. I was in there, I built this presentation. I've been talking about menus for a long time and I'm learning all the time. I am (UNKNOWN). So. Yes.

STUDENT:
Yeah, I have a question. So, in your mega manual, how are users being announced by the VoiceOver, for example, there's two columns right in the submenu?

LECTURER:
Great question. So the question is, how does VoiceOver, How do you know there's columns and what's in the page? So, I could actually bring that up and do that. But how we do that is unordered list. So, we have. The cool thing about HTML. And a lot of things about accessibility can be solved by just using natural HTML in the right way. So, if you all wanna be accessible right from the start, right? Valid HTML. You're like half the battle is one right there. So, for a menu option, right? All that's on there, if we were to just take out the JavaScript, it's just a bulleted list with parents and children in there. So as I go in, I have that first list and it says, "Oh, there's an unordered list here that has five items." And so, at that second, as I focus on that, it's the parent and it's saying, "Hey, this next thing has five children underneath it. Do you wanna explore it?" No, go to this next column. So, it's. The other thing I'll say about accessibility is it comes down to just setting the expectation.

If you ever feel lost or you feel like this is just too hard, just try and think about how can I best set the expectation for what's inside of this thing that I'm building. Like a video, right? So, what is the expectation I can give if I'm gonna have a video? Probably tell them that it's 30 minutes long. You're making a commitment, right? Maybe offer it in a different way, like a transcript so I could skim through it. Maybe fast forward to minute 12. Right? So, as you're doing accessibility, as we're building these things, just ask yourself, "What can I do to help that user set those expectations," and menus is a great like all the way back to your question, (UNKNOWN) is like, "I'm opening this thing. Holy crap, it's got 50 things." Next, like allow me to skip past it. That's why carousels, right, are kind of controversial, trapped inside of a carousel. And you have to go through all 50. It's like sitting through your grandparents' slideshow of their trip, right? I want to get out of here.

(LAUGHS) Like, if I knew I was doing this, maybe I wouldn't stop at Grandma's house. That's a horrible, horrible example, but you get what I'm saying. So, carousels are like a trip to your grandparents' house. So, what I'm trying to say.

STUDENT:
(LAUGHS)

LECTURER:
Any other questions? Alright. Well, thanks, everybody. The presentations is up there. Enjoy those links. Build some really cool, accessible things. I'm excited to see what you build. Thanks, everybody.

STUDENT:
(APPLAUSE)