006: Accessibility for the Vision Spectrum, Golden State Cider Jamaica

By /

Listen

In this episode, hosts, Amber Hinds, Steve Jones, and Chris Hinds, talk about accessibility for the vision spectrum, and some best practices that, virtually, anyone can adopt in order to create better outcomes for this group of users.

Mentioned in This Episode

Transcript

CHRIS HINDS: Welcome to episode six of the Accessibility Craft podcast, where we explore the art of creating accessible websites while trying out interesting Craft beverages. 

This podcast is brought to you by the team at Equalize Digital, a WordPress Accessibility company and the proud creators of the Accessibility Checker plugin. 

In this episode, host, Amber Hinds, Steve Jones, and myself, Chris Hinds talk about accessibility for the vision spectrum, and some best practices that, virtually, anyone can adopt in order to create better outcomes for this group of users. 

For show notes and a full transcript, go to “AccessibilityCraft.com/006.” And now on to the show.

AMBER HINDS: Hey, y’all. How are you guys doing?

CHRIS: I’m doing pretty good.

STEVE JONES: Doing good. 

AMBER: All right. Well, I’m excited to dive in today. And we’re going to be talking about accessibility for the vision spectrum. Because it’s not just you can see perfectly or you’re blind, right? There’s a big, long-range in between those things. So I thought it might be interesting for us to talk about some of the stuff that impacts everyone in between the two. But maybe we should get started with the drink?

CHRIS: As always. I’m pretty excited about this one. So we’re tasting Jamaica by Golden State. And, no, I didn’t mispronounce that, but you might also pronounce it, Jamaica, but it’s Jamaica, and it’s a hibiscus-infused dry apple cider. 

So for those that don’t know, the uninitiated Golden State is a cider producer based out of California. And they source their apples, according to some reading I was doing before the podcast, all over the West Coast apparently. And they produce traditional ciders, specialty ciders, and even some apple brandies, which I kind of bookmarked for myself for later, for science. Maybe buy one of those and try it out. 

STEVE: For science.

CHRIS: Yes. 

AMBER: It’s all for science.

STEVE: For science, yes.

[laughter]

CHRIS: That’s right. So I personally have not tried this one before. But at least according to their tasting notes, what we should be seeing is a cider that’s pink in color if you pour it in a glass. You don’t have to pour it into a glass, obviously. And they say, “Fragrant aromas that lead to fresh berry flavors and a tart round finish.” 

I think we can crack this open and give it a try. And I’ll say, while we open these up and pour or just sip, the reason that this one grabbed my attention is, I was looking for options. I knew I wanted a cider, but I didn’t know which one I wanted to taste. I’m a total sucker for anything that has hibiscus in it. 

So, hibiscus, for anyone that doesn’t know, that’s listening in, is a flower that’s dried and often made into tea, or used as a flavoring for various desserts. And in our house, at least Amber and I’s house, we drink hibiscus iced tea all the time. And I’d say we probably go through like two gallons of hibiscus iced tea a week on the low end.

AMBER: Yes. Probably more than that. We don’t buy juice. And the hibiscus tea is like… So it’s not sweetened. We don’t put any sugar in it, but it tastes kind of fruity. And it’s just like hibiscus flowers soaked in water in our window, so. And so I think that kids drink it as an alternative to juice. But that was a sidebar because we actually have a cider. 

[laughter]

CHRIS: Yes. So we’ve all poured. I’m holding my glass up to the camera here for others to see. But it is definitely like you can tell there’s hibiscus in it. And I would argue it’s like a reddish-orange-pink flavor. Like, it’s definitely not, like, bright-pink like a rosé wine would be or anything like that. Like, it’s a little bit of a deeper red color, which is cool. 

STEVE: Yes, yes. 

AMBER: It’s somewhat similar to the color of Hello Kitty soda.

STEVE: Yes. 

[laughter]

CHRIS: Only hopefully a bit more craft. 

STEVE: Yes, yes.

AMBER: Yes. Let’s… 

CHRIS: Yes, we can taste, Yes.

AMBER: I tasted already because I wasn’t going to wait. [laughs]

CHRIS: Mmm. 

AMBER: I think it’s pretty good. 

STEVE: It’s pretty good. 

AMBER: Like, it’s not super dry, but I would say it’s more on the dry side, like, it’s not overly sweet, which I really like. We have a cider company down here, Austin East Ciders [phonetic], which a lot of people like. But whenever I drink them, I just think they’re too sweet.

STEVE: Yes. This one’s definitely tart, like it says on the…

CHRIS: Yes. It’s got that characteristic hibiscus tartness. If you’ve ever had a hibiscus drink like that, that tartness you taste on the finish, that’s definitely the hibiscus flower. I get the apple, I get the hibiscus. It’s just really nice. I feel like it’s really balanced. I agree there is a very slight tinge of sweetness there. I also really appreciate the acidity. 

So this was something, like, when I was learning about wines way back when in culinary school and when I worked at the wine store selling wine, you can tell when something is highly acidic after you drink it. If after you swallow, you’re immediately salivating in your mouth versus your mouth feeling dry, that means that something is acidic when you’re drinking it. If something is more basic, your mouth will feel like more, like, more chalky and dry after you take a sip. 

STEVE: Hmm.

AMBER: Interesting. So I’m curious, Chris, like, the can says, “Champagne yeast.” So what does that mean? Does that mean that the yeast they use to ferment the apple juice came from, like, champagne?

CHRIS: I would guess so. And this… that actually… that you bring that up. I don’t know if you can see in my glass here that I’m holding up to the camera, but anyone who has looked at a champagne glass close up before and seen those characteristic tiny vertical streams of bubbles that go floating up when you pour a real champagne, I’m seeing the same thing in this cider. 

Now, to be clear, I don’t know if that’s just characteristic of that particular strain of yeast or if it’s, like, their specific fermentation method and how it went from the fermentation tank into the can, but either way, I mean, I was immediately thinking when I tasted this that it does taste a little bit, I would say, more like a high-end Prosecco than a champagne, personally. But, I do really enjoy this. I think this is really good.

AMBER: Yes, I don’t think it’s as carbonated as a champagne.

CHRIS: Yes.

STEVE: It’s really smooth. I mean, like, when you take a drink, it doesn’t, like…

AMBER: Bite you?

STEVE: Yes. It doesn’t offend in any way, right? 

CHRIS: Yes.

STEVE: Is that the right word?

CHRIS: Yes, it’s just tart. You get the apple. It’s a nice, clean finish. That lingering acidity, I feel like this could… If I were to, like, pair this with food, I would probably pair it with, maybe some tacos, with a little bit of cilantro in there, for the people who don’t hate cilantro. I know that there’s, like, a genetic predisposition to hating cilantro at times, but yes, like a good authentic taco, unlike a corn tortilla, I think, would absolutely crush with this.

STEVE: So I just want to touch on the can a little bit here, because it has a logo here; it says “Golden State cider.” And inside there’s a logo with a little otter swimming on its back. 

CHRIS: Mm-hmm. 

STEVE: So it’s… 

AMBER: Yes.

CHRIS: That’s cute. 

STEVE: It’s pretty.

AMBER: I mean, maybe they probably have, like, sea otters and stuff. Is this… Oh, yes, Sonoma county. It could be sort of, like, Northern California, right? 

CHRIS: Yes. It’s our third, like, a bunch of kelp forests and sea otters, like, off the California coast. I feel like I’ve seen that.

AMBER: Probably.

STEVE:  Hmm. 

AMBER: It’s a cute logo. I think it’s nice. It’s a very simple, like, line drawing. It almost to me looks like something that feels like it has kind of, like, rough edges like a stamp. Or like where someone carved it either out of a woodblock or rubber and, like, made it? That’s kind of why I have the impression it’s one color. I like it. 

So this is 5.8%. And I’m just curious, like, do you know or did you learn it at school, Chris, like, how that works? Because pretty much the ingredients are, like, apple juice, hibiscus, malic acid, whatever that means, and yeast. So it’s just they just put apple juice and yeast in a tank and leave it for months or something and it just becomes alcohol?

CHRIS: Yes. The yeast consumes the sugars in whatever it’s placed in. And then the byproduct of that consumption is alcohol and bubbles. The yeast fart, for lack of a better word.

[laughter]

STEVE: I’m drinking yeast farts?

CHRIS: You are. You’re drinking yeast farts. 

AMBER: [laughs] It really makes you want to drink more, doesn’t it? 

CHRIS: So it’s kept in a container that, you know, only releases some of that gas, so that the byproduct is forced back down into the liquid, which is where you get the carbonation, traditionally. So however long they let that yeast ferment, that’s what controls the alcohol content, and also what controls the sweetness.

For a sweet wine, for instance, it tends to be lower in alcohol content, at least slightly, because they stopped the fermentation process early so that there’s still sugar but there’s also alcohol. Whereas a drier wine, they let the yeast go until it’s consumed pretty much everything that it possibly can and converted all of those sugars into alcohol. So then you have a drier beverage versus a sweet one.

AMBER: So the Austin East ciders that I think are too sweet, they probably take theirs out before this one, because this one doesn’t taste so sweet to me. That would be the theory there?

CHRIS: Yes. 

STEVE: Yes, it definitely keeps calling back, you know? It’s like a keep wanting to… 

AMBER: You want to try more? 

STEVE: I keep wanting to drink. It’s not like our previous drink, right? The stout that we did last time. I was, like, I had to kind of force myself to keep…

[laughter]

CHRIS: [Crosstalk 00:11:03] be happy.

STEVE: [Laughs] Yes. But this is much more pleasant. I mean, it definitely keeps calling back to me.

CHRIS: Mm-hmm. 

AMBER: Yes, I would definitely advise rating this one. I would say this is one that I would buy again to drink for fun, not just to try something random on the podcast. 

STEVE: Yes, exactly.

CHRIS: Oh, yes. Like, outside backyard barbecue and warm weather, this would be like a go-to, for sure. 

STEVE: Yes. Something to kind of impress your friends and family, right?

CHRIS:  Yes. 

AMBER: Yes. 

STEVE: Yes. 

CHRIS: All right. Well, do we want to shift over to talking about the vision spectrum, Amber?

AMBER: Yes. So I started thinking about this because I give other podcasts interviews. And I think a lot of times, there’s the really obvious accessibility, which is we need captions on videos, transcripts on podcasts for people who are deaf or hard of hearing. And then people always think about people who are screen reader users, because they have extremely low vision or no vision at all. 

So I was thinking, you know, a lot of people don’t really think about this spectrum, as I was talking about earlier when I sort of introduced our topic. And we can link this in the show notes, but the CDC [The Center for Disease Control and Prevention] in the United States has a page all about vision loss. And they say 12 million people in the United States – I don’t know when this was last updated – 40 years or over have some vision impairment, including 1 million who are blind, but 3 million who have vision impairment even after correction. So they might wear glasses, but they’re still not fully, you know, what is that? 2020 vision? 

STEVE: Yes. 

AMBER: And then 8 million people who have vision impairment due to an uncorrected refractive error. And there’s a whole bunch of stats on this page that we can share. But I think it’s a really large group of people. And then there’s colorblindness, which is very common, I think, especially among men. 

We had a speaker once, Ryan Bracy [phonetic], who actually mentioned during his presentation that he was colorblind. And then people who have cataracts. So you might have a temporary vision impairment, and cataracts, of course, is correctable, but during the time and before you get it corrected, or while it’s developing and before you realize that you have it, you might have a vision impairment. And then there are also situations where how we build the website can impact. So, like, low contrast can be really hard if you’re looking at something on your phone outside on a sunny day. 

So I thought it’d be sort of interesting for us to talk about what considerations need to be made on websites. And I don’t need to be the only one talking. So I don’t know if either of you wants to, like, throw out some thoughts there about, what do we need to do to accommodate everyone across the entire vision spectrum?

CHRIS: And before we even dive into accommodation, I have a couple of things that I want to share just on the idea of that spectrum and some of the different situations that can come up that cause someone to fall on the spectrum or to be someone who benefits from the types of features we’re going to talk about on this podcast. But I want to do that with a story. 

So I had the pleasure of being on a call with the guy who runs an organization called Blind Golf Canada a couple of weeks ago. And they are just this really cool organization. 

One of the guys that heads up the program, his name is Constantino [phonetic], he has low vision, on the blindness spectrum, and he runs this organization. 

So basically, what they do, as the name might imply, is they help blind and low-vision individuals play golf. And they have people all over the spectrum. He was telling me about this. They have people who – the way he described it to me – have very blurry vision. So they can make out, “Oh, there’s a pond over there somewhere,” right? And that’s probably a tree, you know? It’s like a big blob. And that’s probably a sand trap, you know, it’s a lighter color than the rest of the ground, and it’s approximately over there. But it’s all just disproportionate blobs. So that’s one end of the spectrum of the people that they work with. 

Then he was describing to me that at the other end of the spectrum is what he referred to – these are his words – as individuals who are blackout blind. So, like, light switches off in a pitch-black room. No input. 

He was telling me about one of their longest-term members who was this 95-year-old man who’s out there. Every time they all congregate on the course, he’s out there. And this guy, apparently, and I wish I could witness this, but there’s no video of it or anything, but apparently this guy absolutely crushes it. Like, with his assistant, like, he gets reasonably good scores, and gets the ball in the hole, and performs better than some people who have full ability to see, which is just incredible. I think that is so, so cool. 

I thought that was an interesting story to bring up just because it illustrates the spectrum in a real-world situation where it applies, and also highlights a cool organization. So that’s Blind Golf Canada. They’re pretty neat. We’ll probably link to them in the show notes.

AMBER: Yes, that is really cool. I can only imagine that the sighted assistants or caddies, I don’t know if they’re caddies and they’re just trained. You have to be really good, I guess, at communicating distance. I’m not good at golf. Do you golf, Steve?

STEVE: No. 

AMBER: Yes. I wouldn’t be able to stand on a hill and be, like, “That’s 150 yards.” [laughs]

STEVE: I mean, I’m pretty good at Putt-Putt game. 

CHRIS: There you go. 

AMBER: Oh, see? I’m probably not even good at mini-golf. I would be the one who’s getting, like, 10 or 12 or 15 on every hole. So, yes.

CHRIS: If I had a low vision situation or a temporary visual impairment and I was a golfer, you know who I would want to be audio describing the golf course to me? 

AMBER: Who?

CHRIS: Joel Schneider [phonetic]. He has a very, very good voice. I was listening to his episode on the podcast because I didn’t get a chance to attend that meet-up. And he definitely has, like, that radio voice, and is a really good describer

AMBER: Yes. But can he judge distance? 

CHRIS: I don’t know. 

AMBER: It’s probably special skills for golf.

STEVE: Right.

AMBER: Well, OK. So I think I want to talk a little bit about… Obviously, that’s a real-world example of how we can support people. What’s a real-world internet example? Something that we can do. Obviously, color contrast, I think a lot of people are familiar with that.

One thing that kind of popped into my head is, how do we feel about a lot of times when there are disabled buttons, there are… WCAG allows disabled elements to fail color contrast. And I was curious what you all think about that. Is that OK? Or do you think we should start saying even disabled elements need to show, and be visible to everyone?

Speaker 1: This episode of accessibility craft is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit publish. 

A WordPress native tool, Accessibility Checker, provides reports directly on the post-edit screen. Reports are comprehensive enough for an accessibility professional or developer, but easy enough for a content creator to understand. 

Accessibility Checker is an ideal tool to audit existing WordPress websites, find accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis. 

Scans run on your server, so there are no per-page fees or external PPI connections. GDPR, and privacy compliant. Real-time accessibility scanning.

Scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types and password-protected sites for your site-wide open issue reports and more. 

Download Accessibility Checker free today at “equalizedigital.com/accessibility-checker.” Use coupon code “Accessibility Craft” to save 10% on any paid plan. 

STEVE: So like a disabled element, typically, what happens is when the disabled attribute is added to it, the opacity changes, right? It’s like 50% opacity or maybe even less. I particularly don’t really like that approach, for the reason that it fails color contrast. And a lot of times, I don’t even like the way it looks a lot of times.

AMBER: So do you think that buttons should even be disabled, Steve?

STEVE: So I have a question on that. When a button is disabled and a screen reader gets to it, it reads out that it’s disabled. So I think from a screen reader standpoint, I think it’s fine. But from a visual standpoint, should they?

AMBER: Are disabled buttons always focusable? I don’t actually know if I know the answer to this.

STEVE: That’s a good question. I mean, what’s a good use case to make a disabled button?

AMBER: I feel like I actually heard a conversation about this recently on the Accessibility Rules podcast, where someone was talking about how he doesn’t like disabled buttons. But I think he was saying, like, he can’t find them. 

So at one point in time, I’ll tell you this in our history, when we were Road Warrior Creative and not Equalize and we were hiring developers, we were, like, we’re only going to higher in the United States; we’re not going go outside the United States. And I put a question on one of our forums that was like, “Are you eligible to work in the United States?” And if they answered, “No,” it removed the submit button. [laughs] Because I was, like, let’s save us time on having to wait through these forums, right? 

Although, the thing that is odd about that, or a disabled button, if it’s not focusable, and I don’t know if I know the answer to that, so really, I have homework. 

STEVE: Yes, I just looked it up. It’s not focusable.

AMBER: It’s not focusable? So the thing that I think is bad about that is that someone who can’t see, because it either has low contrast or they’re blind and they can’t see it all, and it’s not focusable, they might not understand. Like in my scenario, how would anyone know that the reason why they can’t submit the form or that there is no submit button that they can see is that they answered “No” to this one question. [chuckles] 

STEVE: Right.

AMBER: Right? 

STEVE: I mean, what if you provided some context, you know, like, an alert, or an announcement?

AMBER: Or a conditional paragraph or something that showed up right below at the next focusable item which is like, “Oh, because you answered ‘no’…” Or even in the question, the information, “If you say no to this, you will not be able to submit the form.” [chuckles] 

STEVE: Right.

AMBER: Maybe. Yes. I mean, that’s an interesting question, though. Like, on the color contrast of disabled elements. I kind of feel like… I wonder really why we’re disabling elements. And maybe there’s just a different way to do that. Like, if someone with 2020 vision can tell that there’s a button there, then probably everyone should be able to tell that there’s a button there. 

So, one, it shouldn’t fail color contrast, it should just have, like, a different message, which is, like, “This is disabled.” Or, like, something. But, two, it should also be acknowledgeable to screen reader users. Otherwise, they’re just going to think you don’t have a submit button. 

STEVE: Yes. I think there can be confusion too. Like, even with the button disabled and the opacity reduced, it could be confused that it’s not disabled. I just don’t know if opacity alone is enough of a visual cue to me as somebody with hopefully 2020 vision. I’m not sure. [laughs] I stare at computer screens quite a bit. Because it’ll disable it and what if it says, “Click here,” or “Click me,” which I know that’s not super great text, but… And the hover state will still work too. 

AMBER: Oh, on disabled buttons, so the hover state still functions?

STEVE: Yes. So I just don’t know if the default opacity change is really enough of a visual cue.

AMBER: Yes, so really, we should probably be dynamically changing the text-on buttons to just say “Disabled” instead of “Submitted”, if you’ve disabled it. 

STEVE: Yes. 

AMBER: So another thing that I thought about with this… And I’ve heard Amy Carney [phonetic], I’ve heard her speak about this. She has low vision. She’s been on the Accessibility Rules podcast. She spoke at WordPress Accessibility day last year. And she was talking about sticky elements. So like sticky headers, little chat bubbles, also, you know, overlays, accessibility overlays, those little sticky things. And she, I think, zooms in like 400% on her monitor in order to be able to read. And all that sticky stuff, or, like, social media sharing things that are stuck on the side to share an article to Facebook or Twitter or whatever.

STEVE: And they just start overlaying?

AMBER: Yes, that gets in the way. So I don’t know if you have any ideas. Like, do we just not do sticky? Or do we say, like, OK, it can be sticky but once you start zooming in or you’re in or you’re on mobile, nothing can be sticky? What do you think? Like, how would you approach that?

STEVE: I mean, it’s an insightful thing to think about because I don’t know that I’ve really thought about it too much. I know with, like, our base install that it does have a sticky header.

AMBER: But it’s not sticky all the time, right? Isn’t it only sticky on scroll up?

STEVE: No, I think it’s sticky on scroll down. Like, I think it’s sticky all the time. I mean, we may modify that on a case-by-case basis, but. 

So sticky elements are definitely something that only pertains to visual users, right? And we’re going to probably touch on this a little bit too about responsiveness and zooming in. So you zoom in to 400%, or whatever to be able to see, and that header becomes huge, right? [chuckles] So it’s like all you see, and they just have, like, a little window of content to get around. 

So, I mean, I could definitely see where that could be a big issue. I think that there needs to be a consideration as to whether or not that sticky element really needs to be sticky. I think it’s helpful for headers to be sticky so that the navigation is shown all the time for users. But I can definitely see a case where not doing it would be good. I mean, from a development standpoint, not doing it would be great, right? It’s easier. [laughs]

CHRIS: Yes. 

AMBER: Yes. 

STEVE: Yes, I mean, if it’s going to enlarge and get in the way, then that’s definitely a problem. I’m trying to think if I could programmatically make considerations for being zoomed in. Right?

AMBER: Wasn’t zooming in just mobile?

STEVE: Well, so the responsiveness will kick in, right? 

CHRIS: Yes. 

AMBER: Yes. 

STEVE: …to some degree. I’m not sure, like, targeting, like, if something is zoomed in a certain amount… I mean, it’s not exactly the same as mobile, right? Because it’s getting bigger. Things are getting bigger, not just sizing down. 

So, I mean, it’s definitely something to think about in your website projects on whether or not, you know, you need all these sticky elements. I mean, social share icons definitely are less important than sticky navigation, right? 

AMBER: Well, I think most people know.

CHRIS: I feel like I remember on a project not too terribly long ago, this came up, I think it was a client-submitted design. And they had requested several things be sticky, like multiple dialogues. I think there was like the primary navigation, and there was a search dialogue. And then there may have even been a third thing. And by the time they all coalesced, or whatever it is, as you scroll down the page on a mobile viewport or if you’re zoomed in, it took up so much of the visible area that it was unusable like we’ve said a couple of times now. 

I think at the time, what we ultimately decided was that we were just going to make those elements not sticky on mobile. And I think that that maybe also covered zoomed in to an extent with how we defined it in the code.

Steve, you’d have to correct me if I’m wrong. But…

STEVE: Yes, I mean, I think that the zooming in, as far as media queries and stuff and targeting that, I think zooming in definitely affects fonts if they’re using ems. But I don’t think it’s the same as responsive. Like, I don’t know that we can officially target, like, “At 400%, I want this sticky header to reduce in size by 50% or something.”

AMBER: No. 

STEVE: I don’t know, you might be able to… I’ll have to look into the media queries to see what there is. But there might be a minimum zoom setting that you can set, but I’d have to look into the docs to be sure of that.

AMBER: Yes. Circling back to what you said, really, like, “Do things need to be sticky?” I saw one on a website we audited. They were using, and I don’t remember what it is, one of those third-party cookie solutions. And after you made your choices in the banner, the pop-up modal, whatever it was, it then put, like, a sticky bug in the bottom left corner of the website. And we told them, we were, like, “Why?” And then they were able to make a change, and they just have it in the footer. 

That’s the default of what that thing is. And I was, like, why? Like, because somebody’s going to really desperately need to change their cookie settings without having to scroll to the bottom of every page? Like it just seemed too silly. So, yes. 

I think a lot of that stuff probably could just be located in a reasonable spot, like even the chat widgets. I think those are even worse if you think about the ones where they pop open a message.

CHRIS: Oh, man. Yes. 

STEVE: Yes, totally. 

AMBER: I get so annoyed. [laughs]. [Inaudible 00:31:40] messages, like, “Hey, do you want to talk to me?” when I’m on a website. And I’m just like, “No. If I want to, I would have clicked the thing.” [laughs]

STEVE: Yes. You have to think you have sticky headers, and you got sticky stuff on the side, and you got your cookie notice at the bottom, then you got your chat widget at the bottom. All those stuff obscures what you’re really trying to convey to the users. So I think you just got to be really mindful about that stuff.

AMBER: Yes. OK. So another thing that I had was high contrast. Or doing dark mode. So I think those are other things that could be, like, considerations for users. But I’m curious, have either of you ever been on a website that had, like, a toggle, where you could switch to high contrast or switch to dark mode? And did you ever use it? And do you like those? Do you think those are good?

CHRIS: Definitely dark mode. I dark mode all the things if I can, every chance I get.

STEVE: Yes. 

AMBER: Well, that’s, like, in your apps, or your, like, social media, [crosstalk 00:32:49] or something, right? 

CHRIS: Yes, like, social media platforms have that. Typically like Reddit, in your profile settings, you can say, “Hey, I want dark mode,” like in the browser version of Reddit. And I think Facebook has it too. But yes, those are basically, like, web apps. I don’t know that I’ve ever seen just a typical website be like, “Hey, turn on dark mode for our typical brochure website.” I don’t know.

AMBER: That overlays we don’t like have them. [laughs] 

STEVE: Yes.

AMBER: And “Whitehouse.gov” has the high contrast toggle, I think.

STEVE: Oh, does it? Yes. 

AMBER: I’m pretty sure it does, yes.

STEVE: I’ve been to plenty of websites that have had the toggle, and for me, I don’t ever toggle it. I’m hopefully, like I said, 2020 vision. Maybe not. I see pretty well and don’t wear glasses. So for me, there’s not, like, a big reason to switch that back and forth. But what we may have all experienced without knowing is that the website intelligently does that for us.

AMBER: Yes, so that was my next question for Chris. Chris, you said that you’d like to turn this on in apps. Have you turned it on on your computer?

CHRIS: Yes, my Windows… 

AMBER: I mean, you’re on Windows, so actually, I don’t know if this is possible. But on a Mac, you can say that you prefer dark. 

CHRIS: I’m on Windows 11, and Windows 11 has a dark mode setting that I’ve toggled on. And I have observed that some apps detect that and start in dark mode. Others don’t.

STEVE: Right. So at the system level, you can, at least on a Mac, I’m sure you can on a Windows computer as well, but I will never figure that out [laughs]. So Mac [Unintelligible 00:34:44] for you all. 

So you can set your dark mode preferences at system level. And then in your browser, and the browser that… I use a chromium-based browser, which most people do, but I use brave. You can then set your appearance settings there as well. You can set it to light or dark mode in your browser, or you can set it to the same as your Mac OS settings so that the browser will inherit what you have at the system level. 

On the website, you can use media queries for prefers color scheme. And you could do like prefers color scheme dark, or prefers color scheme light. So there are two main queries that you have. And you can use those to have all your other styles inherit those light and dark styles. That way… 

AMBER: So say you’re using variables, like SASS or CSS variables, would it be as easy as just going in and changing the hex code on your variables for that, and then it would just change the website everywhere?

STEVE: Well, maybe. I mean, it depends on how you have it set up. I use a mixin, which is like a SASS function. You could use that mixin to define light and dark modes within your elements. So yes, to some degree like a variable. 

I mean, the same as if you would put in a media query to target screen sizes below 768, right? So you could target browsers that have preferred color scheme set to dark, or prefer color scheme set to light. That way, you modify your website based on their preferences, so that you don’t have the toggle. Although you could still put a toggle in and, you know, use a little bit of jQuery, or JavaScript to toggle back and forth. But this is kind of just respecting the settings that they already have.

AMBER: Which is more elegant, I think. 

STEVE: Yes, I think so.

CHRIS: Mm-hmm. 

AMBER: Yes. I mean, I think that’s something I’d love for us to… You know, nobody works on their own website very much. [laughs]

STEVE: Yes. [laughs]

AMBER: But at some point in time, I feel like whenever we get ready to do a version two of our website, I would really like to do that. Because I think it’s neat. I feel like it’s really behind the spirit of accessibility of just trying to adapt what users have defined as their preference in their system, rather than making them toggle a bunch of junk on your website.

STEVE: Right. It probably should be added to our code base as well that we build sites off of so that we’re kind of giving support for dark and light mode out of the box for our clients.

AMBER: Let’s say we decide we want to do that, are we going to need to ask Jacob [phonetic], our designer, to give us, like, the homepage in dark mode too? Like, would you need multiple pages also designed in dark mode? Or do you just pick the best colors for a high contrast and dark, and just go with that, regardless of the client’s brand?

STEVE: Yes, I mean, you’re probably right, unless you were to put the onus of that on the developer, which depending on the developer, it’s not always the best approach. So yes, we don’t just add it at the development level, we add it at the design level as well.

AMBER: Mm-hmm. 

CHRIS: So then, you’re defining two color palettes; you’re defining a dark mode and a regular?

STEVE: Yes.

AMBER: This is ideal, but again, that’s something that could increase the current price of projects a little bit in the beginning, I suspect, both on the design side. And it adds extra time to have to write the extra media queries and styles for light and dark. So it may not be a fit for every client. [crosstalk 00:39:04]

CHRIS: Yes, particularly, I would think customers who may be they have, let’s call them, like, antiquated brand color combinations that don’t factor in these types of considerations because they were developed in 1970 or something, where maybe they don’t even have the colors or the color language in their brand palette to have a dark mode. Having those correct combinations. 

I will say too, like, I’m definitely all in on having high-contrast stuff for your brand. I feel like it just looks so much better and I feel anytime I see something that looks super washed out or with, like, a lot of whites and greys, I think, “Oh, this was done in the early 2010s.” [chuckles] That’s immediately what I think.

STEVE: Right.

AMBER: Chris is telling us all that he’s not a minimalist. 

CHRIS: Yes, it just, like, it looks outdated. I think the impactful, strong, high contrast stuff, not only is it currently on trend, I feel like it’s here to stay, and it’s a little bit timeless.

STEVE: Yes. I think, like, backtracking a little bit to what you said about with the client and not having their brand standards aligned with a high contrast, I mean, I think from a company standpoint, that’s just another touch point where we can be leading the clients to better accessibility through these projects as well. So maybe they heed that advice, and they update those brand standards to accommodate for high contrast that they can use throughout their whole organization.

CHRIS:  Yes. 

AMBER: Yes, like on their print materials, their signs, whatever else they’re doing. Yes.

STEVE: Yes. Very good.

AMBER: Social media graphics. So, OK, let’s see what else I have in our show notes.

CHRIS: I’ve got one.

AMBER: Not using color alone. And I think you actually had something that you found that was interesting, Chris? 

CHRIS: Yes. So I am guilty of using color alone to indicate things, or using color as a primary means of communicating data, particularly when I’m making, like, a custom report or visualizing data with charts and graphs for our own internal financial performance reports and things like that. And I still catch myself falling back on the, you know, red, bad; green, good color logic. Granted, I’ve also got numbers to fall back on, of course. But I was curious, and I was actually researching today in advance of this, like, what are some better color combinations that I could start using internally to communicate this kind of stuff? 

Tableau actually had this really great article that shows or illustrates different color combinations, those that work, those that don’t work. Typical red, green, as well as some other examples. And they actually show or they simulate how that might look to someone with color blindness in particular. 

I think that that is a resource that I’m going to go back to. We’ll probably link to this article in the show notes. But I really appreciated seeing, like, some maps and bar graphs and things, but with basically color blindness simulated on them. And it really illustrates, in this article, the impact that that can have if you choose your colors poorly.

AMBER: Yes. Well, I mean, I think for sure, if you’re including graphs or charts on a website, which in WordPress… and this could be on the front end, but we see them on the back end, like a lot of plugins. 

So for example, we use Easy Digital Downloads to sell Accessibility Checker, and it has a report section. And it uses line graphs. And it’s just color. So if you couldn’t see, you might not be able to tell what’s the difference between the number of purchasers and the dollars spent. 

So thinking about doing things, like if you have a bar chart, maybe you have a solid and you have a striped, and you have a one with little dots in it or something to differentiate. So it has a pattern too in addition to the color. Or like if it’s a line chart, maybe one is dashed, and one is solid, or one is a double line, if you need three lines,

STEVE: Like maps with color keys?

AMBER: Yes, maps and color keys are hard. I think you’d have to put patterns on the states if you were going to be able to differentiate that. Like, some states are stripy, some have little stars, and some have polka dots. I don’t know. [laughs] 

We talked about this a little bit in Accessibility Checker. Because we do use color, the red and the green, and yellow on our reports. So red for errors, yellows for warnings, and then green if there’s nothing. But each one also has an icon. So there’s a unique icon for errors and a unique icon for warnings. So even if you couldn’t see that one is yellow and one is red, you’d still be able to tell because the icon is different. And then they have the words too. 

[crosstalk]

[laughter]

Yes, so it’s like color, icon, and the literal word: errors, warnings, instead of just like assuming, oh, red with a number, and not saying what it is. 

So I think really being thoughtful about that… I think the Google page speed test is a good example of this too, because they use… I think I’ve noticed this before, they have like a triangle and a square. Because they’re not using icons, it’s just like a solid thing, but the shape is different. So I think that’s a good thing. 

What else do we have on here?

STEVE: Fluid typography?

AMBER: Yes. Tell us about fluid typography, Steve. I mean, I’m not supposed to be putting pixels on everything anymore.

STEVE: Well, this is a safe space, right? 

[laughter] 

AMBER: A safe space that’s going out on the internet, and who knows [crosstalk 00:45:40].

STEVE: It’s going on the Internet and will live there forever.

CHRIS: All right, so help me out. I’m going to potentially embarrass myself in front of what is currently this podcast’s very tiny audience, so I don’t feel too bad about this. Can you describe what fluid typography is for the uninitiated? Because I don’t actually know.

STEVE: OK. So in the most basic form, fluid typography is type that will increase or decrease based on a couple of factors, which could be their zoom level or their screen size, and the viewport width. 

CHRIS: OK. 

STEVE: And maybe to some degree, the viewport height too, if you’re targeting the heights media queries as well.

AMBER: Do you set like a baseline and all the other things go just off of the baseline?

STEVE: That could be a whole episode, getting into CSS fonts, and measurements of CSS fonts, whether you’re using rems, ems, pixels, or clamp function. It can get pretty crazy. 

So, typically, a long time ago, we use pixels. I stated that this is a safe place. Pixels still get used quite a bit. And it’s not that you can’t achieve somewhat of fluid typography with pixels; it’s just a lot more work. You could accommodate for any viewport width or height with your pixel size, but you’re probably going to have to make a lot more breakpoints than you really want to or that’s necessary. 

Plus, we’re moving into different methodologies on responsiveness in the WordPress world. You’re seeing the block editor not really support breakpoints too much, because their methodology on how responsive should be done is a little different than the way we’ve been doing it for the last 10, 12 years. So those things are changing. 

Pixel size, I don’t know if it increases on Zoom. I’m pretty sure it doesn’t, right? 

AMBER: So that’s what they’re saying: it’s less ideal, right?

STEVE: Yes. So if you move into the realm of of rems, or ems, or even targeting, like, viewport, size, or even percentages, which is not really used much, so those are based off of your base size. And I think most browsers set like a base pixel size, which can be changed. It can be modified in the “User’s preferences.” Although the developer can always override that, or accommodate for that in different ways. 

More recently, we’ve moved into the realm of using the CSS clamp function, which is just a function that can be used to set… you set the minimum, the preferred, and the maximum size. And what it’ll do is it’ll intelligently size that font up and down based on the viewport width. So less writing all these media query breaking points, and more letting the browser intelligently size that font up and down. 

Now, where that gets complicated is, we get design specs that are… A lot of times designs are made…

AMBER:  Really specific?

STEVE: They’re designed to the pixel. And clients want that web page or that landing page or application to look like that design. So we code to that design. And we may use pixels, we may use rems, but we’re accommodating whatever measurement we’re using for that font to kind of match that design. 

So you have to have that conversation with the client that, “Hey, these are websites; these are fluid. That heading size may be a little bit bigger on your 38 inch 5k monitor than it is on, like, an HD monitor, you know, a 1080 23-inch monitor, or on a phone.” So it’s just having that conversation and setting those expectations.

CHRIS: And [Inaudible 00:50:22] understand too that that’s not a bad thing. That’s actually an impressive thing about the technology we’re building, that no matter what you look at it on, because we’ve defined these ratios and these breakpoints, and however… Steve, you’re a magician. But however you’re doing this in the code, like, it looks good. Like, at the end of the day, it looks good. It looks like that brand. Nothing is out of place. Aesthetically, everything lines up. And considering just the number of devices that people could be looking at this on.

STEVE: Yes. And it’s hard to even test for those sizes. Because the screen sizes today may not match the screen sizes of tomorrow. What happens when these websites are in a contact, in your eyeball? [laughs] 

AMBER: I will be a late adopter of that technology. I’m telling you right now.

CHRIS: Or 360 degrees on a VR headset. You know that’s the other side of it. 

STEVE: Yes, really.

AMBER: I mean, I feel like just having the conversation, as you said, is important. We have that sometimes about even font selection. Because we’ll talk to them about how using system fonts, it can make your website load a lot faster, and that you’re not calling out to Google or Adobe or whatever, to load fonts. Obviously, you could load fonts in the theme, which we’ve done for people. 

I’ve been increasingly in discovery trying to talk everyone into system fonts. And I just explained to them that does mean that the font will be a little different on a Mac than it is on a PC. And a lot of them don’t care. Or sometimes they’ll be like, “Well, I want my 1H font,” or, like, “…My H1, H2, but then I’m fine with the body being a system font.” They’re suddenly, like, “OK, so maybe that’s an easy font.”

STEVE: Right. Plus, you avoid, like, GDPR with Google fonts and stuff as well. 

AMBER: Yes. Well, I feel like… 

CHRIS: Can I set my system font to papyrus or comic sans?

STEVE: No.

[laughter]

That’s illegal. 

AMBER: Not allowed. 

STEVE: It’s against the law.

[laughter]

AMBER: Well, the website would still have to call it.

CHRIS: Oh. Yes. 

AMBER: Yes, so I feel like we definitely have to have a follow-up episode on, like, fonts. Beyond sizing, like, talking about, like, capitalization, or, like all caps or…

STEVE: Upper case, yes. 

AMBER: …letter spacing, line spacing, selecting the right font. So I’m going to put that in our notes for the feature that we need to have a whole episode just about fonts. And Chris, you can talk about why you like papyrus.

CHRIS: No, no, no. I do not like papyrus. That was a joke. That was a joke.

[laughter]

STEVE: Yes, look for that episode. It’ll be titled, “Fun with fonts.” 

CHRIS: Yes. Oh, there you go. 

AMBER: Yes. Actually, I have a great job for you, Chris. You can find a drink that uses comic sans or papyrus in its logo. 

CHRIS: OK. 

AMBER: And that’s what we’ll drink.

[laughter]

STEVE: Speaking of drink, since you brought it up, this Golden State Cider is delicious. I just keep going at it. 

[laughter]

CHRIS: Yes. 

AMBER: Well, enjoy it. We are recording this on a Friday afternoon. So I think you’re all good. 

STEVE: That’s right. 

AMBER: Yes. All right, well, I feel like we probably need to call it, because people might be a little tired of listening to us, or maybe not. But we’re going to have show notes up, and there’ll be lots of good things in there. And we’ll be back. 

Next week will be a meetup episode. And then we’ll be back in two weeks for another chat about Craft Beverages as accessibility. And Chris is probably going to have a sign-off that comes after this, so I don’t know why I’m doing it. [laughs]

CHRIS: That’s all right. It’s good to have both. We’ll see you all later. Bye. 

STEVE: See you, guys. 

AMBER: Bye. 

CHRIS: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. 

You can find accessibility Craft on Apple podcasts, Google podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft five stars on Apple podcasts. 

Accessibility Craft is produced by Equalize Digital and hosted by Amber Hinds, Chris Hinds, and Steve Jones. 

Steve Jones composed our theme music. Learn how we helped make thousands of WordPress websites more accessible at “EqualizeDigital.com”