With a decade of experience as User eXperience Designer, Stéphanie Walter helps her clients in the banking, healthcare, automotive and financial industry deliver successful projects to their audience, all the way from strategy to the final products and services. She is a Google Dev expert in Product Design and likes to share her passion for her work. She teaches and talks about UX design patterns, mobile UX design and a few other things like PWAs.
I came across Stéphanie’s work when she published this great blog post on color accessibility. We talk about web accessibility in general and other aspects to consider like images, emojis, accents, and how to use screen readers. It’s a topic that many of us have probably not thought about hard enough.
I would be interested to hear about the techniques, strategies, and tools you use to make your content accessible to more people. Please drop me a note in the comment section below or reach out on Twitter.
Stéphanie’s post on color accessibility
The Domino’s web accessibility court case
Support the Show
This show is completely listener-supported. There are no ads on the show notes page or in the audio. If you would like to financially support the show, please check out my Patreon page, where just for a few bucks a month, you can get a sneak peek at guests, grab stickers, or even a podcast mug. Your support helps me cover audio editing services, transcription services, and more. You can also support the show by sharing it with others and reviewing it on iTunes or your favorite podcast provider.
Jon Schwabish: Hi everyone. Welcome back to the PolicyViz podcast. I’m your host, Jon Schwabish. I hope you’re well. I hope it’s not too cold where you are. The weather is kind of up and down here in DC, but we are home to the world champion Washington Nationals, so we’ll take that. On this week’s show, I’m excited to have Stéphanie Walter joined me. Stéphanie had a post a while back a bit ago about making your visualizations and your designs color accessible to people who might have a color vision issues or might have intellectual disabilities or might have other constraints that they need to interact with your website or with your tools or with your software or whatever it is. So I was really interested to hear what she’s thinking about when it comes to accessibility because I’m of course thinking about it when it comes to data visualization, how do we make our scatterplots and how do we make our slip charts and how do we make all of the visualization tools that we create and publish, how do we make them accessible to folks who need to use them and may have some other needs when it comes to working with a website. So we chatted for awhile and I hope you’ll enjoy the show.
Before we get to that, don’t forget that I do rely on the support of my listeners. So if you would like to share the show with other folks in your social networks or with your friends, or even call your folks up and tell them that the show is great I’d love to do that. I’d love to see that happening and if you’d like to support the show financially, that’d be great. I’ve set up a couple of new tiers over at Patreon. So you can go over on checkout what goodies you can get if you’d just like to support the show with three or five bucks a month something like that. It helps me cover all the costs associated with the show. So I’m really thankful for the folks that are my current Patreons and we’d love to see some more so I can keep bringing this show to every other week.
So this is my conversation with Stephanie and I hope you’ll enjoy it.
JS: Hi Stephanie, how are you? Thanks for coming on the show.
Stéphanie Walter: Thanks for having me. Hi.
JS: I’ve been following your Twitter feed now since this post you wrote a little while ago that we’ll talk about. I’m amazed at all the great stuff that you have that comes out. It’s like daily inspiration to watch your Twitter feed go by.
SW: Thanks. I need to read a lot of articles.
JS: Yeah that’s true. That’s like you’re becoming my like library of what to read for the day. Yeah. That’s pretty nice to have. So I thought we would talk about design and we talk about accessibility and whatever else we just want to chat about. Do you want to maybe talk a little bit about yourself and your background and so people can get to know you?
SW: Yeah, sure. So I am a designer, UX designer to be precise. I’m French originally but I currently work in Luxembourg. So I also like worked in Germany little bit, in France and now in Luxembourg and yeah, at the moment I’m a consultant, which means it’s actually really cool because it means that I get to go to company, have them sort of some issues and try to put some process in places and everything regarding user experience, user research, also trying to bring a little bit more UX and design maturity to some of those companies.
JS: Interesting. So can you tell me a little bit about like what would a typical job for you look like when a firm brings you in like how do you work with them to improve these ability of their websites?
SW: This is really, there’s no typical job.
JS: Really. That’s cool.
SW: No, it’s basically like you try assess it so you do some interview with users, you try to understand their needs. You can also do a lot of things like one of the company I worked for was a U.S. company and they hired me just like for two weeks to help them do usability review. And I had access to something called full story, which is basically you can actually see the users, what they are doing and it’s very interesting because then you do your usability reviews. So you say, okay, this doesn’t work from a usability perspective, but also like I checked a lot of the users here into this funnel and I’ve seen that half of them completely abandon the website at this point. So there’s actually a pain point here is how we might solve it and everything. So yeah it’s really, really interesting. So sometimes you get direct contact with users, sometimes through like survey or you have some interview through Skype or whatever tool you use to call people. So you are doing those. You make about diagnosis of what’s not working and then you try to iterate, discuss with the developers, discuss with the business also try to understand, okay, this isn’t using it, what’s your business need here? What’s your also like technical requirements. You go to the developer, you try to understand and then with all of this data you try to build a solution that will work for users, also while trying to keep those company needs because at some point most of the company wants to make money. So this is also something really compliance science. Yeah.
JS: Yeah. So it’s interesting because, well I guess my question is do you find that a lot of these companies are not doing the sort of qualitative survey driven interviews that you’re doing and it’s driven more by hard quantitative metrics of we’re looking for clicks and time on the page, but they’re not actually talking to their users.
SW: It really-really depends on the maturity of the companies. Like I also, like I worked for companies where I worked on internal tools. So that’s also something interesting because then there’s no like real matrix like KPI and we need to make money. Here it’s mostly about, okay we have an internal tool. It’s not really efficient. How can we improve it so that the people within the company who are using this tool are more efficient. So do KPIs and the metrics really-really depends. Sometimes it’s money. Sometimes it’s also kind of user wellbeing. Like there’s something quite trending at the moment which is like so you have UX user experience design, you have CX, which is customer experience. I know I’ve seen something about EX, which is employee experience and you have service design. So all of these kind of things sometimes a little bit blend together. It’s basically about trying to make people kind of happier but using something, whether it’s a product or service or something within the company.
JS: Great. Really interesting. Well I wanted to switch gears a little bit and talk about accessibility because you have this great post about color accessibility and I’m sure you’re doing this in your consulting work too. And I was hoping you could talk a little bit about, I mean color accessibility as well, but also at least according to the stuff I’ve seen on your website, in your social media feeds, it looks like you spent a lot of time thinking about accessibility. And I think a lot of people in the data and data science and data visualization communities struggle with this because they’re not exactly sure what are the parameters and what are the rules and what are the things they’re supposed to look for. So maybe you could talk about some of these general issues and what people should be thinking about is they’re putting stuff on online.
SW: Yeah sure. So accessibility is basically trying to make a website accessible to as many people as possible. So make sure that as many people as possible regarding disability they have, are able to access, digest, understand your content. So that’s kind of the basic. So as a designer usually main thing you can do is take care of the colors. So this can be kind of a huge issue. And this is also like a huge issue with database for instance is that some people don’t receive the colors the same way as everyone else. So you have color blind people, you might have contract issue and all the things like that. So when you talk about data visualization for instance, usually what I see on websites is like this really, really nice like pie charts or bars or anything that have different kind of variation of the same grid and color and the issue for some users is that they might not kind of see the difference between some of these colors.
So one of the main thing you can do is when you do data visualization, things like that is do not choose only color to convey information. So it can be labels, it can be patterns, it can be a lot of things. If you think about form, for instance, some people who have difficulties proceeding red versus green for example, if your error, you only like put two red border to tell users okay those fields are all not working and no other information. Then they might perceive this as just another shade of grade or something, a gray [Indiscernible] [00:09:35]. So they might not actually see that there’s an error. So this kind of the complex part. And also you can have contrast issue on that’s something complexity of accessibility because usually when you arrive in a company, they have a visual identity and sometimes those visual identities really complicated to use like yellow and orange. Those two colors are quite complex. And also my website is actually yellow and purple. But that’s the thing. For instance, for yellow, you basically, you can’t write texting yellow on a white background because it’s hard to read and almost impossible to read for other people. But say like if yellow is part of your visual identity, some people might say, okay, I don’t care. I want to write the text in yellow, you know, so then you start kind of fighting, arguing, entering into some the days. And it’s really hard to be honest, to be an advocate for accessibility in Europe because in the U.S. you have class actions and you have low, like for [Indiscernible] [00:10:43] and Domino’s pizza, their website isn’t accessible and there’s a class action against them. So a few users came together and say, okay, no, you’re supposed to be accessible and this is a low, please do something about it. So this is what you have in the US.
In Europe it’s kind of governments and institution websites have to be accessible by law. But there is no real law for the moment I think about like the private sector. So when you arrive in a company and say, yeah, okay, but you know, like this call to actions, the button, they’re not accessible also you can’t navigate using the keyboard and you have this and this accessibility issue. They’re like, yeah, okay, but what’s the risk? What might happen like, well first some of the users can’t use it. It’s like, yeah, but how many percentage of the population and you’re like, yeah, this at least it’s 15% maybe 20% depending if you add like cognitive disabilities, things like that. And they’re like, yeah, sure. But legal departments said it we don’t risk anything. So yeah, we are not just going to do it because we don’t have and we don’t have budgets. And you’re like, okay. So it’s usually like you try different approaches. You try to go step by steps like maybe at the moment the website isn’t accessible but we are going to be new components. So you try to go to the developers, say, hey, by the way, did you test your coupon and with a keyboard or did you test them with screen readers? So you’re starting kind of really slowly building it from bottom to top instead of top to bottom. So yeah.
JS: Do you think that a lot of, I mean, I have seen this in the past where places have, they have their branding colors, but their branding colors don’t work so well for the data visualization because it looks nice in the logo and on the letterhead. But when you try and make a graph, it looks really dark or the colors are too similar. So is that something that firms should be thinking of a little bit more broadly or a little bit I guess a little more detailed that the colors might look nice in your logo and on your letterhead, but it’s not great for database. Maybe it’s not great for accessibility like is that something that designers should be thinking more about?
SW: Yes. I think that’s like, usually when people create brands they might not think about digital products like so many brands were created by marketing and design agency who were thinking about the print like I usually get visual identity where I have the Penton color. I’m like, yeah, okay, that’s nice. But on the web I can use Penton, I need the hexadecimal color for that. And sometimes when you convert it directly the Penton which is looks really, really great on paper into hexadecimal it doesn’t work. So you kind of have to adapt at some point. So yeah that’s something people who do brand identity should try to think about like okay, this is the color of the logo. Could we have some other different colors that we can actually use with the brand together. But I think that also there’s a lack of company have something interesting like I think there was a website, I can’t remember what it was, but who basically like picked up all of the colors used by the brand and then you see that they’re using more colors than on the website for instance, and actually the colors of their logo. So yeah, this is something like as a design exercise that people should do like, okay, main colors, secondary colors, but what if I need data visualization or what if at some point I want to have a variant of that because I don’t know, an intranet or something.
JS: So for people who are thinking beyond in addition to their color so in terms of accessibility, especially for images, this is a thing that we worked on a lot here at work because you have in the United States you have this five 508 compliance issue of people with vision difficulties have to be able to read or at least use a screen reader to read the content on the website. Like what are some of the things that you think about or that you’re working on clients to think about when it comes to helping people have accessible content on their websites?
SW: That’s a big question.
JS: I know it’s like a big, it’s like a huge topic and that’s why I’m so curious about it.
SW: I would say first semantic HTML is the basics. By default we already have a lot of accessibility built in the HTML that is provided and that you are supposed to use in the browser for instance like yeah for images you have an attribute as VGA. You can also have descriptions, things like that. There’s a figure I don’t remember which attribute, but there’s one for like longer descriptions. It’s the same for forms for instance, you can link or label to a field using some things in HTML to do that. So the basic HTML elements we have are already accessible. So use them. It’s the same for buttons like I had so many discussions with developers, like I was working on a project on, I don’t know why I checked the HTML of the project, I shouldn’t have. but there were like this, this, this, this, everywhere and [Indiscernible] [00:16:33] create button out of this and I asked him like, why did you do that because now I can like go through doing interface using a keyboard and said yeah, because in summer a test. So one of the user clicked on the button, he dragged the mouse out of the button and then the button kept the active state and he said it was an issue and was like, no, this is not an issue. This is how a button is supposed to work. So yeah, also it’s complex to [Indiscernible] [00:17:01] like again now it’s not really complex to say a button in CSS. So what he ended up doing was trying to recreate all of the different state of a button using Java script. But he forgot about one of the main state things about the buttons that you can trigger it using your keyboard for instance. Also like screen readers are going to read it properly. So he puts so much effort into recreating something that already exists in the browser and then into wasn’t accessible also.
JS: Right. Do you have screen readers that you like are there good screen readers that people should use in their own when they’re, at least when they’re testing their own work?
SW: I’m not blind so I don’t have like preferences. So this is kind of complex questions as [Indiscernible] [00:17:54] in the market. From what I’ve discussed with accessibility expert with blind people on Mac, a lot of people use the default voiceover, which is integrated into OS. On Microsoft is like [Indiscernible] [00:18:08] but you have to pay. There is [Indiscernible] [00:18:13] which is free. There is few other ones but the complex part about that is like a lot of people use different screen readers. They can also change the settings a little bit. So this is a screen reader is [Indiscernible] [00:18:28] I think in a whole podcast just about screen readers [Indiscernible] [00:18:33] if you really want to go super deep into that. So yeah, it’s a complex question. Usually when I test accessibility we test like what’s my keyboard, I tried voiceover but I’m not quite used to navigate like people using screen readers they have shortcuts. There is something called [Indiscernible] [00:18:54] where they can actually kind of have a list of the element of the page and go through this really, really quickly. So they don’t need to read the whole page. So there’s a lot of different ways one can navigate on a websites. Yeah.
JS: I mean you’re presumably working on a lot of different languages. I mean you’re from France working in Luxembourg, also working in –
SW: German, English and French for most of my clients.
JS: Are there big differences in the languages and the way people use websites in those three different languages, three different cultures and countries or is it pretty similar the way I guess humans use content on the internet?
SW: From what I’ve seen, we don’t have like really different things for the three languages like especially in Luxembourg a lot of people speak English but it’s more like feature wise like or even like targeted agents for instance. So I work for a airline company and they provide, they used to provide tours so you can book either only the tickets for the flight or you can also book like tickets for a flight plus hotel. And what they discovered is that actually most of the people who do that speak French because they like to have the whole package where they will know that someone who speak French will be able to help them in the hotel and everything. While the German people, most of the time they speak English really well. So it’s kind of okay for them if they don’t have like a French translator or something. So this is not really about how people use the websites. This is also about like our target audience, which in this case might be like more peoples speaking French than German and English actually. So it.
JS: Yeah, really. I mean I always wonder when you go to other cultures like in Asia for example, where the Con G or the letters are going vertically instead of horizontally or in cultures where the writing is going right to the left instead of left to right. Like are all the toggles different are they vertical instead of horizontal or is it or that’s just like a universal we’ve built this universal understanding of how buttons and toggles are supposed to work.
SW: No I don’t think. That’s what localization is lot about this. It’s not only about translating the website, it’s also about really making sure that it actually works for this specific culture. But it’s quite interesting to work in Luxembourg because we have a lot of different, like people, different cultures. We have a huge Portuguese immigration and the also Italian immigration. So it’s quite different languages and make some. It’s really, really funny because like France is really close in Germany also, but you have those kind of small differences like we wanted to do a barbecue with my colleagues and the Luxembourg this guy said, okay, I’m going to bring one baguette. So you know what a baguette is? It’s like bread and it’s like yeah but we are eight people. One baguette isn’t going to be enough. We need at least three or four. And the guy’s like, what, how much bread do you people eat? And the thing is like in France, when you do barbecue, you have the sausage and this is going to be a real conversation. So you have this sausage and the baguette needs to be the exact size of the sausage. While in Luxembourg the baguette is just like kind a way to hold sausage. So yeah you need quite a small little amount of baguette in Luxembourg compared to the one we have in France. And this is really-really silly some stuff but like France is quite close to Luxembourg. So you may think that’s, it’s not that different, but this is like this really small little nuggets of culture that make it super fun to and, I have discussions with colleagues on everything.
JS: Yeah. I mean these differences are, yeah these are interesting. I mean you also have, I think you’ve also written about accessibility with accents and emojis right.
SW: Emojis not that much but mostly like about accents. It wasn’t really a bad accessory. It was more about user experience for like special characters, which is basically like I’m Stephanie and I have a [Indiscernible] [00:23:19] so I’ve got this weird character, this special character
JS: Special characters. It’s not weird. It’s special.
SW: And I have too many examples of websites who wouldn’t allow to have my special character. So I need to kind of change or spell my name and everything, which makes funny stories. For instance, like I used to work for a French company really-really famous French forum who was all about a teaching HTML CSS development stuff. And I was pulling coded in the database and no one was able to know what was going wrong. Some kind of became a private joke with the people on the forum which is fine. But then I had like stories from some people who were almost denied boarding your flights because the special character wasn’t printed on the boarding pass and then the boarding pass didn’t match exactly their passport. For instance, Emily then on the border and her passport it was Emily. But if you read it E was missing So it was Emily and yeah, of course this was in the U.S. like those people really they don’t joke with boarding persons. Yeah.
JS: [Indiscernible] [00:24:38]
SW: You had like they had to wait like 30 minutes or something. Maybe hoping then that they would actually be able to sort of to board the flight. And this is just because like somewhere in one of those systems he wasn’t able to print the [Indiscernible] [00:24:55]. So there’s like this it seems like some trivial issues but at some point when you have developers who like people who need to remain to the developers that the name of the CEO of the company is like Le. So L-E to make them understand that no names can have less than two characters. So you can’t like put or rejects or something to validate the names because a name can be a lot of different characters and a lot of stuff. This is going to [Indiscernible] [00:25:29]
JS: No I know in the U.S. the U.S. postal service website, you can go in and you can set up your customs form if you want to send something internationally. And if there are accents on the name or on the address when you put them into the form boxes and you click submit, it gives you an error and you’re not allowed to submit it. And for the first few times I was doing it, I could not figure out what the problem was. And it turns out that if anything that has an accent on it, it doesn’t recognize that that field anymore.
SW: Yeah. So that’s kind of crappy experience.
JS: Yeah. No, it really interesting and it’s not even that it’s my name or my address, it’s someone else’s address. So it’s not even like that personal experience to me. Like it’s not my name. Right. It’s someone else’s name. But just as a user.
SW: Yeah. I had issues with parcels, I was lucky enough to send them to my company so I was able to get it. But it was so poorly encoded that in the end, my name and last name ended up merging with a string of completely amazing special characters in the middle. And I’m like, yeah, if I didn’t send this to my company but to my personal address, do people from the post office, they wouldn’t have what was my first name and last name. So at some point like you can do [Indiscernible] [00:26:49] what you want on the website. You should have those kind of things that looks like really little glitches, but they at some point they can really damage the whole experience. So.
JS: That’s really interesting. Well I try to get it right when I close this episode to make sure I get all.
SW: No I am fine with it.
JS: Well I’ll link to your posts and your website and hopefully people will start to follow you and learn about all these different things that they should consider when they’re building their websites and their visualization. So like you said, it’s a complex issue and really interesting. So thanks so much for coming on and chatting about this.
SW: Thanks for having me.
JS: It’s been great chatting with you.
JS: I hope so. That’s the whole idea.
SW: [Indiscernible] [00:27:30]
JS: Thanks to everyone for tuning into this week’s episode. I hope you enjoyed that show. Hope you enjoyed that interview and I hope you’ll think a little bit more about how your visualizations and how your websites can be made accessible to different groups in different populations. So again, if you’d like to support the show, please drop me a line on the show notes page. Please share it with your friends and your social media networks and also consider supporting the show on Patreon. If you’d like to become a Patreon, you can get some PolicyViz swag over there just by sending over a couple bucks a month.
So until next time, this has been the PolicyViz podcast. Thanks so much for listening.