Accessible SaaS Design

[Presenter, Rob Walling, with guest speaker, Bet Hannon.]

Rob: We’re live. Welcome to today’s episode of Microconf On Air. I’m your host, Rob Walling. Every other Wednesday at 1 p. m. Eastern, 10 a. m. Pacific, we live stream for 30 minutes and we cover topics related to building and growing ambitious SaaS startups that bring us freedom and purpose and allow us to maintain healthy relationships.

Sometimes we show up and we have big conversations. Hair caught on our face that’s bothering us. If you guys can’t see that, I must look like a crazy person. Thanks so much for joining us again. Um, we had to postpone last week, so I think we have two shows in two weeks. We’re doing one today and then one again next Wednesday.

But it’s good to have you back, regular listeners, regular, uh, audience members. And if this is your first time, welcome. As I said, we do these every other week and we also float these out. We post ’em to YouTube. And then we put them on the microconf podcast feed. So if you’re not checking out microconfpodcast.com that RSS feed includes these episodes, which is really nice in case you missed one. You can do it asynchronously. You can 1. 5X them as I do. Then we also do microconf refresh episodes, where we go back over the best, from the best talks of the last 10, 11 years of microconf. And we pull the audio and put them in that feed.

And then we have some other special, uh, kind of special audio stuff that goes on that as well. So today, we’re going to be talking about what SaaS founders need to know about accessibility in design. So it’s, um, accessibility for SaaS founders in essence. And today I’m welcoming, welcoming an expert on the subject.

Her name is Bet Hannon. She runs BHMbiz websites. She’s a web advisor to startups, uh, WordPress accessibility and gravity forums. Um, she is a, uh, I’m trying to think, she says, her pronouns are she and her, she’s a wife, a mom, a grandma, and an aspiring anti-racist , Bet Hannon, welcome to the show.

Bet: Great. Good to be here. Thanks for having me.

Rob: And you’re, you’re calling in, are you in Portland? Is that right? No, I’m in Bend, which is about

Bet: three and a half hours southeast, on the other side of the mountain range.

Rob: Yep. So still in Oregon, but. Uh, because you, you and I, you know, so folks know we’ve met each other 12, 12 ish years ago when we both lived in Fresno and then I relocated to Minneapolis you to bend, it sounds like, and then we ran into each other a couple of weeks ago at, uh, microcom Portland local.

Yeah, that was fun. See you there. Yeah. Yeah. So let’s kick us off. I have some notes here I want to talk through. You know, I, so I’ve, I used to be a software developer, not so much anymore, but I remember accessibility was always a thing that was on our mind, but it was often pushed to the corner, right? Or it was pushed to like the last thing of like, Oh, now we need to go think about that and tack it on.

So, so folks know to set the stage, like what is web accessibility? Yeah.

Bet: Yeah. And that, that way of that, that. trend or that habit of pushing it out to the end is the most expensive way to do accessibility, by the way. Um, so web accessibility is really about, um, on online platforms, so websites, but also other kinds of platforms, SaaS, other things.

It’s making those, um, accessible or usable to the broadest range of people, including people with disabilities. So people who are blind have a tool called a screen reader and it basically reads out loud to them all of the content and structure of the page if it’s properly formatted for that. So for example, if your form has ARIA labels on it, that can read out loud those things.

Um, people who, um, have mobility impairments, they can’t use a mouse. But, uh, they can use other, all kinds of assistive devices. You know, there are thousands of them. Stephen Hawking had a little cheek sensor that he could kind of, kind of wink and blink and move around the webpage. All of those, and at first when I first started I thought, oh my gosh, there’s thousands of those devices, how would I ever account for all of that?

Well, it all comes down to keyboard navigation. So, if you’re Program, your SaaS or your website is keyboard navigable. If you can go to the site and start tapping the tab key or the shift tab key and you can get around then, you know, that’s part of accessibility. But accessibility is much broader than that too.

It includes things like color contrast for people with visual impairments, but also, you know, some of us that are over 50 now having that kind of issues with visibility and eyes are changing, um, people who are colorblind. And we even start to talk about things like. trying to be, um, trying to help people who have anxiety or depression or reading disabilities to, you know, you, you want to break up your, uh, break up your process or let people know where they are in the process that reduces anxiety.

So all kinds of things that you can include in it, in accessibility.

Rob: That’s really interesting. And so, you know, if someone’s out there, let’s say a founder right now has, has a SaaS app that’s doing a few grand a month and they’re trying to get traction and such, and they’re wondering. Like, you know, what portion of the population or like how many people are impacted by this?

Because oftentimes, I mean, you know, I know it’s not the same, but if I’m running a SaaS app and 1 percent of my user base will use a feature, right, or 1 percent of my user base is requesting a feature, usually I don’t prioritize it. I know accessibility is different than building a feature, but, but the idea is, you know, we have to prioritize these things.

So give folks an idea.

Bet: So a couple things. Well, uh, you know, the U. N. Says about 15 percent worldwide globally, but C. D. C. And other developed nations put that that number higher 20 to 25 percent of all U. S. Adults. And so we think that those, um, that higher number is probably more accurate in terms of Yeah.

Reporting. And that’s at any one time. And that is for people who have a permanent or a temporary disability. You know, if I break my hand really badly and I can’t use a mouse for a while, that’s a temporary disability. And so it can be a much bigger percentage of people than I would have ever imagined.

And, you know, if you, you know, You can spend all kinds of marketing money trying to increase your audience by even just 5%, but you know, if you’re trying to make things accessible, you can actually increase that audience by quite a bit. And so that’s, that’s a, a loan is a really great reason to start to think about making things accessible.

You know, the other thing is, uh, depending on what you do and, um, and what you’re offering, you may have some legal requirements to make your, um, platform or your, um, site accessible. Uh, people are being sued under the Americans with Disabilities Act. That’s the public accommodations section. And so, um, you know, that’s not the best reason to make things accessible, but you know, that’s, that’s a really good motivation for a lot of people is to try and avoid getting sued.

Rob: And, you know, at your day job running your consulting firm, I know, uh, you know, your, your H1 on your website is we build accessible websites that help grow your business. Do you. Only design and build, uh, your own for, well, for, for clients. Or do you also come in, do clients ever call you in and they’re like, look, we’re halfway through the thing and we need you to consult and help us like, at, okay, so you do both. I mean, you’re like,

Bet: we do both. And, and here’s the, you know, we, we. We don’t build anything that’s not accessible. I mean, that’s just an investment in our brand, right? We, uh, and so once in a while we’ll, we’ll have that sort of issue with the client where we’ll say, you know, uh, look, this, uh, salmon colored button with the white font, that doesn’t meet a color contrast guideline.

And, you know, sometimes once in a while they’ll sign off and, you know, totally release us from liability and. agree that they will pay all of our costs if they ever get sued over all those kinds of legal things, right, you know, to get out of it. But, but, you know, we would really put a big investment in trying to make things accessible,

Rob: right?

Bet: Yeah, we fix things too. So

Rob: what got you into this? I know, you know, when last time you and I talked 10 years ago, I think you were doing WordPress consulting, but what was the path that got you to access?

Bet: Yeah, we still do primarily WordPress in terms of our builds. Um, we work with all kinds of platforms, of course, doing a kind of audits and accessibility kind of feedback and consulting.

But, uh, what got us into is actually from the Central Valley, California. So Westlands Water District is a big agricultural water district in California, and they’re actually structurally a part of the state of California. They’re a special district, and that means because they’re a government, that they have to be accessible.

They have a compliance requirement. And we had been helping WordPress website for a couple years, and then they came to us and said, Hey, we. We, we have this, we are aware we now have this big compliance issue. So, um, we at first said, hey, let us, you know, help connect you with people who know way more about this.

And they went, well, yeah, bring in those people, but we want you to be able to kind of be the ongoing partner for this. And that was, you know, once we got in and we, uh, the first time I saw a person who was blind. Navigate at a conference, at the registration table for a conference. Go on their phone to the conference website.

She’s got her earbud in one side. And she’s, she’s listening, right? She’s going, she turns to me and she says, where’s the banjo room? And I’m like, like, she got everything she needed without having to ask people or be dependent or what, in that sense of, Wow. The impact that you can make on people’s lives, that you can help them be independent and, you know, and then after that, hearing horror stories from people where, you know, they have to depend on a stranger at the ATM to help them with their banking or, you know, some of those kinds of things.

It’s really, you want to, you know, you just want to make the world a more, but I mean, it’s like, It’s kind of a karma thing too, right? It’s just a really incredible thing to feel like you’re changing the impact in people’s lives in that way. Yeah.

Rob: Yeah. And it’s an incredible time in history, right? Because we have these mobile computers in our pocket with incredible visual abilities.

I mean, I have an app that I can take a picture of like a, you know, a sign in German and it translates it to English, right? Which is incredible. And 20 years ago, 25 years ago, I’m imagining if I’m hearing impaired or I’m blind, you have probably clunky big devices, if you have anything at all to help me navigate the world.

Bet: Right, and actually all of those things, a lot of those kinds of tools that we depend on today, all started out as. Tools for people with disabilities, like the AI stuff, all of the Google Home and Alexa and all of those things. All of those things really started as kind of, um, tools to help people with disability and then kind of cross over into the mainstream.

And really there’s kind of a parallel when you make your website more accessible. You’re really improving the user experience for everybody, right? And I sometimes call that the curb cut effect, right? Curb cuts are originally for wheelchairs or, you know, carts, mobility carts. But we all use the curb cuts, right? When we’re biking or using strollers or dragging our luggage. And so, you know, You know, it’s a it’s a way that you can improve that user experience for everybody.

Rob: Yeah , if folks listening or watching. If you have a question, please pipe that into our slack channel at microcom on air. Producers and or will bring those questions.

And it’s always good to have audience participation while we’re waiting on on questions. Um, accessibility on the Web, especially Has been, I know there’s a lot of overlap with SEO.

Bet: Yes.

Rob: You want to talk us through that?

Bet: Yeah. So, uh, a lot of what makes, uh, websites accessible in terms of things like alt text on your images or your proper heading structure with your H tag, so one and one only H tag, H one tag, and then properly nested all the way down, you know, all of those things are also things that Google is using for, and other search engines for.

Ranking your site. And so when you do accessibility, right, in terms of putting all those other things together, all of the schema pieces, all of those all get pulled into screen readers and keyboard navigation for, for accessibility. So, you know, when you make your site accessible, you’re almost always definitely improving your SEO as well.

Rob: And, uh, you know, you, you had mentioned something about, um, the opportunity of having accessibility, improving your churn, your churn rates. If you’re, let’s say you’re a SaaS app, uh, where folks can cancel. Talk me through that.

Bet: Yeah, so, um, we know that statistically disabilities increase as people age. You can think about that.

Just even like vision related changes, but all kinds of other, um, disabilities. You know, as you have more exposure, you can have more accidents. You can, you know, lose a hand or, you know, all kinds of things. So, disabilities increase as people age. So, making your site accessible, I mean, is in a sense an investment in your current customers.

Right? Your current customers can stay with you as they develop disabilities because you’re making it accessible.

Rob: Got it. Yeah, that makes a lot of sense. Looks like we have a question from, uh, someone in the audience. What are some of the biggest mistakes you see people, um, make? The biggest mistakes you see people making when trying to make their product accessible.

I’d imagine the big one is they don’t.

Bet: They don’t, right, they don’t at all.

Rob: Yeah, if you think about it, So maybe aside from that, yeah,

Bet: They don’t at all and then the next one I mean i’ll talk about some of the specifics about accessibility But the other one is they they wait until the end to tack it on and then it’s really hard to go back and kind of retrofit things things.

It’s easier if you’re starting and building things out to think about accessibility from the beginning in terms of even things like color choices for your design that are going to be good for making the correct buttons and color font contrast, right? So things like that that are harder to change once you get them established.

Um, so, uh, you know, it, it’s, it’s, it’s It doesn’t sound like that, but then once you have collateral, I mean, you know, it starts to add up. So you, you want to definitely think about that going, going forward. And then all of the coding. Common places for where people could make a quick impact are, um, going to be all text on your images.

Not all images. I mean, you got to read on that. If it’s a decorative image like a spacer or a divider that doesn’t get an all text text, but it gets all, you know, just has nothing there, but but all text on images properly nested H tags and then color contrast with your fonts. Those are the kind of the big three.

If you take care of those, that’s Generally speaking about, uh, I would say You know, 75 percent of all of your accessibility issues. The one thing to watch out for, though, is there are, uh, well, a couple things. One is there are automated AI devices that will let you test your website accessibility. You could put your URL into an automated tester, and it’ll spit out kind of a great or, you know, give you a list of those issues.

Those automated AI testing only catches about 30 percent of accessibility issues. So, you will always want to go back because a lot of the accessibility guidelines and things are really context driven, right? AI Can tell that you do or don’t have all text on an image, but it can’t tell whether that’s really good.

All text right is the all text. You know, JPEG 54693, that’s not accessible, really, right? Is it, uh, is it got, uh, alt text that’s really giving context? So only about 30%. And then, um, for many sites, there are growing, there are growing SaaS companies that are putting what’s called overlays on. So they purport to give you, you know, one line of JavaScript or, you know, a plugin on your WordPress site, and they will make your site accessible.

Well, those sites. Are driven by that AI. So they’re really only catching that little bit and they’re, they’re really marketing, they’re playing on people’s fears about lawsuits, but if you read the fine print, they don’t stand behind. You went on the lawsuit piece, right? There’s a lot that’s on you in terms of, of, of that compliance.

Overlays often also clash or, or, uh, create conflicts with the existing tools that disabled users already have on their machines, rendering neither of them functional. So they often can make things even worse. There’s a great website called OverlayFactSheet. com. That explains how all that works and that’s that’s a really great place to start.

Rob: That’s cool. So I like that summary I was gonna ask you, you know, what are the two or three things that people should focus on and then you know You just laid those out Let’s see Yeah, so um

Bet: We talked about a lot of things. I mean one of the things we haven’t talked about yet is that you know making your Uh, your platform, your SaaSs, your website accessible can really be an investment in your own brand.

So there’s a lot of, um, uh, studies show that around 60 percent or more of buyers will be values driven buyers. So if they have two choices and they look, they could, they will either avoid or, or, or buy from, a particular vendor based on the values that are being shown there, right? We want to buy from the local people who are supporting our community, or we want to, we’re going to boycott, uh, the, the company that uses a sweatshop, right?

And so with those values driven buyers are huge. And so if you have competition, that’s doing the same, making that investment in making your site more accessible says that you want to be more inclusive. Right?

Rob: Yeah.

Bet Hannon: And it’s not just inclusive of people who have a disability, but if I If I have a friend or a family member that has a disability, then I care about how they’re treated in the world.

Rob: Right.

Bet: So for example, uh, several years back, um, I sent a, a Calendly link to a blind vendor that was going to help a blind contractor that was going to help us on a project. Yeah, to schedule with me and she had to get back to me to say she couldn’t use that link because it wasn’t accessible. The calendar picker was not accessible.

So I got back to them and I learned that it was a problem that had been identified for them. They knew about it. They were they said they were had something in progress. Now that’s happens a lot. You’ll hear back Oh, yeah, we have something in the works and then it You know how it is with SaaS companies, right?

It’s not a high priority. It takes a long, long time, but pretty fairly quickly within a few months, they came back and they’re not, you know, Calendly is n’t perfect with accessibility, but it’s now usable. Right. But if I, if I didn’t feel like that was the best choice and going to be accessible for the people that I care about, I would have. Found a different vendor, right?

Rob: Right.

Bet: I would have gone to something else, right?

Rob: Right.

Bet: And so those kinds of value driven pieces can give you an edge in the market too. It’s investment in your own brand. And typically we see that when people put like an accessibility statement on their website or their SaaS. And it typically says, yeah, we want this to be workable for the most people.

We’re trying to, um, use the Um, website content accessibility guidelines WCAG 2. 1 at the standard and then let us know if you have problems because in reality, it’s, you know, I would say, It’s, it’s not realist. No site, no platform is probably 100 percent accessible.

Rob: Right.

Bet: And it’s a journey. You’re always improving your accessibility. Um, and, and it’s impossible when you start thinking about it to, when you start talking about people with multiple intersecting disabilities. Right?

Rob: Right.

Bet: Right, so there’s, It’s really hard to accommodate. You can’t even begin to think about it. For every edge case of that. But you can, if somebody comes to you and says, Hey, I need, I need transcripts with those videos.

Well, maybe that’s something you can figure out. You could do it.

Rob: Right. How do that? I mean, you know, you said no one’s a hundred percent, um, accessible, which makes sense, but like, how did some of the big players like Google, Facebook, Apple, you know, how do they do on there just with their, maybe their web apps?

Like, have you looked, ever looked through their sites and thought to yourself, they do a pretty good job or is it like,

Bet: You know, I haven’t looked at those actually.

Rob: Okay

Bet: I do look at people’s websites for accessibility when I visit them

Rob: Sure.

Bet: You know, and we we look at things Uh, I it’s kind of like, you know, when you encounter another SaaS app you look at how different it’s kind of a little quirk

Rob: Well yeah, That’s what you do day to day, right?

You’re thinking but those

Bet: those big companies like google and microsoft and app they have accessibility experts in house trying to work on on things.

Rob: Sure, sure.

Bet: So, um, it’s, it’s really the harder, the smaller to medium size companies that really have a struggle.

Rob: Yup. Yup, yup, yup. Um

Bet: But you can get, I mean, the, the way that you can work on this is, I mean, you can, you can do some reading, you can do some learning and there’s the standards you can read it’s documentation.

Rob: So that’s what I was going to ask is where, but isn’t it like if I were a developer and I’m like solo founder, barely scraping by, I don’t want to read, But I, but I might be open to reading like a summary, you know, or like here are the top five or 10 things. Do you know of a good resource online that you could send people to, to be like, Hey, this is the 80, 20 of it?

Bet: Well, partly, uh, it’s, there are some good, um, you know, Webinars, presentations, you know, we’re recordings of some of those that are kind of some of that basic piece. And we talked about those three kind of big things at the beginning, but of three things you could do. So some of it is like starting to take care of those things.

Um, but also you can go to D eque – D E Q U E. com. And they have, um, they are services company, but they have a learning section and they, they will go to a bigger companies and do kind of, training for all their content creators, but they also have some on demand courses and the on demand courses are pretty good.

They will help you get a better sense of, you know, what is accessibility? How does it work? And then, uh, there, they offer some of those training pieces for folks that are getting ready to take the exam, but they can be very helpful for folks that are, um, you know, just wanting to get their feet wet a little deeper in terms of the development. pieces of that. Um, you know, another thing that you can do is, uh, and this is when you have a little, little more revenue, right? When you have some money to spend on it, and that is you can get what’s called an audit. And so an accessibility audit, if you’re going to have them do every single URL of your website or every single view of your app, that can get super expensive.

And so typically what you see is, you know, Something that’s called a sampling audit, so you’re going to look, you’re often able to get 10 or 15 or 20 views audited and you can extrapolate from there. You know that if it has a this particular layout in this format has a problem, then it’s all way. All of those type are going to have.

Rob: Right, right.

Bet: So that’s a way to get some feedback and an audit. Should not just include some automated testing, but it should have some human testing by trained developers and or even people with disabilities, and it’s going to give you an exhaustive report of what was checked and what you need, you know, what are the violations and what do you need to fix and the best reports are the ones that are going to give you kind of just some also in terms of kind of almost consultation and advice.

You should work on this first. This is the most important problem. These other things need to be taken care of. These things can be done without it. By someone without technical experience, right?

Rob: Right. Yeah, that’s kind of nice. Would you, how comfortable would you feel if we pulled up the microconf website and you just taking a peek at it and saying, Oh, here’s where you’re doing well.

Here’s where you’re not. We’re on Squarespace. So we are limited in like our page speed is not great. And there’s just no way around it with Squarespace, but I’m sure that there, there have to be some kind of low hanging fruit. Maybe some things we’re doing well and things we’re not doing.

Bet: Yeah, can I share my screen?

Rob: I don’t know. Yeah, there’s a share button.

Bet: I’ll Show it to them. Yeah, okay. Sharing tips. Well, uh, it says two monitors, but I won’t do that. Share screen.

Rob: Okay. Because you need to actually be able to hover over, right, and see that.

Bet: Microconf.

Rob: So producer, Xander, if you can, I don’t know if you have her screen, or.

Bet: Oops. Isn’t it microconf. com? Yes. Is that not working? Microconf. com. All right. Do you see my screen? Yeah. All right.

Rob: It’s not showing up as a shared screen. Producers. Andrew says, so maybe he, it looks like he has, uh,

Bet: Oh, wait, wait, wait. Hang on. There we go. Share. Now you got it?

Rob: Ta da looks great. Okay.

Bet: Um, there is a, um, a, uh, a Chrome extension for a call, uh, for wave.

So wave. webaim. org. Is a, uh, it gives one of these automated accessibility tools. So this is an automated tester, right? And so it comes up and the thing to know about these automated testers is a, they only get 30%, but B, sometimes there are false positives and false negatives. Sure. So, um, so you’re, you’re looking at that.

And so the big thing when we’re looking right away is some contrast pieces, right? So, uh, the, the white on the yellow doesn’t meet contrast. Um, ratios, like you’re looking at the ratio between the, the, the yellow goldenrod background and the white font, and it doesn’t meet the minimum ratios.

Rob: 1.85 to 1, what should the ratio be? Minimum.

Bet: Right, you know, can you make it, whoops, that’s lighter, right, can you, it’s, it depends on the size of the text down here, right, you know, so, right, so you could get, you It could get darker, but you know, you got it, you’ll have to play with it, right? In terms of what the design piece, but you just know that that’s not, and exactly, and this is probably not this, uh, whatever this is up here.

Yeah, well that’s, yeah, maybe it’s only the goldenrod. Yeah, looks like it’s mostly just that goldenrod on the way. So you might switch that to black, and it might be fine because you can see down here, this is okay, or the dark gray, right? You know, you can see that that’s okay. So maybe you just want to, instead of white on things, you just want the black on things.

That would be quick fix. Right? And so then also it’ll help you look at your structure. Um, you know, um, right away you got one H1, uh, well you got two H1s it looks like. So you want one and only one H1 on the page. That’s the page title in a screen reader, right? And then you want everything under that. So maybe this gets bumped to an H2 and all of these to H3s, right?

Um, And some missing alt text on images, um, contrast, suspicious altered text. I don’t know what that means.

Rob: That’s funny.

Bet: I don’t know. But, uh, I’m not sure what that means. Anyway, then you got some, you know, some checks, you got some, uh, things are working well here.

Rob: Some grades, flexes. Yes.

Bet: Yeah.

Rob: Yeah. I mean, the designers who did this are pretty, they’re pretty sharp and they are accessibility aware, but I, you know, it maybe wasn’t the, like you said, no, no one’s a hundred percent, right?

Bet: Yeah, exactly. Exactly. So.

Rob: That’s cool. Awesome. Well, yeah, thanks. Thanks for uh, thanks for running through that and thanks for

Bet: Well thanks for being willing to do that because that’s kind of Like, you know, it’s kind of a vulnerability.

Rob: Oh! totally because it could be a unmitigated disaster But I had I had confidence that we’re at least you know We have some something in place to to do it So if if folks want to keep up with you, you are Bet Hannon on twitter B-E-T H-A-N-N-O-N. And your website URL is

Bet: bhmbizsites.com

Rob: bhmbizsites.com. Yep. Awesome. Thanks so much for joining me today, Bet.

Bet: Yeah, you’re welcome. Thanks for having me.

Rob: All right. As we roll out, um, thank you to Hay and Stripe. They’re our headline partners this year and next year. If you’re watching this on YouTube, please, seriously, like and subscribe.

It’s cool. This video was good. You can like it and you can subscribe. It’s good to see you this week. I will see you again next week for another amazing episode. Bye.

[End of transcript]