Ruben, talking about text reflow, says sometimes “text will actually go over the container and sometimes I can’t even see what things say. I have to open up the developer console and actually look at it”.
Thanks to Tenon for sponsoring the transcript for this episode.
Transcript
Nic
Hi, I’m Nic Steenhout. And you’re listening to the accessibility rules podcast, a series of short podcasts where disabled people explain their impairment, and what barriers they experience on the web. First, I need to thank Tenon for sponsoring the transcript for this episode. Tenon provides accessibility as a service. They offer testing, training, and tooling to help fix accessibility fast. My guest today is Ruben Nic. Hey, Ruben. How are you?
Ruben
I’m doing well. Thank you so much, Nic.
Nic
Thanks for coming on the show. Let’s dive right in. And let me ask you, what is your disability or your impairment?
Ruben
So I have three, I have ADHD, generalized anxiety disorder, and keratoconus. But specifically I do actually want to focus on keratoconus today, which is a degenerative eye condition.
Nic
Thank you. What would be the greatest barrier you experience on the web related to your vision condition?
Ruben
Yeah, so there’s, there’s three main ones that I suffer from, or that make websites difficult for me. So the first one is that we’re sort of on the tail end of the trend of designers and developers preferring lighter fonts, right, like thinner, wispy or fonts. And that makes reading actually quite difficult for me, because my eyes change shape, sometimes daily. And usually, my eyesight is very blurry, and so thin, wispy fonts, even if they are 12 to 14 point, right. So they meet WCAG can actually become difficult for me to read. The other one that I kind of face is because you know, sometimes these thinner fonts can cause this is I have to zoom in, right? And, and what that causes is Text Reflow. And so this doesn’t happen often. But sometimes when you zoom in, if the container is given a predetermined with a hard coded with that text will actually go over the container. And sometimes I can’t even see what things say I have to like, open up the developer console and actually look at it.
Nic
That’s gonna be a pain.
Ruben
Yeah, it doesn’t happen that much. I mean, we, you know, on the web, we’ve moved away from hard coding widths, which is really nice. So it used to happen more. And then the other thing is, like, I’m very happy that as a design trend, we’re moving, we’re moving more towards thicker fonts towards, you know, we’re we’re entering the chunk phase of font weight. And then the last one, I would say is, is contrast, right? Because contrast isn’t just about color, it’s also about shape and texture, and size. And so because my vision is blurry, if you have a small button. Even if it’s kind of like a good contrast, I can miss it. A good example of this is at my work, we had a, we have a tool that before we before we push changes for our product, it will give you like a snapshot side to side of like, oh, the changes that you made would actually change the UI in this way. And I made a change that, you know, remove the UI element. But that UI elements contrast was so low, I couldn’t see it. I I tried to figure out what was going on for an hour. And I actually had to pull in another developer and say, look at these images for me, because they’re the exact same thing for me.
Nic
Wow! I mean, it would be a problem from a end user perspective, but when it starts impacting your professional life as well, that that’s really a massive barrier.
Ruben
Yeah, I mean, I definitely wasted about an hour and a half.
Nic
If you had one message for developers or designers around web accessibility, what what would that be?
Ruben
I would say, you know, think of of contrast as, as more than just color, think of it as shape and texture. You know, and realize that there’s more than just color blindness. There’s also blurry vision. And and that’s not because I drink, you know, while I’m working. That’s because that’s, that’s just the shape of my eyes.
Nic
Yeah.
Ruben
And yeah, just just make sure you test Text Reflow, I would say to about 150%.
Nic
When you’re talking about shape, and texture, what makes a good shape and texture for you?
Ruben
Yeah, so I would say, is it visually distinctive, right, because I think I think shape and texture can also be can also be characters, right. So I, the the standard example of this, you know, given in accessibility trainings is if you have a form, and you know, the required elements, the labels for that form is in red text only, you know, if for certain colorblind, folks, that is invisible, but if you have, you know, right next to it, you know, required in parentheses, that shape and texture, right, even though it’s not… and you can put that in red too, if you want to. The other thing, I would say that’s very common. is graphs, right, making sure that graphs have, you know, a texture on them, whether that’s like a dot texture or slashes, you know, just to help provide another distinguishing factor besides just color alone.
Nic
Fantastic! Shape is…
Ruben
Yeah, shape up. Sorry. I cut you off.
Nic
No worries.
Ruben
Yeah, shape is difficult. I, you know, I think Stark, and I think other tools are now starting to build in blurry vision simulators. And, you know, I think, in my opinion, just like, try a blurry vision simulator and see if your icon is still distinguishable, given the size that it’s at.
Nic
Right. Okay. Thank you. Reuben, you’ve been a fantastic guest. I think people are gonna learn a lot from your experience and I appreciate you sharing with us.
Ruben
Yeah, thank you for having me. This has been this has been really fun.