--- title: Accessibility date: 2021-02-16T05:00:00-05:00 author: Sean Smith canonical_url: "https://website101podcast.com/episodes/season-04/episode-5/accessibility/" section: Podcast --- <!\[CDATA\[YII-BLOCK-BODY-BEGIN\]\]>[Skip to main content](#main-content)![Matsuko Friedland](https://website101podcast.com/uploads/hosts/_200x200_crop_center-center_none/matsuko-friedland.jpg)Guest Matsuko Friedland Matsuko is the Lead Accessibility Engineer at Craft CMS, a flexible, user-friendly content management system (CMS) for creating custom digital experiences on the web and beyond. [ ](https://www.linkedin.com/in/matsuko/) Season 04 Episode 5 – Feb 16, 2021 39:21 [Show Notes](#show-notes) ## Accessibility  0:00 0:00 1.0x 0.75x1.0x1.25x1.5x2x [](//dts.podtrac.com/redirect.mp3/website101podcast.com/uploads/mp3/season-04/s04-e05-accessibility.mp3) We discuss accessibility, with Matsuko Friedland, in websites, why it's important both for users and website owners, as well as some tips on how to ensure your website is accessible. ### Show Notes Matsuko starts off by explaining what accessibility is and why it's important. We also talk about what a screen reader is and how a screen reader works. - Why should we care about accessibility other than the legal requirements - The three levels of WCAG compliance - Semantic HTML - Header Order is important - Accessibility is good for SEO - Color Contrast - Placeholder content - Pixel and Tonic, CraftCMS, selected by the W3C for accessibility ### Show Links - [Accessibility Why It's important](/episodes/season-01/episode-9/accessibility-why-its-important/) - [Curb Cut Effect](https://medium.com/@mosaicofminds/the-curb-cut-effect-how-making-public-spaces-accessible-to-people-with-disabilities-helps-everyone-d69f24c58785) - [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/WAI/GL/WCAG20/) - [Building the most inaccessible site possible with a perfect Lighthouse score](https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/) - [Empathy Prompts](https://empathyprompts.net/) - [Accessible Colors](https://accessible-colors.com/) - [Contrast Checker](https://contrastchecker.com/) - [Axe Browser Extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) - [Lighthouse Browser Extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) - [Accessibility Insights](https://accessibilityinsights.io/) - [Don’t Use The Placeholder Attribute](https://www.smashingmagazine.com/2018/06/placeholder-attribute/) - [Trackback](https://en.wikipedia.org/wiki/Trackback) - [W3C Selects Craft CMS for Redesign Project](https://wptavern.com/w3c-selects-craft-cms-for-redesign-project) - [HTML: The Inaccessible Parts](https://daverupert.com/2020/02/html-the-inaccessible-parts/) - [Accessibility Checklist](https://www.a11yproject.com/checklist/) Powered Transcript Accuracy of transcript is dependant on AI technology. **\[00:00\]** **Sean:** Hello and welcome to the website 101 podcast. I'm Sean Smith your co-host and with me as always is Mike Mella at the beginning of 2021 Happy New Year. Good riddance 2020 No doubt who's with me Everyone. Yeah, today we have a very special guest Matt Zuko Freedland and she is the lead accessibility engineer with pixel and tonic makers of our favorite CMS, Craft CMS. Matt Succo, welcome to the show. Hi, thanks. It's great to be here. **\[00:33\]** **Mike:** All right, so you are, well, actually, do you want to just tell everyone a little bit about yourself what you do at PixelAntonic, that kind of thing? Yeah, what is it, a lead accessibility engineer? **\[00:44\]** **SPEAKER\_00:** Well, I've been working as a friend developer for a number of years, and I've always had interest in accessibility. Now I'm helping Crafts CMS, Epic Slantonic update their Crafts CMS 3. So it's more accessible for content authors and then moving forward, we're still progressing with **\[01:04\]** **Sean:** accessibility and Craft 4 and future versions of Craft. Excellent, excellent. And you're located in British Columbia, right? Yes. Yeah. Fantastic. So we have an episode in season one where about accessibility that listeners may recall or want to revisit and it was called what is accessibility with guest Leah Alcantara and Emily Lewis. Mike was not with the show at the time so it was just me. Matsuko, could you kind of recap what accessibility is for our listeners and why it's something we **\[01:41\]** **SPEAKER\_00:** should care about? Accessibility, especially in terms of the web, I guess we're trying to remove the barriers to use our websites for especially for people with disabilities. So people, especially people with visual impairments are using screen readers, access websites for example. Yeah, we should care. I think the most important reason is it's just the right thing to do. You know, I think people kind of don't see this kind of a barrier between our website visitors and us. We don't really see them interact with our sites. So you know, if you had like a physical business and someone with a disability came in and you're just like denying them to come in, that would be sort of like, I don't think people would want to do that. But on the web, we kind of **\[02:32\]** **Mike:** just forget about it. Yeah. It's sort of like in if you had a brick and mortar store, you'd want to make sure that, you know, people who have wheelchairs or whatever can get into the place and actually use it. It's the same principle as that right? You mentioned screen readers earlier. So what can you tell us a little bit about what is a screen reader exactly? **\[02:55\]** **SPEAKER\_00:** So it's one of the many tools and it's a stiff technology tool. It's one that people, especially blind people, people with visual impairments, but also other people can use it. So we'll read out do sound, audio, the content of a website. And so people that can't see the website or maybe can't read it for other reasons, can you screen readers to read the content of the site? **\[03:27\]** **Mike:** Yeah, so they can kind of click through using their keyboard and it will read out the labels of buttons and read out the actual text on the screen, and stuff like that, sort of helping them through navigating it, right, that's basically what it's for. **\[03:43\]** **Sean:** Yeah. A text reader can also click through with just your voice commands as well, is that correct? **\[03:50\]** **SPEAKER\_00:** Yeah, I think there's a lot of different tools, and screen readers can also output to like a Braille display for other people. **\[03:59\]** **Mike:** Yeah, so you need to make sure that your website is built in such a way that it can work with a screen reader, right? That it understands what it's looking at, sort of. **\[04:09\]** **SPEAKER\_00:** Right. **\[04:10\]** **Sean:** Okay, so I'm running my business. I have my website other than the fact that, you know, there's some laws around accessibility. Why should I care about a minuscule number of visitors. I'm just devil's advocate. I'm actually pro accessibility. I'm just trying to play like somebody who doesn't want to spend the money or doesn't see the value. **\[04:40\]** **SPEAKER\_00:** Well, you know, it's actually not as small a group as a lot of people think it's something like 20% of I think Canadians that have some type of disability that affects their daily living. So we make accessible websites, you know, cover pretty much all of those people. It's like a fifth, one and every five people. Yeah. You know, might not be able to access at least a portion of your website. If it's not built with accessibility in mind. **\[05:07\]** **Mike:** Yeah, I guess especially if you consider that the breadth of disabilities that could people could have, someone doesn't have to be a blind person, they could just be visually impaired or someone like me who just often needs glasses to read small attacks to whatever, right? **\[05:23\]** **Sean:** or you know, somebody with motor control issues, like an elderly person who's got like, tremors on their hands, they might not be able to use the mouse easily. **\[05:32\]** **Mike:** Yeah. So that's the disability side and I'm sure we'll get into that more. But does accessibility help people who don't have disabilities to do things? I have some ideas into as far as how, you know, your website, if it's excessively built, it could help people even if they don't, they're not born with some disability or something. Any thoughts on that? **\[05:58\]** **SPEAKER\_00:** Yeah, I think it's a concept called the curb cut effect. Curb cut is the slope between the sidewalk and the road that was intended for wheelchair users to be able to cross the road. But that in turn also benefited people using strollers, people use careers with dollars, whatever, everything. So on the web, there's a lot of instance of that, for example, when we have sufficient color contrasts, that benefits people with low vision, but it also benefits people using a phone outside when the sun's glaring is reflecting back on. It's hard to see, yeah. **\[06:41\]** **Mike:** That's right. Yeah, they don't have to have any disability. Well, I was going to say, I guess this is technically a disability, but a temporary one. If someone breaks their arm, and they can't used their mouse, suddenly, for like a few months or whatever. **\[06:55\]** **Sean:** Coincidentally, I saw something on Twitter about a week or so ago about this guy who had that exact same issue for months. He was using a text reader to actually code. **\[07:06\]** **SPEAKER\_00:** Oh, wow. **\[07:07\]** **Sean:** Oh, really? Yeah. So not just browsing, he was coding with voice commands. **\[07:13\]** **Mike:** Man, that sounds like a very time-consuming process. **\[07:16\]** **SPEAKER\_00:** Yeah, it takes a while to learn. then once you have the skills that can be all as fast or faster sometimes those kind of things. **\[07:26\]** **Sean:** So Matsuko mentioned just previously the curb cut effect, which was something I hadn't heard of. And I did a quick Google search and I found a medium.com article, which I'm going to include in the show notes. **\[07:37\]** **Mike:** Awesome. Now, before we continue to do far, I wanted to point out this law that has sort of really come to maturity in Ontario where we are, Sean and I are based in Toronto. And there's now a law that basically says that if you have a website and your organization has, I think it's more than 50, or at least 50 staff members, you're required to have an accessible website. It has to be, it has to pass a certain level of accessibility, right? **\[08:09\]** **Sean:** Which I believe right now is WCAG, WAA level, and I'm aware of that because in the fall, I had four clients who'll come to me and we need to be compliant by January 1st and I was already busy and then I got all this rush work and I was like, ah! **\[08:29\]** **Mike:** Gotta update all their sites. I'm surprised they came to you because I find that my thing now is pointing it out to them and saying, look, this is now the case. Do you care? **\[08:39\]** **Sean:** These were blue chip companies. Okay, got you. The agency that I was working with, they got told by their client got it. Hey, we need this done. And I was like, oh, wow, okay. And then, you know, I have another couple of other clients that are also really big organizations. So I learned a lot about retrofitting a site to make it accessible. **\[09:03\]** **Mike:** Cool. So we didn't get too deep into these, you know, you mentioned WCAG level two, level. Like, should we get, maybe we don't, I don't think this is in the notes at this point, but we might as well talk about it anyway. What exactly does it mean to be accessible? At what point can you declare your website accessible and there are multiple levels of that, right? Matsuko, you want to talk about that at all? **\[09:27\]** **SPEAKER\_00:** So WCAG, web content accessibility guidelines, there's three levels of compliance. There's like single A, double A, triple A. Triple A, some of the requirements, they're like a lot more resource consuming. I think one of them is that videos have to have sign language interpretation for a lot of organizations that if you have a ton of videos, you have to film another video that's the sign language interpretation of it. **\[09:57\]** **Sean:** Right. I believe you're all suddenly transcripts, subtitles and transcripts for both audio and video. **\[10:04\]** **SPEAKER\_00:** I think transcripts, since captions are in double A, but that's a lot less resource-intensive than, you know, filming additional footage with sign language. So most, for most content, most sites, AA compliance is like pretty sufficient. But you can meet, like for each criteria, you can meet different levels. You can meet AA, like minimum for everything. And then in some sections meet AAA. **\[10:34\]** **Mike:** I guess for our listeners, I mean, unless you're, because my understanding is, say, AAA, the really, you know, strict one, is primarily before if you're making a site where your audience is disabled folks, right? Yeah, I think that's typically what, like if you run the CNIB or something you might want to be, you know, but for most of our listeners, I would say double A is probably what they should aim for. Would you guys agree with that? **\[10:59\]** **SPEAKER\_00:** Yeah. Most legal requirements are based on double A. **\[11:02\]** **Mike:** Right. **\[11:03\]** **Sean:** And I believe that's the legal requirement for at least the AODA, which is the Ontario laws. Got it. **\[11:11\]** **SPEAKER\_00:** But then also the accessibility guns are kind of like minimums so you can meet you can make a website that meets all these criteria but then also Like it this doesn't necessarily mean it's accessible. I think there's some Someone made a website that's like completely inaccessible, but it meets all the like testing criteria Oh, right. I can like try and find it like I think one of the things they did was like remove the cursor image From the cursor so you can't tell where your I'll say it's at all. Oh wow. That's totally excellent. Oh my god. But technically there's, I think there's no requirement for it to have a visible cursor **\[11:47\]** **Sean:** image. So this person did this on purpose to show you that the guidelines don't necessarily make it exactly. **\[11:55\]** **SPEAKER\_00:** But it's kind of like a minimum, yeah, just being fine kind of thing. **\[12:00\]** **Mike:** There's plenty of other things you need to do to make your website good than just making it accessible. **\[12:05\]** **Sean:** So let's take this opportunity to hear to talk about easy ways to make your website accessible or get closer to meeting those guidelines, things that non-technical users may be able to do. **\[12:23\]** **SPEAKER\_00:** Yeah, I think recently there's been a lot of these accessibility toolbar overlays. It's kind of like these website plugins that claim to improve accessibility of your website. You know, if it was that easy, it would be great, but it doesn't work that well. **\[12:43\]** **Sean:** What is that? I haven't heard of these, so I'm unfamiliar with that. **\[12:47\]** **SPEAKER\_00:** So I guess they're like these JavaScript snippets you put in and that launches this tool bar thing, and you can use it to increase the font size of your website, for example, I don't know, different things like turn on high-contrast mode, but the thing is like if your website was built excessively, the users could use everything on their own browser on their computer to do the accomplished exact same things. **\[13:10\]** **Sean:** Sounds to me like that I'm sorry to do this but I'm going to disword press. It sounds like something that would be useful on a WordPress site. **\[13:18\]** **SPEAKER\_00:** I don't think it's super useful. **\[13:22\]** **Sean:** Maybe more common on a WordPress site. **\[13:25\]** **SPEAKER\_00:** Maybe, I don't know. **\[13:27\]** **Sean:** Yeah, I don't like to knock WordPress occasionally I have to, but to me, it sounds like something you would use as a plug-in to make your website accessible, although it doesn't sound like it makes your website accessible, it's just an extra option to make it easier. **\[13:49\]** **SPEAKER\_00:** But then also, those kind of say someone wants to increase their font size on your website using this toolbar overlay, then they can't, like that's only on your website and it's not on across every site they'll visit versus if you're, you know, if they increase the font size in their browser settings, then it should work on every site that's built excessively to increase font size, you know. **\[14:12\]** **Sean:** Right. Especially if you're using relative units like ams or ams or percentages. **\[14:19\]** **Mike:** Just while we're on this topic, I got to throw this in, it just occurred to me and I'm thrilled that we're talking to you, because you're someone that can actually give me real advice about this. What is your opinion on these buttons that you see periodically, that have a small letter A and a medium-sized letter A and a large letter A, and when you click on them, you can increase the font size of the text you're looking at. Do you know what I'm talking about? **\[14:47\]** **Sean:** So like what I'm getting at is everybody's browser basically these days can increase **\[14:53\]** **Mike:** or decrease the size of the font of the text, right? You can just hit control or command and then plus or minus. Control plus makes it bigger. Control minus makes it smaller. But I often get my clients in the nonprofit world at least, often ask me, can you add a font size button at the top of the screen, like in the header? And when you click on them, it does that. But I'm always telling them, well, if we do that, it's like you said earlier. That will work on this website, but what if they go to another website, isn't it better to sort of teach them how to do it through their browser? Yeah. **\[15:32\]** **SPEAKER\_00:** So what's your take on that? So yeah, it's kind of, it's the same thing as that tool for, I guess. I don't think it's necessarily like always bad to have that kind of extra setting for that website. But I don't think it should be like the only way to change the font size, like you shouldn't get in the way of the browser is font resizing for sure. That kind of extra font size button thing, I think it is helpful for some people, like people that don't really know how to use their browser. So if it's a website for me, I don't know, maybe seniors or people that are just like very low tech, then possibly it could be a good idea to have it. But I don't think it's, you know, something you should put on every **\[16:17\]** **Sean:** website. Yeah. Back in the day, I built a site with one of those. I did too. Yeah. It's been a long time back like 2012, 2013. I was working at an agency. And their client had the design was like this ridiculously tiny font that even I couldn't read. And so, yeah, we had this thing and it had three settings and click it once, it goes up, clicks it, and it just changed the font size from, for example, 8 to 12 to 14. And that was it. And I think because it was like a fixed font size using pixels rather than M's or M's, your browser commands wouldn't even override it. At least that's how I kind of remember how it worked. And there's **\[17:07\]** **Mike:** all set with JavaScript, too. Yeah, it's also doing those, it adds, given that your browser can do that, building these buttons or using these toolbars, whatever, also adds overhead to your website in terms of like there's other things loading that you don't necessarily need to have loading, you know, if people were educated more about what their browser can do, I feel like not only would they have more control over their web experience all over of the place, but also, you know, we could focus on making our websites fast and efficient and not, you know, bog them down with all these kind of toolbar features. Hi, hope you're enjoying this episode. We're always looking for topic suggestions, so if there's anything you'd like us to discuss on the show, please let us know. **\[17:54\]** **Sean:** We're also looking for guests. If you have a guest that you think would be great for a podcast, please let us know. If there's a guest that you would love to come back, let us know. You can do that by visiting website 101podcast.com slash contact. **\[18:10\]** **Mike:** Okay, so let's talk about Semantic HTML. What exactly is that? HTML, obviously, is the language that's used to build a website. What is Semantic HTML? **\[18:23\]** **SPEAKER\_00:** So I guess Semantic HTML basically using HTML elements as they're meant to be used and as **\[18:31\]** **Sean:** described in the, uh, yeah, the word. Um, yeah. A lot of people, you know, **\[18:42\]** **SPEAKER\_00:** for example, they want, they want to have a button or a link that looks like a button, but they don't like how the, you know, you have to overwrite some styles if they use an actual HTML button. But so these are div instead. But then there's a lot of interactions that, you know, come built in with the HTML button that they lose or have to rebuild when they use just a div, like a regular div. **\[19:06\]** **Mike:** Yeah. So if you have a button then, when you're coding a website, it should be coded with, it's the word button in angle brackets. And the browsers and screen readers and everything we've been talking about understand that this is a button and it means it can be clicked for, you know, to achieve some functionality. And as you're saying, it's possible for people to make something that looks like a button, but it's actually not. It's actually presented as if it's, well, you said a div, which is like a, what does it stand for? A divider, I think. Is that what the div means? **\[19:39\]** **SPEAKER\_00:** Yeah, div division. Division? I'm not sure. **\[19:42\]** **Mike:** Basically, it's a box. Yeah, yeah, a box that's usually reserved for some section of text or whatever. Well, you can make that look like a button and you're saying that that's a no-no in terms of accessibility. **\[19:52\]** **SPEAKER\_00:** especially, I mean, it's a lot of work to make it actually function like a bun, so why not just use the button and change the style. It's a lot easier. Yeah. **\[20:01\]** **Sean:** Matt, so could you have any thoughts on do it yourself systems such as Squarespace, Webflow, Wix, or WordPress? Like, how good are they at accessibility in general? Is this something that it's easy for the end users of these systems to ensure that they've got a website that's accessible and meets the standards. **\[20:25\]** **SPEAKER\_00:** I haven't looked that deeply into these, but I think it would really depend, like especially Squarespace and WordPress, I think you pick themes. So definitely would depend on how the theme was built. I wouldn't expect it to be great to be like this. I think the web in general people don't do a great job, so yeah, I don't think it's I don't have my hopes for it. **\[20:50\]** **Sean:** So unless a particular theme is marketed as accessible ready, then it's probably going to fail at some more all aspects of it. It would depend on the author of the theme. **\[21:03\]** **SPEAKER\_00:** Yeah. And then the ones that are more like drag and drop, like white, blow and wicks, I think it, like it really depends on how you're using it, I guess. Like you could put, like, headings of all different numbers in all different areas that would not be good. But if you follow the heading orders, then it's probably decent. Actually, **\[21:22\]** **Sean:** that's a bullet a little bit further down our nose is keep your headers in order. Which is something I discovered this fall while doing all of these accessibility audits on my sites, because I had built sites and I just assigned headers based on how they looked visually. Yeah, so I need the H4 style here, so I put it there, but it was the H4 was before the H3. Yeah. And that caused errors and made the page fail, so I had to adjust things and it's all working now. **\[22:01\]** **Mike:** Next. Is the reason that headers should be in order, like the strongest header, or you say, your page title, should be the first one in the code, followed by, you know, the next one that you encounter as you go down the code should be age two, the second level. Is the reason for that because the screen readers and such read from top to bottom? **\[22:23\]** **SPEAKER\_00:** So screen readers have additional, well, well, screen readers have additional functionality that makes navigation faster. So you don't, you don't have to read the whole page from top to bottom, you know, to get at what you want to find. So one of the things, one of the features is it generates a table of contents from the headings. So if the headings orders is messed up, then your table of contents is kind of all wonky. **\[22:50\]** **Mike:** Oh, I see. Right. **\[22:52\]** **Sean:** Ah, okay. I didn't know that. That's that's really helpful to know. **\[22:55\]** **Mike:** Yeah. Because of course they are headings. So technically they are the head of a section that describes something about that. So yeah, that makes sense. **\[23:03\]** **SPEAKER\_00:** I guess. No, it's like the internet started from like the scientific documents, I guess that everything kind of matches that. **\[23:12\]** **Mike:** So let's talk about images and videos and that kind of thing. From an accessibility standpoint, what's something easy that website owners can be doing when they add an image to try to make sure that it's accessible? **\[23:27\]** **SPEAKER\_00:** So it's a content image. Well, yeah, for valid HTML, all image elements have to have an alt attribute. even if it's an empty out alt attribute, it can't be completely emitted. So every image should definitely have an alt attribute. And then the value of it depends on the function of the image. Most images are content images, so it has some value for people reading. **\[23:57\]** **Sean:** Can you give an example of a content image versus a non-content image? **\[24:02\]** **SPEAKER\_00:** So yeah, most images are content images. example of like a decorative, like non-content image, maybe like a striped background on a, you know, somewhere or, or like, I don't know, like a filigree on the side of a heading or something like **\[24:19\]** **Mike:** something decorative. Let's say I have an article that's I'm going back to the non-profit world again here. If I had an article that talks about say, you know, benefits for families, like some kind of benefit like financial benefit or whatever for families. And then I had an image at the top of a family playing in a park. Like is that technically it's a family and the thing, but it's not like the article is about that family. So would that be, which type of image would you say that would be? **\[24:52\]** **SPEAKER\_00:** Yeah, I would consider that content image. I think it adds some, like, I don't know, like a little a little bit of a mood, a mood thing, a little ambiance, I guess, it's like the hero image **\[25:06\]** **Sean:** on a lot of pages, it's at least tangentially related to the topic that you're reading **\[25:12\]** **Mike:** about. So, the idea with this alt attribute, and alt stands for alternative text, so the tag that adds an image should have alt and then equals, and then in quotation marks, a description of what's in the image, right? Yeah. So if I have an article about my dog, and then I have a picture of my dog, then the alt attribute that's in that image should say a picture of my dog or my dog happily chasing a ball or whatever is happening in the image. And when someone's using a screen reader, for example, their machine will go through and read that text since they can't see the image, it will describe it to them. That's the purpose, right? **\[25:57\]** **SPEAKER\_00:** Yeah, and it's also good for SEO. So search engines can figure out what the image is. Right. It's good for people with bad internet connections. If the image doesn't load, it still shows the attribute, the alt text, so you can see what it's about. And alt text usually try to keep it kind of succinct. And you usually don't need to include like picture of or image of because the screen reader will announce that. **\[26:25\]** **Mike:** Oh, got it. **\[26:26\]** **SPEAKER\_00:** But if it's something, let's go. Let's go. **\[26:29\]** **Sean:** But when I'm doing a staff page, I always do photo of first name, last name. **\[26:36\]** **SPEAKER\_00:** Well, sometimes it's useful. If you want to point out that's an illustration or a painting or something, it's not just actual photo, then it could, depending on the context, it could be important. **\[26:49\]** **Mike:** Right. I could see now that, you know, you mentioned about the decorative one, which would be like if your background is striped. There's no need for someone to have their screen reader go through and say a background of stripes. Yeah. Yeah. Probably not helpful. Yeah. Got it. Okay. All right. Let's talk about color contrast. Well, first of all, what does that mean in the context of web? Why is it important to have good contrast in your colors? **\[27:18\]** **SPEAKER\_00:** Yeah, so with good current contrast, people can see a variety of environments, people with low vision, people with colorblind will have a better chance of differentiating between the text and the background and different UI elements. **\[27:35\]** **Mike:** And this is a problem that I see so often where, let's say, for example, the navigation menu, maybe on a background color that, say, the text of the links is sort of like a light gray and it's on a background that's like an off white and the whole thing is really difficult to see. **\[27:56\]** **Sean:** That was a big design trend a few years ago, especially in the footer where you had like incredibly low contrast and small font size taboo, so it made it even harder to read. Why would you want to make your text difficult to read? You want your users to be able to navigate around the site and find things. I understand about maybe showing some sort of visual hierarchy, but you can do that by font size and font weight such as bold or medium, rather than like making it low contrast. **\[28:35\]** **Mike:** I don't think I mentioned this in the links we're going to talk about later, but there's a great site that I like to go to called accessible-colors.com I think, and you can, it's like a little wizard thing, you can plug in the color of your text and then you plug in the color of your background, and it will tell you if it passes or fails, the accessibility guidelines you're aiming for, like, double A. And if it fails, because there's not enough contrast, it will give you a recommendation. It'll say, if you tweak your background color to make it a little bit darker using this color, then it will pass. And it's a good way to sort of quickly find a similar color scheme to the one you're using, but making sure that it's **\[29:22\]** **Sean:** accessible. We'll include that in the show notes. Another site that I like is Contrast Checker.com and then you can put in your foreground and your background and it will show you two sample sizes, 12 pixels and 18 pixels. So you can see it at large and small and it will tell you if it's past or not. AA, AAA, AA for 18 point, AAA for 18 point, things like that. And you can also get the background from image. You could upload a background. It's it's got a lot of nice little features to it. Yeah, **\[29:58\]** **Mike:** there's a lot of tools like this on the web now that can really help you to to make sure that **\[30:02\]** **Sean:** your site is accessible, right? Yeah, as well as, you know, browser extensions. So if you this may not be something that do it yourself or is going to be doing themselves, but if you're auditing your site for accessibility, you'll want to be checking it and you can use or a website or you can use a browser extension. Browser extensions I find are a little bit easier because it just runs on that page and it'll give you links and example text about how to fix it. So you can see right on the page you're looking at. The two browser extensions that I use are X and Lighthouse. **\[30:45\]** **Mike:** Yeah, Lighthouse is really helpful. It basically just opens the sidebar in your browser, and you hit run report, and it will give you all kinds of information about how fast it is, and SEO, and that is accessibility. I don't know if you have any, because you're the expert, right? **\[31:03\]** **SPEAKER\_00:** Yeah, I use the WebAX one, but I think one that's really good for people that are getting started with accessibility is accessibility insights tool from Microsoft. And it has a lot more guidance and suggestions and it helps you do the manual tests too. Kind of guides you through how to do those. So I think it's really good. It kind of teaches you how to do some accessibility audits. So that's kind of cool. **\[31:29\]** **Sean:** Nice. I'm going to definitely have to take a look at that site afterwards. This is the first time I've been made aware of it. Oh, let's look over a question for you. A week or so ago, you on Twitter, You tweeted something about the mistake that placeholder text wise, could you talk about that? **\[31:49\]** **SPEAKER\_00:** Yeah, there was this really good blog post that I found that I can't, I think it was Eric Bailey, I can't remember the author right now, but yeah, it kind of scribes everything that place, all the flaws of placeholder attribute. Yeah, for one thing, placeholder that default contrast is really low, so a lot of people won't be able to see it, it has critical information, like a formatting instructions, then you know, I can't expect people to see it at all. But then if the contrast is high enough to see, then people will mistake it as like actual input. **\[32:26\]** **Mike:** Yes. I've heard from before too. So let's back up a second. What exactly is placeholder content for those who don't know? **\[32:33\]** **SPEAKER\_00:** So the placeholder attribute, it's like text that goes in the, that displays in the text input. It's like a hint for the type of content that's supposed to go in there, I **\[32:46\]** **Sean:** guess. Right. So oftentimes if it's an email field, it would say your name at domain.com or whatever in it. It's like a really low, usually as Metzooka pointed out a very low contrast color, one of the issues with placeholder text is as soon as you focus on the input, you start typing **\[33:08\]** **SPEAKER\_00:** it, the placeholder text is gone. So your hint is missing. And a lot of websites, they **\[33:15\]** **Sean:** use the placeholder text in place of a label because designers like it. They think it probably is better design choice, but accessibility, you're losing all your context and hints and **\[33:32\]** **Mike:** stuff. If you're trying to get someone to fill out a form and then you get in their way by making **\[33:38\]** **Sean:** things difficult. Or hiding the instructions when you click on to the field. **\[33:43\]** **SPEAKER\_00:** It's too bad it got into HTML because now it seems like we generally think HTML is pre-accessible when we don't mess with it too much, but this thing is part of HTML, if you much never want to use it really. I was wondering where it came from because we don't have paper forms that have these hint. Yeah, that's interesting. Is there a real world **\[34:07\]** **Mike:** old example. That is interesting. You were saying earlier Matsuko about you know it's usually default things in HTML are sort of like that's where we should be aiming and it's they're usually you know good but there have been things I guess in in the HTML's past that have I guess it's not HTML but they're like track backs remember track backs? Anybody remember that? Where somebody **\[34:34\]** **SPEAKER\_00:** I think it's before my time. What about it? **\[34:36\]** **Mike:** It might have been before your time, that's right. **\[34:38\]** **Sean:** Oh, me and Mike just aged ourselves at the end of the day. **\[34:41\]** **Mike:** It's irrelevant, but basically you used to be able to... How did it work? You used to be able to like... **\[34:47\]** **Sean:** What you would do is in your CMS, you'd grab a link from a website and on that post it would have a track back link. So you would grab the track back link, put it into your CMS, publish it, and then it would ping the original site and say, hey, I wrote about your article and it would auto-generate a link back to the article that I wrote. **\[35:13\]** **Mike:** And of course, this became wildly abused because spam, spam, spam, basically a spam environment. Like people just had to truck that. It was terrible. Anyway, that has nothing to do with what we're talking about, but do you want to get into your work at PixelAntonic and talk about what PixelAntonic specifically is doing through you in the realm of accessibility these days? **\[35:40\]** **Sean:** Yeah, it was a big deal when you were announced as the lead accessibility engineer. It also led to PixelAntonic's craft CMS being selected by the W3C for their website rebuild Because of the accessibility features and things that will be added to the control panel coming forward, please tell us more about this. **\[36:07\]** **SPEAKER\_00:** So I think like a year or two ago, a craft already announced that for craft four, they wanted to meet accessibility compliance with WCAG AA. But we're starting off with in craft three, at least making the content authoring experience accessible as we can. It is always more difficult to do remediation of accessibility in an existing site rather than building a new site accessible from the ground up. A lot of things. **\[36:38\]** **Sean:** What is remediation? **\[36:39\]** **SPEAKER\_00:** So yeah, so basically taking an existing website that's not accessible and making accessible, making changes to improve its accessibility. **\[36:49\]** **Sean:** Oh, that's what I did this fall. **\[36:51\]** **SPEAKER\_00:** So a lot of accessibility is even before coding the website for designing colors, UI choices that, you know, that's hard to change after the websites are even built. Yeah. **\[37:05\]** **Mike:** Hence these toolbars that you mentioned earlier, right? That's why there's a market for that. You can just plug this thing in. So I think it's really cool that PixelAntonic is interested, especially in the authoring experience. So what you mean by that is when someone's, when you're logging into the backend, the control panel of your site, that part should also be accessible and usable by all these people with disabilities or what have you rather than just the front end that people see. **\[37:35\]** **SPEAKER\_00:** Exactly, yeah. So with front end, for craft sites, it's pretty much not really in our control anyways. So that's up to the developers to build their sites successfully. But at least we can make a control panel usable for people with disabilities, yeah. **\[37:51\]** **Sean:** Yeah. Well, that would be really important for any organization that has staff that they need to update the website content. Like, you need to be able to enable it so that any member of your staff can update it. **\[38:05\]** **Mike:** You did mention a few, and we alluded to some earlier sites that have to do with accessibility. And we'll put them all in the show notes, rather than talking. We spoke about a lot of them already, I think. So yeah, definitely check out the show notes. This one more than most episodes is going to have a lot of cool stuff in the show notes, **\[38:23\]** **Sean:** I think. A lot of good links. So Matsukuru, thank you so much for coming out. This was a really good conversation and I'm sure our listeners will find it very useful. **\[38:34\]** **SPEAKER\_00:** Yeah. Thank you so much for having me. **\[38:38\]** **Sean:** The website 101 Podcast is hosted by me, Sean Smith. You can find me on LinkedIn, my username is caffeine creations, or Twitter, where my username is caffeine creation, C-A-F-F-E-I-M-E-C-R-E-E-8-I-O-M, or at my website, caffeinecreations.ca. **\[39:02\]** **Mike:** And by me, Mike Mella, you can reach me online at belikewater.ca, and also on Twitter and LinkedIn, where my username is Mike Mella, that's M-I-K-E-M-E-L-L-A. You Close Transcript Have a question for Sean, Mike, and Amanda? [Send us an email](/contact). [![Listen on Google Play Music](/assets/images/google_podcasts_badge@2x.png)](https://www.google.com/podcasts?feed=aHR0cHM6Ly93ZWJzaXRlMTAxcG9kY2FzdC5jb20vZmVlZC5yc3M%3D)[![itunes badge](/assets/images/itunes-badge.png)](https://itunes.apple.com/ca/podcast/website-101-podcast/id1449510012)[![itunes badge](/assets/images/spotify-logo.png)](https://open.spotify.com/show/3rmSM1R9t6q1U8DmYWJRSO?si=NrYPMgDaRV6Dd56PjEaPow)### Season 04 - 1 [ 'Click Here' Hurts Your SEO and UX: Why It's Time to Change](https://website101podcast.com/episodes/season-04/episode-1/click-here/) - 2 [ How to Talk to Your Web Developer: Communication Tips for Clients](https://website101podcast.com/episodes/season-04/episode-2/how-to-talk-to-your-web-developer/) - 3 [ Red Flags](https://website101podcast.com/episodes/season-04/episode-3/red-flags/) - 4 [ Content Strategy](https://website101podcast.com/episodes/season-04/episode-4/content-strategy/) - 5 [ Accessibility](https://website101podcast.com/episodes/season-04/episode-5/accessibility/) - 6 [ Improving Your Website Without a Redesign: Content Audit, Usability Testing & More](https://website101podcast.com/episodes/season-04/episode-6/how-to-improve-your-website-without-doing-a-full-redesign/) - 7 [ Content Marketing](https://website101podcast.com/episodes/season-04/episode-7/content-marketing/) - 8 [ Alternatives to Google Analytics](https://website101podcast.com/episodes/season-04/episode-8/alternatives-to-google-analytics/) - Bonus[ Listener Survey - What Topics do you Want to Hear More of?](https://website101podcast.com/episodes/season-04/episode-/listener-survey-what-topics-do-you-want-to-hear-more-of/) - 9 [ Website Optimization and Speed](https://website101podcast.com/episodes/season-04/episode-9/website-optimization-and-speed/) - 10 [ Exploring WordPress Website Development with Laura Bailey](https://website101podcast.com/episodes/season-04/episode-10/wordpress/) - 11 [ From Novice to Bootcamp Instructor](https://website101podcast.com/episodes/season-04/episode-11/from-novice-to-bootcamp-instructor/) - 12 [ Pimp Your Typography](https://website101podcast.com/episodes/season-04/episode-12/pimp-your-typography/) ### All Seasons - [Season 01](https://website101podcast.com/season/01/) - [Season 02](https://website101podcast.com/season/02/) - [Season 03](https://website101podcast.com/season/03/) - [Season 04](https://website101podcast.com/season/04/) - [Season 05](https://website101podcast.com/season/05/) - [Season 06](https://website101podcast.com/season/06/) - [Season 07](https://website101podcast.com/season/07/) - [Season 08](https://website101podcast.com/season/08/) - [Season 09](https://website101podcast.com/season/09/) <!\[CDATA\[YII-BLOCK-BODY-END\]\]>