 Hi everyone, my name is Zoe and I use Daishi pronouns. I'm Jenny and I use Daishi pronouns. We both work at CrowdStrike where I'm the accessibility lead. And I'm a UA engineer. And CrowdStrike is a remote for cybersecurity company. So no matter where you're based, we're always hiring. We use Ember, Tailwind and TypeScript. And if you're interested, DM us on Twitter or get in touch via Discord and we'll introduce you to the right people. Today, we'll talk about the accessibility of the Space Jam websites. The real question is which one, because as it turns out there are four. We have the original one from 1996. We have a new one made for the 2021 film. We have one for Cinema Times and then we have like a remastered version of the original one, but made for the new film. Today, we'll look at the original website and the one made for the 2021 film. We'll use our finest tools to check their accessibility. And here we have Box Bunny pointing at our tools. We'll use a keyboard to check for a keyboard navigation. We'll use Apple's voiceover screen reader to look at the souvenir page. And we'll use the Sharktastic JAWS screen reader to try and play some games on Windows. But for all of the seriousness though, we'd love to tell you why we chose this page on websites to begin with. We chose it for three reasons. Number one, it's awesome. Just look at it. It's the perfect companion to the cinematic masterpiece that is the Space Jam movie. A movie about Box Bunny and Michael Jordan teaming up to play basketball against the aliens. Number two, it's a time capsule. This website has not changed since it was created in 1996. And before we reveal reason number three, let's look at the team that created the website. It was created by Andrew Sackler, Jen Brown, Michael Tritter, Darlan Ways, and the team was led by Don Buckley with very little studio oversight. The team was largely composed of designers who taught themselves HTML. They used the latest of web technologies available to them at the time to create a website that to this day stands the test of time. And that leads us to reason number three, the new Space Jam website. The new website was created to promote Space Jam a new legacy movie featuring LeBron James. And so like the old one, this is a marketing website. And this is where the similarities really seemed to end. The new website had two decades worth of front end development knowledge and expertise. And where accessibility was not really a term used in the 90s. Warner Bros like any large corporation keeps on claiming that accessibility is really important to them. But is large corporations promising to be accessible actually translate into accessible websites? Or is it just self-indulgent promises like Daffy Duck kissing the Warner Bros logo on his butt in this gift? And have two decades worth of experience and tooling actually made the web more accessible. And finally, is the new Space Jam movie better than the old one? We will focus on these questions in our demos where we'll use different tools to look at both websites and assess how accessible they are. And in the first demo, we'll be checking how easy it is to navigate the websites using keyboard only. I will first look at the old Space Jam website and then at the new one in both cases, I'll start on the landing page. I will navigate to any other page and then come back. So first let's go through the keys that I'll be using. So I'll be using tap to focus on the next element. I'll use shift app to focus on previous elements. Enter to activate focus control. And control tab to go to the next browser tab. So let's jump into the demo. We are on the old Space Jam website in the middle we have the logo and it is surrounded by planets. Each of the planets has a name. So I'm assuming this is where the name of the page that we'll be taking to if we click on it. And the landing page here is the main menu or the main navigation. Right, so let's press stop to see where we happen to be. And we can clearly see the focus on press box shuttle. Okay, well, let's stop through this. So we're going clockwise. Okay, here we started jumping. I mean, you can say that the tab order is a bit weird here, but you can clearly see your focus. So it's not really a massive issue. And now we've tapped through everything we're behind the jam. So let's press enter and see where it will take us. And we're behind the jam page in the middle we have an image. Inside the image we have four phrases. Now I wonder if it's just text that is part of the image or we can actually interact with it somehow. So I'm pressing tab. And you can see the focus on this page and logo in the top left corner. Pressing tab again. Cool. So you can see clearly see the focus within the image on animation sketches. I'm pressing tab again. So it moved. Okay, I wonder if it's just a focusable element or if I click on if I press enter will actually be taken somewhere. So pressing enter. And we're on the character development page. Okay, very cool. We've overdone what we've set out to do so I am going to press tab. And we're in space jam logo and pressing enter hoping it'll be I'll be taken back to the London page. We're back on the London page. Great. The old website passed the first demo. Let's see how the new website compares. So I'm pressing control tab. And we are on the new space jam website, but only we're not actually on the new one. So we're not seeing the landing page. What we're seeing here is the pop over above the London page. But this shouldn't be a problem. I see there's a close button in the top right corner, the yellow square with a cross. So basically I have to do stop to it close the pop over and then we can begin our demo. So I'm pressing tab. I'm not seeing the focus so I pressed up again. I know that the focus is on something because if we look at the bottom left corner. So I'm pressing enter. I'm pressing the URL and I'll press tab again. So it moved to synopsis now. But I guess the focus is underneath the pop over. That's why I'm not seeing it. So if the focus is actually somewhere on the landing page, maybe I should just press enter and we'll be taken to that page instead. So I don't even have to close the pop over. So I'm pressing enter. Right. I don't know if we are on the synopsis page, but I cannot see it because of the pop over. So no shortcuts. We're back to the original plan. So let's tap to the button. So I'm tabbing tabbing tabbing some more. Okay, now I'm on the pop over with copy link. Tabbing a bit more play mute. Okay, we're out of the pop over. So we're now on the Chrome tab. Cool. I guess we can end our demo here. Thank you everyone for coming to our talk. We'll see you at Embercom 2023. There's no way for me to close this pop over screen with my keyboard. I cannot tap to it, let alone press that button. And I mean, as much as I like to joke that a front and developers job is to center divs and make buttons, it really is our job to make buttons that work. This is why there's always an outcry. When you have articles about how a button costs the business, it costs half a billion. Because we're paid to make websites, usable websites. And here we have an example of a button that doesn't work. And money aside, Zoe and I work for a cybersecurity company. So working button is the difference between stopping the breach or not. So on this somber note, I press over to Zoe. Thanks. So let's have a look at this yellow square with a cross in it. That's pretending to be a button. We can use Chrome's DevTools to have a deeper look. So if we right click on our yellow square and we choose inspect, we get presented with the DevTools. And here on the left, we see all of the HTML. And we can see the HTML for our supposed button highlighted. And we can see that it's a div with an ID of trailer close. There's also a data attribute and then a style attribute with some styling in it. Inside, we find two spans which are used to make up the cross. But there's nothing here that indicates any buttoness for this element. And we can see that there's no semantics here. We can still dig a bit deeper though. If we move over to the right, we have a set of tabs, including styles, computer layout, event listeners, and then a Chevron menu. If we open that menu, we get some more options, one of which is accessibility. If we go into that, we get presented with the accessibility tab. And here we see the accessibility tree, which is essentially like the DOM, but with accessibility information. Then we also have ARIA attributes, which would list ARIA attributes that are added to the selected element. And then under that, we find perhaps the most interesting portion, which is the computer properties. So here we can see all of the accessibility information that is being computed for our selected element. Right now, we can see that there is no accessible name and that the role is generic, generic being the implicit role for a div element. So there's a few things missing here. This is trying to be a button, but we don't have the semantics for it. One way in which we could solve that would be to just add ARIA. So we can add a role attribute and set that to button. And if we switch to our accessibility tab, we can see that under ARIA attributes, the role attribute has been added with the value of button. And under computed, we can see that indeed the role is now button. It still doesn't have a name though, which we can fix with yet more ARIA. So let's add another attribute and we can do ARIA label. Then we can set it to something like closed dialogue. Let's use that clear enough. If we switch to the accessibility tab, we can see under computer properties that the name is now closed dialogue and we can also see that it comes from the ARIA label that we added. By default though, a div is not accessible via keyboard. So I can't get to it with the tab key. There's an attribute we can add to edit to the tab order of the page. And we do that with the tab index attribute. So let's add that. If we set tab index to zero, the element will be added to the tab order based on its location in the DOM. So it's similar to how it works for other focusable elements such as inputs or links. Okay, so we should now be able to try this demo again because we added the semantics and we added the square to the tab order. So I'll set focus to the page and I'll press the tab key. Okay, I'm not seeing focus yet. If I press tab again, I get into the YouTube player again. So maybe focus is on the button, but I'm just not seeing it. We can inspect that in the DevTools as well. So if we switch back to DevTools and go to the styles tab, we can right click on our HTML, on the element in the HTML and we can go to first state and we can choose focus. This will show us any styles that might be applied while focus is active. And in the styles tab, we can see that when focus is active, the outline property is set. Unfortunately though, it sets a none, which is even made important for some reason. This is equal to hiding the cursor for mouse users. Essentially, you have no idea where you are on the page. So let's disable that style for now. So then maybe we can see where we are. Okay, going back to the page and I can already see the focus outline, but let's try to demo again. I set focus to the page and I press the tab key and now I can see focus on the button. So that's good. Let's try if we can now close this dialogue. So I'll press return, which doesn't do anything. I'll press this page bar just to see if that does anything. Nope, doesn't do anything. Okay, what's going on? Let's head back to our DevTools again. And we select our button. On the right, in the Chevron menu we used earlier, we can select event listeners. And this will list all of the event listeners added for the specific component. And we can see that it's only a click listener. So the click listener listens for pointer events. So this will work for something like an iPad. On an iPad you could close this menu if you use touch. You can click on it and it will close it. But even though I can set focus to this button, it won't close with either the return or space bar. Even though we added all of this semantic information, this button still doesn't work for everyone. And as Billy prompted, when UX doesn't consider all users, shouldn't it be known as some user experience or SUCKS? To find out if these websites work for all users, or only some will have to look beyond the pixels. So let's do exactly that. Instead of look-can't pixels, how about we listen to pixels and we can use voiceover for that. As a disclaimer, I'm a fully-cited user. So I use voiceover to test the features that I've created, but not in my daily life. So the way I use voiceover will most likely be very different from how a daily user uses it. And before we jump into the demo, let's look at the keys we'll be using. So to turn voiceover on, we need to press Command and F5 or Command and the Touch ID on your touch bar. I should probably call out straight away that voiceover is an Apple product, hence why you need the Command key to be able to start it on, to turn it on. So the next keys I'll be using is Control Option and left and right arrows. Control Option is a very popular voiceover combination and the two keys are sometimes used voiceover, called voiceover keys or VO keys. And to open the web rotor, I will be using VOU keys. And the web rotor is essentially this box that says links in the left corner. A web rotor is a voiceover element and it is a collection of different menus available to the user. Now at the bottom of the page here, we have this speech output box, which is essentially subtitles for voiceover. And to the right, the outline around Pressbox Shuttle. It looks like focus, but actually it's a virtual cursor. And the virtual cursor allows users to focus into elements that are not usually focusable. And now that we have this tool set, let's start the demo. And we'll start it on the old website on the Stellar Souvenir page. And I will switch on voiceover now. Voiceover on Safari, Stellar Souvenirs. So voiceover is on and we are on the Stellar Souvenirs page. I chose this page because I just happened to really like it. The layout here is very similar to behind the Jam page. So we have the image in the middle. We have Stellar Souvenirs written above the image and within the image, we have seven links. Well, now we know our links. Well, let's see what we can do on this page using voiceover. So I'm going to open the rotor pressing VOU. Links menu. I'm going to go through the navigation that's available to us. The menus that are available to us. Images menu. Window spots menu. Links menu. Okay, so out of the menus available to us, the links menu looks the most interesting and straight up. The amount of links here is a lot more than what we see on the page. So voiceover is arguably enhancing our experience straight away. So we've discovered some Easter eggs. And at the bottom, I see loans and haircut. Okay, I'm really curious where haircut will take us and where it's even coming from. So I'm going to go down to haircut. Link, link, link, link, haircut, HTML. Link, haircut, HTML. Okay. And I see the virtual cursor around the squiggly thing near the barber shop. So honestly, as a cider user, I would have never even considered pressing on that element. So yeah, we're definitely discovering Easter eggs here. Right. Let's see where the link will take us. Stella souvenirs, web content. Yes, you need one indeed. Stella souvenirs, web content. We're taking to an incredibly sassy page. Yes, you need one indeed. Well, thank you, website. I should probably mention again here that this website was built with very little studio oversight. I mean, honestly, to me, the experience with voiceover has added a layer of depth to the website and you do get some whimsical Easter eggs. Now, let's see how the new website compares some person control tab. Space Jam, a new legacy vertical line official site web content. And I'm on the new website. And finally, we're seeing the London page. Spoiler alert. You cannot close the pop over with voiceover. So let's pretend a friend stopped by who happened to have a mouse with them and they close the pop over for me. And because we never did the first demo on the new website, let's do the first demo here now. So we'll start on the London page and navigate anywhere else. So I see there's fun and games right in the middle of the menu bar. Let's go there. So like on the old website, I'll bring up the web router. So I'm pressing VOU links menu. Images menu, window spots menu landmarks menu. Okay, we I need the landmarks menu and I see navigation here. Let's go there. Navigation. Okay, so that we're focusing on the navigation bar was never announced. But I'll just trust that it worked. So I'm pressing tab link video list seven items video. For some reason, it decided to skip the home tab and we'll end it straight on video. And I don't know if you've heard it, but it did say video link of seven. There are more than seven links in the snap bar. So we're getting an experience the opposite experience of what we had on the old website where things that are clearly visible on the navigation on the nav bar are not showing up and we're not told about them. But at this stage, I feel like anything is nitpicking. It does have a button that doesn't do what a button is supposed to do. So let's just go to fun and games. So I'll be pressing video and the right arrow key link synopsis three link fun and games four of seven fun and games. And I'm pressing enter. And I can see that we changed the page. So we are now on fun and games. However, voiceover never announced it. And that is a bit of a problem if I was relying on voiceover to tell me where I am on the website. I would have no idea that I'm on fun and games. This the experience of using the new website does feel like death by 1000 paper cuts. There's a button that completely doesn't work but even if you have someone to navigate you to the main website. It sort of works enough, but it really doesn't work and the whole experience is incredibly frustrating. So on this exasperator note, I hand over to Zoe to actually try playing some of the games. Okay, so with voiceover out of the way. Let's look at another simulator. We'll switch over to windows where we have jobs. So here we are on the old website and we have a page open with match the monsters, which is a game. And before we dive into that, let's discuss some statistics because a lot of us developers test with voiceover. It's available on our machines. It's easy to activate and it's relatively easy to sort of navigate with it. But voiceover has about a 5% market share, whereas JAWS has over 50% market share, so it's used by a lot more people. So I think it's good that we're going to do a little test for that. Okay, so this game, match the monsters, is asking us to match one of the nerd logs, which is like the tiny monsters to the monsters, which are the giant monsters that play basketball against Sparks Bunny and Michael Jordan. So in order for us to play this game with something like JAWS, these images will need to have alt text and that alt alt text will need to have. We'll need to describe their characteristics so that we can sort of match them. So let's turn on JAWS. Similar to voiceover JAWS has a function where we can pull up a list with certain elements on the page so we could pull up a list for headings or landmarks or links, but we can also pull up a list of all the graphics. So if I want to do that, I do control insert G. List one list view match the monsters 18 of 24 to move. So JAWS now shows a list of all the images on this page. It announced how many there are. And we can navigate through this list using the arrow keys. So I just moved to the nerd block image. The alt text for it is just nerd block. So it doesn't have any of those characteristics that I just mentioned. So this won't really allow us to play this game, because we can also see that the alt text for the other images of the monsters are just their names being null, zilch, void, nada and bubkus. Again, doesn't include any of the characteristics that we would need. So let's close this menu and you JAWS for now. Because we won't be able to play this game with JAWS, not based on the audio cues that we'll get anyway. But maybe we can still play with a keyboard. And that might still be fun. And I think we can all use some fun. So I'll press the tab key. And I can see that my focus is now on null, which is the first non-star. So the nerd log that we're presented with, it looks grumpy and a bit angry. I think it's zilch, which is the orange one. So I'll press return. All right. So we get presented with a page that says I was right. And there is a transition give that goes from the nerd log to the monster. So that's pretty cool. There's also a link that says next. So we can try the next one. So I'll never get to that with the tab key. And represented with our next nerd lock, which this one is tiny. It looks very sad. So we think key turns into, I'm going to go with orange or with the red one, which I believe is called nada. So let's try that. Let's return. Oh, I was wrong. So we're presented with a page that says that no, this nerd lock does not match to the monster. There is a button to try again. So we could do that. But I had some fun. Let's let's move to the new website. See how that compares. So I'll do control tab. And here we are on the fun and games page on the new website. This is where Jenny left us at the end of their demo. So let's turn on jobs again. A lot of assistive technology comes with certain key shortcuts that you can use to navigate the page to easily get to certain parts. So in JAWS, for example, I can press the Q key to go to the main region or the main landmark. So I'll press Q. There is no main region on this page. Of course, developers need to implement it for us to be able to do that, which here they didn't do. But no worries. There are other things that we can try. We can press the H key to go to the next heading. Fun and games heading level two. Okay, so there's a heading on this page. It is fun and games, which is the title. So that's perfect. But it's a heading level two. Since it's the title for this page, I would expect it to be a heading level one. But at this point, I'll take that it has a heading anyway. And so we'll use the tab key to sort of see what things that are on this page. Pinball, that sounds fun. Movie game, our lens, link graphic. Our lens. Movie game activity book link graphic. And activity book. Oh, I think we'll go for pinball. That sounds like something we should be able to do with a keyboard anyway. Maybe even with JAWS. I'll press return to go to the game. Enter. Okay, so we're taking to a new to a new page. This page has the game on it, basically the title page for it, which has some characters at the top, I see a play button, and then some links at the bottom to like various pages. So we'll try the same tactics that we did on the last page. We'll press the Q key to go to the main region. There is no main region on this page. There isn't on this page either. So let's try H for heading them. There are no headings on this page. There's no heading either. Okay, but I did see a play button. So let's use B to go to the button. There are no buttons on this page. Okay, so it's not a real button then. But maybe we can find if there are any focusables at all by pressing the tab key. Privacy policy link. Wow. Well, I'll use my mouse to quickly mute that. That's very annoying. So for some reason, music started playing as soon as I pressed the tab key. I did hear Jaws announced the privacy policy, which is a link in the footer that tells me that on this page, there are no focusables before the footer. So I won't be able to play this game with Jaws or with a keyboard. I can read the privacy policy. I don't know how much fun that will be, but those are my options on the new website. Okay, let's, let's get back to our slides. So, here we have bucks bunny asking the nerve locks. What's up, Doug. Do you remember the three questions that we started with at the beginning. The first one was does corporations promising to be accessible translate into accessible websites. And no, no, it does not. And bucks bunny here seems to agree with us. If accessibility isn't made a requirement, then the end result won't be accessible. Regardless of how much corporations pledge to be. If corporations don't care more than we should, at no point did the original team ask the suits if they could make their fancy website accessible. They just did it. As Michael Jordan here says, you guys had the special stuff inside of you all along. You don't have to ask for permission to make something accessible. It's part of your job. Accessibility isn't a feature. It's not something extra. It's been a core component of the web and it always has been ever since its invention. So if you're not sure if what you made is accessible, a good way to test it is to start with things that we demoed in this talk. For example, you could use a keyboard to see if you can get to all of the controls. Can you see the focus outline. Can you also activate those controls with the keyboard. The second question we asked was have two decades worth of experience and tooling made the web more accessible. Well, yes and no. For users, new tools such as voiceover and draws definitely help to make the web more accessible. For developers, the amount of new tools we need to learn does sometimes make us jacks of old trades and masters of none. On one hand, it is a hard line to walk. We do need to learn more tools. They said all of us like playing with shiny new toys when working on our weekend projects. That said, we do have to take time to master tools that are definitely not going to go anywhere. With general development that can be getting to know the accessibility tab in DevTools and using it to check an element semantics. And of course, it definitely means learning HTML. As we have seen a website created 25 years ago using HTML and inline styling where developer knew how to use proper tags works with a keyboard to this day. And on the other hand, we have a brand new website where the developer did not bother with proper tags and just turned everything into a div. And that website does not work with a keyboard. So learn about landmarks such as main and use correct headings to subdivide your document. And most importantly use proper tags. If something is a table, use the table tag, not a div. Our last question was, is the new Space Jam movie better than the old one? And no, it's not. When Jenny and I watched the movie in preparation for this talk, our feeling throughout was basically the emotion that Bugs Bunny is sharing here. Just scared and in doubt of what's going on. Sadly, the new website is a much better either. But maybe we can fix that. So remember the fake button that we looked at earlier. Maybe we can actually fix it now. Let's inspect our button that we changed. And so what we did earlier was we added a role attribute, we added an aria label and we added a tab index. We also removed the property that was removing the focus outline. But we don't need to do all of these things to make something accessible. So for example, we don't need to use the role button. We also don't need to use tab index. We might want to use aria label to provide an accessible name. We could also put it inside to have as contents of the content can provide the name, but using our label is fine in this situation. But as we noticed though, this button didn't work, even though we added the semantics and the tab index, which was because of the event listeners. So how could we work around that. What we could try is to use, as Kenny mentioned, proper HTML tags. So instead of using a div to create a button. Maybe we can use an element that was made for it. If only such a thing existed. It does. We have the button tag or the button element. So let's change this div into a button. We still have our aria label for the name. So we should be able to do this demo again. So on the website, I'll press the tab. I see the focus outline on the button. So hopefully it works now. I'll press return and see what happens. So without changing or without adding any event listeners, just by simply changing the div to a button, we made this work. Who would have known that changing a different to a button would make the web more accessible. With that, I just want to say that's all folks. Thank you very much.