Imagine you’re browsing a web page using only a keyboard. A loud and looping video pops up that’s impossible to close without a mouse. Now you’re trapped there. Forever. This horror story is commonly experienced on websites that haven’t been designed with accessibility in mind. This episode continues our discussion on what you should do to improve your accessibility. After talking about using tools like voice-over commands to understand what’s needed from the user’s perspective, we touch on the challenge of learning the right commands to navigate the web with your eyes closed. We then tackle the rest of UC Berkeley’s list on making accessible websites, highlighting key considerations including color choice, how you should design forms, not using tables in place of styling, ensuring that everything can be accessed through a keyboard, and making dynamic content accessible. We also chat about ARIA roles and landmarks and why creating accessible websites leads to a better experience for able-bodied users. Tune in for more insights on making great and accessible websites. Not only will it expand your user-base but it’ll help ensure that no one ends up within the dreaded carousel of modals.
Key Points From This Episode:
Transcript for Episode 172. Accessibility 2
[INTRODUCTION]
[0:00:01.9] MN: Hello and welcome to The Rabbit Hole, the definitive developer’s podcast. Live from the boogie down Bronx. I’m your host, Michael Nunez. Our co-host today.
[0:00:09.3] DA: Dave Anderson.
[0:00:10.9] MN: Today, we’re talking about accessibility part two, we’re continuing the conversation ladies and gentlemen.
[0:00:17.9] DA: Yeah, we’ve got some new entrance to the Hall of Shame.
[0:00:22.7] MN: That is for sure. I think where we left out of the conversation with, like, going through a top 10 list and we got up to five, just like having a little bit of conversation with William, you know, had me thinking like, “Hey, maybe I should turn on these accessibility tools and figure out how people who rely on these tools actually experience using a computer,” which was really cool.
[0:00:51.2] DA: Yeah, I’ve been trying that myself as well and I think the first entry to the Hall of Shame is myself for the page that I just made. Even though I knew I was trying to make it accessible. I had those tips in the back of my mind but there’s some things that are pretty hard.
[0:01:10.4] MN: Yeah, I imagine. Just things that you may have overlooked, right? You didn’t realize that that was a thing that could be inaccessible to an individual.
[0:01:19.4] DA: Right, yeah, like they’re kind of like these little tricks you can do where it’s like CSS pseudo-elements and background images. And like, I don’t know, all kinds of CSS witchcraft that is inherently not accessible. So I’m hoping that some of the things that we talk about today will help me learn how to reform my ways and make it more accessible.
[0:01:50.0] MN: Yeah, I mean, I definitely have been — for any of the Mac users out there, command + F5 will turn on voice-over so I learned that command pretty well.
[0:02:02.0] DA: Right, prepare yourself, he’s going to pop in there.
[0:02:05.4] MN: Yeah, function + command + F5, it just starts and then you go head-first into browsing the unit using voice-over. And I think like what William said before, he’s like, “Yeah, you turn that feature on and you close your eyes and if you can browse through a website then you know that your website is accessible.” And man, oh man, the things I hear. The tool is very, you know, complex in how you can navigate and stuff like that. I was still trying to get used to what that looks like, using the voice-over, closing my eyes, and wondering — “Where am I on the page?” Even with pages that I’m familiar with was really interesting to browse in that regard.
[0:02:43.2] DA: Seems kind of like a Jedi Master kind of meditation training, you’re like, “Okay, just going to close my eyes and be one with the web, let me feel the web design inside me.”
[0:02:58.0] MN: Yeah, just let it talk to you and then you know, you tab your way through and hopefully, you do tab your way through correctly. And knowing that, like, especially if you designed the website, you want to make sure your tabs are in the correct order so you can. — And I didn’t run into too much trouble in the voice-over, the trouble that I have was me learning the tool which I thought was difficult. Shout outs to people who rely on that tool, to browse the internet.
[0:03:25.8] DA: There’s a lot of, like, keyboard shortcuts and things like that.
[0:03:29.0] MN: Yeah, it’s like to hop out of a table, you have to do like command + control + shift up, or something like that and like, there’s a lot of that that you need to do in order to navigate through, not just tab but control + command + shift are your friends. And then you go up and down, there’s command + K. The tutorial is pretty interesting but I guess, like your usual developer, I didn’t read the manual, I just try to jump in and then I failed miserably.
[0:03:54.7] DA: Cool, yeah. You should definitely share that tutorial over my way. I feel like I could use a good cheat sheet of like what the long and short of the different keyboard shortcuts are.
[0:04:07.7] MN: Yeah, it’s 25 pages long. I mean, it’s 25 sections long. Which is why I was up to like number seven and I was like, “Nope, I’ll do the other later,” and have been failing since — I think I’m going to be really patient and give the good old Mac — the Mac voice-over app a chance with all 25 pages.
[0:04:26.5] DA: You know what will be fun? You should go through all 25 pages of the accessibility tutorial using the voice-over accessibility feature.
[0:04:35.3] MN: My gosh. Yeah, that’s going to be a challenge, that will be a challenge for sure. The other accessibility tool that I’ve seen in the past that I’ve started using and was browsing the internet is, they have the ability to change color on your screen. So I’m going to butcher these words and I apologize for people who suffer from these different eye, color-related deficiencies. But I’ve been looking at, like, enabling the color features for a red/green filter. Which is for people who may have the protanopia deficiency where individuals cannot see red, just to see what it’s like to browse through a website where you cannot see the color red.
And there are some very interesting websites where you see things and it’s like that’s cool, and then there are others where it’s just really difficult to see anything.
[0:05:26.1] DA: Such a popular color for calling your attention, right? There’s always like, I think there’s, like, studies about conversion rates and the color red but you’re kind of like leaving some people behind from your conversion, I guess.
[0:05:42.8] MN: Yeah, because you can't — because people may not be able to see that color. And you have to kind of use this filter to see it and yeah, I’ve just been using the color changer and trying to see what websites kind of violate this. Or what happens when I change from one type of color deficiency to another. There is the blue/yellow filter, individuals who cannot see or decipher the color blue. Tritanopia — and that one is really interesting because the blue gets really intense when you change it to that. So I’ve just been trying to swap colors to see the experience of a website. So just be mindful of that.
[0:06:22.2] DA: Have you found any websites that are less than stellar with the color-blind filters?
[0:06:29.0] MN: Yes, you know what? I’m just going to say the website. I mentioned the website before in a time, where the buttons were too little and caused issues for me whenever I try to browse while holding Gio. And they definitely violate the color filter for the protanopia individuals out there, it’s a video game I play on my phone called AFK arena, this is not a promotion, do not download it because I said it, you should check it out, it’s fun.
But they have a tier list, like your any other game that you play, you want to figure out what characters are the best and —
[0:06:59.7] DA: You got to get to-S tier, right?
[0:07:00.7] MN: Yeah, you got to get that S-tier, you got to get S-plus-tier characters, make sure you get them all applied.
[0:07:04.9] DA: S-plus, there’s a tier about S?
[0:07:07.8] MN: There is S-plus in this game. But, do not go to that website if you suffer from protanopia because you know, all the S-tier characters are in red, like the strongest red you could possibly think of. And it was just very uncomfortable to browse that website. So you’re violating making your icon very small for people to click on their mobile phones and this red/green filter where you cannot really see or decipher the different colors of individuals who are S, S-plus, S-minus, those were all sorts of stuff.
[0:07:41.0] DA: Right, yeah. We pieced this earlier and it’s kind of silly, these like — the F-tier people are purple but then with this filter, they’re basically looking the same.
[0:07:53.6] MN: Yeah. It’s crazy, I don’t know what’s going on.
[0:07:58.1] DA: I mean, the label is still there so you can look at that but you know, the color choices is not quite good.
[0:08:06.2] MN: Yeah, it’s not appealing to the eye. While you can still read the letters, the way you usually when you’re able to see the color, that gives you instant feedback but this does not at all. This is just a whole lot of pain everywhere. But yeah, I mean, I think I could be using it wrong because I have the intensity on to the max. But I’m sure that setting is there for a reason and I think it’s because people may need to use that.
[0:08:34.7] DA: Yeah, there are like some really good websites that you can use to pick colors that will respect these different conditions to like — when I was working on more, like, graphic design for charts and graphs, like the tier-list, we checked out a couple of websites, one of them was Color Brewer.
That one you can actually pick what kind of scale you're looking for, like, if it’s diverging or if it’s — there’s different classes of qualitative data. And then you can also pick if you want to filter it by certain disabilities with vision. There’s a pretty good Flowing Data article with some tools for picking chart colors that I think will be good to link in the show notes.
[0:09:35.4] MN: Yeah, that sounds awesome. Yeah, we can start with number six, I think this is great, we stopped at five before, you know, for the sake of the podcast episode. We can start with five which we were just talking about, you know, use color with care. The idea that you know, the most common form of color deficiency is the red/green color deficiency, affects 8% of the population.
We discuss how AFKarena.net/tierlist definitely violates this particular rule and —
[0:10:03.9] DA: Front and center. Hall of shame.
[0:10:07.2] MN: Yeah, we should choose our color with care as it is in number five. Number six is, “Design your form for accessibility.” I think I’ve had to create a form before in life and one of the things that, you know, you should be really mindful of is the idea of like, being able to tab through the form where it makes sense, right? I don’t know if this ever has happened to you Dave but like, you — I’ve seen forms where you like tab through and it will go, let’s say if it’s like first name-middle-initial-last name, I’ve seen it where it tabs through first name, jumps to last name then middle, which is really weird. And I imagine that could be really focusing on someone who wants to fill out the form with the middle initial if they need it and have not skipped over.
I imagine that tabbing over is very important in terms of keyboard control, if you will.
[0:11:00.1] DA: Yeah, that’s true. If you have a more accessible form, you're also hopefully using the HTML. file label tag which will, like, tell it what the form and the input or the element actually is. You can use area properties if you don’t have the label or you don’t want to use it or you can’t use it. But yeah, labels are really important if you just have a box and it doesn’t say full name, then people maybe will just be staring at be like, “Uh-oh.”
[0:11:35.5] MN: “Uh-oh, what’s this.”
[0:11:36.5] DA: Which of these text elements around it is telling me what to put in here?
[0:11:40.2] MN: Yeah, or like, you know, if someone can’t see and they tab over it and the voice-over doesn’t know what it is, it’s not going to tell the user what it is for them to fill out in the first place.
[0:11:51.2] DA: Good luck.
[0:11:53.1] MN: You gotta watch out, voice-over for the win to let our users know what boxes or what form you’re — what part of their form you’re filling up?
[0:12:04.1] DA: I think there’s also a lot of really rich input fields that are possible that if you, like, set them up properly, then even for people who are not having any disabilities, you will boost their efficiency on your website. Like, if you have a series of address fields, if you have Chrome set up to save your address then boom, you can auto fill that form in. And even if you’re a regularly-abled person, who is just holding Gio.
[0:12:44.1] MN: Yup, that’s me.
[0:12:45.6] DA: You fill that form in one tap.
[0:12:48.5] MN: Yeah, one tap. Bam. That’s the idea. If I can do it in one hand, easy-peasy, that’s the way to go.
[0:12:58.4] DA: Yeah, I think it’s also imitating, like, errors and validations and things like that in a reasonable way.
[0:13:06.9] MN: Yeah. Number seven, I didn’t realize that, you know, one could be violating web accessibility. But number seven says, use tables for tabular data, not for layout. You know, I don’t think I’ve ever designed a — probably when I was like 14, where I was using tables as a form of styling something.
[0:13:29.8] DA: It’s pretty old school.
[0:13:31.4] MN: Pretty old school. This is like the early 2000s, I guess. When I was trying to figure out what to do with web design but yeah. Don’t use, use tables for things that belong in tables not for styling your website?
[0:13:45.7] DA: Yeah, sometimes, I have had one particularly challenging instance where I was finding it difficult to get all of these nested elements to line up properly. And tables do that pretty well. So U may have used the table for layout.
[0:14:07.1] MN: Yeah, I know I mean and that is a total again, tables are great for doing that. For like having some form of structure that the CSS may not be able to achieve for you or if you — you’re CSS-fu isn’t very strong. Then you could do it. But you guys should have seen my hand movements, that fu is strong. But if you don’t have it, tables can be the easy answer but this can really mess up a user who may need to — who accesses the website differently than, as we normally would do it.
[0:14:42.9] DA: Right and it is kind of amazing like the power that a table actually has for someone who is using one of these accessibility tools to view a webpage because I didn’t know this until recently but the screen here where actually will say what the column heading is as you are going through the tables. So that gives you the kind of context that you would get from a sticky header on a table as you’re moving through it, which is pretty awesome.
Sometimes, you know if you have a lot of data it can be a little confusing even visually but having that extra context seemed like it would be pretty cool. Good super power.
[0:15:29.8] MN: Yeah, I think number A, we were alluding to throughout the discussion, which is to ensure that all content can be accessed with the keyboard alone in a logical way. And I think the idea of tabbing through a website can be accessible that way. I think William mentioned before and yourself using what’s the tool, Vimium?
[0:15:53.8] DA: Oh yeah.
[0:15:54.3] MN: I think it is the idea like you know the website is really accessible depending on how you can access things using the Vimium tool. I don’t really use Vimium. I am not really good at Vim. But, don’t hate me, but people use Vimium and are pros at it and I can see how they can access the website using a keyboard — is probably really nifty. But for people who may have this disability with motor skills, right? Like not being able to hold the mouse straight.
Or be able to click on a link accurately, you know, Vimium is probably one of those really cool tools that allow you to go to a link to a website without much struggle without a mouse. And I mean the plugin, the Vimium plugin, I’m sure, is a plugin that is an overlay to a different disability tool for individuals to visit a website without using a mouse. And just make sure that your websites are easily accessible for individuals who may not use mouses at the end of the day.
[0:16:52.3] DA: Cool, yeah. The next one on this top 10, getting really close to the end of the top 10 web accessibility from Berkeley, “Use area roles and landmarks but only when necessary.”
[0:17:09.7] MN: I think a lot of the issue, and correct me if I am wrong, Dave but like the HTML 5 covers a lot of the enriching the HTML tags now more than ever. So you may not need to use Aria tags as much, is that correct?
[0:17:25.2] DA: Yeah, I love this quote from the remember that the first rule of Aria is don’t use Aria.
[0:17:34.6] MN: Yeah.
[0:17:35.2] DA: So it is like if you have to put these tags on things then maybe there is something better that you could have done. I have never done this before but, like, you can actually give an ARiA role to tell the browser and the screen reader what that mysterious div is that has a click handler attached to it. It’s like — “I guess it’s a button.” So yeah, if you have a mysterious div and you need to tell the screen reader that it is playing the role of a button and that it can be clicked or that it is a nav.
And that this is used for getting around the page or the website as a whole but you can also just use a button. It’s HTML tag, why not?
[0:18:28.2] MN: Yeah, just use the HTML button, that’s what it’s there for.
[0:18:32.3] DA: Right or, you know, use a label instead of ARIA label. Or what have you. But you know it’s good to have escape hatches for when you have to do something really heinous, like, my background damage or something. I think I have to go back and add my ARIA label.
[0:18:53.9] MN: Oh yeah. But yeah I guess what you mentioned in rule number nine is, “The first rule of ARIA is don’t use ARIA.” I think it is a great reminder of you are stepping in. You could potentially do it better if you are already using an ARIA tag.
And number 10 is, make dynamic content accessible. I imagine the idea, like, you know websites are very flashy nowadays. You visit YouTube and your player automatically plays a video or like hey, there are a lot of modals out there on the internet. You got to be careful.
[0:19:32.6] DA: I love a model. I just need a modal that has another modal inside of it. That’s all I need. It will bring me so much joy.
[0:19:42.2] MN: Oh man, modals are great. Just be mindful of things that automatically play, things that automatically pull the user down to a particular part of the page. Because you know, an individual may not know that these actions are happening or may not have access to the screen as others would to stop a video from automatically playing, you know?
[0:20:03.3] DA: Yeah but there was an interesting note here that says like keyboard only users may be trapped in page overlays. It’s like, “Oh my god imagine getting trapped in a modal. You’re just stuck there for all eternity.”
[0:20:16.6] MN: Forever. There could be people out there right now who are trapped in a model.
[0:20:21.1] DA: Never gotten out of a modal. This is really serious guys, don’t do that.
[0:20:26.5] MN: Don’t do that to your users please, get them out of the modal as early as possible.
[0:20:32.3] DA: Yeah, so, I mean, I guess similar to one of the earlier comments, like, if you’ve got to use a modal then make sure that you are doing it right. And if you don’t know how to do it right then lean on somebody who has written a library of that has already passed the test of being accessible and having the proper keyboard navigation, things that people expect in those situations.
[0:20:58.2] MN: Yeah, I think choosing the right framework already has that covered for you, saves you a lot of the time. So definitely be mindful if you want to put a modal on a modal and ensure that —
[0:21:10.9] DA: Similar great there, put the carousel inside my modal. With a carousel of modals.
[0:21:19.4] MN: Oh man that sounds like something else. I don’t know if anyone is currently trapped in one of those. Please tweet us @radiofreerabbit if you’re currently trapped in a modal.
[0:21:31.0] DA: It’s a new horror movie, carousel of modals.
[0:21:35.7] MN: We’ll do our best.
[0:21:36.8] DA: Yeah, like the other thing with dynamic content, there are a lot of cool HTML 5 tags for video and audio now that have like accessibility baked into it. So that’s pretty cool. So you can lean on that. And something I learned this week actually is that there’s actually a track element that can be a child of a video or audio. And you just put that in there and then you can put closed captions or subtitles to some foreign movie. Or just descriptions or chapters. It’s pretty neat.
[0:22:16.5] MN: That’s awesome, yeah.
[0:22:18.4] DA: A lot of features.
[0:22:19.2] MN: Especially if you are able to read it or the screen reader is able to read it for the user as, like, on top of the video. Maybe you can go back to them and listen to it that makes that different. The fact that HTML is slowly adding or having these tags available for people who lean on these accessibility tools is pretty great. I am learning a lot about this, it is pretty dope stuff.
[0:22:44.5] DA: Yeah like there’s more to the world besides divs, that’s what I learned.
[0:22:50.3] MN: Yeah, you can’t use a div for everything. Although you can but you shouldn’t.
[0:22:54.7] DA: I, sometime, it feels wrong. It is wrong but like —
[0:22:59.6] MN: Yeah like every day we are learning something new about accessibility, what to look out for. I think this conversation has been great for me and there’s also a blog that we found on the internet with some amazing images and ‘dos and don'ts of building a website.’ Or the internet experience for individuals who rely on these tools. And it’s by the individuals over at the Home Office Digital seems to be like a government related website because they have a dot gov, dot UK URL associated to the blog that they found but there is a ton of information and content that’s there in case you need a cheat sheet of things that you should do and not do.
[0:23:43.5] DA: Oh yeah, this is pretty great. I love the graphic design on these little mini-posters. It makes it seem, like, not as intimidating and kind of fun and I would gladly add this to the tattoos along with the episode list.
[0:24:00.8] MN: Bro, you must be running out of space. You must be running out of space but I mean if the images fit then by all means. I think like the very —
[0:24:11.3] DA: — It’s my curfew, my curfew’s tattoos.
[0:24:13.5] MN: I think even the first line of it, they have like there’s a picture, right? It’s like designing for users who are deaf or hard of hearing and it’s like, “Do: write in plain English” and it says do this very big. And it’s like, “Don’t: Use complicated words or figures of speech” and it is like an umbrella and a couple dogs and it’s like, “Oh raining cats and dogs? Okay but I get that but no one might not get that.”
[0:24:36.3] DA: I did not get that. That was not accessible for me.
[0:24:39.3] MN: No, I just got it as I was talking about it out loud. But the idea, just like that alone makes as you mentioned before, it’s like the images come off as, like, not intimidating. And it is here are the things you should do and things that you shouldn’t do and like kind of makes sense like, “Okay, be explicit about the things you’re saying.” Don’t use images that only off of a phrase of a saying that you know that you heard as a child for example but it is pretty dope. I think people will definitely benefit from the content from that blog. So we would definitely put that on the show notes.
[0:25:11.4] DA: Awesome, yeah and we will link to all of the other lists that we have referred to. The Berkeley top 10 list, chart colors, all of that good stuff. Maybe we’ll link to the people who did a top job with the color visibility too but yeah.
[0:25:29.9] MN: Yeah, hopefully more websites will be more accessible for the individuals who need it. I am definitely will be keeping that in mind the next time I am doing some front-end feature work knowing that someone may come across with a voice-over app or having to change the color filter and then rag me for the colors that I have chosen. So I am going to be very, very hard on myself when it comes to those things and many others, as mentioned before. So we’d better see more accessible websites out there. That’s important. Let’s do it, we can make it happen people.
[END OF INTERVIEW]
[0:26:04.0] MN: Follow us now on Twitter @radiofreerabbit so we can keep the conversation going. Like what you hear? Give us a five star review and help developers like you find their way into The Rabbit Hole and never miss an episode, subscribe now however you listen to your favorite podcast. On behalf of our producer extraordinaire, William Jeffries and my amazing co-host, Dave Anderson and me, your host, Michael Nunez, thanks for listening to The Rabbit Hole.
[END]
Links and Resources:
‘Top 10 Tips for Making Your Website Accessible’
