#34: Accessibility, Web Components,and Responsible Development

Hello, everybody, we’re glad to have you here this evening, you’re listening to the drunken UX podcast. I’m your host Michael Fienen.

if you got Aaron back where we we heard your complaints? Loud and clear. And I flew to California myself, and pull them back from rails comp and

Isn’t it Ruby and Rails? It’s there. It’s literally in the name Ruby on Rails? Oh, yeah.

Folks, if you are enjoying checking out the drunken UX podcast, please run by our sponsors over at New cloud, you can check them out at New cloud.com slash drunken UX, they do interactive maps, and other fun things like that. So give them a shout if that’s something that you’re looking for. Let’s see, this week, we are going to be looking at a couple different topics, we’ve got a couple of articles that that tickles our fancy, and we wanted to share with you in the stuff behind them. So we’re gonna be talking about accessibility again, because that is a topic worth reviewing many times, I agree. And then, since we are coming out of our last episode, where I talked with Brian Allen, like about the hex editor, and the work they’re doing in terms of utilizing Web Component components to Unknown Speaker web,

it wouldn’t be addressing your next episode, I didn’t miss pronounce something in the first five minutes of explosions. It, they’re using web components to build up their block editor. And so we’ve got another piece to share with you about design systems and the way they can leverage web components to make your design work easier. I want to learn more about this. It sounds like a fun time, right? It’s, it’s funny, because I have to tell my co workers at at work, as opposed to my co workers at home or else, your co workers at home, Unknown Speaker you

could always tell when I’ve learned about something new in preparing for an episode of this, or I’ve talked to somebody who got me excited about something, because I inevitably start bringing it up at work. And web components is one of those things where it was like, have this whole talk with with Brian and we we learn about it, we think about the ways we can use it. And I’m already trying to think like, you know, there’s some ways we could make use that. So we’re gonna talk about some of that. I tonight,

So really, we’re just doing this for us. It has nothing to do with you guys. Yeah. You’re just along for the ride. Know It. It’s important. And we’ve talked many times, I think about, you know, this idea of how you keep up how you train yourself to learn new things. And I would be lying to disagree with that, like, this is part of my process. I think yakking the other developers, figuring out what they’re passionate about what they’re doing and how they’re utilizing new technology is my little bit of insight into those things that I’m not doing. And so there is absolutely a self help, you know, component to this kind of approach. And you don’t have to run a podcast to do that. You could just

that’s highly, highly true. Let’s see this evening. I am drinking a gingerbread. I was only use up some stuff out of my bar. That’s the one that you gave me the recipe for right with the

Yep, it’s equal parts Baileys or any Irish cream. fireball fireball, and peach stops. Oh, peach stops now. I’m sorry, butterscotch. I don’t know why. No idea. Right. I said pizza shops. But

I made myself like a whole shaker. So I can just sit here for nice. But the the actual thing that I’m having fun with though is this last weekend, and there’s a photo of it on our Instagram, which you can go check out. I’ve got these glasses. Oh, I saw that. Yeah, so it’s this sort of square shaped. low ball.

It’s by a company called cork cycle. And they have not paid for anything. I just happened to get it and they are the ones who made it. And it’s got this giant silicone wedge you shove into it and then you fill the glass up with water and you stick it all in your freezer. Then you take it out. You pull the silicone mold out, you’re left with this 45 degree angle the piece of ice inside the glass that you pour your icon to now mine and Aaron can see Yeah, not obviously. But my wedge is now gone. It is a it has melted enough that it is no longer a wedge, but

how gimmicky it is actually. And if you want to see it, I’m going to just for the fun of it. I’m going to throw a link to it in our show notes. So yeah, go take a look at it. Pretty cool. It’s like a it’s like a $17 glass. It’s got like four and a half stars or something on Amazon. It’s simple, well reviewed. well liked glass as it turns out, so yeah, I’m just kind of I’m playing this evening.

No fun for Aaron sadly No,

Well go Can you do me a favor? Go grab the NyQuil out of the kitty kitty a pound that for me real fast.

yeah. And speaking of Instagram, if you want to check that out, we are at drunken, not drunken UX com instagram.com. Slash drunken UX podcast at Twitter and Facebook are just slash drunken UX that you can connect with us there and chat with us. Give us a holler.

Yes, folks drop in ask this question, whatever. My big thing is, if you have an idea for a show, that’s a great way to just hop on chat with us about it. Let us know what you’d like to hear. Yeah. And we’ll see if we slotted into a future episode. And so we’d be happy. And if it’s something we don’t know anything about. We would love to go find somebody who does and bring them in. So and if you’re someone who knows a lot about it, it could be you. Yeah, if you want to be on the show, you can also try to, you know, suggest that Yeah, be happy. Okay, so we’ve got the future of x, I labeled the future of accessibility. Yeah, that may not be a great headline, but it’s the way I titled it in the show notes.

I read the article that you sent me.

Yeah. So I mean, it’s definitely kind of a not rosy, sorry, I lied. So view of things, there will be a link in the show notes.

When it’s a short article,

with outside resources. Like every other word is a link to something practically. And it is Ethan Marcotte, right, I mean, how do you possibly go wrong? In that situation? So what he’s, what he’s talking about in this article is this idea that it is 2019, we’ve been building websites, for the better part of I was going to say, you know, you know, 25 years, really, it’s almost 30 at this point. But, but really, you know, the, the Golden Age, so to speak started right around 1995. So, you know, it’s bad be, what, 24 years, so I was 25?

Yeah, that was sort of, you know, the ushering in of this modern era that reflects kind of what we have now. And in all of that time, his argument is, we are still awful and reducing accessible websites. And,

Yeah, yeah. And in part of, you know, in lieu of that, so to speak, one of the things that Ethan is making a call to is a research project that webbing published and they they went through, and they analyzed a million pages, and I’ll will link specifically to directly to the report, but the report is also LinkedIn in his article, they analyze the million pages and tried to find what kind of problems there were. Okay, remember that now? And so there’s this section in the article that it starts it just and it hits very high level stuff, just to kind of showcase some of the problem with

Yeah, and they are. One out of every 10 homepages has a skip link to help users jump directly to a pages content. But one out of every 10 of those links were broken. There were roughly 2.1 million layout tables detected and only 114,000 data tables.

Yeah. So I mean, that’s a jumping off point. Because the thing is, it is 2019. We have been doing this forever. We we’ve talked about it on this show in the past, and every conference, you go to somebody’s talking about accessibility, and we have been forever. So why is it still so hard? And like thinking about things like, you know, JavaScript frameworks in the light, a lot of these frameworks now come with accessibility functionality baked into them. And yet, we still I might worry there is that it’s sort of symptomatic of us thinking we can just offload all of our accessibility concerns to the software, and the software will just

And I guarantee you almost all of them.

well, I mean, it’s it’s not necessarily up to WordPress, it’s up to the theme developer. And oh, yeah, could you know, and making sure that they implement on a given image, depending on and this does depend on how the images are being called? And, you know, how they’re presented in the layout. But, yeah, I mean, it’s entirely possible to, you know, have images presented on in the theme without anything that’s, you know, if that’s what you’re after. So like, in that kind of case, let you know, when you think about a WordPress theme, for instance, and people who develop WordPress themes, you know, if you go get your theme from a, you know, from theme forest or something like that, yeah, you know, a company like theme station, or one of these that is known for building themes, that’s their bread and butter, they’re doing it for, you know, thousands of websites, you can trust what they’re making.

But for a lot of folks, they are getting by implementing stuff that they don’t necessarily understand completely. I would challenge anybody, for the most part to tell me that they have read every inch of the documentation for WordPress, and they know every hook and all the arguments they take and all of this. And the problem becomes it’s easy to implement something incomplete incompletely. Yeah, that feels complete.

But no, but it’s, I mean, yes, I agree. Yeah, no, I don’t agree. It’s, it’s this idea that no matter what we do, you’re talking about an unknown unknown. Yeah, yeah. If you are building your first WordPress theme, as a developer, and you’re relying on the documentation, and you’re getting by your, you find your function, that’s the function I need. And in most cases, it’s very easy to use those functions. But if you are somebody who is still learning this stuff, and nobody has ever told you, hey, make sure you’re including alt text in that image tag that you’re writing, right? Then, you know, you don’t know what you don’t know, in that situation. So right, yes, hi, possibly put it in there. Gotcha. And that’s true of it, you know, any kind of technology that if you don’t fully understand it, which, I mean, let’s face it, most web developers do not understand the technology they are using, through and through whether that’s react or Angular, you know, PHP, are, you know, Java, take your pick. We know we may know a lot, but we don’t know it, absolutely through and through. And it always leaves that opportunity for doing something like game breaking wrong, but just not in the most optimal way all the time.

Or picking colors? If you ever known somebody or talk to somebody who’s colorblind, huh? Oh, yeah, are completely and blissfully unaware of the challenges that can come by combining certain colors together,

and you know, for a fact that you have seen a website, some point in your life. But we do because as an industry, right, we are an open industry, we are an industry that fosters you know, challenging things, and learning things and experimenting, and this idea of just getting, you know, diving right into the material. And there’s not necessarily a lot of hand holding that happens in that process, especially when you think about some of the folks who are really getting into web development. They’re getting into it very young.

Yeah. And if you’re a middle school or high school, or if you’re in one of those code, Academy type things, or anything like that, the boot camps, you know, you’re you may be getting into that super young Well, before, you know, any kind of formal training would ever even dictate something like, Oh, and by the way, here’s accessibility. And a lot of those specs also, because we preach a lot, right? This idea of accessibility should be the, you know, the first thing in the door, basically, like it should be part of the conversation from the start. But from a learning aspect, that intrinsically cannot be true. Yeah. Because you can’t, while you can, certainly learned some principles. There is also the technical implementation side to it that you can’t use until you understand how the rest of the code works. You know what, though?

I remember that phrase, because I remember saying that’s a cool, right.

I think the reason that’s hard, and the reason that doesn’t work as well, is because let’s take, you know, font contrast issue. It’s easy to put the colors on the page. But there is no feedback. Yeah, there is there is no mechanism by which anything other than if you know, I want, you know, yellow text on a white background, because that’s what my, I thought that looked cool. Oh, and you know, it’s a dark yellow, give me a break. But if that’s what I want, and I write that code to do that, and it works, then I think that that’s the the exact danger of the cargo cult, right? sure that you you are repeating something that isn’t good for you, right? Because you get the outcome you expect. But you don’t necessarily understand the consequences are long term implications. And with a contrast ratio, it instinctively requires you to use another tool to then figure it out.

They’re also browser side improve and is it the x have both X plugins will link those two just for the sake of argument, but they give you like, they’ll scan a page that you’ve got open in your browser.

And I think you’re right, like, when we teach people, I think we certainly can say By the way, as soon as you’re done, the very next thing you do is run this tool. Yeah, I think that is certainly something you can teach. But only if you’re in teachable setting. If I am sitting up on my computer at 10 o’clock at night before I go to bed, and I’m 16 years old, I’m just looking for how do I make font yellow, right? I’m going to get a line of CSS and keep going. And that’s Yeah, that challenge that’s that just dive in and learn by doing and that the Learn by Doing process is fantastic. And it’s something I advocate for and I encourage people in, but we can’t pretend like that doesn’t all share have drawbacks?

And the The other reason this becomes hard is and we’ve said this before, it’s nothing new that the ideas of like design and development and content authoring are distinctly different. Yeah. And in congruent skill sets, that you’re asking all of those things to align into accessibility, you know, the developers have to build the things accessible, the designers have to know how to design the thing accessible. Yeah. And then the content authors need to know how to use the tools to put in the information to make it accessible,

those things are hard to get into alignment. It’s a lot of overlap. Yeah, it’s there’s a lot of overlap. But not, it’s just not in the right places, I think to to get the right outcome for most places, and I’m saying this very generically, because there are certainly places that have solved this. But the solutions are generally unique to each environment, because your workflow doesn’t look like my workflow. Right? Wait, the way you know, you’ve developed a tool is the way I’ve developed the tool, that the Nexus for this really is user experience. Right? and to a lesser extent, QA,

Yeah, yeah. If you’re on the job.

Yeah. And I will admit, our team has had a lot of success in that area. Actually. We’ve got a project in the works right now that I’ve been in thrilled that all of our early discussions that we’ve had with the first round, like design, comps, and everything, have all included multiple questions about can you change this color, because we can’t build it without violating? Excellent. Because the again, the person designing it didn’t know, in fact, the person designing it was following a pattern that we do use on our website. Now. We just have not gotten to a point where we could change it yet. But with new so we can, you know, with the new development, we can say, you know, what? Do development we’re not going to make that way. And their brand colors. Oh, you know, it’s one of those things that you know, the brand colors are the brand colors, and you have to find, you know, in those situations, the trick is to find different ways to implement those colors. You know, you can’t just use them any way you want to as a consequence of that. And that can be a incredibly difficult thing to make people who get paid a lot more than you understand.

Yeah, it’s the You Can you change the color? No, you can’t change the color. That’s our brand color. That is literally the brand standard. And they’re right, it is the brand standard. But that doesn’t mean we have to use it here. And so to get to your point, though, I’ve been thrilled that we’ve got all of our team members thinking about that constantly. And we’ve got QA that goes in and checks that. But I’m also not going to pretend like that’s not a fairly unique thing. I think.

Any any chance we get? And that’s true to like going back to the Jimmy looking at how to make a yellow text at 1030. At night, the thing that he finds shouldn’t have a note there says, Well, no, I mean, do it. You can use yellow text, or just have to use it in the right context, right. And in most cases, it’s not the right context. But you can do it and have it be accessible. Sure. But that information should inherently come with a caveat that says, use this. But if you’re going to use it as a font color, make sure you have checked X, Y and Z and in most cases it doesn’t. And even if it does, most people don’t read all that.

I have a analogy. Yeah, I really like and I’ve been thinking about it a lot more lately. And it’s one that irritates people because of what the end of it is. So I compare this to construction, we I’ve always thought about web development. From a construction standpoint, my dad was a carpenter. And so I think I just kind of root at the root of it there. But there are a lot of parallels, I think, from a process standpoint, from a specialty standpoint. And I think that bakes into why we have so many problems with this, though, because there’s one area where we don’t at all align. And it’s the thing that makes the difference. So when you’re building a building your got, you’ve got a new business downtown that you’re going to go make and they need, they want this building made, they’ve gone and they’ve hired their architect, and they’ve got the contractors lined up who are going to get all the teams together to build all this. And then you’ve got, they’re going to line up connecting with the inspectors at the city to make sure all your quote code enforcement is right. And that’s the thing, because code enforcement isn’t so much about literal code. In our industry. It’s about the standards enforcement. Right? When you’re in construction, when you’re building buildings, every city has its own codes, most of them use the the international building code as they’re like baseline, this is the way things need to be built. And you have to have a city inspector sign off on those things. And if Ryan sector walks into your four story building and sees that you don’t have an elevator, yeah, he’s gonna shut your project down, and you’re going to have to fix it, even if the architect was too dumb to know that he needed to

Yeah, very, like invisible kind of ideas, right? Things we just take for granted. We take for granted but things that also don’t make themselves apparent if you don’t need them. Certainly, right. A lot of people never see alt text on an image. So it just doesn’t occur to them that that’s even a thing. But that, and I’m going to use this word, again, that nexus of those skill sets is made possible. And and as a result, we build accessible buildings. Now. The bottom line of this is the reason it works. The reason we build accessible buildings is because it’s regulated. Yeah. And it’s heavily regulated.

yeah, for good reason. But try to convince a world of web developers that we need regulation and enforcement of stand on. And you would have a revolution on your hands, not a revolution of war.

Yeah. Hundred percent.

Yeah. Yeah. Because Because it is it if you went to somebody and said, Yeah, I need this website built. But I also want to make sure we past week, a double A on every, you’ve probably possibly doubled the price. But here’s the thing, most folks don’t even know to ask that question. As a business owner, they don’t even know to say those words, will have an example of later. But

Well, yeah, anymore. So yeah, it’s like, if you don’t have a wheelchair,

out there. But there’s always, you know, stuff is always grandfathered in, of course, you know, old buildings, things like that tend to not have to deal with it anything city owned and most municipalities. Yeah, they have to, you know, fix things in order to use them. It’s, I hate it, because it really, it takes a knife to this idea that we just said earlier about, you know, how we encourage people to dive into code learned by doing all of that, if we if this industry was regulated in that fashion, we completely eliminate the ability to do that.

to to build a site, you would then be required to go to school, basically, yes, what it amounts to, and not everybody can do that. And we already know that access to this is the difference between some people having a career and not and getting ahead and getting out of bad situations like there’s a ton of research about the accessibility to the technology in general is a major factor in the economic status of the people who have access to it. And so it’s dangerous to say it and I’m not saying when I say regulation is the answer. Not saying that, I think that it’s a good answer that I would advocate for it, because I don’t. But I do think that those two things are the fighting forces. And it’s why we have the inaccessible web that we do today. That is the consequence of it.

Yeah. Follow that to its logical conclusion, though. Because in the end, you know, building codes cover more than accessibility, they cover electrical they cover, right, they cover all this other stuff. And in any world where we did that with web accessibility would not be the only thing regulated security true. Oh, one. And so when you say you build a bad website, yeah, you know, what’s the worst that could happen? Yeah, well, if you’re storing a lot of, you know, private data in a really bad way, a whole lot of bad stuff could happen. I mean, yeah, the risks are different. Certainly,

So here’s, here’s the takeaway at this point, because we had set at one, you know, at one stage of the story early on that, you know, there’s no, there’s nothing that forces you to be accessible on the web. And I’m sure folks went, isn’t that what section five is for? And so there’s an article and this was also something that Aaron found and shared, but there was a quote in it that I need to give you guys. This was about an ad, a lawsuit that was filed against a I think was the city is it a city or county, the guy was filing lots of lawsuits, and I have my own feelings about that. But yeah, there was a chunk of text in it, though. Here’s what it said. In June, 2018, 103, members of the US House of Representatives asked the US Department of Justice to quote state publicly, that private legal action under the ADA, with respect to websites is unfair, and violates basic due process principles in the absence of clear statutory authority, and issuance by the Department of a final rule, establishing website accessibility testing standards, unquote. The House members also asked the DOJ to, quote, provide guidance and clarity with regard to website accessibility under the ADA unquote.

Yeah, the DOJ just said, Yeah, you guys are nuts. Yeah. But my point being, it’s, yeah, I mean, 103 members of the House of Representatives is, you know, that’s 20% of the House of Representatives give or take. And the key to that whole quote, there’s one word that that whole thing hinges on private, private legal action, what they’re saying is, private companies have no obligation to follow those rules, or shouldn’t, unless a very clear rule is established under the ADA right now. It’s just kind of assumed that these things go together. And from a legal standpoint, that can be dangerous. So I say all of that, to just emphasize the idea that this is not, like, solved territory, it’s not a health problem,

And there’s, these statements come across the little trite, and I know that but things like accessibility, accessibility is never done, a website is never finished. But the reason those kinds of phrases are meaningful here is that doesn’t matter where you work. Most places that have a website, do not have a full time web person on staff. They bring somebody in to build the site. They do it, and then they leave.

Yeah. How many restaurants Do you know, have a web developer on staff? But anyone? Please, don’t tell me Applebee’s.

And it’s, you know, this creates this sort of wave of a process. And the process is never able to overtake the wave as a result, because for a lot of places, it’s always a catch up game. And then, you know, four months into a project or four years down the road, they change a tool. Yeah. This was something that, Aaron, you were talking to me about before we started the show. Right? Yeah. You had a great tool.

And then it was decided by people that weren’t you to change the tool?

What was the tool changed it set the whole process back behind it? even further than, right? And so they’re all these factors that come into play? That, you know, this reason why always feels like you’re playing catch up. And everybody says, we’ll just include accessibility at the start of the conversation, folks, the conversation has been going on for 25 years, this isn’t a thing, you know, most folks are not working somewhere where they’re getting to do something from the ground up scratch where they can really do that.

That’s lawsuit territory is Yeah, means. There’s also this idea, and I say this with all love in my heart, that content authors are dumb. And that’s that I, you know, I know that they are not in a general sense, but about this they are. And I always use this idea of, you know, the Secretary in the art department, you know, right house with, you know, other duties, as assigned, will go update the website, she doesn’t know what all text is, and she’s not going to come to your training, where you explain what it is. It really, is it her responsibility to know those things. And it No, no, absolutely is that that has been thrust upon her. But that’s the way the web gets built. Unfortunately, it happens everywhere.

right. And our tools aren’t good enough for that. That’s sort of the the gap there is that the tools that we put in front of these people into your example, Aaron, you know, if you’re using WordPress, normally, WordPress doesn’t require alt text, it doesn’t require a description, it doesn’t require a caption, none of that has to be put in. And there’s nothing context aware about it so that when you do put it in, it doesn’t highlight the thing in read and throw up a box. It says this image doesn’t have alt text, there’s no feedback loop on any of this stuff. That would

And the the consequences are very real. If you if you’ve ever used a screen reader, and I’m, I’m sure you haven’t, because I’ve never seen you wear glasses, I don’t think you were contacts.

So you’ve got good eyes, you don’t need to use a screen reader. I don’t think screen reader. But there’s a video clip that’s linked in Ethan’s article will include it in the show notes too. But I want you to hear just real fast here. What this sounds like when somebody is using a screen reader and hits an image that doesn’t have any alt text on it.

So imagine going to a gallery page, you know, a news article that’s got you know, 15 pictures from an event and hearing that 18 times. So you know,

Not only do not know what happened, but it just takes up time.

At the end of the day, the only takeaway, there’s only one thing we can say about this. And that’s the fact that when it comes to accessibility, all of the responsibility is on you and me and Aaron, to just keep talking about this. Yeah, we need to work it into training cycles, we need to work it into documentation. I was gonna say if you’ve got if you’ve got slack at work, like we use Slack, I think you do too.

Yeah, I get a handful, get some QA folks in there, get you know, your developers in there, one or two of them, get a designer in there, get that representation of that Nexus that we’ve talked about, get those people in there and use them, you know, they are Hugh Borg, you’re going to use them to infect the rest of the collective, get them to understand the importance of of accessibility,

Now, number two, for the evening for the day, doesn’t matter whenever you’re listening, web component design systems. Now, if you listen to our last episode, great, if you haven’t go back and listen to it, then come back to this. Because I think that there’s a lot of good information that factors in here. And it’s this idea of using web components in your development. And that has a lot of context to that. A lot of folks aren’t familiar with.

Yeah, right. He was talking about design philosophy, which factors into design systems, sir. Okay. And so like, there’s this idea, right? You have design systems, you have pattern libraries, you have style guides. And so there’s all these words, basically, we got word salad, but they are the same thing. There’s an article. So first off, the article we’re talking about is from the Ionic framework, right? Is it they started out they were like a react based component system. And they reinvented themselves as a web component system. And so this article is from them. So there is take that with a certain grain of salt, because obviously they have an interest in, in promoting their own system. But design systems, there’s an article at UX pin calm that will have linked and they’ve got a breakdown of this that I think is the best one that I could use. So I’m going to use it during correctly. And they they explain that a style guide is another subclass of a design system. The static documentation describes the design system itself, how products should look and feel, use cases for UI patterns, correct type of graphic scales, etc. The pattern library is also the subclass of the design system. It’s the set of design patterns for use across a company. Now, this is me talking, that pattern library will be informed by the style guide. The thing in the pattern library will reflect that

Yeah, yeah. It’s like a code styles. Second, have user flows, these are going to be examples of elements and things that got us on your site, type out things like that the style guide, like as a, as a comparison, it will say the style guide will say we use this font, this is our font, we mandate these kinds of padding and things like that. But it will also include things like this is how we sound. You know, this is the way we write stuff. This is the way we use our colors. This is the way we should display our logos, things like that the pattern library would then have usable examples of those implemented, the design system is all of that crammed together.

Yeah. And we talked about this a little bit. And I say in the last episode with Brian own diet, because what he is doing with hex editor is building a block editor that is entirely based on web components. Yeah. And so this will be a little bit of a review, because we did talk about that in the last episode. But it’s it’s good to rehash the the Web Components standard is like this. It is it is a thing that lives within some other items. So that comes into things like custom elements that comes with Shadow DOM and these kind of tools that together create a web component.

So the example I gave him that up, so I’m going to reuse it because I I still think it’s probably one of the best ones that people will relate to is AMP pages. Okay, if you’re using an accelerator mobile page, or you’ve looked at an accelerated mobile page, go pull it up in your browser and do a view source on it. And you’ll see all these tags, and some of them are normal p tags. The tags are everywhere you know what a p tag is. But then you’ll see an AMP image and potash image tag instead of a normal IMG image tag, right. And what they’ve done is they have created their own component that is the app dash image, and redefined the way they intend for it to be used in the context of that page.

a little bit, but it’s kind of the reverse of that. Okay, it’s more like teaching browsers how to use HTML that doesn’t exist yet. Cool, because the whole idea is you come up with your own tags. I want to create a car called a car. I’m already I’m thinking ahead too far. And I’m finished my gingerbread while I’m at it, I want to create a card that is fienen dash car. Okay, because the dash is important, the dash is part of what defines the custom element. When I write that tag, I may give us some properties, I may say fienen dash car, year equals 1953. Okay, make equals Chevy model equals Bellaire. And that tag when put into a browser knows that I am supposed to render out, you know, a image of a 1953 BelAir with a link to the Wikipedia article on it. And you know, some other content that maybe the is defined inside that tie or anything else I want. Okay, it’s a rapper, it’s an abstraction layer. Because right inside the definition of that web component, you are including all of your HTML and things that would say, this is how this works. This is what the browser is actually seeing. That’s what the Shadow DOM is.

It’s like a WordPress short code that works anywhere.

Yeah. I mean, you have to include the stuff. Yeah, you can’t just use it without the input there, the dependencies that they close analog to this, we talked with Dustin and Episode 31, about styled components, the very similar idea to something like that, you know, React components.

That’s the huge advantage that this has over other things. Is that it? I have a react component? That’s awesome. But I can’t use it anywhere else. It’s a react component. It’s literally in the name. That’s and that was the argument that ionic made with their framework. Yeah, we are stuff isn’t portable,

And that’s their argument to with the design system thing is that maybe part of your team is using react. But that doesn’t mean everybody is or is using the same version of it, at big company, maybe very dynamic and very differentiated in the technologies that uses the stacks that uses anything like that. Having web components in play, abstracts all of that away in a standards based way. And that’s something I we didn’t use that phrase yet. But web components is a standards based utility that you can use to create your own custom stuff. So you know, it’s going to work the same everywhere. Okay, and it is supported across the board. I like that.

So that’s where we get back to this discussion of things like the Shadow DOM. Yeah, the Shadow DOM is an abstraction of the DOM for that element. Right? So if you view source, you’re going to see this weird custom element. And have you ever looked at like an iframe in of use or not view source, but like in the inspector in Chrome? Yeah. And you know that when you haven’t you hit an iframe. You notice there’s like a tag, I think it says, What is it? It’s like a hash document route or something like that, right. And then it gives you another page, but it’s nested inside, right? That’s how Shadow DOM works. Got it. It’s kind of like an iframe that isn’t an iframe. But as many of those features, it’s abstracted away from the rest of the DOM. There’s no style leakage, in or out.

you’ll see the fienen car, but then you’ll see I think, in Chrome, I think it literally just set a shadow DOM and then gives you the DOM for that element that you have defined inside of your spec. And cool that DOM is just normal HTML elements. Or it could be other web components in that case, but in most cases, you’re not, you know, it’s not turtles, turtles, turtles, you’re trying to abstract the layer out. So it’s going to have whatever device spans whatever you need. But it means that without when I’ve got my car gallery up, and I realized I’ve made an accessibility mistake, I forgot to include all attributes. I can’t believe how stupid I was,

all of the talk we’ve done about this, I made this web component, I didn’t put alt tags in it. All I have to do is update the JavaScript file that contains the spec for the web component. And now, okay, all of those instances are now updated.

because they all reference the spec. It’s abstracted. So very cool. The only way that breaks then is if you were to, like actively change the name of a property or something like that. Right? Which, right, it doesn’t happen in most cases, like you would rather add something on and change something that’s existing in that situation. But this is a problem that’s already kind of not solved. But we have an awareness of it as developers when doing like, building class API’s or something.

Yeah. Oh, yes. That’s the word.

I was not going to get there. I’m on my last glass. But I’ve got a whole shaker here that I’ve finished off. So

But yeah, so this is so this is why web components work. This is why it’s good for a design system. Because when those unknown unknowns come up, when you discover, oh, hey, we saw that you have the wrong role on an element, or you’re not writing Aria tags properly here or at all? Yeah, all you have to do is change your spec, and you fixed it everywhere. This was something Brian specifically talks about, right with like, I think it was their video player component. They keep making it better. And they don’t have to change anything. In the content itself.

So yeah, it’s semantically very similar, like you would embed, in most cases, the CSS within the web component. Okay, you are not required to do that. Certainly, you could include a CSS file that is built out with SAS and all that. So you can use all your same variables and mix ins and functions and all of that. And in most cases, that probably would be the preferable way to do it. But you could do them very much like a styled component, where all of your styles are defined within that element. Right? And they are uniquely scope to and you mentioned tachyonic, earlier, I think of it kind of like atomic design. But these are like, right? These are completely self contained molecules in the atomic design sense. And so you never have to change anything outside of them if something is wrong.

it was he thought was okay, because it was really dark yellow. So yeah,

Yeah. Because, again, there’s no scope leakage. Right? When you affect that element, you’re only changing that element.

Yeah. Well, what I’m saying is, if if you’re talking about like a CSS file, for instance, you would need to make sure that the component is importing the same CSS file that you’re pages, right, because it is it’s it is sandbox, basically. Oh, okay. So like, yeah, it will be affected by at least. And if any, if I’m saying any of this wrong, please correct me. But if you the way the Shadow DOM works, because it sandbox is the element at by default, it won’t reflect a change to your CSS, unless through CSS is also included in that element.

so like if you find all the CSS locally inside the app component, and you change like the h1 color, because you’re right, you’re going to change the color and the component, you’re not going to change the color and the component doing that.

But it’s the difference, right? Between sharing or integrating. If you’re integrating web components of your own choosing into your own project. That’s a solved problem. You just include the CSS with it, it’s cached in your browser already. It’s not like it’s re downloading it or anything, right. And so then any changes you make to that file would affect the component where you could even have like a separate CSS file that’s just for components. Certainly 100%. Yeah, if if it’s somebody else’s component, because there is there’s a whole library of web components that you can just go download. It’s kinda like MPM, but for web components, Unknown Speaker Cassie,

those are something somebody else has written. And so they’re totally self contained, again, like thinking about this molecule idea. You can just pick them up and use them in space like they don’t, you have to, you don’t have to link your CSS and that you don’t have to do anything else. Unless you just want to change it, in which case, you would just change it in there. You know, in the include at that point. There’s an article over at Free Code Camp that actually addresses accessibility on Web Components that’s going to LinkedIn in the show notes to that you should check out but this all comes back to this idea that this method becomes very future proof. Because I’m find that mistake, if you find, you know, improper markup or missing something or improving accessibility, changing the spec changes that in all the places that components us, and you’re not forced to go back and redo anything. I like this.

Yeah, the more I have learned about it. And yeah, the more I’ve researched on it, I’ve been building Gutenberg blocks lately. Hmm. That’s been for last several weeks, all I’ve been doing for work for the most part. And as I’m doing it, the more I’m doing, the more I I’ve learned about it. I’ve discovered that a dynamic blocks are your friend, especially in development. But there’s because there’s a problem, right when you write a block, and this is going to get a little technical. So I apologize, and it may not translate well over audio, but we’re going to try. When you write a blog, you define an edit and a save function. The okay the Edit function shows you what the thing looks like in WordPress editor. Okay, just save function is what runs when you hit the Save, or the update or Save button Publish button in WordPress,

And then that gets mashed into the content for the page.

if you then change your markup, and change the structure of it, because like and this is exactly what happened to me as I was building what I was calling the complex header. We had this header that goes on elements that needed a word on one side with a little like descriptive text on the side and an icon. Yeah, and so I made a block called a complex header. But I was working, I was changing, you know, does the icon go inside the h2 outside? Is the p tag, you know, is it? Is it inside a div Can I just use it outside. And so I was moving stuff around as I was building this to get the CSS, right. But what I discovered was as I would save it out, I kept breaking it over and over and over. Because when Gutenberg would reload, it would say, hey, my edit says this. And my saved output says that when I process the Edit, it should look like this. But the code that is in the page that is saved in the page as a result doesn’t match. What do you want to do?

And this has become a big argument in the Gutenberg community over whether or not blocks should be allowed to rewrite the markup of previously saved instances.

technically, it’s very difficult. Technically, it’s an incredibly hard thing to do because it’s saved. It literally renders out of the text blob and saves it into the content field. Right? And so how does WordPress know that it should go back and rewrite, you know, 1300 instances of a given block if your site’s big. And then another folks say like, the blocks should not get to redefine the content the author wanted when they wrote it,

it, I get the argument through and through. But that doesn’t change the fact that there are completely legitimate purposes where I might want to, because I may realize I’ve nested items in a way that hurts a screen reader. Right? I didn’t include an aria role in the right place, or I want to include an aria role. And I want to give the user the ability to say what is the role of this element. But if it changes the markup, I break the block validation. And so web components, I think, are the solution to this, I think, the future of Gutenberg blocks in WordPress, if you’re building custom blocks, I think you should be building custom or web components. I think that is the right way to do that, the more I have thought about it, and the more I’ve looked at the consequences, I think that has to be the right way to go about it.

this is, but this is sort of the neat part, it kind of outlines this idea, and the one that Brian made excellently web components are standards based, it works everywhere. Oh, so Gutenberg, is written then react. And if you are working like you want to do inspector controls, things like that, you know, you’re using react components. And they’ve got this huge library of all of these rack components that you can use near Gutenberg blocks. And it’s incredibly similar process, except that if I want to use a text control in something that isn’t Gutenberg, I can do it. Because it’s a react component, it only works in the context of react, right? My Web Component works everywhere. Yeah, just by dropping it in. And then queuing my JavaScript as part of the initialization function, it will just work. Unknown Speaker And wild

may sound crazy, like it may sound like I’m being stupid over simplification, the Michael thing. I don’t know which word was the adjective in that sentence. But Michael, Michael was the object Michael was the adjective. That’s not always incorrect, as it turns out. But it really is that simple.

defining a web component is a very easy thing. When you set up your block in WordPress, you define which scripts are for the editor, which scripts are for the front end, and you interview them. And you would just say, yeah, and Q, my web component JavaScript with this block, and you’re done. It’s really empowering. And it makes it easy to update these things moving forward. You know, this idea that they’re useful everywhere. And maybe more importantly, to me, and kind of bringing it back to this idea of the design standard. Like we’ve started using, we’ve got a product we’re doing right now that we’re going to be handing off to somebody. And then we’re kind of going to be hands off from that point forward. Oh, but if you’re using web components in it, though, then you can indirectly

we could we wouldn’t, in just the context of the relationship that we have in this case, right. But right, I think more importantly, like we’ve, we took that opportunity to build out a pattern library. And so we use a tool called Astro them, which I’ve got really enjoy it. It’s incredibly simple. It runs, like if you’ve got if you’re using a GitHub repo, and you use GitHub Pages, yeah, you can just have your Astro pattern library run right on GitHub Pages, it’s brilliant. But the pattern library can then showcase every time we make any kind of like block level he kind of element that we need to show them how to use, we just add it to the pattern library. And we say this is your testimonial block, you’ve got your testimonial rotator on the homepage, it’s just testimonial dash block, and you give it your list of the testimonials you want or something along those lines. And I can put it in the pattern library and have the code right there. That is if if you want this type of block, here’s how you do it.

And so it going back to the the starter this part of the topic, this idea of how he designed system as a collection of style guide pieces, yeah, pattern library components and things like this. What it lets you do is take all of that stuff, wrap it up, and then make it easily reusable across to everybody. Yeah, and as a result, it gets really hard to make mistakes with it. Because, you know, think about what you might do to say, you know, make an interactive map. And you’ve got dibs and JavaScript files and and you know, nested sidebars and accessibility pieces and all this stuff. Now, instead of having to rely on your developer remembering to use every one of those days, and oh, the padding on it’s weird, because he didn’t put the rapper div on it, because that does a moron Why? Of course he put the wrapper on it, why would you not the wrapper on it, that can all be integrated into your component. And you just say when you’re making a map, you just put map dash component. Yeah, and you give it your latitude, longitude and a zoom level, and it will take care of everything else that the brand needs from that point forward.

without work, I mean, a little bit, I think, at the end of that well, and so one of the things that Brian was real keen on that we talked about in the first half of the show, this idea of context awareness. Okay, his tool is called context where the hacks editor, at least, you know, if the component that you’re working on has been written that way, so one of the examples he gave was of his meme generator. And okay, he would give it like a title and an image, and, you know, a caption and all this. And the tool is smart enough to know what the things support this. And it could map those together. But one of the other examples was foreground background color. And I, because the tool already integrated a calculation to compare hex values, you know, whether or not it passes, we tagged double A standards. Yeah, and then present an alert to the user. And I mean, at that point, the sky’s the limit, you want to prevent them from saving their content and do that. Yeah, force them to pick colors that are contrast, he forced them to put in that alt text, force them to do whatever you need to. Because you’re building your tools with that level of context awareness. You start to fix those problems, because you’re only able to fix the problems that you can calculate. Sure. And to throw back to the first half of the show, one of the things that was in Ethan’s article was or rather than and web Ames Research, all of the stuff that they found, let me see, here’s the quote, he says, here’s the real kicker for me, me being Ethan. He says, quote, web aim says, These automatically, the technical errors constitute a small portion of all possible be tagged failures. In other words, these are just the errors that could be detected prob, programmatically, the real pictures, even worse than the numbers suggest, oh, that’s accessibility is very qualitative in nature. And it’s not just the checklist, Dad, it’s not just the checkboxes. Yeah, like you say, you can you open the door, yes. But you can’t open it into a wall. You know, there, there are consequences. And there are things that aren’t always objectively able to be substantiated. It’s a very qualitative kind of thing. You know, you get into and you could calculate this, but it would be hard. But contrast, rules change with font size.

yeah, comparing color isn’t actually enough, you have to compare color, and font

And so I mean, it would just be like a, it would be like a boost score something on the color value, but it’s certainly much harder, you know, it makes that much, much more difficult. But there’s, there are tons of different qualitative accessibility experiences. And those things can’t just be programmed into a web component be taken care of. Yeah, that’s where you have to learn it, you have to be taught, you

or separate captions are summary.

you should? I think that’s exactly the right answer. And I think that anytime somebody says, Oh, well, yeah, don’t use this component. Because the guy that wrote it, you know, it throws tons of errors.

That’s the point. And so let me explain to you why that is a good thing. Yeah, you know, and it all comes back to it. Let’s, let’s bring this full circle before we head out of here. Yeah, the this idea of cost, right. Accessibility adds cost to things because you do have to do more work, you have to write the summaries, you have to make sure you have headers, you have to make sure you’ve taken care of alt text that you’ve checked all your color contrast on elements, Gutenberg, you know, Gutenberg supports a color palette. It’s very cool. Okay? When you’re setting up your blocks or your your Gutenberg configuration in your theme, and you can actually define a color palette so that when somebody clicks an element, and the color picker shows up, it has a list of swatches that are predefined to whatever, like your brand colors are or whatever. I like that. Unknown Speaker That is nice, very cool.

Yeah, no color checking on it whatsoever. You could pick the same color for foreground and background color. It’s, you know, stuff like that is going to drive me nuts at the end of the day, because it’s going to take somebody time and money to fix it. And somebody will always come up like in the WordPress community, they’re gonna say, Yeah, but we have a use case for that. Yeah, I don’t know what that could be. But I’m sure somebody would come up with it.

Yeah, we should listen. Yeah, yeah, we should listen to the folks who are complaining. I mean, everybody is clear. I think if this button Matt should listen to everybody with Gutenberg, who has completed his like, the color picker is actually a good example. I think you should probably not prevent publishing content. If somebody is true, a foreground and background color on an element that don’t pass contrast

absolutely throw an error. Or, or just or something. Yeah,

I’m, luckily is the more I drink, the less as holy, I guess I’m just gonna give me a topic. I’m a rant rant. Folks, stick around with us for just a minute. We’re going to check out take a break and come back and we’ll get you out of here. The drunken UX podcast is brought to you by our friends at New cloud. New cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solutions provide your users with an interactive map of your school city or business? Well, new clouds interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers. We specialize in maps, illustrations of many different styles, and are ready to design and artistic rendering to fit your exact needs. One map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request to demonstrate or to view their portfolio, visit them online at New cloud.com slash drunken UX that’s in you cloud.com slash drunken UX. Well, I hope that was useful for you. It was kind of, you know, abstract in its nature. But I like the way these topics dovetail. And this idea of Yeah, you know, being an advocate, being forward thinking, and all of that plays together, and kind of a very weird dance, but it’s not unnatural. I think.

Well, and if this sounds like new and weird to anybody, and you feel like Why haven’t I heard about this, keep in mind whether components only entered mainstream adoption last year? Wow, that’s like, super new. Yeah, it’s very new. But it’s very well supported across pretty much all the browsers. And most browsers do auto updates, it kind of takes care of some of that. But there are poly fills and whatnot. You know, if you go to the site that Aaron mentioned, would web components.org. There’s information there on all of this. You can find the follicles you need their libraries that help you with this. Brian, last week had brought up polymer is one ionic, of course, has their own library that they use. It’s called stencil, I think if I remember right,

So there are a lot of ways to go about this. But remember, web components are a standard, you can use it now. It’s like CSS Grid. You know, it’s one of the things that is entered rapid adoption. And so you don’t have to worry about well does edge support it does offer support everything. You’re good? You’re good to go?

And the accessibility side improves site scanner. Throw those in your toolbar in Chrome and just have them yeah, being that’s free, be an advocate. Check your stuff once while check other people’s stuff, and then tell them when it’s wrong. That doesn’t hurt either. Even if you’re not blind or you’re not, you know, def or have motor control issues or cognitive problems or anything. One of my favorites, I’m giving a talk. I’m going to go long winded for a second, I’m giving a talk here in May at the web accessibility summit on transcripts. Cool. Oh, nice. One of the points I’m going to be making is, you know, accessibility doesn’t mean deficiency. It is a it can be very circumstantial, and some people listen to podcasts at work, or rather can’t do a podcast at work. So they will look first transcript, or maybe they don’t have English as a first language. And so it’s hard for them to follow a conversation in audio format, with a transcript in front in front of them while they’re listening, they’re able to piece it together. There are a lot of those things It doesn’t mean that you’re just blind or deaf, and we’ve brought that up before like accessibility, we tend to think of it in these very, like rigid structures, but it’s not Yeah, at all that simple.

love that. It’s true for Aaron you know it’s true for everybody.

Yeah. And if you do see me, if you’re, if you’re in Missouri, you’re headed to Springfield, you’re going to be at the web accessibility someone at the end of may catch me I’m going to have a giveaway or two that I’m going to take with me there. So that’ll be a fun little thing to be announced, then. I haven’t already. I just want to spoil the surprise yet, folks. Thanks for sitting with us. I hope this was useful to you. What are your favorite accessibility tools? What web components have you built? Are you already using? Let us know? Yeah, seriously, let us I would love to hear what people are doing or how you’re solving any of these problems. Big companies, small, firm, single part, you know, one man, Army, whatever. Because really, the solutions do vary a lot and can be very tailored. So let us know. Because at the end of the day, I only have one piece of advice for you. And it’s the only thing I can tell you at the end of this show and keep your personas close but your users closer by