We’ve all been there. You’re trying to close an ad on your browser, but the button is too small and you’ve accidentally opened it instead. Poor web design can easily frustrate even the most agile-fingered, able-bodied techies. Imagine what it’s like for users with challenges that can range from visual impairment to limited motor function. On today’s episode, we explore how and why you should build accessible websites. We start by talking about alt text and how the show’s hosts have, to their shame, often neglected to create informative alt text. We then touch on the work that W3C is doing to establish guidelines on making accessible websites. Opening up the definition of impairment, producer, William Jeffries, shares how someone holding a baby in a crowded train is temporarily impaired at that moment and that websites need to account for a spectrum of accessibility. After talking about screen readers, we dive into five of UC Berkeley’s top 10 ways that you can make your website more accessible. In our conversation, we highlight that making accessible websites is about working smarter, not harder. Another important point mentioned is that building for accessibility results in good design that helps all of your users. Tune in to hear more about how you can create accessible websites.
Key Points From This Episode:
Transcript for Episode 171. Accessibility
[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.1] MN: And our producer —
[0:00:11.3] WJ: William Jeffries.
[0:00:14.3] MN: Today, we’ll be talking about accessibility with technology and websites and engineering and development. Just accessibility all around, this is honestly a field that I am not fully familiar with. I know that they’re saying things that one would need to do to make sure that their website is accessible but I’m pretty sure I’ve slipped through the cracks in a lot of problems when building these websites.
[0:00:40.7] DA: I’m definitely curious to learn more about it. From what I understand, it’s not just alt text, but maybe that’s a good start for some cases.
[0:00:51.3] WJ: I have done a fair amount of accessibility work so I can vouch that there is more than the network text.
[0:00:58.5] MN: There’s more than alt text? I’ve been messing up bro. I am so sorry, anyone who is listening, who had to deal with the accessibility tools, visiting websites that I’ve delivered or created, my apologies.
[0:01:13.1] DA: Yeah, I’ve recently started, like, thinking about it a little bit more, being exposed to people who are, like, working on it, trying to make things better. And I’ve realized how many sins I’ve made in the past. Where, like, my linter tells me I need an alt text on that SVG. or that image and, I’m like, “Alt text = it’s a picture.”
Because the linter doesn’t tell you, like, why or like, what’s a meaningful text.
[0:01:52.3] MN: My god, imagine someone who is unable to see, it’s a — “That’s informative, yes, that is a picture.”
[0:01:57.8] DA: Worse, it’s like, it’s just a whole page filled with just, “This is a picture.”
[0:02:05.9] MN: I imagine that the — there may have been some legal requirements that now websites will have to follow and I, William had mentioned one earlier today, which started the conversation, which was the WCAG, is that correct William?
[0:02:23.6] WJ: Yeah, WCAG, put out by the W3C. That governing body for the internet. I think it stands for the ‘Web Committee Accessibility Guidelines,’ or something like that. But anyway, they did — I think they’re coming out with like a 2.1, they’re on 2.0, is the main one. The main version of the accessibility guidelines that most people are trying to comply with. And basically, it’s just like, some formal guidelines for how to apply all of the different laws that affect web accessibility. In terms of actual rubber meets the road engineering tactics.
They do things like, say, “Okay, this is an acceptable color contrast ratio,” or “This is an acceptable navigation strategy for your website.” Because, the American Disabilities Act doesn’t say anything about websites or how to build them properly. It just says that stuff has to be accessible. And then there have been a number of legal interpretations of these laws as they apply to websites. There are more coming in all the time.
[0:03:41.6] DA: Right, the extra legal requirements are fairly broad but then, it’s up to organizations to develop practices that will help you meet the requirements for people of many different categories of disability.
[0:04:00.2] WJ: Yeah, there are a bunch of different kinds of disabilities, right? You have like visual impairments, you have auditory impairments, you have the motor function impairments. Some of these impairments are temporary and some of them are permanent. One example that I really like is if you are holding a baby on a crowded train and you are using a website on your phone, you are temporarily impaired.
How easy is your website to use for somebody who has that particular, temporary impairment?
[0:04:32.7] MA: That’s me all the time. I’m always carrying Gio, all the time. I’ve never thought about that.
[0:04:43.6] DA: Okay, so what websites are not meeting the needs?
[0:04:47.2] MN: I’ll have to think but it’s like, when the text is too small, like for example, if there’s like a small plus, here’s one. There’s a small plus that opens up like an accordion to the bottom of it, but right under the plus is a photo that takes you to a different link. No, I wanted to open the accordion, I didn’t want to go to the site.
[0:05:09.9] DA: I’m looking at this, like, cheat sheet of accessibility tips that somebody shared earlier today. And that’s like, number one on designing for users with physical or motor disabilities. Do not have a small click box, you got to make a large click box for your thing. If you have a little plus, it can’t just be like the little tiny plus, it has to be like, the area around it, so that way, you can fat-finger it while you're holding Gio.
[0:05:40.1] MN: Yeah, no, I always fat-finger the wrong link and this website if it’s all the time. I want to blow them up though because I really like visiting it but it’s like yeah, it’s pretty bad.
[0:05:49.5] DA: I feel like somethings are like intentionally inaccessible too, particularly with ads. Ads are kind of like a dubious space to begin with on the web but for me, I feel the pain of a user who may have some impairment when I’m trying to close the ad. I’m trying to click the little X button on it and it’s just like, taking me to the page and I just click on this ad, like, five times, and I don’t know why you’d even want that because if — I guess the ad provider, you want that because you’re getting more clicks and you’re getting paid but then, the person who is paying for the ad has to pay for that.
[0:06:28.6] MN: Yeah.
[0:06:29.7] WJ: Dark patterns.
[0:06:31.5] MN: Dark patterns.
[0:06:34.2] DA: There’s like a whole list of things that you can do if you're trying to build like a hall of shame website for the accessibility.
[0:06:42.1] WJ: But this is an example of how making your website accessible, makes it a better user experience for users who don’t have any impairments as well.
[0:06:53.1] DA: That’s true. It’s just being the general good guy.
[0:06:57.2] MN: I mean, even that example you mentioned with the plus, that is clearly something that’s like — I didn’t even consider that being, affecting people with disability, more so than like alt text, which is like creates like mind boggling that I didn’t even associate the two, right? Like maybe if I’m holding Gio and that happens to me, imagine someone else who you know, who can’t control their hand when they try to click something, say like with Parkinson’s or something like that. Try to visit this website, probably have a horrible time as well.
[0:07:30.0] DA: Right, I feel like the first thing that I always thought of with accessibility was like, the alt text. Which I guess is mainly there for the screen reader, for people who are blind. But there are other categories of disability that don’t really fall into that and won’t be really helped by alt text, like the motor, or you know, people with low vision, maybe will not be using a screen. It’s like, that’s some really extreme solution. They have some ability to see.
[0:08:09.3] WJ: Have you guys used a screen reader before?
[0:08:11.9] MN: No, I have not.
[0:08:13.8] WJ: it’s cool.
[0:08:14.7] DA: Can I just, like, turn it on? I feel like I have accidentally hit the keyboard shortcut on my computer, it’s like, you know, sticky keys or something like that on a Windows where you just like, typing and you accidently hit the accessibility options.
[0:08:29.5] MN: You hit the spacebar, like, eight times and then like something comes up.
[0:08:32.8] DA: Right, it’s the Konami code on your keyboard and the — all of a sudden it starts reading everything really loud in an opportune moment. Definitely done that on my Windows machine before.
[0:08:46.5] WJ: Yeah, it comes preinstalled on most computers and it’s cool as a web developer to open it up and see what happens when you try and navigate your website with the screen reader on. It’s kind of eye opening. You start to see how this could be a really terrible user experience for people who are actually blind.
If you go to websites that handle accessibility really well, like Google does a good job of this, you can see how different it is when people actually design for web accessibility.
[0:09:21.1] MN: Wait, I can activate it on my machine and then just like, if I turn all of these on and then I visit a website, I can tell whether it’s good design or bad? Like on an Apple machine or is it like a plug in that I would use in Chrome?
[0:09:36.4] WJ: It comes preinstalled on your Mac, you just turn it on and then close your eyes and try and use the internet.
[0:09:44.1] MN: That is crazy. I might have to try that tonight just like, I’m going to Facebook, let’s see what I can do.
[0:09:53.1] DA: I feel like a podcast is a good medium too, for showing off the screen reader, or love to have like an overdone right now where it’s like, you know, just going through the podcast show notes, and just seeing how accessible they are.
[0:10:08.1] MN: Yeah.
[0:10:09.7] WJ: I really recommend cranking up the reader speed because when it reads really slowly, it’s really painful to listen to but if you put it on, like, 3x, you can still understand what the screen reader is saying and you can get to your —
[0:10:24.5] DA: You're like one of those power users for podcasts? Where, you’re, like, listening to them at like 2x or 3x speed. I’m so slow.
[0:10:37.5] MN: I mean, it depends if the voice, if the screen reader has like a New York accent and it speaks really fast, like, I might be — if it’s a slower voice then I have to speed it up. But if it speaks as fast as I do, I might have to slow it down.
[0:10:54.1] DA: It starts every website where it’s like, “Yo Bobby.”
[0:10:58.3] MN: Yo Bobby, you got mail. I mean, one of the things that I always thought about accessibility, like, the first thing that always came to mind was always color. I knew that, like, they are individuals who are unable to see red or like green. I think there’s another color. I’m not familiar with and that’s always like a thing that I have to be mindful about.
Man, it’s red, I wonder if people can or cannot see this and I know that there are ways to change your website so it has a certain shade that people who are unable to see red can see but I don’t particularly — I didn’t know beyond, like, the screen reader or, like — I know that there is like a reader for that perceive Braille. Is that something, is that another different device that people can use?
[0:11:47.7] WJ: Yeah, they have like an external Braille keyboard. I have never used it, I don’t know how to read braille so I wouldn’t really be able to use it but about the color contrast thing, there is a chrome plugin that you can use that will simulate color blindness.
[0:12:03.3] MN: Oh interesting.
[0:12:04.2] DA: That is pretty cool. I just work on a very chart-heavy website, like, for data visualization. And I feel like that will be a nightmare to try and figure out how to do — we were trying to figure out how do you even pick, like, ten colors to like visual, to have contrast. But I think there are guidelines. I think in the end we ended up picking like a recommended set of colors. So I think that probably covered that.
[0:12:35.9] WJ: Well the other thing that I recommend that you do is add texture, in addition to color. And that way if somebody is fully, straight-up color blind, they can start to differentiate. So you got —
[0:12:46.7] DA: Like if there is kind of, like, stripes.
[0:12:47.3] WJ: Like one is the tiny dots and one with big dots and one that’s filled with left directions, downward stripy bits and one with right direction, stripy bits and et cetera, et cetera.
[0:13:00.0] DA: It is kind of funny because I was reading a bit of a visual display of quantifiable information, like, the classic data visualization book. And that is one of the things that the author actually really hated. Like, here is, like, “I don’t like this because it doesn’t convey any information to me,” but I think it was written in the 70s. So he may not be thinking about the accessibility aspect of that and it definitely seems like it is easy to overlook.
[0:13:31.8] WJ: Yeah it is — definitely has not worked as well as color if you are color-sighted.
[0:13:38.6] MN: So in discovering, or trying to figure out what are some tips and tricks that we can do to better our development process, I found the ‘Top 10 List for Making Your Website Accessible.’ This is from UC Berkeley, webaccess.berkeley.edu, is the link for anyone who is interested. We’ll probably put it in the show notes. But we could go on the top 10 list and see what makes sense for us and what things we ran into the past and then yeah, we’ll take it from there.
I’ll start with the first one. The first one says, “Choose a content management system that supports accessibility.” I mean I imagine, has anyone ever used the CMS that enabled us to – that enabled you to be more accessible to your customers or your users when you’re building your application?
[0:14:26.9] DA: I mean, I guess that makes sense if you’re using WordPress or Drupal or using some kind of a theme where you are just building the content and then you are leaning on someone else to provide the accessibility aspect. But if you are using, like, React or something like that where you are building something more bespoke, the more atomic thing that I definitely have used in the past is making sure that when you pick a component library instead of default buttons and labels and input boxes.
Some things like that that they’ve already thought about the accessibility aspects of it for you so you don’t have to redo it.
[0:15:15.1] WJ: If your website allows users to upload images, then allowing users to create their own alt text for those images is helpful. Because there is no way for you to go through and make a wall of those with appropriate alt.
[0:15:31.9] DA: Oh interesting. Yeah, so definitely, like, lean on someone else to do the hard work for you. Find CMS or a component library that does accessibility like Material-UI React is a great library that thinks about that stuff. So another thing that is on this list that I did not really think about was using headings to organize the structure of your content. So actually using the semantic H1, H2, H3 as a way to nest levels of content.
[0:16:11.7] MN: Right.
[0:16:13.2] WJ: I would add to that using semantic HTML elements from HTML5, whenever possible. Like using, like, really sidebar and navbar. And whenever, like, button, instead of div, that styled to it like a button. Whenever you can use a native HTML5 element, you get free screen reader interpretation if it’s a semantic issue on an HTML5 element.
[0:16:40.2] MN: Right.
[0:16:41.2] DA: So what is the utility of that? If I am using a screen reader, I have some ability to, like, scan ahead or skip a section if it doesn’t seem like it’s relevant to me.
[0:16:52.0] WJ: Yeah. So you can sort of type. I mean the headers are the most important because you can type and search for content and have it jump from header to header. But — any negative HTML5 elements stuff, especially buttons, you are going to get better behavior. Like, if you tab, buttons are automatically included in the tab order whereas divs are not. So instead of having to add a tab index to your div, it gives you a user button known elements already in the tab order.
[0:17:27.5] DA: Right, you got to work smarter not harder. So the screen reader has kind of a built in Vimium plugin, where you are able to search the page in like a much better way I guess.
[0:17:42.7] WJ: Yeah, also Vimium works better if the website is accessible. I was a Vimium user, I really appreciate accessible websites because it is easier to power — to use as a keyboard power-user.
[0:17:59.3] MN: Oh wow.
[0:17:59.7] DA: Oh that totally makes sense, yeah I didn’t think of that.
[0:18:03.6] WJ: It is almost like Vimuim, being a Vimium user is a type of impairment.
[0:18:13.3] DA: Or a super power, in either way.
[0:18:16.8] WJ: We’re differently-abled.
[0:18:19.1] MN: Yeah, the third one on this list, I think we’ve been talking about for some time is, include proper alt text for images. So don’t ignore those old texts or messages on your linter, Dave. Make sure you properly fill that in with the correct photo text. I mean I’m picking on Dave but I am sure I am really bad at that myself. So like, “Oh photo A, alt text is A and B and C” — but I think alt text is very important so we all know what the hell is happening here.
[0:18:50.9] DA: Right, well I knew it was important. I was always filling it in but, like, I didn’t understand the context of why it was important or why it might be relevant. Like, an example I saw recently was, like, you’ve got a page and there is maybe you have a list of things that you are iterating over in React and you are rendering all of them out. And they’re pretty much identical. It is just a link that says like, “download” — imagine it just said, like, download a million times in your screen reader.
You’d just be like, “Why? What is it? What am I downloading?” so you could say in the alt text like, “Download the photo, download the background,” or, I don’t know.
[0:19:48.9] MN: Very interesting you mentioned the download link because number four is to give your links unique and descriptive names. So even in the alt text for a URL or not even the alt text for the URL but actually in the text in what you have would be useful and necessary for our user to know whether they are going to click or not.
[0:20:08.6] DA: Yeah.
[0:20:10.3] MN: Yeah not just, like, “click here, click here!” I mean I imagine advertising is probably really annoying with the screen reader, William do you know?
[0:20:19.0] DA: That is literally my favorite thing to do in emails, where I just write, “This here is a thing.” So just total accessibility bad guy, I never knew it.
[0:20:34.7] MN: Accessibility bad guy, oh man that’s my alter ego now. The accessibility bad guy. Number five on this list is, use color with care, I think we mentioned this before. Probably the one that I was aware of. So the most common form of color deficiency is red, green color. Deficiency affects approximately 8% of the population. So be mindful what colors you use. I think William mentioned that there is a tool that allows you to see your website with these different disabilities. So you can go through your website and check whether you’re violating this rule or not.
[0:21:13.0] WJ: Yeah, there is not just color blindness but also people who are low-vision have a hard time with contrast, low contrast colors, even if they aren’t red, green or any of the common color blindness patterns. So we WCAG 2.0 recommends certain thresholds for color contrast. So that the color contrast, there is a mathematical formula that you can use to compute the contrast ratio between two colors. I mean, it’s going to be a number between zero and 21, with zero being it’s the same color. And 21 being the difference between black and white.
So I think it is, like, you need at least, it’s like I don’t know — it depends on the size of the font. And so it is different for small font or big font. And it depends on whether you’re using the double A or the triple A guidelines. So the triple A guidelines are more strict and I think it is like a minimum of three for large text and 4.5 for small text for double A and then it’s, like, minimum of like seven or nine for small. And then 4.5 for large if you’re using the triple A standard.
I’m not totally positive that I got those numbers right but you can double check on the WCAG 2.0 website.
[0:22:29.7] MN: Yeah, we went to the top five list right now. We can go to six but this conversation is really interesting and I would love to continue having a conversation on accessibility and for those who are interested in taking a sneak peak of the list that we’re reading, probably check out the show notes. Where we’ll have this but this is really interesting stuff. I am really glad William with your expertise and Dave with your curiosity on accessibility that I am learning more stuff that I can do to make websites better.
[0:23:00.2] DA: Finally, I know what to do with that alt text, finally.
[0:23:04.8] MN: Yes and my headings, my headings H1, H2 and H3, gotta to be good on that.
[END OF INTERVIEW]
[0:23:11.8] 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:
Web Content Accessibility Guidelines
