Well hello and welcome to episode number 62 of the drunken UX podcast. In this week’s episode, we are going to be talking about how the company Webflow is tackling their accessibility strategy to produce a more accessible platform and products for their users. I am your host, Michael Fienen. But I am not joined this evening by your other other host Aaron. He unfortunately could not make it this evening. But fear not, because I have taken advantage of this situation and brought on not one but two of the senior software engineers from Webflow. Ruben Nic and EJ Mason to come on and talk about how they are fostering a culture of accessibility at Webflow. Speaking of Webflow, I want to give them a quick shout out because transcriptions for this episode of the Drunken UX podcast are brought to you by those same fine folks at Webflow. So if you hear anything tonight that you want to go back and reference or or look through, or you can’t get to right now, go to the show notes at drunkenux.com. We will have a full human edited transcript, there ready and waiting for you. Be sure to go check them out at webflow.com shoot him a tweet @webflow on Twitter, let them know that you appreciate their support of the show and be sure to check out their platform.

This evening I’m drinking, if you follow us actually on on Instagram you probably saw a couple weeks ago I posted a photo of a little mini cask that I’m working with right now and I had just put in a first fill of some Jim Beam “Devils Cut”. I’m using that right now to season the cask before I actually putting scotch into it. And so I’m giving it a little taste this evening and it definitely even just after a week the edges — because Devils Cut is a very “Grr!”: it’ll it’ll hit you. But after a week in there the sort of candied cinnamon notes come out real strong on the nose. The edges of it are sanded off though just a little bit and you get like the the first taste, you get some cinnamon, some caramel, some kind of almost leathery type flavors out of it. Still strong, still definitely kicks you in the throat just a little bit, and then there’s hot but I’ll give you another I’m going to give it about a month in total in that cast before I swap it out. So we’ll see. I’ll revisit it in a couple episodes and see how it is. Ruben! EJ! Hey, thanks for joining us.

So you two are senior software engineers at Webflow. Tell me first and foremost what that means.

Yeah, yeah. No doubt at all. So Tell me EJ, let’s start with you on this because you said you went to school to be a writer, how did you go from that to getting into accessibility as something that you wanted to focus on?

Yeah, very cool. Ruben, how about you?

I’m a big fan of human computer interaction as a field. It’s something that it’s, it’s sort of like, to me, it’s the evolution of everything we talked about when we get into UX and user experience, design and all of that, but it gets into so much more of the deep end of that pool in that regard. So let’s go real fast. I’ve mentioned Webflow on the show, probably, I don’t know two or three, maybe four times in the past, usually in talking about like platforms that you can go to to edit websites on and things. I’ve usually said, you know, this is kind of a platform that wedges itself in, and correct me if I’m wrong, but like Squarespace, Wix; these folks are probably in your competitors sphere? But what is — how do you guys view Webflow as a product? What would you describe it as?

The way I think I’ve described it to folks too, in the past is Webflow is significantly more friendly on the back end to a normal web developer coming in and saying “Yeah, but I want to change some of this stuff.” You facilitate that I think, better than many other platforms. Is that a fair… I’m saying all this having never used your back end, but just going off, you know, stuff I’ve read over the last few years about you.

I come from, we were talking about backgrounds a little bit before the show started. And I was mentioning, I started building websites in the 90s. I remember Front Page and installing Front Page Extensions on hosts so that I could upload stuff right — and it was a WYSIWYG! It was designed to let you go in and grab a thing and put it in a place and upload it and have it work. The code of course, that I put out was just garbage. Dreamweaver, when Macromedia still owned that It was very much much the same kind of thing and you’ve got that field. It’s geared towards this idea of, if you can imagine that you can build it, but your emphasis has been outputting code that is standards compliant, that doesn’t make you cringe when you look at it — and I’ve actually been incredibly impressed by some of that. I mentioned at the start of the show that Webflow is sponsoring the transcripts for this episode. I’m not blowing smoke up, anybody’s ass about this, as anybody will tell you, I genuinely am impressed with the kind of code output that your platform has accomplished, even before you started doing all the accessibility work quite frankly.

I talk about Digital Ocean quite a bit, and one of the things that Aaron and I have always been really impressed with is that Digital Ocean came out and said, “we’re going to be this SaaS platform for doing virtualization and provide you with all these things that AWS provides. But we’re going to also own the documentation space.” AWS is super powerful, [but] anybody that’s ever read their documentation will attest to the fact that they aren’t very educational. And to the point of writing documentation that we’ve already talked about, like, that’s one of those cases where AWS engineers wrote their documentation, and it shows Digital Ocean came in and said, “we’re gonna write documentation that anybody can use,” and it really elevated them as a competitor in that space. That’s along the lines of what I also see Webflow doing. Wix, Squarespace, you know, throw any of these people around, they’re doing their thing, but I also don’t see them putting the effort into education and information the way that Webflow is attempting to do.

What’s that? There’s a name for that that you guys have was it? Was it Webflow College? What is that?

University — Webflow University. We’ll make sure we have a link to that in the show notes too, if anybody wants to go check that out. Because it’s absolutely worth stopping by and perusing. Okay. And so from the standpoint of, we’ve got this platform that’s easy for anybody to use, you go up, you sign up, you’ve got all this documentation to help out with it. Who is it mainly that you guys then cater to from an industry standpoint? Are you getting, you know, downtown bakeries? Are you getting like big manufacturing companies? What’s sort of the gamut of who you see using the platform best? I would say that it’s a pretty wide array of business types, wouldn’t you Ruben?

The reason this has come up: somebody, somewhere and I’m sure it was on Twitter, shared out an article that came from the Webflow blog, what we’re doing about accessibility at Webflow. I saw this drop last month, I read it, and that was sort of the the instigating event. I read through this, and I’m like, “I would love to talk to these guys about this.” There’s a whole article — of course, it’s linked in the show notes — that goes into all of this stuff that Webflow has been doing; and what they are looking forward to over the next several months; through the rest of the year; and into next year to try to make this platform more accessible. The commitment that was apparent in that writing, you don’t see that kind of language used very often, in terms of just how committed they were to building a product. Not just the product — and this is something that maybe will come up as we talk some more — But it’s one thing to make a product accessible. It’s another thing to make the output of that product accessible, especially when you’re dealing with users. With this platform that like you were just saying, You inherently have to fight this garbage in garbage out — GIGO — mentality that “users can break your system.” Or, not break it, but they can do things that you wish they wouldn’t, so to speak. That’s that is where all of this came from. So first and foremost, go read that article.

There’s a quote, though, that I want to read out of it: “To us. This is both a challenge and an opportunity to make it not only easier to create accessible websites with better tooling, but also to educate both ourselves and our customers on the principles and techniques of accessible design.” It’s a short sentence with a lot packed into it. That is a lot of ground to commit to covering. So that’s what we’re going to talk about through the rest of the episode is all of this stuff that you guys are doing and with an eye towards “How can other people translate this advice to their company,” because one of the things we get, we struggle with constantly, right is having the time to do things, making the business case for it, showing the importance of it and the impact of it. These things are hard challenges, and they can be really hard in the business world to a CEO. Time is money. You know, it’s a throwaway kind of cliche, but it is a reality of working. So that’s what we’re going to try to dig into for this. Now, one of the things that I want to talk about is what you’ve done so far, because It’s not like you hadn’t done anything. There was actually quite a bit that you guys had sunk into this, as far as making it a core company value for you guys now, right?

Internal efforts is an interesting point, too, because all of this is great, is you know, to hear. But you need people to know how to do it. You guys have committed internally to making sure that your developers, and designers, and QA folks are, you know, immersed — maybe not completely — but have exposure. Maybe that’s the best way to put it. Right? They they are being exposed to what accessibility means. Right?

This was like the moment in The Dark Knight where the Joker walks in and snaps the pool cue and is like, “we’re gonna have tryouts.”

The right time to take advantage of an opportunity is when it’s in front of you kind of thing.

So if you had to estimate right now, of your team, and I don’t know your organizational structure, but from developers and whatnot: how much of your company so far has gotten training in accessibility to some degree or another?

I will second that their their stuff is also top notch. Yeah.

Oh, nice. I didn’t know that. I do know, as I’ve known a few folks that have worked there, [that] their business cards are both printed and in Braille.

It’s very cool.

Some people might say “well 30%? Man, 70% of you haven’t had it.” But 30% is lightyears ahead of most other organizations. That really — I just want to emphasize like how impressive I think that is, to have committed to that from a learning standpoint, and the number of angles that that impacts; like you were just saying that the amount of coverage that gives you is really quite impressive. It builds a culture, that’s what you’re striving for. I shied away because of this point that you’ve got here — somebody had written this in — you’re not accessibility experts, and that’s almost how I introduced you. I’m like, “Nope, that’s I don’t like that phrase,” because you mentioned you’re, you’re trying to build a culture of accessibility. And I think that’s really valuable. To me, anyway, I see it as something that emphasizes, you know, outcomes over issues. To go back to the lawsuit thing: A lot of the times, accessibility problems end up being something of a punch list. “We check the contrast, we check our alt tags, you know, then, okay, we’re done! We did the things!” But that’s not the way accessibility works. It’s like anything else: It’s part of our process and cycle. It’s identifying door handles over doorknobs; It’s about understanding that elevators don’t exist just because you have multiple floors; And it’s easy for me, because it’s easy for everybody. That’s something that I think is sort of a — hats off — that you guys have embraced that idea of what it means to make accessibility be part of a culture.

I think Aaron and I both talked about this on on the show before: One thing we’ve always emphasized is to use a screen reader with websites. Now a screen reader is a very narrow scope in terms of particular accessibility problem. I can install a screen reader though, I can use the screen reader I can listen to it; but my experience with that screen reader is not the experience that somebody who is blind is going to have with it, and when you really sit down with a blind user and listen to the way they use a screen reader, it will absolutely blow your mind how different their experience is. Because even though I can, you know, intellectually kind of understand what I need to do to test that, I don’t have that experience and it’s very hard to emulate. It makes for a barrier that I think is intimidating to people. And it’s one of the reasons why I think we don’t do more in some cases. But that’s okay. It’s okay to ask questions and to reach out to people and things and that’s what I hope. That’s that’s the culture piece I think that comes in here is getting to be okay with asking those questions to folks and listening. Listen to the feedback that you get when people give it to you is a humbling to say the least in some of those cases.

Yeah. So with what you guys have done, you’ve so far, you’ve been working on microcopy. in the tool. So that’s like little, you know, hints and information as people are using the platform. You’ve done things like make ALT text a bigger component of image elements and brought it to the forefront, which always raises an interesting question to me: We we talk about ALT text a lot. This is almost a rhetorical question, but I sometimes wonder, “do users know what ALT text is?” Like what the word ALT means? I don’t know! Have you guys run into that by chance?

I would like to see us use just “descriptive text”. Let’s just call it what it is. Let’s stop using ALT. ALT is itself a little obfuscating. But that’s a whole other conversation.

Let’s see you highlighted that you’ve changed CSS backgrounds. This is actually interesting but also [a feature] that I think is overlooked frequently, especially as we’ve gotten better about how we use imagery and CSS, and the fact that we can do you know, CSS masking now with images and control the shape of things and where things are positioned and radiuses and all of this. But images and CSS can’t have that alternative descriptive text associated with them. You’ve gone through and, because you have got a library of themes..? Maybe I’m using that phrase wrong — layouts?

Components. You’ve been making improvements across the board to pretty much all of those types of elements, right?

Yeah, okay. Yeah. Do you guys and this is another sort of offhand thought, um, we’ve talked many times about web components on the show, and it’s something that I’m kind of in the middle of right now with some other work. Do you guys leverage web components to any real degree within the back end? Or is that something that so far as you’re trying to stick more to straight up normal semantic HTML?

Okay.

Let me ask you a question about that: So, talking about tabs, because tabs are something that, in visual design, we have defined really well. But tabs aren’t the thing in the [W3C] spec; they aren’t something that exists. So what was the process there in terms of adding [them]? Was [it] ARIA roles? What kind of workflow did you go through there to make those be more accessible?

What I would love to know and this is not the time or place for the question, but I would love to know how on the back end side of that you deployed and rolled that out to people? Because I can imagine the engineering required to republish those elements and make them all be in line with your new code.

Yeah, like you say, you don’t want to break this stuff that is already out there. Because that’s a real quick way to make the clients angry.

So let’s you mentioned the future:, of course, now you’re writing more content, but down the road you plan on bolstering what you’ve got in Webflow University. But even inside of your editor itself, right, you’ve got some stuff that’s going on there that can provide… is it instant feedback? Is it publish level feedback? How is the tool itself helping facilitate to the editor, who may have no, you know… let’s imagine it’s Grandma’s dumpling shop. She has no clue what any of this stuff means, but your tooling is going to be designed to help facilitate this, right?

There are some articles on that that I’ve read; I’ll try to find a couple of them throw them in the show notes now that you brought it up, but yeah. A lot of people don’t realize — and I’ll reuse a phrase: garbage in, garbage out. It’s funny how that applies to machine learning, in particular.

Yeah, and I would 100% agree with that, especially on like the 30 to 40% line. I’ve talked to folks outside improve. I’ve talked to a lot of these companies that do automated scanning and whatnot and it’s easy to check the mathematical stuff; color contrast, comes to mind. One of the new WCAG specs: minimum hit area needs to be 44 x 44 pixels, I think. We can check those kinds of things really easily, but usability goes so far beyond the strictly mathematical, and that’s where we run into the most trouble. Reading level! Reading level is an accessibility issue and making sure that the content you’re writing is available to people is incredibly hard. Just the fact that you’re building that far is I think, an a testament to how far you’re trying to push things forward for that industry. Let’s go into sort of the tail in the of tooling. To me, this is QA. I’ve been incredibly blessed in terms of we’ve had a couple QA folks on our team over the last few years that have been really tapped into accessibility. So even when we forget about it, they tend to catch things for us, and that’s on accident. They would they were not trained on it. They just also had an interest in it. From that standpoint, I know you guys have a lot of stuff upcoming, you’ve got a lot of things in the pipeline that you’re working on: What advice would you offer in terms of how you would like to see — let’s go back to a phrase — the culture of accessibility. That means designers need to know about it, developers need to know about it, but also your QA folks need to know about it. How would you advise folks to to start folding that into their process?

I’ll throw in there, just a quick plug, and it doesn’t get into like the screen reader level (someday I’m gonna cross my fingers) AWS now has device farm, which is a service you can plug into to do testing and things across multiple browsers and mobile devices and things like that. It’s at least a start. If you don’t have a bunch of devices — we’ve got, at our HQ, a filing cabinet with folders in it, and the folders literally have iPads and Kindles and all of this in it — but device farm is a start towards virtualizing some of that process. It’s at least something but it doesn’t do the screen reader side and some of that, which I think is the ultimate consolation, so to speak, there. … Consolation is not the right word I should use there. But I’m already, I’m now into my gentlemen jack. So I apologize for that.

So, at the end of the day, one of the big challenges — and you said something early on that struck a chord with me — which was that your CEO was on board from the start with these efforts and the value, and he sees the importance of it to build a better web; that’s why I make this show is to give education and to help people do better with things. A lot of folks don’t work at those companies. So you have to make the case for why this is worth digging into and why it’s worth spending time on, as a tradeoff. There is an article, that I’ll have linked, from the Google Design….er… well it’s Google Design’s blog, I think it’s on Medium, so I don’t know if it’s an official blog or not. Susanna Zarasky…? I always have trouble with names, but that’s a well-known fact at this point. There’s a good article there that I’ll have linked in the show notes. It’s a little longer but there’s a ton of information in it. We’ll have a couple of others that we’ll reference in some of the stuff we’re going to talk about. It’s always possible to make this case. I think we can dig in a little bit on this, though. I don’t know, for you guys, is this something that started grassroots from your developers and designers, was it passed down from the CEO, how did you guys make the case for the value of investing in your accessibility efforts?

If nothing else, at the end of the day, Section 508 is a thing that exists. That’s a starting point, if nothing else, for a lot of people. We, having come from a university background, that factored heavily into my work; Policy 1210 is Kansas’s statute on it. You mentioned, of course, the whole lawsuit underpinning to motivate people; that’s a terrible reason to get started….but that sort of mitigation can form the basis for an argument in terms of why some attention should be paid to it from the start. There is a note here: “WCAG is not a finish line.” That is, so much more true than people give it credit for. Everything we do is a process; the way we approach accessibility has changed from when I started — I built my first website in, I think 1998? — What we had available to us then is not what we have available to us now. That process of constantly trying to iterate on what we know is, at least, it’s a motivating factor for me in terms of always trying to improve on the things I did before. We joke a lot about looking at code you wrote 2 years ago and cringing because it reflects so much of what you realize you didn’t know. Accessibility works in the same way: TABLE layouts to DIV layouts is the class example I’ll throw out there. That’s the easy stuff though, that’s the easy mentality. What about from an education standpoint. What motivates you guys, or Webflow, or any company that they could dig into?

That’s a tough word for people, because they feel like it’s this “new-age” kind of thing. But it’s not. It’s all about understanding why the things we do don’t reflect our experiences. I’m 38. I’m a 38-year-old white male. I understand that I live in a world that has benefitted me in a lot of ways that I will never understand. But it requires stepping out of yourself a little bit to understand that other people don’t have your experience and other people aren’t going to react in the way you do now, and understanding that I will not interact with this stuff in the way that I interact with it now. I may lose my vision. I may lose my motor control. I may lose my mental ability to read, or do things. All of these things — the classic phrase, “We’re all temporarily abled”, right? We all are going to experience some level of disability down the road. Baking that into our thinking now will benefit the way we work going forward. Correct me if I’m being unfair in any of that, but that’s just the way I’ve thought about it.

There’s a topic that is going to come up here, and I don’t know if it’s going to be on the next episode or the one after that (so keep listening! Subscribe, do the subscribey thing!) There’s an article that’s been making the rounds about the accessibility of state COVID-19 sites. That’s a really interesting exercise in that because the people who need the information the most from those, are the people who are most likely to have any number of disabilities, whether it’s motor control, low vision, things like that — it looks at the accessibility of those sites and while the outcomes of it were better than expected, they still had a lot of failings that were important to acknowledge. That’s the kind of stuff that, if I have to build that kind of site, I have to be cognizant of who’s going to consume it, for instance. Or if it’s Amazon — Amazon dealing with all of the online ordering that’s going on right now, and how accessibile is their site? I’ve never really gone deep into the accessibility of Amazon. Quite frankly, I think that would be a great future episode, to see “Can I order an item if I close my eyes all day, and temporarily affect my vision?” I don’t know! Those kinds of things are worth weighing, at the very least. It’s hard to put yourself into those positions some times.

How we learn this is an important conversation, because as we’ve talked about before, we’re bad, as an industry. We don’t do a good job in terms of teaching people accessibility from the start. Whether you’re learning it because you look up stuff on StackOverflow, or you’ve taken Web Design 101 in college, or a course in a high school on Intro Web Design, this is not the first thing you learn in any case. But so often, one of the conversations is if you learn to build good, semantic, well-structured HTML from the first step to getting down that road. So often, people don’t learn that. They just learn how to do the thing, and they don’t understand the underpinnings of it or the additional stuff they can do to help it; whether that’s adding ALT tags, or ARIA roles, or things like that. There’s so much more to it; understanding that when someone comes to you and says “Hey I can’t use your thing,” it’s not a criticism of you, it’s an opportunity to expand what you know and what you think about how you build things. Because that’s the goal, we have to always get better; there will always be blind spots — and that’s ok! The web’s a big thing, there a lot of frickin’ tools we have to learn and use and build with, and none of us are going to be perfect at all of it. But at least right now, I think we’re a long way from this idea that if I build a 3-story building, I’ve gotta put a ramp and not stairs, I’ve got put an elevator, and all this. Those things are built in to codes that we just don’t have yet in our industry.

Hiring is a big part of that, right? Hire the people that will advocate and stop and push back on things, and acknowledge them when they do it. We need those moments where folks have to fight a little bit, and it’s okay. Be subversive. One of my favorite pieces of advice is “just don’t tell people that you need time to do that,” just tell them that you need more time. They don’t need to know why. If your marketing team wants a thing built, and the thing is complicated, and it needs some accessibility work to be right, don’t tell them that, just tell them it’s going to need 3 weeks instead of 2. More often than not you’ll get away with it. Then, after the fact, you showcase how usable it is and you build that feedback from, whether it’s users, or clients, or whatever the case may be, build that as something to come back with later and say “look at this stuff we’re doing. We’ve been kind of doing it on the side, we know that it took longer, or whatever, but here’s our body of evidence that shows why that was worthwhile.” Maybe that can provide some of that foundation, moving forward. There will be some articles in the show notes that can help with some of that, but…. gentlemen, I appreciate the time you took tonight to sit down with me on this episode, and talk through what you guys are doing. I’ll be really interested to see how this pans out over the next year, couple years — I mean, it’s a process, so it will be constantly be improving. Maybe we revisit this topic here, after a while, and see where you are at work.

If you’ve been interested in the discussion we’ve been having tonight, if you wanna check out Webflow, they’re a visual web development platform that let’s you design, build, and launch completely custom websites without writing any code. You can combine design, animation, content management, marketing, eCommerce, all of these tools into a single tool that empowers — whether you’re a non-coder, or a coder alike — to ship and promote websites of all kinds in a faster and more cost-efficient, more collaborative way. They power websites for innovative companies like ZenDesk, Idio, Lattice, GetAround, and Dell. If you wanna check them out, go look at Webflow.com, let ’em know — I don’t know if there’s a comment box, or a lead form, but let them know DrunkenUX sent you. But definitely take a second and go check out their website and let them know you appreciate them supporting the podcast.

Guys, again, thanks for sitting with us tonight. I know it takes a lot out of your evening, and we record late at night. I preface everybody by saying I try not to get *too* drunk on the show, I will admit, that I’m now — I’ve killed my Gentleman Jack bottle, so I know I may be running a little long at the mouth, so hopefully they won’t come out in the mix, but first and foremost: EJ, take a second, talk about anything you want folks to know about, whether it’s you, or what you’re doing, where they can find you, what you’ve got going on. And Ruben, you do the same thing, let them know what you’ve got going on.

It’s the most on-the-spot thing I can do, so I’m sorry.

There’s a lot of new writing that is fascinating to read into. If you’re not looking for the word accessibility, but for the word “inclusive design” or “universal design”, those are phrases that can factor into this field. I have to particularly give a shoutout to EJ for the recommendation — our website had an audio player, of course, for the podcast. They said “hey, you know Able Player is a much better, more accessible player than what you guys have now, and so as we were preparing this episode, I got to looking at it and I literally — by the time you hear this episode, if you go to our site, we’ve already released that update to our theme so that you can have access to that. It’s got speed controls, it’s got fantastic keyboard controls associated with it. Again, it’s just a matter of learning, because … what is it… the cobbler’s children have no shoes? I admit sometimes our website is a little bit of an after thought, after all the audio production and stuff is done. I understand that I’ve got some failings there that need to be addressed, and so we worked that in. I actually really enjoy that effort and that advice, so EJ, thank you for pointing that out to me. Let’s see, outside of that, first and foremost go by twitter.com/drunkenux facebook.com/drunkenux we said it at the start, we’ll say it at the end — instagram.com/drunkenuxpodcast ; Discord is drunkenux.com/discord . If you’ve got a second and you are listening to us, whether it’s iTunes, or Spotify, or PocketCasts or wherever you are, hit the Like button, hit the Subscribe button, do the rating thing or whatever — We love it, it helps us out, certainly. Share this far and wide, because accessibility isn’t talked about enough, by any means. Take that time,, because the most important pieces of advice that you could ever take out of anything like this is: Keep your Personas Close, but your Users Closer. Thanks to everybody, EJ, Ruben, Bye-bye.