Last week’s episode opened the door to the wild world of web components. This week, Aaron returns to dig a bit deeper into the idea of using them as a way of crafting parts of a design system, and how all of it can tie in to a responsible development philosophy that roots accessibility at its core.
Followup Resources
- ADA lawsuit filed against Longboat Key over website
- ANDI Accessibility Testing Tool
- Axe accessibility plugin for Chrome by Deque
- Build Your Next Design System with Web Components
- Design Systems vs. Pattern Libraries vs. Style Guides – What’s the Difference?
- How to Style Accessibility: a Web Components Approach
- The SEO of alt text
- SiteImprov Accessibility Checker
- Styling a Web Component
- The Web We Broke
Transcript
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
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.
And I’m back. It’s your co host. Aaron. I’m here
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
Oh, I wish it certainly wasn’t rails conflict was Ruby by the bay, a Ruby by the bay I there. It’s all the same thing, right? Sure.
Isn’t it Ruby and Rails? It’s there. It’s literally in the name Ruby on Rails? Oh, yeah.
Yeah, it’s all the same thing.
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,
I find that the preparation for our shows that helps. Like it gives me ideas at my job to it’s kind of neat.
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
do it. Honestly, the amount of effort it takes to run a podcast. I’m sure there’s a way that’s more efficient.
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
Yeah, hot, or the cinnamon schnapps, and 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 still have a bottle of butterscotch notes. From the last time I made them.
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.
Yeah.
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
I don’t hate
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.
I just have I’m actually getting over a cold. So I have just got orange juice. No, no vodka or anything?
No fun for Aaron sadly No,
I promise I’ll still say dumb things though. I bought discipline.
Well go Can you do me a favor? Go grab the NyQuil out of the kitty kitty a pound that for me real fast.
You know that should be interesting. But I don’t know. I can’t make any promises. I’m quality. Any Sudafed in the cupboard? Oh,
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.
And don’t forget trucking next trucking UX comm slash slack for the link to come join and chat with us. We see new people pop in once in a while.
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.
It’s very ominous.
I read the article that you sent me.
Oh, right. Well, it’s called the web we broke, right.
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 you’re able, I highly recommend checking this out, because I think it’s a good it’s not a post mortem, because we’re still in the middle of it. But it’s kind of a good dive into some of the things we’re going to be talking about this evening, and how they do or do not play nice with accessibility.
When it’s a short article,
but it is loaded
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?
Fine.
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,
and so I guess as kind of a breaking the fourth wall here, like we saw this article, and thought, like, we should do a thing about this later. And then there’s another article art, actually to the two articles that came up later, which we’ll discuss later in the show, which are about some of those new cool hotness things. Like with a web components, right? Yeah. And so like, so we have all this really awesome, like stuff, pushing technology forward, and really awesome and new, fun ways. But then we also have this other aspect of kind of the old, not old, but web classic, maybe the accessibility things are, are just sort of baseline stuff that I mean, I guess it’s sort of acting as a dragging force on the forward motion one, but at the same time, I think it’s also really important. And how do we find? How do we like tow that line in a way that we’re still incorporating accessible things, but also pushing things forward in a positive way? And so it seemed like too good topics to juxtapose.
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
a direct quote from the article. The results are in a word. abysmal.
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.
Oh, an overwhelming majority of homepages had images without alt text. Oh, pot pages containing popular JavaScript frameworks will more likely to have accessibility errors than those that didn’t use those frameworks, which is I don’t want to beat a dead horse. But I know I brought this up before.
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
do it for us. But here’s a great example. Like a lot of you know, we talked about WordPress a lot on this show. And WordPress forever, has had the ability to put alt tag on images. And you can even I think you might be able to configure it to where like demands that you include it. But I guarantee there’s WordPress sites out there that have images without alt tags.
And I guarantee you almost all of them.
But but like WordPress even makes it easy, because when you put an image into your gallery, at least the last time I used it much it was this case, you could name the image, and then the name both makes it easier to retrieve the image later. But also, I think the name false through on the alt text, right. And maybe, okay,
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.
It’s the other one job.
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.
And I think I would like to say that I don’t think that we’re saying there should be there shouldn’t be a gate keeping issue. It shouldn’t be where you’re required to know everything about WordPress, for example, before you use it. Right.
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.
I think part of this is that accessibility is kind of it’s not tacked on. But it’s, it’s a layer above, like the functional and practical aspects of creating content or creating anything on the web. And so you can create something on the web and be blissfully unaware of the world of accessibility, which I think is kind of what you were just saying, like, the Unknown, Unknown. So, you know, you may have an awesome theme. If you’re unaware of accessibility concerns, you’re not going to know to look for Oh, does this theme automatically do all text on the on the theme images that I don’t I can’t control? Unless making a child theme or whatever? Yeah.
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,
read texts, I’m in green background,
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, you know, or through boot boot camps. That’s the hot thing right now.
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?
We, if we mentioned cargo coating on the show before? Yeah, you
I remember that phrase, because I remember saying that’s a cool, right.
So, you know, new developers cargo cult things all the time. I mean, I’m guilty of it, like I did it and still do it. Sometimes. It just, if something works, you just replicate, because it works. And then there through applicant works. You’re good. Why can’t we do cargo coating with accessibility stuff? Like why can’t it be something where like, Well, of course, the font contrast ratio looks like this, why wouldn’t it be? Because it works like that? Or, of course, the images all text? Why wouldn’t it have all text, where we just sort of like, you know, it’s just, it’s really, when you’re doing a boot camp, or if you’re training someone new, or if you’re learning, there’s a book, whatever, instead of saying, like, oh, here, so you have the image tag and the source tag, also saying, like, here’s the alt tag, and you write the description over here, you just do, don’t ask why you just do it.
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.
When I was at USC is we we use this tool called Andy A n di, which was made by the end we made by the SSA, the Social Security. But it’s really cool, I put the link in the show notes. And I think that everyone, everyone should have this on their bookmarks bar. You it’s basically what it is, is to bookmark what meaning that it’s like a long string of JavaScript in a URL, and you just drag it onto your bookmarks bar, and then on any page at all, you click the button, and then it will evaluate the page and identify any I think it targets the low hanging fruit. But based on that Ethan Marcotte article, it sounds like that will still generate a lot of hits. So it’ll it’ll see your images with the alt text, they’ll see if you have a table that doesn’t have scoping set correctly.
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.
xe is also the X is also used by dq labs that’s D to you. Up, right, there’s it to me always, D qu e up like that. They have in a product called a test. And we use that at USC is also they have some our spec, things you can use if you do rails where it’ll automatically evaluate your page for whatever accessibility concerns that you’ve identified. So you can build that into your automated testing suite as well.
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?
Had a boss? He has to say that was knowing enough to be dangerous? Yeah.
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,
right. And those,
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,
you don’t need to be drunk, though. That’s optional.
Yeah, yeah. If you’re on the job.
I think Well, I think also, and I think we’ll get more into this later. But I think also building team awareness, you know, like, it does have a lot of overlap, there is a lot of areas. But if everyone is educated and trained to be aware of excessively to things like contrast ratio, or heading hierarchy, or table scoping, if you’re aware of these things, then it becomes easier for you to kind of like work together and collaborate and hold each other accountable.
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. I don’t care if it doesn’t work, right.
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.
I think that it’s important for people for like, you know, senior people, the internet, people like you and I to as one we mentor newer developers to, you know, affirmatively bring up the issue of accessibility. Absolutely. Yeah.
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.
Or even even easier. Just say like, if you’re going to have if you’re if you’re going to use this color, here’s a good background, that would couple of minutes. And it has the right font contrast ratio. Or just say like if you have this color. This is the font contrast ratio against these different backgrounds. Yeah, I don’t know I this is a budgetary tool that we’re not actually looking at. So shirt.
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
put in an elevator shaft in the design. It’s also things like, how big load bearing Joyce tap to be? Right? Right? Or how far how wide walkways have to be or hallways?
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.
for good reason, though, for Well,
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.
I think I think this is a good analogy, because the reason we have regulation is because if you didn’t like building with building code, at least, if we didn’t have building code regulation, then there would be an incentive a cost incentive to not make hallways wide enough for wheelchairs, or to not make tall buildings have elevators.
Yeah. Hundred percent.
Yeah. And so because we don’t have that with web where there’s no regulation requiring that because it would be an extra cost. And so most, I don’t say most will actually it is most according to that youth and work on article. Most websites don’t want to spend that cost. They’re taking that cost incentive.
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
right now, if you are a person who has difficulty using a website, Amazon or whatever, and then you file a lawsuit, etc. under the ADA, you know that then maybe the website thing gets changed. So imagine that building code was like that. Were like, I mean, I guess it is sometimes, right?
Well, yeah, anymore. So yeah, it’s like, if you don’t have a wheelchair,
you don’t have a wheelchair ramp or something that would be
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.
Because
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.
I think that just double playing devil’s advocate here. The big difference between the construction analogy, and the web analogy is that if it building is built incorrectly, it could be structured and sound, it could collapse, it could, in a best case scenario, result in loss of, you know, damages to the building and loss of money. Worst case scenario kills people. If a website is inaccessible, then people can’t use it, which is, you know, shouldn’t happen. But, you know, it’s easier to change your website than it is to change how a building is built.
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,
we have a for that matter, we have PCI compliance. If you’re doing payment, payment processing, you have to be PCI compliant. And they think there’s a, well, for certain I know, at least in the government, the government sector, at USC is we had the five week components, which was like, I mean, that was part of the build process, you know, you, you deploy your branch to staging and then you have one of our five a week experts review it, and then they have to sign off on it before it goes to production.
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.
That’s, I think sounds like a lot. I think the outcome of that was at the DOJ declined who
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,
I think. Okay, so on one side, there, you have those, those hundred and three are representatives are saying that they want, they think that the private sector should be afforded a very clear bullet point list, you know, if you check all these boxes, then you can’t be sued. Or or at least you’re you have good grounds for a defense. But on the other hand, though, whether or not a website is accessible, I mean, like, we all know, the jokes about unit tests, right? Like unit unit test passes, and it’s like a door that opens the wrong way or something. You know, you can check all the boxes, and the site could still be inaccessible or have accessibility issues. So it’s kind of a Gestalt thing. It’s kind of a, you know, when you see it kind of thing. And I’m glad that the DOJ recognizes that. Because I, I think that it had they said, like, yes, here’s the checkbox list, I think we’d be missing out.
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.
That I hadn’t considered. That’s a good point. Yeah, like a restaurant, the restaurant website that we mentioned the restaurant episode.
Yeah. How many restaurants Do you know, have a web developer on staff? But anyone? Please, don’t tell me Applebee’s.
Right.
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.
Right? Yeah.
And then it was decided by people that weren’t you to change the tool?
Yes, it was, um, I’ll give the the very abstract description of it, it had really cool. Like, it was a CMS that we had at Cornell, and it had like, really cool, like, it would all work new, if you didn’t have alt text and check for like, over use of certain tags, it had really tight restrictions on what tags and classes he could use. But, you know, leadership decided to go in a different direction with CMS is and so we don’t use it, we didn’t use it anymore.
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.
I think that it’s okay, that, that the process stays ahead of the the wave or rather, the waves days ahead of the process. I think as long as it doesn’t outpace it, like, you know, if you’re surfing it, you’re never going to get or you don’t want to get on the other side of the way, if you want to stay right, right into the curl or a great right in front of it. Sure. I think that’s okay. And you know, it’s okay to just be right there. And not quite being the other side. I think it would be problematic. And I think that’s kind of where we’re going now. Which is why we’re having so many discussions about this. If if you get where the wave is just gone, like the wave is already crashed into the shore, and you’re still out in the ocean.
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.
It would, it would be like if you asked that same secretary to move a couple thing, move a couple pallets of goods down in the warehouse, right? Like you wouldn’t do that. Because, well, there’s regulation rules about who can use the forklift. But I mean, you know, she hasn’t been trained, or he or she hasn’t been trained. And so you wouldn’t expect it to be executed perfectly
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
be a nice thing to have added to WordPress would be mandatory old text.
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.
Not yet.
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.
Heading level to image with noodles attribute you want currently on a heading level to slash example 123 JPEG image, you are currently on an image. Yeah.
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,
good.
Not only do not know what happened, but it just takes up time.
There. So I mentioned the scoping thing earlier, this is something that I learned about a USC is but if you have a table head th tag, and then you have to say is that table head tag is that for the row or for the column, right? So if you say scope equals row, then what happens is a screen reader won’t, it won’t reread the table head tag each time or it’s something like it makes assumptions about what the debt table head tag means when reading through the items. There’s a there’s an example, I’ll find a couple of videos on YouTube, I encourage you all to look it up look up like Jaws, screen reading or something on YouTube. And you can see examples of people using this. It’s really amazing. I know we’ve mentioned it before the show. But seriously, check it out.
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. Right. If you’ve got Slack, find people who are into accessibility or like it and make a Slack channel. And, you know, talk, just start talking about it.
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,
more voices is good.
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.
So when when I when I saw this article, in design system, it immediately called to mind the episode with Greg don’t have it. Right Number Number 14, right. 14. Yeah. And but it design system is not the same as a design philosophy.
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
this pattern library mean, like visual patterns. Yeah, like, like houndstooth, for example. Unknown Speaker Right. It’s a weird
example. But so not like, not like UI patterns, or programming patterns.
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.
Cool. So one thing that I discovered from that article, the Ionic framework, one was web components.org. And they have like, if you go to slash introduction on that site, they have like, kind of an overview of what it is, but like this is kind of a big, this is like one of those CSS frameworks. There’s the Tachyon. Yeah, like, yeah, this would be like Tachyon. Right. It’s like, kind of just realized web tech. So approach.
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 I think you’ve baby wearing a little bit more about this than I have at this point from talking to Brian, but can you explain briefly for our listeners, what a web component is?
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.
Okay, so this is kind of like how the moderniser JavaScript plugin allows older browsers to play nice with modern HTML
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.
I think I saw, I think I saw one of the examples was like, like a podcast dash player tag. And and then it was, it was really elegant. And actually, it reminded me a lot of WordPress short codes. Yeah, except, I mean, a little different, like WordPress, short codes work differently.
It’s like a WordPress short code that works anywhere.
Yeah, yeah. Well, anywhere with the appropriate web component. Right.
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.
But this doesn’t require like a framework. Right, just kind of dropping place.
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,
right.
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.
But going back to what we’re saying about accessibility earlier, are these accessible?
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.
So if you inspected fienen car, would you any inspector like View Source may show fienen car but the in the inspector is it going to show the HTML this generated by female or
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,
after doing this episode is your
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.
Oh, right, because they’re all referencing
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. Tony, when? Yeah, you you make the try to keep the public interface as unchanged as possible, and then just change things underneath. Throw up and close principal.
Yeah. Oh, yes. That’s the word.
Yeah. Thank you.
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
I’m envious.
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.
I like that a lot. Okay, wait, so you mentioned styled components earlier? Yeah. How does? How does this work with CSS?
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.
Hypothetically, if we had like a, on a video player with the see text there, but maybe like, I don’t know, a podcast player that should like the title of the podcast or something using text tag, yeah. Would you be able to change? Like, let’s say that the component creator defaulted into yellow text, but you’re using a white background? And you’re savvy enough to know that yellow is not a good contrast ratio, but
it was he thought was okay, because it was really dark yellow. So yeah,
yeah. So you want to make your website better? Can you use like, simple CSS to just change that text color?
Yeah. Because, again, there’s no scope leakage. Right? When you affect that element, you’re only changing that element.
And so when you’d be able to hook on to that using CSS, and then just kind of have have the benefit of cascading on your site, without having things leak out of that?
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.
Okay,
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.
I think that that might be the only thing I don’t like about this. So far as I think that the site CSS should be able to, like, overlap onto the component now, but I think maybe maybe that can happen in the future.
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.
I I think it feels incomplete. Like I I think that like I mentioned before, I think the the CSS thing, but overall, though, I think this is a good. This feels like this could be a good direction to go in. For like the growth of how we do web.
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,
right?
And then that gets mashed into the content for the page.
Yes,
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?
Hmm.
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.
Oh, man, because
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,
right. And I get
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.
I wonder how different or how difficult it would be to like well, that ocean and eo and swap out react and exchange for like web components, but then you can just swap out react, how I really I’ve not been keeping up that WordPress. So
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.
That’s crazy. Man.
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
update their we the way the content renders,
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.
This reminds me a lot of how Ruby gems work. And I guess for that matter, like MPM modules, you like you import this one things, you import this component, but really like importing a single component, like the file that could really include multiple components could and it might just JavaScript, right. So like you could have like, you know, a, like a podcast component. And it could include a podcast player, transcript, player, whatever. A couple different things that you could then include, and someone could put that in the header of their site. And it’s sort of like bringing in a jam or a node module or whatever. And it gives them access to like this API of functionality that they can then use. And then if later on, if there’s a new version, they gives them new functionality. I, I like this, I feel like it is a nice, it’s the web borrowing something nice from the like command line program.
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.
And getting back to a point we made earlier about how do we as developers, and as even though the newer developers from us, how do we incorporate accessibility into our stuff? Maybe the solution is that newer developers would be using web components, and then the accessibility stuff would be lifted initially upstream. And so as these components are being used, basic accessibility, things are being incorporated. Maybe
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.
Right? So Oh, yeah, that’s true. So
yeah, comparing color isn’t actually enough, you have to compare color, and font
size.
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
have to explain different things. If someone were to make a really cool web component to display tables in a certain way, like, you know, we have like data tables library with JavaScript. Yeah. What if you made? What if you had a data tables component, or something similar to that? And then while building that you incorporate you had proper table rows and columns scoping? And you had, you know, the the correct? Like, tables don’t have the old test, all texts they have the summary
or separate captions are summary.
Yeah. And, and so if you, you know, you’d have like, the summary would be included there also, and you could, you know, require or throw an error or whatever, if these are hasn’t define those, but you could, like, you know, kind of enforce accessibility issues through the US. It’s like, sort of like the trade off like, well, if you want to use our awesome component, you got to come are these base? Yeah. And
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.
Yeah, well, Unknown Speaker yeah.
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.
I don’t think that we know, we talked about regulation earlier. I don’t think that regulation should be seen as the solution for this problem. I think that we as programmers should solve it. That’s what we do. We solve problems. This is a problem.
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
standards, but but making them a wage should
absolutely throw an error. Or, or just or something. Yeah,
I know that it’s not enough, ultimately. But I think for now, as a start, rate, like being aware that you’re doing things like if you’re if you’re going to be an asshole, you should be aware that you’re being so if you don’t know who you are. So,
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.
I like the idea. Because I love new things and seeing cool ways that people are doing stuff. But I like being able to do that. And simultaneously straddling the idea of or I guess, straddling both sides of like, accessibility and the old ways versus new hotness.
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,
okay. I think I saw one for that yet.
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?
Cool. Oh, and another shout out for Andy. Andy, I, there’s a link in the show now. Please check it out.
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.
There are times if there’s if there’s a site that just has a video there’s no transcript I will straight right out of that site. I if I’m just looking for a quote or a portion of it or something or like one specific topic that’s interesting to me. I’ll Control F if I can on the transcript
love that. It’s true for Aaron you know it’s true for everybody.
Well, I do have to as a My name so you can tell us about our opinions are there on the socials Facebook and Twitter com slash drunken UX? And I Instagram slash trucking UX podcast? And don’t forget to come check us out yell at us on slack drunken you actually comm slash slash?
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
This episode of The Drunken UX Podcast brought to you by nuCloud.