Interested in the podcast?  Listen to this latest episode of Skip to Content.

Introduction

It is Episode 11 in our interview series, and a big one for our team as we speak to Brad Frost, renowned design system consultant and web designer from Pittsburgh Pennsylvania .

Around ten years ago, Brad wrote ‘Atomic Design‘, which has been a big influence in the way a lot of people approach design systems for the web.

By its very nature  it speaks to  accessibility and the creation of more inclusive design systems and we explore that further here, discussing the challenge of eliminating the sheer waste you see in web design – time, effort, talent – as well as the broader pursuit of better web design that suits the needs of all users and how we must bake accessibility and empathy into the foundational tools we use in our work.

Brad has a lot to give in this interview and we really hope you enjoy it as much as we we did. 

 


Who are you and what do you care about?

That’s a big one. I’ll keep it professionally focussed because we can deviate. I’m Brad Frost and I am a design system consultant and front-end developer based in Pittsburgh, Pennsylvania, US. And what I care about in the professional realm is helping people make better web stuff – that’s the broad strokes of it. And increasingly, that takes the form of creating design systems to ‘bake-in’ a lot of front end, UX, design, brand and accessibility best practices into a reusable set of components that other teams can reach for and use, and get more stuff for free. That’s been a lot of my professional focus over the last decade.

I’ve loved the Zeldman School of web standards and all of that. I’m a very big believer in the Web and the promise of the Web. And that translates to helping more people access the Web and have better experiences. So that’s been my ‘MO’ for my whole career. And it’s shifted and taken many forms. So that’s a bit of what I care about.

Thanks, Brad. You obviously, quite literally, wrote the book on some of that design system stuff so you’ve been an influence on quite a few of us, which is appreciated!

 

How do you, personally, go about explaining the importance of online accessibility to someone who never even considered it?

I was just having this conversation with my neighbour, actually, not that long ago. She was mentioning something about the layout of the local high school, or something like that, and how it’s obnoxious. And we got into physical accessibility; things like wheelchair ramps and curb cuts and the like. So that’s, often a pretty good in-road. But it turns out, both of her two boys have colour blindness. And so I leaned into that and said, “Oh, it’s part of my job to make sure that when you visit websites that things work well for people with colour blindness. So you don’t want to only use red, for instance, to indicate an error because your sons wouldn’t be able to pick that up. Instead, you need to also have an icon next to it”. She’s like “that makes a lot of sense”.

But in general, stepping back a bit. My perspective is one of ‘old school’ web, like W3C, ‘let’s make the web a better place’. I think that spirit as it translates to accessibility has always been ‘let’s make sure that more people can access their stuff’, irrespective of their ability, their context, where they live, what kind of network they’re on, anything. It’s more about making that promise of the Web more of a reality. I see accessibility as a part of that umbrella and, as such, I’ve learned a lot over the years working with different accessibility consultants and people with disabilities themselves and I, obviously, appreciate that perspective.

It matches quite nicely to how I see things philosophically. My perspective is one of somebody who cares and tries to keep an open mind and open ears and read a lot from people who went “this isn’t just a nice idea but mission-critical to function”.

 

How do you think the Internet, or the Web, will change over the next 10 years? And what specific features or habits that exist now do you hope will be seen as from their time?

There are some pretty giant, macro-level, and cultural things that I will table for the conversation, because we could get into the future of the Internet!

Let’s just say that there is still web design as it presently stands still operating; we’re all still making things with HTML and CSS and JavaScript ten years from now, which I think is a pretty safe bet. What I would like to see, I have no idea if this is going to come to fruition, but I can tell you what I’d like to see, especially with my focus on building design systems. What I see the world over, I’ve ducked my head into a bunch of different organizations, I see how teams create things and build things. And, my God, there’s just so much waste. There’s so much wasted time, effort, talent, on recreating the same crap over and over and over again. Like when I’m working on building a date picker. I would love if ten years from now for that to be a “Remember when we used to make custom date pickers?!” in the same way that going back ten years is like “Remember when we used to slice out little rounded corners in Photoshop and then position those against the button in order around the corners?!” It just seems utterly and completely foolish to not have these things built into the browser. And truthfully, as it pertains to accessibility, there are just so many things that ought to be a part of the web platform.

You see the tragedy that is every single website not being accessible, or having all these sort of critical accessibility issues. And while on one hand, you could shake your fist at an individual developers, that’s not the issue. The issue is that we need the actual what’s provided, what comes out of the box to developers, to have this stuff baked into it.

I also think that it’s important for the tools and the landscape to change. One thing that might be a little controversial, from where I sit, a lot of times, it’s “Oh, great, here’s this new thing, you can use it, this is good” but “oh, it doesn’t work in JAWS, this version or whatever”. And it gets talked about like it’s an immovable thing, where it’s like “Oh well, people can’t update their devices as much” and that’s fully appreciated, like they’re tethered, especially with like a lot of these assistive technologies.

But let’s change that! Let’s fast forward 10 years and every single piece of software in my room and throughout my house has some form of auto-update feature. And we need to, for these very basic level things, to get on a better path where the tools, the landscape, everything is just more accessible; changes can happen easier and stuff like that. And I don’t know what that translates to; I’m not a part of that landscape.

What I get irked by is that so much of this burden of “you need to care about this” and “individual-web-developer-of-the-world, you’re not being considerate enough” because you’re doing all these things. Let’s change the baseline; let’s change the tools that are available in HTML and CSS and JavaScript. Let’s change the baseline for the device landscape, the assistive technology landscape, the everything landscape and remove those sorts of responsibilities from individuals – have more of that stuff baked in to the landscape that we’re travelling over.

It might be controversial. And the last thing to say, to be clear, is I’m not trying to abdicate responsibility or to say this isn’t a concern of individuals. Of course, we do that stuff. But it’s a both/and kind of thing. I think I equate it to recycling a little bit; where there’s this kind of undue responsibility put on individuals when you look at the whole system upstream, these bigger things that actually matter more. We’re being blasted time and time again: reduce, reuse, recycle! I’m not saying we shouldn’t do as individuals but let’s change the system.

It’s frustrating because I consider myself to be well-intentioned and I feel like I’m a little bit of a straw man or representative. I’m here trying to do the right thing and a lot of times when things get thrown at us: “here’s this but you can’t use it because X, Y, and Z” and there’s some stank behind it. It’s like “listen, I’m trying to be reasonable and pragmatic”. It’s like “can’t we try to move things in a different direction?” I’ll do my part, like others and it’s a bit of a black box. And this happens in accessibility. But it also happens in a lot of other spheres, even like browsers in general. It sometimes feels like a black box or it’s far away and you’re not privy to their stuff so I’m sure that if you were to get closer to it, you’d have a better appreciation and understanding of why things aren’t the way they are; and why thinking it’s hard to change. But, at the same time, let’s do it!

We’ve moved browsers a long way in the last 10 years. Why not in the next 10 years, get that accessibility baseline.

In the spirit of having broader conversations and moving those wheels, sure, individuals can moan about it but my understanding is a lot of these assistive technologies and stuff like that are totally cash-strapped, whatever, some of them open source effort. It’s like, “man, you got billions upon billions upon billions of dollars floating around these giant tech companies so sponsor that, just throw some money at it.” You know what I mean?

If you’re with someone who who needs to check how accessible their website is but only has five minutes, or it might be someone that wants to understand it more, talk us through how you go about showing them?

I would say the first thing is just tabbing through on a keyboard and that’s far and away the biggest thing in my work as a design system consultant. I come in and audit and do technical evaluations of design systems and the products that are built using design systems, or target applications that would use the design system – that’s the first thing I do. I don’t look at the mark-up, I don’t look at code, I don’t look at anything, I just start tabbing around. Eight times out of 10, I don’t know where I am. That, to me, is the quickest and easiest way. It’s also the most obvious. As a non-technical person, you can just be like ‘go here, hit the Tab key’ and you should be able to hit Enter or something to trigger the menu or whatever, but just have a go, try to get to this product to click into it or something like that, using your using your keyboard. That’s a very visceral and understandable way of comprehending it. I like that, that’s it’s quick and easy for a layperson. They know how to use a keyboard and then from there that opens the door to a first real sort of smell or signal of how you’re doing.

From there, there’s things like screen readers and so on; on a Mac or whatever, firing up a voiceover. I think that those are good introductions to the general realm and I feel like those go a long way. Whenever I give talks about design systems, I will give an example of HTML one-on-one; you have a label saying first name and you have an input. In order for those things to have a relationship, you need to add the appropriate attributes to them and here’s why – talk about the UX and the ergonomics of you can click on the label and it focuses you on the field, then read out what the voiceover says. For a lot of people who are professional web designers and developers, that’s their first time hearing voiceover. So that’s a fun one!

To give another example, I was like “Okay, here’s a password field with an input, and some helper text that says ‘your password must be at least eight characters‘.” Then we’ll play it out – what it looks like and what it sounds like when you don’t have the appropriate sort of ARIA ‘described by’ attached to it. Then it’s like “Okay, now let’s add that in there” and then I’ll read it out loud again and they’re like “Oh, yeah”. Yeah. That’s all it is – just do that from now on. And everybody’s like “Okay”.

Just do it from the beginning.

I see it as an education. It really is ignorance (and in the generous meaning of that word). It’s “Oh, okay. That’s what that is”. Just a five minute primer can go a really long way to helping people be a bit more considerate.

I think using the Tabs, there’s a lot of common ground in terms of people with different user needs that would need to use use Tab only, or keyboard navigation. You can communicate a lot just by showing that.

 

In terms of the adoption of accessible digital products, what do you think is the biggest challenge facing us?

We did touch on this a little bit there. There’s like a lack of native elements; or those named developments that do exist are incomplete or have rough edges and those need to be smoothed out. I’ll say that the bigger task, or it’s complimentary and related to that, is the general sense of design systems.

Most organisations I work with are in various stages of creating and adopting a design system and looking up to us to help with that. What that means, from a product, like a website, and the web-app perspective, is that the current state really is, by and large, a plate of spaghetti. It’s a big tangled mess; every form is bespoke, there’s not shared mark-up, there’s no shared components being used.

I see the adoption of better accessibility practices as part of the adopting a design system sort of vehicle. That is a big challenge and coming back to this into 10 years on; if you fast-forward. Let’s say a design system is successful, right? What that translates to is your websites and apps that can be powered by this, these consumable, front-end components will have those accessibility features hopefully baked in to them. But also, if there are bugs, if there are deficiencies or whatever, you fix those in one place, and then sort of that propagates out to all these different places.

I see design systems as a mission-critical vehicle for ensuring the accessibility of any web product. And the challenges around creating and adopting a design system almost always have nothing to do with web development or web design; it has everything to do with with people and coordinating and collaborating amongst people, especially groups of people at any given place. So that’s the real challenge – the human side.

Even if everyone is ‘spiritually aligned’, I think that there’s a lot of challenges around getting people to actually execute this stuff. And that’s fine to help with this; help people see eye-to-eye, help people have a shared vision and to help people execute that vision then good stuff like accessibility comes out the other end, which is a good feeling. But it’s hard work. And it’s going to take a while to go from 30 – 35 years of internet, pre-design systems, an Internet where a healthy chunk of it is powered by design system.

I love that. It’s changing the baseline again, isn’t it? This is how you’ve got to build.

I will also say, again, it’s more about tying those two points together. Yes, design systems and bespoke design systems are important and largely from what an individual organization is trying to do and how they can best serve their users and all that stuff; but at the same time, the more tools and ammunition and low level primitives that they have available to them, the easier the whole gig is going to be. Modals are a great example of that – where it’s “okay, we can have our custom one” but it’s “oh, this thing is ready for primetime now, we can now swap that out”. To use the appropriate HTML element – clean things up a little bit, make things easier, good to go.

Once the platform catches up, we can rip out our date picker components. And it’s an easier switch than hunting down literally every instance picker across an organization. So I see them as, again, very important vehicles for ongoing improvements.

 

What is the one thing that every single person can do, or learn, to play a part in a progression towards a more accessible web??

Exhibit empathy! I won’t go into a technical thing – I think it really has a lot to do with when you find yourself second-guessing “is this really important?” You still hear plenty of that sentiment around. Like “that sounds hard” or “that sounds…” whatever. What’s really happening there, is your alarm bells are going off and saying more work or responsibility or obligation is being put on your shoulders, and people push back against that, which is understandable. That’s a very human thing. It’s like, “yeah, that sounds like more work. I don’t want to do more work”. But at the same time, I think that empathy is a critical tool of this cutting through a lot of that, and to take a step back and consider who our work is for; that we are building things for other people to use. And that is really critical to manifest the promise of the web.

Also, even from a capitalistic perspective, reach more customers and do all of that stuff. I think that it is important to really take a step back and go, “Oh, some people are visiting our site like this, some people are visiting our site like this” and it’s our job to accommodate that and to really understand that and say, “Yes, that is an important thing”.

They have care and consideration. Great stuff. I think that’s fine note for us to finish on. It does underpin everything we talked about – just consideration of users and making it as easy as possible for us to roll that out. Is that fair?

That’s exactly it. I feel it’s, a lot of times, idealism and dogmas (maybe too strong of a word) but a lot of times things, especially in this realm. I get a little skittish around some of the stuff. I try to be really careful about that stuff and there’s a real pragmatism to this and it’s like “no, maybe you’re not going to get things perfect” but you should feel comfortable making good forward progress and steps.

And I think that we ought to be more gentle as everyone’s on their journey. And I think that the more we can be rooting for good progress and to set the stage for “Hey, this is good. This journey. Nobody’s perfect.” All that stuff, the more we can throw that out there, I feel like the better we’ll all be and the more progress we can all make.

 


 

Follow Brad Frost on Twitter or Mastodon and read more about design systems and the rest of Brad’s work on his website.