Approachable Web Accessibility with Alyssa Holland

Alyssa Holland (00:00) Giving devs confidence by making it relatable to something that they're already familiar with as opposed to like, okay, go read the WCAG.

two point whatever guidelines like, know, that your documentation is extremely overwhelming sometimes. And so instead of making it feel like this huge checklist, if you can just be like, okay, there’s some short incremental wins that we can do to improve it along the way is how I, how I try to approach it to make it feel more approachable.

Maxi Ferreira (00:09) Mm-hmm.

Mm-hmm.

Hello everyone and welcome to another episode of the Frontend FM podcast. My name is Maxi Ferreira and my guest today is Alyssa Holland. Alyssa is a frontend developer, blogger and teacher with a passion for accessibility and component libraries. Alyssa is the author of The Approachable Guide to Accessible Components and she’s joining me today to chat all about the why, the what and the how of web accessibility. Alyssa, how are you?

Alyssa Holland (00:56) I’m doing good. Thank you so much for having me on the show.

Maxi Ferreira (00:58) Yeah, thank you. Thank you for joining me. I am very much looking forward to our chat. think accessibility is one of those topics that we all kind of agree. It’s very important. We all want to do our best, but sometimes we don’t succeed at it. yeah, I’m excited to get some insights from you. But before we get started, I’d like to learn more about you. Can you share how you got started in the industry and what sort of led you to being like a

Alyssa Holland (01:06) Mm-hmm.

Yeah.

Maxi Ferreira (01:25) dedicated to accessibility.

Alyssa Holland (01:27) Yeah, absolutely. So I think my tech journey on paper, like educationally wise looks traditional, but how I kind of got into tech is actually a little bit different. Um, I was actually very much into music. played like saxophone all throughout middle and high school. And I was like, okay, I’m going to major in music, but I don’t know what to do because I don’t want to be a music teacher. I don’t want to be a starving artist. So, um, I actually ended up going to school in Nashville, Tennessee at Belmont university studying audio engineering. Cause I was like, okay.

This will allow me to blend both of my passions. But as I kind of got through, the degree, was like, I don’t know if this is really the right field for me. like sophomore year ended up switching to computer science because my dad had told me in the past, like, well, let’s say, know, you have a knack for computers, which my parents aren’t the most technology literate people. So it just really meant I could make the printer work and like fix some very minor.

tech issues when needed. So I had no idea what I was getting into. Ignorance was bliss, definitely, because I think if I knew how difficult the computer science program would have been, I might not have done it for fear of not feeling like I was smart enough. But long story short, ended up graduating with my computer science degree from Florida State University, got hired, got my first big girl job right out of college at General Motors. And that was about 10 years ago now. And so then I started focusing on the front end, probably the last seven or so. And so,

Maxi Ferreira (02:22) Ha

Nice. Awesome.

And what, so you’ve been a front end developer for the last seven years or so. ⁓ Why did you decide to like sort of specialize in component libraries and accessibility and that kind of thing?

Alyssa Holland (02:50) Mm-hmm.

Yeah.

Yeah, that kind of, that was a happy accident, I guess, still from Bob Ross, is that I got a job at a higher education company and, they just needed, I was still kind of junior at that time. They needed, someone to help out with their component library and my manager and I had this kind of mentor mentee relationship. And so he, was very bullish on accessibility and like, it was like,

Maxi Ferreira (03:20) Mm-hmm.

Alyssa Holland (03:22) Not an option, right? Like you had to do it and this is why it’s important. And so just kind of by osmosis of, you know, that needs to be a requirement and just learning how to build these atomic components for our engineering team. I just kind of naturally absorbed that knowledge and got really passionate about it. And, um, now like once I kind of developed that lens for accessibility is like, I can’t like not see it now. That makes sense. So that’s really kind of what it got into it just by accident, but I’m happy you did. It’s fun.

Maxi Ferreira (03:51) Yeah, I know, that’s very cool. I, yeah, one of the things that caught my attention about your work is that you’re teaching methodologies about making accessibility more approachable because ⁓ it can definitely be quite overwhelming with all the things. If you look at the, some of these guidelines around accessibility and you look at all the requirements and it’s like a checklist of a hundred items or so.

Alyssa Holland (04:04) Yeah.

Yeah, yeah.

Maxi Ferreira (04:19) for each one of the HTML elements that you have. it can be a lot. So what do you mean when you say that you want to make it approachable for developers?

Alyssa Holland (04:29) Yeah, I think actually what’s key there Maxie is that you mentioned that like it can be a lot, you know, and I think it’s, is overwhelming. And I, I feel like I hear two schools of thought. Some are just like, it’s not that bad, you know, whatever, but, it actually, it’s more of a nuanced thing I would say in web development, you know, because it takes some empathy kind of think about, and it’s, it’s more than just like slapping ARIA attributes and stuff on. like to me, to make it feel more approachable as I try to like reframe it.

as something that’s built on like familiar foundations. So things like semantic HTML, good focus management, like keyboard interactions. So when we teach accessibility through like, I think common things that we know, like, okay, we have buttons, we have inputs and stuff like that. Giving devs confidence by making it relatable to something that they’re already familiar with as opposed to like, okay, go read the WCAG.

Maxi Ferreira (05:13) Mm-hmm.

Alyssa Holland (05:24) two point whatever guidelines like, know, that your documentation is extremely overwhelming sometimes. And so if I think just like, instead of making it feel like this huge checklist, if you can just be like, okay, there’s some short incremental wins that we can do to improve it along the way is how I, how I try to approach it to make it feel more approachable.

Maxi Ferreira (05:24) Mm-hmm.

Mm-hmm.

Alyssa Holland (05:44) Yeah.

Maxi Ferreira (05:44) Yeah, yeah, absolutely. definitely,

yeah, that resonates a lot with also my experience. think there’s a lot of things that you can, or you can get a long way by just focusing on whatever, try not to mess with the default accessibility that all of these HTML components come with, which can be hard, especially if you’re building something like a component library, because when you’re building a component library, you’re probably building…

Alyssa Holland (05:56) Mm-hmm

Yeah.

Mm hmm. Absolutely.

Maxi Ferreira (06:11) your own dropdowns and your own buttons and your own things. So I’m interested to hear your perspective and your experience when it comes to building this component libraries specifically. How can developers who are sort of proud, they’re tasked with maintaining their component library. How can they bake the accessibility into these components and why you think that’s more, sort of like a more scalable approach?

Alyssa Holland (06:12) Exactly.

Hmm.

Maxi Ferreira (06:37) than thinking of accessibility as an afterthought.

Alyssa Holland (06:40) Yeah. because so when accessibility is like baked into these foundational components, like your ubiquitous elements, like your inputs, buttons, check boxes, you know, things that are used throughout a lot of areas of the app, you kind of will get this trickle down effect. Whereas like, if you have to kind of go back and be like, okay, well, you know, some companies don’t even have a component library, guess. So that makes it even trickier. Say you’re having to manage multiple components across,

Maxi Ferreira (06:55) Mm-hmm.

Alyssa Holland (07:07) disparate areas of the app. But I think when you focus on these kind of like foundational building blocks, you know, for example, having a button have a like focus ring or something and just visible focus and stuff. like previously, some, know, like usually like, I don’t like the default styles. I’m gonna remove this. I don’t like the focus ring. now we have like CSS is getting so strong. We have things like, I think it’s a focus.

Maxi Ferreira (07:08) Mm-hmm.

Alyssa Holland (07:28) focus visible pseudo class or something, so that now only keyboard users and stuff will see that focus ring. So You’re right, the defaults, a lot of times, it would be nice if we could just use native HTML for everything, but unfortunately, especially things like dropdowns, as you mentioned.

Maxi Ferreira (07:29) Mm-hmm.

Mm-hmm.

Alyssa Holland (07:45) Range inputs are actually another one too. Like I actually have a whole article with like Smashing Magazine about how to style this thing. And I know there are initiatives for like, I don’t know if you’re familiar with, I think it’s openui.org. There’s a lot of like, you know, big people in the industry kind of working on that, but that’ll take a few years before I feel like it’s really, you know, all throughout the web, but there are initiatives to try and I think make it so that it can be easier to style these things because that’s kind of why we’re having to reach for a lot of these other, um,

Maxi Ferreira (07:48) Hmm.

Mm-hmm.

Alyssa Holland (08:15) components and things is, and why sometimes I think maybe we go away from some of the accessible defaults that we get from native HTML is because it’s just hard to style. we’re like, okay, well, I need to kind of start from a clean slate. But then by doing that kind of undo thing. if, if your core components kind of have these built in, it allows it to that as you kind of, you know, you start your subatomic components and you kind of build on top of them, they were all kind of have accessibility built in. So.

Maxi Ferreira (08:16) Mm-hmm.

Alyssa Holland (08:41) You’re not, it just kind of, it’s a trickle effect in a positive way.

Maxi Ferreira (08:44) Right. Yeah,

yeah, absolutely. think, yeah, OpenUI, I think that’s where, I remember a few years ago, these selectable or styleable select elements, which are, I think they are now like available in Chrome, at least you can start using them. I remember that, I think that came out from the OpenUI initiative and now I made it to the web platform.

Alyssa Holland (08:59) I think so, yeah.

Yeah. And I think

something with like a popover or something I’ve heard about recently. Yeah, there’s some type of, so I know there’s more like ways that you can even do stuff that you would need JavaScript to do in CSS, which is kind of cool to see, I think. So, yeah.

Maxi Ferreira (09:15) Yes.

Yeah, no, definitely

it’s getting more powerful and we’re getting a lot of very cool features in CSS and HTML that just eliminate the need for creating these JavaScript components that can be bloated and inaccessible. it’s like a, So, yeah, so another thing I was thinking as you were talking about these features, I was thinking about somewhat…

Alyssa Holland (09:23) Mm-hmm.

Ha ha!

Mm-hmm. Yeah, for sure.

Maxi Ferreira (09:41) how the mindset also can be not only like trying to make it accessible, but also sometimes preventing inaccessible features to ship when the feature is inaccessible from like from its core. I’m thinking specifically, I’m thinking about drag and drop, how making a drag and drop interface can be hard to make it accessible for people who don’t have a mouse or they’re not using a mouse.

Alyssa Holland (09:50) Hmm.

Yeah.

Maxi Ferreira (10:04) And I think sometimes the mindset, I don’t know if you talk about this in this course, but this mindset of keeping in mind that if something can be rearranged with drag and drop, that it shouldn’t be the only way to do it, right? That there should be at least an option to do it with a keyboard somehow. You can keep your drag and drop, but you still have to make it available to users via the keyboard. do you have any advice, any tips for…

Alyssa Holland (10:14) Mm-hmm.

Right.

Right.

Maxi Ferreira (10:31) How can developers keep these things in mind as they start working on these features?

Alyssa Holland (10:34) Hmm.

Yeah, that’s a great question. well, in particular for that drag and drop example, I know, I think Jira, I can’t remember, does a good job of this, but there’s a new like library that, well, first of all, I guess, looking for a library to do this is great. Very rarely. I mean, even though I could not try to toot my own horn or anything, like I could like implement my own tabs or whatever, these kinds of things. I, lot of times will reach for.

Maxi Ferreira (11:02) Mm-hmm.

Alyssa Holland (11:06) libraries that I know do this for me already, because there are so many scenarios to think about, you know, and you assume that they’ve checked with screen readers and all that, because, you know, there’s not only like, okay, can I access this via keyboard, all these things. It’s like making sure that the, it’s visible to screen readers. So if you have a Mac trying to use things like voiceover to even test it and stuff like that. So I usually will vet, I spend it before I even like, if I have to implement a pattern like that, I will actually spend some time just researching.

different options, you know, making sure they’re maintained and making sure that, they adhere to certain WCAG guidelines. Usually a lot of them will say like, we adhere to this component pattern and then just making sure and kind of doing usually like a preliminary test just to make sure that it’s, it’s valid. and so, so that’s one way is like, try not to roll your own, I guess, especially for complex things like date pickers, drag and drop for things. I, the one of the

Maxi Ferreira (11:39) Mm-hmm.

Right.

Alyssa Holland (12:01) things I see a lot actually is using divs as buttons. And this is, and I think it’s because, you know, buttons kind of have these ugly default styles applied to them. so instead of having to like, you know, undo the styles, they’ll just use it. Cause like, well can technically apply a on click to this. Yes. But, you know, but it’s, you lose all the other interactivity and stuff like clicking space bar to activate it, all these things. And so I think,

Maxi Ferreira (12:05) Mm-hmm.

Yeah.

Alyssa Holland (12:28) You know, making, if you, if there is a native element for it that you can style, please use it. you know, it’s different when it comes to things like drop downs and stuff, but, also making sure that maybe you have good linting in place. Like I always make sure I have like an A11Y, know, ESLint plugin or something. So it’ll kind of flag things like that, that like, well you’re using on click on a non-interactive element or something in that case of the button. So things like that are little, like tools you can kind of use to kind of make your life easier.

Maxi Ferreira (12:33) Mm-hmm.

Yes.

Mm-hmm.

Yeah, yeah, absolutely. With the div as a button example, think one thing that I’ve learned recently is also that there is a very easy way to unstyle the button, to remove the styles. I don’t remember exactly what the rule is, but I’ll make sure to put them in the notes. But it’s something like unset all or something like that. It’s just one single line of CSS and that clears all of the styles from the button. It works at least on buttons.

Alyssa Holland (12:57) Mm-hmm.

Mm-hmm.

Yeah, I’m curious actually. don’t know why.

⁓ yeah.

Okay.

Maxi Ferreira (13:23) There is really no excuse anymore to use a Devo sub button.

Alyssa Holland (13:24) I think I might’ve seen that in example somewhere, but I wasn’t familiar with it. So maybe it’s like a newer class, but that’s awesome. Yeah. So you don’t have to.

Maxi Ferreira (13:32) I think it’s

pretty new, but it’s very convenient because before I think you had to do some reset of all the styles or remove the border, remove the weird gradient background, whatever, like all the kind of stuff. But yeah, now it’s just a single line of CSS. So yeah.

Alyssa Holland (13:40) Right. Right.

that’s awesome. That’s great. And

that’s what’s kind of cool about this landscape is I think my hope is that it’ll get easier to kind of do these things as we as the technology advances.

Maxi Ferreira (13:55) Mm-hmm.

Yeah, yeah, exactly. I hope that, yeah, we’ll make it easier to do the right thing.

Alyssa Holland (14:02) Yeah,

I guess I’m kind of like altruistic, but I’m like, I don’t believe developers like don’t want to make accessible interfaces. Like I think it’s just like, you know, you have time pressures and you’re like, I got to get this done. And it takes time to do, you know, to sometimes incorporate all these things. So the more that we have tools helping us. Yeah.

Maxi Ferreira (14:17) Yeah, no, for sure.

Absolutely, yes. So you touch a little bit on using libraries that come with this accessibility sort of defaults baked in. And I know that this has been like a trend in certain component libraries, this headless component libraries ⁓ that allow you to bring your own styles. Can you share your thoughts on like

Alyssa Holland (14:28) Mm-hmm.

Mm-hmm. Mm-hmm.

Maxi Ferreira (14:43) how these types of arrays make it easier or more approachable to build accessible UIs.

Alyssa Holland (14:47) Yeah.

Yeah. Approachable is the keyword. Yeah. I think headless is headless components are probably one of my favorite patterns that I’ve seen. I guess it’s been around maybe like five years. I mean, I guess longer technically. feel like reach UI is kind of like the OG in the space, but it wasn’t necessarily getting as much attraction as like maybe like the radixes and the headless UIs and stuff. And I think Adobe has React Aria. But headless components are just like these unimp…

Maxi Ferreira (14:51) Yeah.

Hmm.

Alyssa Holland (15:14) unopinionated, like unstyled components that handle a lot of the tricky implementation details by default. And it allows you to kind of ship out things faster because you don’t have to worry about like needing to wire up these things like the keyboard interactions, all these things that you have to do, how you, and how you kind of find out where you need to even like know how to implement the component pattern is there’s this thing called the ARIA authoring practices guide, the APG.

for short, and that includes patterns for things like tabs, if you want it to roll your own checkbox, things like that, a lot of other patterns. And, but it’s, it’s a lot, like sometimes, you know, and actually do this through the course where I’m like, okay, here, here’s actually how you do it. Like you need to have a roving tab index and you need to do all these things. And so the cool part about these headless components that they handle all those.

Maxi Ferreira (15:42) Mm-hmm.

Hmm.

Alyssa Holland (16:04) like implementation details for you so that all you really need to do is bring your own styles, which is really cool. so instead of having to reach, you know, in the past where we’d have things like maybe, we, you know, I think, you know, we had components in the past that could do these functionalities for you, but they were usually pretty opinionated about how you had to style it, or you had to go through so many hoops just to like revert the styles to get it your way. this new Helis patterns is really cool because they just

Maxi Ferreira (16:24) Yes.

Alyssa Holland (16:29) handle all the logic for you. Like some of them do it via hooks, some of them expose these kind of like compound components that I let you to do it, but it’s pretty cool. I really enjoy the pattern.

Maxi Ferreira (16:38) Nice, yeah,

yeah. We’re using, at my job, we’re React area for a couple of things. We don’t use it for our main component library, unfortunately, because our component library is from, I guess, before the headless component era. So we unfortunately had to build a lot of this stuff on our own, and now we have to maintain it. yeah, React area is an amazing tool. haven’t…

Alyssa Holland (16:43) nice.

Mm-hmm.

Yeah.

Yeah.

Maxi Ferreira (17:04) tested all the others. I know that I’ve used ShadCN, which I believe is built on top of Redix, but I haven’t used Redix by itself. But yeah, there is a blog post on the Adobe React Area website that made me really appreciate all the work that, the effort that goes into making these components accessible because they have like a three-part series on making a button or something like that.

Alyssa Holland (17:08) Top of radix.

Mm-hmm.

Wow. Yeah.

Maxi Ferreira (17:30) It’s a very basic component that you don’t think about it, but they go into all this detail of what it takes to make a button accessible. yeah.

Alyssa Holland (17:37) Yeah. Sometimes

reading those things actually makes me feel better, even though I feel like I know a decent amount about accessibility. It’s like, okay, well, if even like these experts who have, know, working at Adobe have to support all this stuff, like, like you said, have a three-part series. like, okay, maybe something like a button. It’s, it’s, it is more work than it seems. So, but it’s cool that, you know, they’re empowering us to be, they handle all that hard work and I’ve done both. Like I’ve also worked in the era like we’re before.

Maxi Ferreira (17:49) Yeah.

Hahaha.

Alyssa Holland (18:04) the headless stuff was really popular. So I’ve seen the work that it goes into doing it, but I just feel like it, allows you to make less mistakes. But I, but I do, like I mentioned earlier, like I always kind of vet the library just to make sure. Like, like I’m looking at the ARIA authoring practices guide looking at, okay, is it actually implementing the pattern and stuff like that before I kind of make an educated decision about that? But yeah.

Maxi Ferreira (18:06) Hmm.

Yeah, yeah, absolutely. We talked a little bit about, or you mentioned a little bit how sometimes because of time pressure, it’s hard to make accessibility a priority in a lot of cases. Do you have any advice for people who maybe think it’s important, they know it’s important, but are not getting buy-in from?

Alyssa Holland (18:34) Mm-hmm.

You

Maxi Ferreira (18:47) product managers or any stakeholders to get time to work on these accessibility improvements. Do you have any advice for those people?

Alyssa Holland (18:49) Yeah.

Yeah.

I, I feel like I’m, I feel like I’m still learning how to be better at getting the buy-in, like, cause I’ve worked at both where like, there was a lot of buy-in on it and like, was highly prioritized because they like paid for audits, like accessibility audit. That’s how important it was. And then I’ve worked at a company where it was like, it’s kind of an, if we need it, you know, we don’t have disabled users. That’s usually kind of the reasoning, but a lot of times what happens is like,

Maxi Ferreira (18:59) Ha ha. ⁓

Hmm. ⁓

Hmm

Alyssa Holland (19:21) Creating accessible implementations is not just for people who have a disability. And I feel unfortunately it’s kind of seen as like, oh, well only people who are blind or this or whatever. like, no. What if you have power users who want to be able to navigate through your application quickly? Like that is really nice. Being able to, I don’t know, having multiple ways to do something, I think it’s better for everybody, not just for people with disabilities.

Maxi Ferreira (19:34) Mm-hmm.

Alyssa Holland (19:45) And so, and I just morally think it’s the right thing to do, but that’s not, that’s not the argument that’s going to win. Unfortunately. Like I have a whole section on the course. It’s like talking about why it’s important, but it’s like, okay, even if you don’t care about like that, it’s better for people. like there’s things like, I mean, I haven’t heard too much of this, but I know there’s been some like legal implications. There’s like kind of this Domino’s pizza lawsuit example where it’s like this blind man couldn’t order. And so, but that, you know,

Maxi Ferreira (19:47) Hahaha.

Hmm.

Alyssa Holland (20:11) Most cases, you know, that’s really not going to happen for like a smaller company. The real thing is to see how like building these, like maybe if you can phrase it as like, well, by doing this, we can say that we are, you know, AA compliant and that when you get more enterprise customers who maybe require that our application be compliant, we can say that, you know, we meet that criteria. I think you have to phrase it in a way that like stakeholders.

Maxi Ferreira (20:32) Mm-hmm.

Alyssa Holland (20:35) can see the bottom line, like, or where does this potentially bring us in more money? That’s kind of how I have to do it. And again, I’m still something I’ve had to work on. haven’t necessarily been the most successful at it, but like it’s how I’ve tried to approach it is like one, educating kind of the development teams so that it’s kind of more of a natural part of their work. And just trying to say that like, well, you know, we’re looking to get more, like I enterprise customers, and this is something we will need to support down the road and continuing to kick it down.

Maxi Ferreira (20:39) Right.

Alyssa Holland (21:04) kicking the can, you know, we’ll just make it harder. So that’s kind of, it’s a tricky thing though. It’s usually there’s like one or two advocates, accessibility advocates like, please, but it’s hard, you know, cause I understand.

Maxi Ferreira (21:07) Mm-hm, right, yeah.

Yeah.

Ha ha ha.

No, no, absolutely. Absolutely.

think one of the ways that I, because I also sometimes fall into a trap of thinking that, yeah, nobody, don’t have people who would put this type of accessibility that we need to worry about. But sometimes you experience it yourself, even just temporarily. How sometimes, I don’t know, even for things that are as trivial as your…

Alyssa Holland (21:32) Mm-hmm.

Mm-hmm.

Yeah.

Maxi Ferreira (21:43) the batteries on your mouse running out, right? And you have to go fetch the charging cable or whatever, but you’re finishing like filling out a form and you expect to finish filling out the form with just your keyboard because I can tab to the next. And when that experience doesn’t work, it can be very frustrating. know, a lot of times I just want to fill out this form with a keyboard and the tab focus keeps going anywhere. And I can only imagine like how it is for people who have to do this.

Alyssa Holland (21:45) Yeah.

Mm-hmm.

Yeah.

Right.

Maxi Ferreira (22:10) every time. so yeah, it gives you a lot of empathy for people.

Alyssa Holland (22:12) Right. Yeah.

For sure, yeah, empathy.

That’s an interesting example you actually gave about the mouse thing. something to learn about is there’s permanent disabilities and temporary disabilities. So for example, there’s even examples of where it’s not necessarily a disability, but it’s more of an impediment where you’re like, say you just had a newborn baby or something and you’re holding the baby, but you’re on your computer. You can only use one hand or something. And so there is kind of an example of that. Or maybe you break your arm and you can’t use…

Maxi Ferreira (22:29) Mm-hmm.

Yes.

Alyssa Holland (22:45) you your arm for a month or so, like just things like that are even things to consider. So it’s like, it’s, and then I think when it’s maybe like, when it affects you or you think about it, in that way, it’s a matter of just like, okay, I can see kind of how, know, it’s, yeah.

Maxi Ferreira (22:48) Mm-hmm.

Yeah, definitely.

Yeah, I think it’s very important. I think everyone should try to at least once use their product with just a keyboard and see how it feels. So do you have any, speaking of which, do you have any recommended tools for doing any sort of testing of accessibility or measuring accessibility somehow? think you mentioned ESLint before. Are there any other tools you recommend using?

Alyssa Holland (23:06) Yeah.

Yeah.

Yeah, the ESLint, I can’t remember the exact like plugin name, but I know there’s like a, I think it’s like JSX, a one one Y or something. ESLint plugins pretty popular. The Axe DevTools browser extension is really great. That is created by a company called Deque. And they are known in the web accessibility space. They’re very, very popular. And I think a lot of like other internal tools kind of use it.

Maxi Ferreira (23:51) Mm-hmm.

Alyssa Holland (23:51) underneath

the hood. So that’s a great one that’s free that you can use and it allows you like scan your whole page and it’ll highlight areas where it is, actually take you to that part of the, the, on the screen and show you what needs to be fixed and shows you a document as to like why it’s making the suggestion and rates it on severity. There’s also things like the web aim color contrast picker though there, are myriads of color contrasts.

tools out there, so it doesn’t have to be that one. That’s just the one I use, because WebAIM is a very popular company. that just like, I a lot of times will just go put in a foreground and a background and allows me to see like, do I meet at least double A compliance with this? And how can we maybe tweak this a bit to just make the color contrast a little bit better? So those are the two like main tools that I use. Let’s see.

As far as like, those are kind of more, I guess more automated type things for like manual stuff. know, using even the Chrome dev tools, I Chrome and Firefox both have decent accessibility tools in there where you can kind of look at the like accessibility, you can accessibility tree, which that’s getting a little more into the weeds, but you can see like, hey, here’s the label for this. Am I missing this? I think Firefox is a little bit of a better job kind of calling out like, hey, this doesn’t, you know, this label is not associated with an input, things like that. So,

Maxi Ferreira (24:50) Mm-hmm.

Mm-hmm.

Alyssa Holland (25:11) Yeah, there’s a lot of different options, I’ve heard somebody say the percentage of what automated tests can do is only maybe 50 or 60%. So there’s still some things like making sure you’re using proper headings and checking the heading hierarchy. There’s some tools that kind of do that for you. Going through the keyboard, checking the tab order, making sure it’s sequential makes sense, things like that. So yeah, there’s some manual in there.

Maxi Ferreira (25:22) Hmm.

Yeah. Yeah.

Yeah, no, absolutely.

Alyssa Holland (25:38) Can’t

automate it all unfortunately, which would be nice, but yeah.

Maxi Ferreira (25:42) Yeah, especially when it comes to testing with VoiceOver or one of these tools, the screen readers, it’s very hard. I don’t even know if it’s possible to automate that testing, but yeah, something you have to do manually. But yeah, I’ve used some of these tools. We use the Deque, what is it called? The Deque extension, AXEvTools. Yes, we use that one. Yeah, it’s very, gives you a lot of insights.

Alyssa Holland (25:47) Yeah, that’s true.

Yeah.

Maxi Ferreira (26:07) One thing that I really like is that with all of these tools, they can give you very detailed, very granular data on what advanced improvements you can make. But also there’s a lot of low hanging fruit that it’s very easy to fix and it will make the experience for people who require these accessibility improvements much better.

Alyssa Holland (26:16) ⁓ huh.

for sure.

Yeah, that’s

cool that you use it though. Okay, yeah, it’s pretty popular, it’s, I don’t know, it just breaks it down really. The highlighting feature is like super nice to be able to like literally navigate you right there.

Maxi Ferreira (26:35) Yes.

Alyssa, tell me more about your course. You created this course called the Approachable Guide to Accessible Components. What can people expect to find and learn in that course?

Alyssa Holland (26:50) Yeah, I created that course because I felt like I wanted to take all the lessons I learned and just try and break it down because I think sometimes accessibility can unfortunately have like, you know, they feel like people want to try, but then it’s like, you’re worried about like getting it wrong and, and, and people yelling at you or whatever. so my, like the whole main goal of the course is to like,

break it down and to work incrementally. So I start off by just saying like, what, defining what is accessibility? Like, and I even have a whole section dedicated to just terminology because even that is confusing. There’s like so many acronyms and things and it’s like ARIA, WUHARIA, WCAG, like what are, what are the differences between all these things? So that as I kind of use this terminology going forward, because that is what’s in the documentation, it makes more sense and it kind of clicks. So I start with, I start you off with this kind of like foundational.

Maxi Ferreira (27:41) Mm-hmm.

Alyssa Holland (27:44) concepts, here’s what they are. Like here’s color contrast. Here’s why, how to input or associate an input with a label. Here’s all focus management, all these things. And then from there, like I try to make it like actually have you implement something manually, like a tabs, something it’s a little more complex, but not like crazy. Like you’re doing your own date picker kind of thing and showing how you need to set up a roving tab index. covering going back to the tab and as we covered before, how to show error messages.

Maxi Ferreira (28:04) Mm-hmm.

Alyssa Holland (28:12) that shows you kind of color contrast and how not to convey things, but just color alone, like having an icon and explanation text, how to link things with ARIA attributes, like how to bring those in, when to bring those in kind of stuff. And then I bring in things like, okay, well, here’s like the headless component library and here’s how you would do it. And here’s how you would vet it. that like, it’s kind of like taking you from the foundations to more advanced, like, so that you understand, cause I’m not expecting everyone to be able to like go as deep into the weeds.

Maxi Ferreira (28:29) Mm-hmm.

Alyssa Holland (28:40) as like me, as I’ve kind of had to, because not everyone’s implementing these components and stuff. And ideally your component library might have some of these baked in. But, yeah. So I just kind of like show you how to do that, even how to do an accessibility audit with X dev tools, identifying issues, things like that. And so I just, I just, course I felt I wish I had, guess, when I was trying to learn, I just, I just kind of did some, deeper diving when I was trying to just learn more about it. Since I kind of realized like, I kind of like this component library space. I should probably know.

You know what, what all these things mean. that’s just, just my attempt at trying to yeah, you know, make it feel less daunting and approach.

Maxi Ferreira (29:15) Yes, yes, absolutely. think, yeah, some of the things you mentioned, like when to use an ARIA label and when not to. Those are things that always, yeah, I don’t know how to, I don’t know when. And then, yeah, you know, you hear of ARIA labels, you know they’re important and the temptation can be to just add them everywhere, but sometimes, yeah, that’s not necessary or it can be, I don’t know, detrimental to what you’re trying to achieve.

Alyssa Holland (29:21) Yeah.

Right.

Right.

Is that, yeah, there’s,

there’s actually a whole thing on like one of the ARIA documentations, like no ARIA is better than bad ARIA. And it literally talks about that, how like it’s actually worse if you just kind of add things on without knowing. So yeah, it’s kind of funny. Just little things like that are just important. Just, you know, pointing to the right documentation and stuff. So. ⁓

Maxi Ferreira (29:46) haha

Right.

Awesome. Well,

it sounds great. I will definitely leave a link to your course in the description. Yeah, before I let you go, I’d to do picks for the audience. Any resources you’d like to share. This could be books, could be TV shows, could be other things, like anything you want to share. You have any picks for us?

Alyssa Holland (30:02) Thank you, appreciate that.

Ugh.

Are you allowed to do more than one pick or is it just one? I’ll do two. I won’t do like, yeah, I’m not going to do like 10. Don’t worry. Um, because one, one will be more of a, a shameless plug to kind of steal from the Syntax podcast. Uh, another great tech podcast. Um, and then one will be just something very nerdy. Um, so my sister and I do a podcast called Culture In Between, and it’s all about exploring the unique experiences of people who have grown up in a culture outside of their parents’ culture.

Maxi Ferreira (30:19) You can do as many, you can do, okay, yes. Okay.

Alyssa Holland (30:47) I am the daughter of Jamaican immigrants. so there are some fun experiences of, you grew up in the States, but your parents are from a different country. so we just kind of talk about nuances and stuff like that, or, you know, talk about growing up in Miami and all these kinds of things. It’s just people from all over the world. kind of talked to whose parents are from, you know, from, let’s see, Korea. We’ve had people from, Nigeria, like all these. So it’s just, it’s just fine. If you want to learn about different cultures.

Maxi Ferreira (30:55) Mm-hmm.

Alyssa Holland (31:13) It’s just kind of a little niche podcast that we do. there’s that. And then I guess my next thing I’ll plug is going to be very nerdy, but, I am very much into like Lego. it’s very nerdy. know, but, and I’m from the nineties. So there is this new like super Mario, like Yoshi set. That’s so cool. Like as an, I feel like as a software developer,

It makes sense why you might like Lego because you know, you’re building it. You’re kind of, and it’s just like, it has like these mechanics and you can kind of move. It’s super cool. I can’t think of the set name. Maybe I’ll share a link to it, but, ⁓ it’s like really neat. It’s, I think it came out like last year or late last year or some time. So sure. I’ll share that if you’re kind of bored and want to, you know, relax. It’s, it’s kind of relaxing hobby.

Maxi Ferreira (31:42) Yes.

Ha ha ha.

I look it up, mean, yeah,

I’ve never been a Lego person, but now I have, my kids are at the age where I can start to build more complex Lego sets with them and I’ve been really enjoying them. So I’ll check it out. I’ll see if this is something that could be like a project. This is one of those, how many pieces? Do you remember?

Alyssa Holland (32:04) Yeah.

Yeah.

⁓ this

one, this is, and it goes very smart because they’ve now, I heard during the pandemic, like there was like a huge influx from like adults buying it. There’s always been a big adult community, but like they now cater thanks for like adults only. And then they have, and so those are like naturally the more expensive sets. I have no idea how many pieces, but probably about 2000, I would say. Maybe I think I have to check. I’m not sure, close to it. but I’ll, I’ll provide a link to that just for fun. That’s kind of, that’s kind of a different one.

Maxi Ferreira (32:21) Mm-hmm.

Hahaha.

Wow, okay, nice.

Very, yeah, no, very

cool, very cool. Awesome. Well, thank you for sharing that. I also have two picks today. One is a book that I’m listening to right now. It’s called, actually let me remember because I don’t want to get it wrong because I think, oh, it’s the Power of Fun. I was gonna say the Theory of Fun, but it’s not the Theory of Fun. It’s the Power of Fun by Katherine Price. I’m enjoying this book. talks about like the difference between like,

Alyssa Holland (32:59) How are we fun? Okay.

Okay.

Maxi Ferreira (33:08) regular fun and what she calls true fun, which is this experiences that make you like feel alive. Like, I don’t know when you have, or you’re hanging out with your friends and you can’t stop laughing at each other. And she talks about all this, the, the, first of all, the benefits of having this, this, this experiences of having fun, health benefits and so on. And also like she breaks it down into the components, what makes for one of these true fun experiences and gives you tips on how to.

Alyssa Holland (33:10) Hmm.

Mm-hmm.

Mm-hmm.

Maxi Ferreira (33:37) to get more of that. yeah, it’s very cool for especially for people who, you know, who work a lot. And sometimes they don’t have fun in a long time. It’s very nice. They’re going to learn a lot. I’m enjoying that book.

Alyssa Holland (33:42) Yeah.

That sounds fun. I wrote that down. I mean, I feel like as adults too, you know, it can sometimes we lose that that kid nature of just having fun. So I think that’s a great reminder.

Maxi Ferreira (33:56) yeah, absolutely.

Doing something for its own sake is not, yeah, it’s something that’s coming very rare. And yeah, I want to explore more of that. That’s why the book caught my attention and let me join it. So yeah, highly recommend it. And the other pick that I have is a tool called Whisper Flow. I guess it’s just Flow now, Flow AI or something like that. It’s one of these voice recognition tool. Yeah.

Alyssa Holland (34:00) Yeah.

Maxi Ferreira (34:23) I guess it’s voice translate tools. I don’t know what they’re called. Like speech to text kind of thing. But it’s very, very good. Like it’s very easy to use because it just had a shortcut with one of the function key on your Mac. you’re using a Mac, you just press that and you talk and it immediately transcribes that. And it’s very accurate. changes the tone. Like it fixes your whatever errors you had.

Alyssa Holland (34:28) Mm-hmm.

Maxi Ferreira (34:48) It changes the tone depending on the app that you’re using. Like if you’re chatting with your friends, it uses one tone. But if you’re writing a doc in a paper doc or a Google doc or something, it uses a more formal tone. So it’s very, very good. I’m just super impressed with this tool, so highly recommend it.

Alyssa Holland (35:03) I’ve been actually looking into some, I’ve been trying Super Whisper, but I’ve heard of Whisper, so there’s a lot of them out there now. I’m curious, how have you been incorporating it? I’m just kind of curious. I have used it a little bit here and there, but not as much as I’m sure others have.

Maxi Ferreira (35:07) Mmm.

Yes. ⁓

Yeah, I use it now and trying to use it for everything. Like Slack messages, I reply with, I try to reply with a voice, emails. And I use it like for, I use it mostly for like prompting, especially when I’m doing something in child GPT or in cursor. And sometimes I just rumble because I don’t know exactly what I but the LLMs are pretty good at deciphering what I’m trying to say from my rumbles.

Alyssa Holland (35:19) ⁓ nice.

Mm-hmm.

Mm-hmm.

Maxi Ferreira (35:42) yeah, I’ve been using it here and there, but yeah, I really enjoyed it.

Alyssa, thank you so much for joining me today. How can people find you online?

Alyssa Holland (35:50) Yeah, I have a blog. If you go to blog.alissaholland.me, that’s where I do my writing. I do have a Twitter and stuff. I don’t use it that much if I’m being honest. But, I have my website’s at alissaholland.com. I guess it’s kind of the two best places.

Maxi Ferreira (36:05) Amazing. We’ll leave links to those in the description and yeah, thank you so much for joining me again.

Alyssa Holland (36:10) Thank you so much for having me Max, this was great.