Transcript
Okay, so let's do some demo time. I'm gonna go and test a website. Really don't wanna trash on this website 'cause it is a international treasure, but we're gonna talk about the user impact of a website that has accessibility problems.
So we'll keep in mind things like, what's at stake for people who can't use something? Who are we excluding really? People with disabilities who can't interact with content. What's at stake here? And then, how should these issues be addressed through product, through design, and through development? So, what can we fix in development? What needs to go back to the drawing board and really be rethought from a product perspective?
So I am going to get out of my slides and go over to my browser. The site is KEXP, which I love. I love KEXP. It's a Seattle radio station. And I definitely do not mean to just isolate them and pick them out 'cause a lot of the things we'll see here are not unique to KEXP. I have given them accessibility feedback in the past. They haven't done anything about it. And that's so common. So, for instructional purposes, we are going to navigate KEXP right now to see what the user impact would be. So anyone who can hear music, listen to sounds, even hear vibrations would benefit from a music website and being able to play the radio on demand. Maybe you're not in Seattle, like I'm in Bellingham, so I listen to KEXP through the website.
So, if I were trying to navigate this with my keyboard, I could start tabbing through here. And, okay, I've got some visible focus outlines. If I keep tabbing, I can get through some of this content. There's definitely some spots in here where there are, like, right now, I'm looking at the bottom of my browser, and there's a status bar, but I don't know where my focus is. So there's some keyboard access issues here. I'm gonna go back a little bit and see. What was that? I think, if I keep going back, I can show you what those links were. So there is a menu. I can use my keyboard. There's a little menu that slides out. And so here's where those hidden items were. There was a menu that had not been properly closed, a slide-out menu, and so, when it's not visible, those items are still reachable, which is not a super hard thing to fix, but, for a keyboard user, the experience is not ideal. And, right now, I have this menu open 'cause I navigated with my keyboard, which I'm glad it opened. That's awesome. But, if I hit the Escape key or try to get out, there's really no way for me to do that. And this was inserted into the DOM, or the document object model, after, like, this comes much later, and so it's not the next tab stop to get into the menu. I can get there. So I got there. That's cool. There's a lot of these menus that you can't reach at all. So that's cool.
It's just a little bit of a cumbersome experience. And now, if I close that, I'm in the menu items still, even though I've closed it. So some keyboard accessibility issues. Like, if I can see, I can hear, but I don't have great mobility, and I need to use the keyboard, already I'm having some challenges having kind of a one-to-one experience with what a mouse user can do. Now, if I can't see the screen at all, but I still wanna listen to music, because, you know, who wouldn't? I'm gonna go and inspect this play button 'cause it's a big, bright, white button with a circle and an arrow, and it makes me wanna click it, as a sighted mouse user. And I could reach it with the keyboard because it is an anchor with an href attribute on it. I think a button element would make sense since this doesn't navigate anywhere, but that's kind of a development detail really. I could reach it. I could make it play with the keyboard, so that's good.
But, if I'm a screen reader user, and, in the development tools, I can go over here to the little accessibility inspector and see that this link has no text on it. So it has an image in it or SVG that is being interpreted as an image. It's a graphic. The play/pause. So, if I'm using a screen reader, and I can't identify what's on the screen, I either just don't, I take a guess or I use another tool, like Be My Eyes or some sort of image recognition technology to try and identify what this button is, but already I can't hit the play button with the screen reader alone, and it's kind of a pain. So I think what's at stake here is that people who want to listen to music from KEXP, the web experience excludes them in large and small ways.
And so I think, for sites like this, sometimes, folks, this is where the, I don't know, the importance sort of gets muddied, where they're like, "Ah, it's a music website," or, "Ah, they're a nonprofit." Sort of like muddies down this experience problem of, well, but what if someone wants to listen to music, like shouldn't it be an equal opportunity to do that? And so kind of really what's at stake here. This happens on websites all over. Like I said, I don't wanna totally trash on KEXP 'cause it's not unique to them, and I know they have limited resources. But, even if we give them feedback, they don't act on it necessarily, so this happens, and this is how accessibility persists across the web. And I bet we all have examples that we can point to that do things like this. And so, I mean, the good news is that some of these things are easy to fix. My hope was that, when I wrote to them about color contrast, which I can show you as well.
So I'm gonna go to an article, like this one about the band Spoon. There's some color contrast issues here. So the right column has all of these links that have a light gray on white, and, when I hover, they have an even lighter yellowish orange. The text in the body of the article. This is what I wrote to KEXP about. And they answered that they would pass it on. And my hope with how I worded it was like, and, by the way, there's some other problems here that would be really important for your audience to fix. And it's been six months at least. And I've given feedback to other sites, much more money-making endeavors. I've given lots of accessibility feedback over the years, and sometimes it gets addressed, sometimes it doesn't, and there's various reasons. But, kind of at the end of the day, the user experience is still not working for a lot of people. And so it's a real shame. And I think anytime that we're in a position to fix accessibility, we have to think about what's at stake if we don't.
And so these systems, kind of ableism and discrimination gets upheld. A lot of times, it sort of gets excused away because they're a national treasure, or they're a nonprofit, or they've limited resources. Just the excuses come and go, and it gets, yeah, it's kind of frustrating. So we have to do what we can to feel like we're boiling the ocean and trying to bring people along and make them feel encouraged and not criticized, even though this is worthy of criticism. But we want to encourage people to come with us on this journey to make things more accessible, to make our national treasures of radio websites more accessible so that we can get the music to more people. That's really the goal, right? So how we write that feedback, how we communicate what's at stake, we always wanna try and be diplomatic and strategic about how we get people on board. And we want to influence people to do the right thing. And even if we have to follow up and go, "Hey, what's going on with this color contrast thing? "And, by the way, your play button needs a label on it." You know, I think that's probably my next task after this workshop is to go try. Go try and shake the tree a little bit and see what we can do because I love KEXP, and I want more people to be able to listen to it. So, yeah, this one example that, how many other websites are there out there that have very similar problems? Oh, they're playing Fleetwood Mac "Landslide" right now. We're not gonna play it, but that's a good song.