Episode 129: Talking Website Accessibility with Colleen Gratzer

Episode 129 Talking Accessibility with Colleen Gratzer

00:00

Hey al Robert Cairns here with the STM show. In today’s episode, I’m joined by my good friend Colin grasser. And we sat down we talked about accessibility on websites, why accessibility compliancy matters and what it really is. please grab your favorite drink and sit down listen is very informative episode.. I’m here with my friend Colleen Gratzer. I hope I didn’t butcher it too much, and how are you today?

00:44

I’m great. How are you?

00:45

I’m doing good. So today, I thought I’d

00:47

be on to talk about a subject that, especially if you’re in the nonprofit space you got to look at, and that’s accessibility, eo da compliancy. That kind of stuff. And where it kind of came from was, I’m now working on a contract for an organization in, in Ghana that’s very much LD compliant. And it’s one of the big pushes, I’m not directly involved, but I thought it probably a good topic to talk about. So tell me a little bit about yourself in your background.

01:19

Well, professionally speaking, I’ve been in the design industry for almost 25 years. And my background is in branding, print and publication design, and web design development. Like I mean, I’ve done all that stuff. I don’t still do all of that. But I I started my business, my client based business, which is graphs or graphics almost 20 years ago, and I was doing pretty much any kind of design work until five years ago when I got into accessibility by accident. And it’s actually led to some amazing opportunities. Like I’ve provided accessibility training to the US Department of the Interior. I recently presented at the creative pro InDesign and accessibility summit. And I presented at WordPress accessibility day, and for WP Elevation. And I’ve also talked about accessibility on several podcasts, too. But then in 2018, I started my creative boost business. When I started my design domination podcast. And I wanted to pivot to mentoring and teaching designers about business becoming a better designer, but also about accessibility.

02:25

Yeah. But then, and a lot of designers aren’t good at business are they like it? I’ve seen a lot of amazing designers. And I think where they lack honestly, accessibility aside is the business side of it to great designers, but they don’t know how to do the business. I’ll know how to do business. I know know how to do a contract, you’ll know how to do billing. And it goes on. Right?

02:49

Right. Yeah.

02:53

And then like, you know, personally, I do a lot with animal rescue. I don’t know if you’re a well, actually, you

02:59

have a dog, don’t you? We have three Chihuahuas and tuber rescues, and we had a cat and we just lost him in December due to cancer. And he was he was a rescue. So yeah, we we very much. My wife, Jill is very much big into rescues. Yeah.

03:16

Oh, that’s awesome. Yeah. So we do, we’ve always done a lot with rescue, like adoption, fostering, and that kind of stuff. And yeah, so yeah, and I actually have a cafe praesent Zazzle store where I have my designs on products, and people can buy them, and I donate the proceeds from them to rescues. So

03:32

that’s amazing. Giving back is really important. So why is accessibility so important these days?

03:39

So many reasons. First off, about one in five people have a disability. And some people might actually have more than one disability. And so when developers and their clients, right, when they’re not considering 20% of their website, visitors, it’s coming across as well. We don’t care. And would it? Could you imagine like saying to a client, well, hey, I’m gonna build you a website, but only 80% of people might be able to get around it, or read the content on it. Right. And that’s essentially what’s happening. And that’s not even taking into consideration. usability issues. For people that don’t have a disability, like white text on a yellow background. You know, I see that a lot still. Really small, light gray text, or maybe hyperlinks that, you know, they don’t stand out. So you can’t tell what they are from the body text. I mean, your

04:35

your cost, something simple, like a 12 inch point font on a website. Yeah. And with many of us having eyesight, like, that’s something that stands out right away. Right.

04:46

Yeah. I mean, you don’t even have to have a disability to have issues with some of the design decisions that you see being made on websites. Yeah. And, but it’s not just a visual issue too, right. It’s it’s functional. But also, you know, what a lot of people don’t understand is that what’s good for accessibility is good for SEO. Alright, accessible sites. Yeah. So accessible sites are leaner, they leaner, they’re leaner in terms of code, they use the proper code. And so they have faster load times. And when you’ve got faster load times, that’s going to give you a boost with Google, at least with the search engine rank. And, you know, when you have someone on your site, you don’t want them to leave.

05:26

Yeah, I agree.

05:29

I mean, so I so agree, and I think the problem, you know, good designers too, is a really good designers. And they design sites, a lot of them that are functional for them, and look really good for them. And they forget what the website viewer wants in a website. And yeah, and to me, the two things that come right off the top is how do I get around the website? And how do I get information quickly?

05:56

Right, exactly. And this becomes a business problem, because 71% of people with a disability who go to a site that’s not accessible, they’re gonna leave. And you know, whether it’s someone with a disability, or someone else that’s leaving someone without a disability, I mean, what happens when you have a negative experience with a company, right, you go and tell others about it. And so becomes a reputation issue, you know, good or bad, right? Because a business can get a bad reputation if the site’s not accessible. But if the site is accessible, that business would get a better reputation and get a competitive edge over, you know, other people in that same space, you know, where they might get the click from the search results page, that the other, you know, the other company is not going to get? And so accessibility is good for business. And it’s good for branding.

06:43

No, I would agree. Um, legal requirements for accessibility, certain industries have to go there nonprofits for one. Believe it or not, you’re in the US. I’m in Canada requirements are pretty similar up here to

06:58

talk about those a little bit.

07:00

Yes, I have to preface this with of course, you know, I’m not a lawyer. And I don’t play one on your podcast or on mine. But, yeah, I mean, countries, and states might have specific accessibility laws, you know. So in the US, we’ve got section 508, of the Rehabilitation Act of 1973. And that applies to the federal government, federal agencies and contractors, and employers, but also nonprofits or schools that get any federal funding. You know, like, I’ve had nonprofit clients who get federal grants for certain projects, and those projects need to be accessible. And that could be a website or a document. But you know, not everything they produce necessarily has to be accessible. And then, you know, there’s also the Americans with Disabilities Act. And that’s, that is usually applying to certain private and public entities. And that’s where you hear about all the lawsuits. And that applies to certain businesses of certain sizes, like schools and banks and accountants, lawyers, doctors, offices, hotels, things like that. But then, like statewide, you know, California has their own law, Ab 434. And they’ve got the Unruh Civil Rights Act. And like you said, Canada’s got the ADA, or Ontario has the ADA, but Canada’s got the accessible Canada act. Yeah. You know, and then in the UK, they’ve got the Equality Act of 2010. And Australia’s got the Disability Discrimination Act. And so each country’s got their own different law about that. And, you know, then different jurisdictions within that. Yeah,

08:40

it’s a bit of a, and the laws are pretty consistent. I know. Like, yeah, I know, typically, in the States, as a rule, California is usually tougher than tough, right? Yeah, laws like that. We’re in Ontario, where and federally we’re not far behind California, we can we can go a little bit on the harsh side here. So that it has its challenges, to say the least. So let’s move on to and we’re gonna preface the next couple of questions into parts. We’re going to talk legally, and then we’re going to talk usability and like, who does it serve? So the first question is, who does accessibility apply to?

09:21

So you’re talking legally first?

09:23

Yeah, legally, first?

09:25

Well, I mean, if you, if you’re, if you’re dealing with at least in the US, you’re dealing with the federal government, or producing anything for them. As a contractor or an employee, you know, you have to comply with the section 508 law. So all those laws that I just mentioned, if you do work for any of those kind of businesses that fall under any of those laws, or if it’s a federal government, then that’s usually you know, what you have to do, but the laws don’t tell you how to comply, they tell you who has to comply. So like a lot of the laws will run Friends, the Web Content Accessibility Guidelines, which we call WIC ag for short, though, they might reference those and say, Okay, well, you know, we’ll consider a site compliant if it means, you know, wic egg 2.0 or 2.1, double A, right, you’ve got the version of WIC ag. And then there’s three levels of conformance. A double A and triple A, and the typical one to meet is double A, because like triple A is really rare, but it’s very strict.

10:27

And usability wise, who would you who does it serve accessibility? Pretty well? Everybody,

10:33

right? Oh, yeah, it definitely applies to everybody. But, I mean, I have found that a lot of designers and developers think that accessibility is all about, like, they think wheelchairs and blindness, right when they hear the word. And a lot of them will say, well, I’ll just develop the website, and then I’ll test the site with a screen reader. But the problem is that, Okay, first off, at least in the United States, visual disabilities make up the smallest number of all types of disabilities, right. And blindness is only one type of visual disability. There’s also colorblindness, which is more common in males than than females. And there’s low vision, which might be caused by macular degeneration, diabetic retinopathy, or cataract, okay, and then someone with a visual disability might not be able to make out hyperlinks from body text, they might have difficulty reading the body text or headings, because they’re too light, like we were talking earlier. Sometimes, though, you know, maybe they can’t read it, because the text is too is too dark against that dark background. And, you know, and then outside of that there’s auditory disabilities. So you’ve got deafness and partial hearing loss. And then there’s also neurological, cognitive and learning disabilities, multiple sclerosis, cerebral palsy, dementia, dyslexia and stroke. But you might have someone with epilepsy, too. And they might suffer a seizure, from content on the site that flashes or moves. I mean, I don’t have epilepsy, but I wouldn’t appreciate that either. You know, me sick. Yeah.

12:10

Nor me, and it’s one of the reasons, I was so glad to see Adobe Flash bury itself. Four days ago, good, riddance to that one. I mean,

12:21

even even some sliders on sites, they move so quickly, they make me dizzy, right when I get to the site, and I have to, you know, scroll down past them quickly. But then, like other disabilities could be like someone, someone’s maybe had a traumatic brain injury, and they have problems with certain reds. Someone with dyslexia might have trouble comprehending the page content because of the color choice and the font choice. But then there’s also the category of ambulatory disabilities, you know, that could be chronic arthritis, it could be a lost limb, a broken arm? Because, yeah, I mean, you could have a temporary disability, it’s not necessarily permanent. So, you know, things like that, you might have somebody that can’t use a mouse, you know, so it’s like, we need to think about, we need to think about not just how we’re using sites, but how, how other people are using them, too. Yeah, I

13:14

would agree. The biggest, we were talking earlier, the biggest mistake I think designers make is they’re really good designers. And they look at website and they say it looks pretty, but they forget about the usability, they forget about UX. So experience, they forget about things like accessibility, and they forget about what to person coming into website wants to see. It’s not about you, it’s about what do people want to see? And they make that mistake all the time. So

13:42

right. And, you know, that’s a great point, because designers do do that. And what good is design, if it’s not usable? I mean, the whole point of graphic design is not to create a pretty picture that you’re gonna hang on the wall, it’s got to be functional. And if it’s not functional, it

13:57

fails. It’s a balance between functionality and what looks pretty and I think sometimes they need to, to sort of, you know, think about that. So let’s move on and talk about things you need to do to make your website accessible.

14:11

So many things.

14:12

So let’s start with some basic, bigger font size would help. Right? That would be one that would,

14:19

yeah, and I mean, the thing with the thing with the font size, a key thing with the font size is you don’t want to set it in absolute measurements, like you don’t want to use pixels, is better to use a relative measurement, like REM M or percent. That can actually help people who might be using assistive technology help them to increase the size not interfere with, you know how they would do that. But I mean, you first off have to, of course find out you know, if there’s any laws that apply, and which ones because you know, like we were saying earlier, it could be there could be a country law, but then there could be a state law and the state law might You know, it might have the same requirements or it might have additional requirements that you have to pay attention to.

15:07

Yeah, it’s true. And, you know, we both play a little bit in the WordPress space. Do you have any tools for plugins or themes that make doing this job a little easier?

15:19

Yeah, I mean, the accessibility ready themes can be a good place to start. But you know, some of the accessibility ready themes, they’re just, none of them are 100%. But some of them are just not good at all. Like they, some of them have issues with the menu. Some of them don’t even have the proper color contrast with the preset colors that they have on the site. I mean, sometimes there’s change, sometimes not, I guess, but you know, so those are big issues. Because if you have an accessible theme and the menu isn’t working, then somebody’s not gonna be able to get around the site. You know, that’s a big problem. And in terms of plugins, I mean, there are some good plugins that can help you find issues. But the thing with plugins, and then with automated checkers is that they’re only going to detect about 25% of issues. I think it’s like the rest of them have to be manually checked. Joe Dolson has a few plugins that will help find some issues. There’s one that I don’t remember if it was the, there’s a definitely a plugin by this name. But I don’t remember if it’s the one I’m talking about. But the WP ADA compliance check. Okay. I think that’s the one that helps you modify alt text, in bulk. But I think it also will change the alt text in the images in the media library, but also where the images are on the page. I could be wrong about that. But I did see one that does something like that. And there are browser extensions for checking some of the automated stuff, you know, again, that’s like 25% 20 25% of issues. And I like to use those to check some of the things that are more cut and dry, like levels of headings, right. And then color contrast. And then the presence of alt text, because a lot of these things can check if there’s alt text, or if there’s an alt attribute, right? Because you’re it’s okay to have empty alt text. And some images should have empty alt text, like decorative images should, but you have to have an attribute on there. On the image tag, you know, everybody likes to call it alt tags, it’s not a tag is an attribute on the image tag.

17:44

People just do it because they can.

17:48

And so for this, I like to use WAV x, and totally and totally is to T A one, one why because a one one y is the abbreviation for accessibility. Okay, and wave and x will explain the issues that they find. So if you’re still learning, that’s really helpful. But again, the tools are just the start, you know, and they’re not perfect, and some are going to detect things that another one might, and some are going to give false positives, so they’re not perfect. And you really have to know, you know, when you’re getting a false positive or not, because you could go in and muck around trying to just get a, you know, an error to clear on this checker. But there was really nothing wrong to begin with, you know, and so, you know, you don’t want to have to do that if you don’t have to. But, you know, back to what you were saying about what else can you do to make your site accessible? You know, follow the WIC hag guidelines, you know, but those are kind of like a starting point, those are minimal. And technically, you could follow the WIC ag guidelines, like go down the list of them and say, Okay, well, I think I’ve met all of these, and you could end up with a completely inaccessible site. Yeah. You know, some of them are cut and dry, like color contrast. It’s like, okay, it’s got to meet this requirement at this size, or it does it, you know, yeah. But then some of them are vague. And a lot of them are really confusing. But the whole goal, because I think a lot of designers missed this, the whole goal is not to satisfy with CAG. It’s to create an accessible site, it’s to create a very good user experience. Yeah. You know, for everybody.

19:29

Yeah. And it’s all about the user experience. And that’s what many Yeah, absolutely.

19:35

Yeah. So you know, you can check color contrast to and, you know, alt tags on images is a big deal. But a lot of people don’t think about downloadable files on the site. You know, if you’ve got PDFs on the site, oh, yeah. Those should be remediated.

19:52

Where, as I say, the organization, I’m working for them. One of the big discussions I was in in a meeting today or yesterday. Yesterday, and they were talking there a couple of web people were talking about making sure to PDFs are accessible. And there’s lots of discussion around that. And and people say, Oh, it’s just webpages. No, it’s every piece of content that is on the website.

20:18

Right? If it’s on your site, you’re responsible for it. And you can even the I don’t know if this goes with all accessibility laws, but there are some accessibility laws that will say, you know, if it’s on your site, like you can’t, I think it was for a website, I did a website audit, I think it was in the UK. And the UK law said, You can’t put any third party stuff on your site, and then just be like, Look, I’m not responsible for that. It’s even though it’s not accessible, so I don’t have to deal with it. It’s like, No, you do you absolutely. Do.

20:48

Yeah. Yeah, you gotta know what’s on your site. And, you know, the old adage, the ignorance to the law is no excuse hold straight, it’s gotta be, it’s gotta be managed. So

21:00

well, that brings up a really good point, which I see a lot from a lot. A lot of people on Facebook groups talking about this. Anytime somebody brings up accessibility at Facebook group, there’s always some people that jump in, and they’re like, oh, get such and such overlay, you know, and they’re reselling these overlays, and overlays are, okay, they they tout themselves as this silver bullet to accessibility, just go and install this line of JavaScript, and, you know, poof, your site’s gonna be accessible. And that’s not the case, because they actually don’t, first of all, they can’t detect all the errors right there. They’re only gonna detect stuff that’s automated. Okay. So again, it’s like, they can tell you if your images have alt text, or don’t, are they gonna say it’s the right alt text? Maybe some of that maybe some all texts shouldn’t be there, right on some images. The other thing is that they, they force you to, like, if someone’s using assistive technology, and they go to a site with an overlay, they’re being forced to use that overlay that proprietary interface that they’re not necessarily familiar with, right? Because it’s only going to be on so many sites. It’s not like when you’re just using a mouse. And that’s what you do to go around to all these different sites, whatever, you know, whatever site you want to. And so you go to these sites with overlays. And now you’ve suddenly got to start using their proprietary interface. It’s like, Okay, well, you’re you could come in our front door, but our door doesn’t work the same way a regular door would, right.

22:34

And that’s why consistency matters in doing it right matters is because if you have to use something like an overlay, then you’re changing the user experience again, and yeah, user experience suffers, then your site visitors suffer, your SEO suffers, and everything else suffers.

22:51

There is not changing anything in the page content. So it’s like, it’s lipstick on a pig. But the thing is, is that the sites have these overlay companies have so many accessibility issues. And then you go to it’s like, Okay, what could be that? because that’d be a fluke thing. I mean, if this is what you’re doing, you know, and this is your proof that it’s working, that’s not working, you know, and if you look at their client sites, I mean, because I’ve gone in, look at that, you know, I’ve looked at a lot of them, go look at those Klan sites, they’re full of errors, too. And they’re using their overlays, you know, so the other thing, though, is that they can introduce other accessibility issues in the process, too. So I mean, they’re just, they’re a false sense of security. And so many web designers and web developers are reselling these and, you know, the terms of service with a lot of these overlays say that, you know, they’re not going to pay your legal fines and fees. For and that’s one and two, that you have to have like a perfectly coded site from the beginning. like to start with before you put this on there. Like there’s all kinds of fine print. And I don’t think people are reading that. And they really have to, because I’m telling you, I have heard stories from my colleagues in this accessibility area, right. And I hear from other people who are doing audits and stuff. And they are they’ve got clients in the US. And they worked with a developer that didn’t talk about accessibility didn’t build them and accessible site, that business got sued. And they turned around and went after the developer, you know, and legal fines and fees are going to be anywhere from like $1,000 to $100,000. And that’s per claim. And if something happens, it doesn’t mean like, Okay, what, you can’t just say, Well, you know, we’ve been given six months or a year or whatever, to make our site accessible. Somebody else can come along in the meantime. So it’s like, every site is kind of like a sitting duck. I mean,

24:51

yeah, it’s, it’s true and, and what I’ll say is one of the worst things web developers don’t do. They don’t have a catch all clause in their content. saying they can’t be sued, do the functionality on the website, they shouldn’t. Right? I know, when I used to build a lot of sites, either I’d have a catch all cause. And it basically said, You can’t sue me if there’s problems with site, you can’t sue me do the legal application saying you can’t sue me if the site goes down, go away. And they have a word they just, and and frankly, many web developers still insist on working without a contract. And I, I won’t even go down that rabbit hole like,

25:28

Oh, yeah, yeah. Yeah, I mean, but the other thing too, is that, you know, with overlays, you’re avoiding addressing the issue. And you really, when you’re building an accessible site, you really need to set your your clients up for success with accessibility, because if you just design it and put it up, you can’t just slap an overlay on it, okay? But you just even if you design an accessible site, and it’s accessible without an overlay, it’s not going to be like that all the time, you know, there’s always going to be somebody going in there and changing content, something could happen. So it’s not a set it and forget it thing. And like, ongoing compliance, you know, it really needs to be done. And, you know, and also like periodic screen reader and keyboard testing, you know, it’s essential like before, like, before you launch while you’re developing, but also, like, periodically, you want anytime you’re introducing new functionality to the site, as long as it’s not an overlay.

26:23

And get somebody, don’t do it yourself, get to know who uses the screen reader on a regular basis to do the testing for you. If you can, like really,

26:33

well, that’s good. But you also need to make sure it’s a sighted screen reader user, because not not, it’s not just people with blindness, that use screen readers, there are cognitive people with cognitive disabilities that use screen readers too. But having somebody who is a sighted user with a screen reader goes to the site is important because somebody without sight isn’t going to know what they’re missing. That is true, you know, so they could go through it and go, Okay, this was great, but they don’t know if they’re missing anything.

27:02

It is true. So true. Any more quick tips and tricks you have in your in your tool basket?

27:10

Well, I definitely recommend that you get a good understanding of the various types of disabilities, and also assistive technology, and also screen readers. Because, you know, on the PC, you’ve got NVDA, and you’ve got jaws are the two most popular screen readers. And then for Mac, we’ve got voiceover, it’s not as great as the other two. But you know, it’s kind of like with with web testing with browsers, each screen here is a little bit different. They’ve got some different settings on them. And so you really have to do a lot of testing, you can’t just like, do it with one and call it a day. And then, you know, something else

27:53

is,

27:54

you know, with it when it comes to CSS, like I already mentioned, like font size, but when it comes to CSS, something I see a lot is when you use the important attribute or whatever you want to call it. And that is that sometimes overrides some functionality that might be on the site that you have, you know, that helps people that may not be using assistive technologies, like for instance, I’ll install a very lightweight, it’s web accessibility. Not if there’s a web accessibility helper, I think it’s the web accessibility window, not the helper one, but the other one. And it is you can put like a toggle for contrast, toggle high contrast, and then the regular colors on the site. And then also the text size. So somebody who’s not using assistive technology, who doesn’t know how to resize text to the browser, you know, that would come in handy for them. But if you put that override in the CSS sometimes, you know that prevents those things from happening. Yeah. But if you’re, if you’re doing really good development, you should have very few if any of those importance in there.

29:07

That is true. But there’s a lot of people not writing good code into development. So we know what that rabbit hole causes don’t we

29:15

write clean code is very important.

29:19

So a couple things you’re working on. You’re you’re working on a course, which you just launched, right. And tell him tell us a little bit about that course.

29:29

Yeah, so I have two courses. And the one that I just launched is geared towards logo designers, and graphic designers, web designers, designers that aren’t getting too much into the Dev, and that’s called accessible branding, and design. And so that is going to be that encompasses all kinds of design and incorporating accessibility into it. And then I also have a course called foundations of website accessibility. And that is specifically for web designers and developers. And, yeah, I’ve gotten really great feedback on that from people who had, like, No clue about accessibility never done any of it before, and from people that took the course and they’re like, I was already doing accessible sites. But I, you know, I learned so much from this. So, it’s been, it’s been great to get that kind of feedback. I mean, I like I really love talking about this and getting it out there and

30:23

you do and it’s important so if somebody wants to get ahold you sign up for your courses, say, oh, ask a question, what’s the best place?

30:32

So okay, so the courses can be found at creative dash boost.com and then you can just click on courses in the menu, but then Mike for consulting work, I do accessible InDesign and PDF files, creating them and remediating them. And remediating means taking an existing file and fixing it to make it accessible. And then I also do a website accessibility audits and accessible website design and development. And that’s through my other company, which is graphics or graphics. And that website is graphics, or graphics.com.

31:07

Thanks so much for joining me today. Coleen, thanks for your insight. I hope it helps some people and yes, I think this topic is one of the most misunderstood topics out there. And, you know, I think it’s really important that some people understand what you’re talking about and get in touch with you. You’re approachable, and you’re always great to speak with. So thanks for your time and have a great day.

31:30

Thank you so much. I appreciate

31:33

a very special thank you to Coleen for joining me on this week’s episode. I hope you found the chat on accessibility now you understand what accessibility really means and that it was informative. If you want to see past episodes are get in touch with me please see my website stunning digital marketing.com you can reach me by email me at VIP at stunning digital marketing comm or tweet at me at Rob Cairns. I’m also on all other major platforms. This podcast is dedicated my late father Bruce Cairns and my wife Jill Mclean-Cairns. So I love you both very much. Please keep your feet on the ground. Keep reaching for the stars and make that business of yours succeed. Bye for now.