Chris redesigned his blog, using sounds on your website to make it seem fancy, what can't automated accessibility tests test, and what's new in Safari 17.
Time Jump Links
- 00:20 Hey there Shopimaniacs
- 01:39 Blog redesign
- 06:03 Soundcite
- 08:06 Why not React?
- 11:11 Sounds make website fancy
- 12:27 Accessibility tests
- 16:06 A list of things automated testing doesn't do (yet)
- 37:48 Safari name attribute
- 41:49 About ChrisCoyier
- 46:32 Andy updates his CSS reset
- 51:10 Smart interface design course
Episode Sponsors 🧡
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--in the shed--Rupert. With me is Chris--"press publish" hat--Coyier. Hey, Chris. How are you? I love that hat! It very much suits you in your ethos.
Chris Coyier: Oh, thanks. Yeah. I Instagrammed it this morning. So, if you want to see the hat, you're going to have to follow me there, people.
Chris: Or something. Yeah, I watched some YouTube video. You know, just mindless. Not even a good one. It was just some dude who was taking a tram up to Alaska. Not... like a boat.
Dave: Yeah, yeah, yeah.
Chris: He's like, "This is what it's like. This is the sandwich that I ate." You know?
Chris: Just dumb. But it's still like you're doing something cool, so I watched it - kind of thing. One of his boys that came with him wore a "press publish" shirt, and I googled around to find it.
It's some newsletter or something about content creators. I subscribed for a little while. It was pretty well done. But it ended up not really speaking to my nerdiness the way I needed it to. But this is their little logo.
Chris: "Press publish" is such a cool little phrase, especially for me. I've been pressing publish a lot. I realigned the blog a little bit.
Dave: Ooh... I did see that. We're a little more... a few more blocky grids. It's good.
Chris: Yeah. Yeah, I don't know. I don't know what came over me.
Dave: You did some masonry. Did I see that? Did I see that?
Chris: I wanted to use Masonry. It has that look where it's uneven grids.
Chris: But I couldn't. I looked in for a minute, like, should I use a David Desandro thing? Should I just do grid template rows masonry and let it just work in Firefox?
You know what I used? One line of CSS.
Chris: Column width 300 pixels.
Dave: Ooh... Okay.
Chris: I used old-school CSS columns. And then the one thing you've got to do is, then for each block inside, you've got to say, "Break inside avoid."
Dave: Yeah, yeah, yeah.
Chris: So, it doesn't take a div and split it in half, which it's more than happy to do.
Dave: Oh, God.
Chris: The one problem with this is... Yeah, you tell me first.
Dave: Oh, we had so many problems. Trent figured out something a long time ago, like in the dark ages, and I still forget what he figured. I think it was the break inside avoid.
It was like, "Oh, man." You have a list or two lists, like A and B. Then it's just going to chuck one LI from the other list over to... Anyway, the algorithm it splits on is very bad by default.
Dave: And so you need that break avoid. Yeah.
Chris: Yeah. You need the break avoid. Yeah, you do because it tries to make even-width columns as best as it can.
Chris: Which is interesting. Very useful little feature. The downside-ish is that, as you tab through, it tabs from top to bottom first, and then it hops over.
Chris: But I was like, "How bad is that?" Somehow, in my mind, that's bad. But then I started doing it, and I'm like, "Why? Is it that horrible of an experience to go from top to bottom and then back up to the top?" I don't know. I just was like, "Meh, this is fine for my little blog. I just don't care."
Dave: See. I don't have the full answer. That's an accessibility issue. [Laughter]
Dave: Even though I am the maintainer of the Accessibility Project right now, I don't have the best answer. But I think it's when it goes all over and there's no common flow is what I want to say. I mean left to right is always the best, like top-down, left to right.
Chris: Well, and if you had to read and scroll down and then scroll back up to continue reading, that's bad. But that's not the case here. These little blocks fit onto one screen.
Chris: If you were setting text in multiple columns and it exceeded the viewport height, that's bad.
Dave: I think that's bad, yeah, because then you're getting thrown up to the top.
Dave: That would be a bit of a--
Chris: This is just a browsing experience, and I kind of liked the look of it. Yeah, it's not dramatically different, but then when you got a new blog and maybe you're secretly hoping that people look at it, I'm just like, "Publish, publish, publish, publish."
Chris: Every idea I have, I just fart it out.
Dave: That's great. You're doing good. I liked your recent post, "Cannonball is such a badass song."
Dave: Basically, you did a song exploder-style blog post, which is new for you and I love it.
Chris: It's new for me - a little bit.
Dave: Of the first eight seconds of "Cannonball" by the Breeders. It's great. [Laughter]
Dave: It's actually like 42 seconds, I think, is how long the intro is - or something.
Chris: Maybe. Yeah.
Chris: Because they really do the "Ah-mm-mm... ah-mm-mm." They do that for a long time in the beginning of it.
Dave: "Oh... wah-wam-wah-wam."
Dave: "Oh... wah-wam-wah-wam."
Chris: Yeah, it's so good. My gosh.
Dave: "Wee-no wee-no wee-no wee-no." Anyway, take those samples. Chris is going to put them up. [Laughter]
Dave: And mix up the whole song, you know, "tick-a tick-a tick-a tick-a."
Dave: That's the drums there.
Chris: Here. I'll send you a link, Dave. This is cool. Miranda worked for this place for a little while. It's called the Knight Lab out of Northwestern University.
Dave: Knight Lab!
Chris: Yeah, awesome. Maybe I'll use the chat feature right here in Riverside FM. That's what we use, people, to record. Do you know that?
First, you have to pick who you're talking to. That's funny.
Dave: Oh, yeah. [Laughter] Ooh... Okay. Knight Lab. All right. All right. This is Knight Foundation Knight Lab?
Chris: I think it's related, yeah.
Dave: Okay. Yeah, yeah.
Dave: Oh, yeah.
Chris: This isn't new out of the gate, but I know this other fellow, Mr. Germuska, that works there. When he say my cannonball post, I'm like, "Needs more soundcite."
So, this is what it is, people. It's just worth linking up. I'll probably blog it, too, because I'm on a tear with blogging.
But what it does is let's say right in the middle of a paragraph, and then you say, like, "And then I went to Dave's house, and everybody cheered." And then the word "every cheered" was a button with a play.
Chris: Right in the middle of the paragraph, you can listen to the sound. It's like an anchor link; except for the anchor link, when you click it, plays sound.
Chris: With a play bar, and it's so cool. I'm like, "You're right. That actually would have been kind of cool to do the cannonball thing," not that I regret how I did it, but with inline audios.
Dave: Oh, yeah. Yeah.
Chris: I'm like, "I'm going to make an excuse to use this because it's so neat."
Dave: Oh, and it turns the text into a player, too, sort of?
Chris: Right. Right.
Dave: Ooh... Ooh... This is good.
Dave: I like this.
Chris: I know. It's really good, isn't it? It's hard to mouth blog, so you'll have to see it. We'll have to link it up.
Dave: This would be good for soundboard-y crap in your blog post, too.
Dave: But you're just like, "F-that noise," and then you're just like some dude raging or something. You know? Or a meme.
Dave: TikTok-y audio blips or whatever the Roblox oof sound, "Oof!" You know? That would be good.
Chris: "Oof," a good "oof."
Chris: Yeah because I think having it mostly be progressive enhancement jokes--
Dave: Would be funny.
Chris: --is the way to go here. Yeah.
Dave: But what was the--? Not to jump into this too heavily, but there was a little bit of... Taylor Hunt -- is that right -- wrote that post about React being slow - or whatever.
Chris: Oh, I bookmarked it, but I haven't quite read it yet. He's done really in-depth work in the past on performance, too. I think he's written about streaming, so he's one of those great writers that, once in a while, just drops a real banger that's not... It feels like it's outside the realm of normal tech drama because of how well-researched and grounded it is in an actual thing that he actually did.
Chris: It's not just like, "Signals are cool." It's like, "Here's an extreme amount of data," that feels like it's not an opinion, there's so much data.
Dave: Yeah. It's well researched, I guess, would be the... Is that the sensation I'm feeling?
Dave: Is that the sensation?
Chris: Tell me. Did you read the whole thing?
Dave: I want to say I did because I went on a bit of a reading bender last night.
Dave: I was trying to find it because I've lost the... It's on Medium or something.
Chris: Isn't it on dev.to?
Dave: Dev.to, which is Medium for developers. Sorry.
Dave: I forget where it is. Anyway, one thing he said in there that was very interesting, he dug up a quote. I'm going to pull this back to the sound effects. He dug up a quote from React and the developers that made it that was like, "Oh, yeah. We made this, and it's slow, but it's cool, so we're going to ship it anyway. We have no idea... Somebody else will make it fast." You know?
That would be a great point for the "Oof!" [Laughter]
Dave: That would be a great, great point, but--
Chris: Yeah. I saw Zac latched onto that, too. That's the kind of thing that trips his trigger, I think, a little bit. It's from 2015. It was a long time ago, right? Not that that makes it excusable or anything, but it was this little moment where somebody was influentially involved with React was like, "Who cares if it's slow? It's awesome."
Dave: You know this is where I feel like it's a little disingenuous and maybe hits the hot drama territory is the marketing was, "DOM is slow. VDOM is fast," which may have been true at the time. I don't know. Or they maybe cooked up a test to make it that way.
But then you hear the behind-the-scenes, "Yeah, this is super slow." [Laughter] But anyway... Then I get gaslit for a decade. That's mostly what I'm concerned about.
Dave: I say it's slow, and then I said, "Why are you a dinosaur, you old, dumb dinosaur?" It's like, "Well, I just felt like it was not that great." Anyway...
Anyway, I hadn't seen that quote or surfaced it, so it's very interesting that it came across.
Anyway, back to sound effects. I think put a sound effect in your website. [Laughter] I'm on team sound effects.
Chris: Didn't it seem--? It used to be a hardcore no-no, I feel like, to have any sound at all on a website. It was like, "Don't do that. You could be at a coffee shop and, all of a sudden, your laptop is making noise of something."
Chris: It was okay... You know, even like don't have auto-play video. That one might still be true to some degree.
Dave: I think that's still true. Yeah, yeah.
Chris: These days, it feels like if a website adds a little sound to it or something, people are like, "Ooh! Nice touch!"
Dave: Yeah, yeah.
Chris: The waggle finger is gone somehow.
Dave: Yeah. If you add a little "bloop-bloop" or [tongue click], something like that.
Dave: Oh, people are just like, "Gees. Wow!"
Dave: What a fancy website. Is this a million dollars? Did this cost $1 million? [Laughter]
Chris: Yeah. [Laughter] Yeah, "It sounds expensive," is your favorite phrase, right?
Dave: It sounds... it feels expensive, yeah. I mean you just want to make it look expensive. That's why we buy the Macintosh that goes "ta-da!" when you do something and not the PCs that go "Oof!"
Chris: That's good stuff. Do you have some more mouth blogging? Was there more to say?
Dave: Well, kind of. I've been thinking a lot about... So, Luro launched. Yay! Hooray!
I've been working on this feature for accessibility and performance tests because we run Lighthouse on your site every week.
Dave: Then we give you the score, like 89. Then we're like, "Go figure it out." [Laughter] And so, it would be better if we told you why that 89 is 89. Right?
Dave: And so, we're going to do this enhanced reporting thing, and I just was working on it.
Dave: But it got me thinking. I'm very bullish on automated tests for accessibility. I don't want to live in a world where we don't have them. I need a computer to--
Chris: It also seems so easy. Everybody and their sister is running GitHub actions and build processes. We're just automating the crap out of absolutely everything in the world. And the automation for accessibility stuff is just as easy as any of all that.
Chris: It's just as easy as compiling TypeScript is.
Dave: Yeah, so just point it at the thing. Test it. You can test on the micro. You can do the Melanie Sumner thing. Move it, shift left, and move it into your dev processes, your Jest tests.
Chris: What did she call it?
Dave: Continuous accessibility.
Chris: Yeah. I love that.
Dave: Yeah. Million-dollar idea here. You shift it left. Put it in your build tools. You put it on your CICD - or whatever. Then you buy Luro and analyze your whole site as it's live.
Dave: Everyone knows those are the steps. [Laughter] Yeah, so what's interesting about it, though, there's this idea that an automated test can only cover about 20% of the WCAG specification.
Chris: Oh, is that what they're saying? Isn't it some higher percentage of actual problems on websites?
Dave: Yeah, so it's like 13 of, I want to say, 48 success criteria - or something like that.
Chris: Okay. Yeah.
Dave: Which actually comes out to 27. Anyway, there are only a certain amount, but that Deque came out and said that's representative of about 54% of your problems. Fifty-four percent is good. To me, that means you're more accessible than not accessible. So, that's good if you knock those out.
It means your company has some awareness, some objectivity that you're measuring against. That's good for just maturity models and muscle building for accessibility issues.
Then the final thing is it means if you knock out all the low-hanging fruit and then you do an accessibility audit, well, that can be more targeted, more fruitful, cover bigger issues than link color wrong.
You don't want to spend your life... You don't want to pay somebody $1,000 an hour - or whatever an accessibility consultant makes. I hope it's that much, but I don't know. But $100 an hour, let's say. Lawyer costs, right?
Dave: You don't want to pay somebody $100 an hour to tell you your link colors are wrong. That's a business expense. Hire a machine to do that for you for almost free or whatever Luro charges per month.
Anyway, I'm bullish, but it got me thinking. You have to be candid about what it doesn't do. While I could tell you the success criteria it doesn't do, I don't think in success criteria terms, so I just was drumming up ideas of what things does it not do. And so, I came up with a list, and I can give you this list. Are you ready?
Chris: Ooh... ooh... ooh... Oh, gosh. This is going to be good. Yep.
Dave: This is why you hired the Dave Rupert. This is why you bring me on the podcast.
Chris: That's right.
Dave: One thing an automated test is not going to do is focus states. Right?
Chris: Nope. Yep.
Dave: It can't tab through your site.
Chris: That seems like a big one, but yeah. Yeah.
Dave: It's a big one, but that said, Microsoft's accessibility insights does tap through your site to show you tab order.
Dave: In theory, it's possible. [Laughter] It could be scriptable. Then maybe you just dif the styles between focus and blur, and try to figure out, "Oh, did anything besides color change on this thing: yes or no?"
Dave: Okay. Cool. So, maybe it's possible. That's going to be a theme.
Chris: That's a good one.
Dave: I think maybe some of these are possible. Captions and transcripts, it's not going to watch your video. [Laughter] You know? The automated test isn't going to watch your YouTube.
Dave: But if you use the video element with the track element that points to a VTT that exists.
Chris: Just those two things, yeah. I see.
Dave: Just those two things mean you're probably... You can't guarantee the captions, but you can, at last, say it is set up correctly for captions.
Popover stuff like you click something and something shows up, that's not... The accessibility tester is not going to go click everything on your site. It wouldn't do that. So, it can't guarantee did you flip the ARIA attributes, ARIA expanded, ARIA whatever, hidden false? It's not going to do that, but if you use something like the new HTML Popover and Popover target, it might be more testable. Right?
Chris: Right. Right, right.
Dave: It might be even hidden would be easier to test than DOM that you're chucking on and off the page.
Chris: Okay. Not to disrupt your list, but there's testability like it runs in CI testability.
Dave: Yeah. Yeah.
Chris: Then there's automation that is slightly more automated but that'll never run in CI. I just remember this when Deque has these things that run in the dev tools that says, "Hey. If you tell me where the button is that opens a modal, I'll test the modal for you."
Dave: Yeah. Yeah.
Chris: So, you can't run it in CI, but it'll run in dev tools where it'll open the modal. It'll test that the escape key works. It'll test that focus trap works and stuff. But you have to tell it a little stuff, and it needs to have a client to run in. It's a little bit automatable, but it'll never run in CI.
Dave: Yeah, yeah, yeah.
Dave: Those guided tests are cool because I think Deque says they'll bring you up to 80% compliant to WCAG - or whatever. They'll get you closer to the finish line.
Chris: A lot further.
Dave: Yeah, that's cool.
Dave: Then beyond that, I think you're mostly dealing with AAA sort of issues, if I remember correctly. But yeah, so anyway, this has just been my list here. Date pickers, I had this where my friend was like, "Hey, is my website accessible?" I was like, "I don't know. Send it to me," and we ran Lighthouse together. He was driving his computer, and it scored like a 98. It just had a button without a label or something like that. That's easy to fix.
But then I was looking at the page, and there was a bunch of type-aheads and autocompletes and date pickers. I was like, "Oh, no!" [Laughter] "You're going to have a tough time on this." You know?
Dave: And so, an automated test can't tell you that stuff. However--
Dave: --if you use input daytime or an input with a list pointed to data list (and if God answers prayers) those would be styleable, that would be something we could test. It's like, "Oh, you typed ahead. You have an input with a date list. That version of a type ahead does work."
Dave: Which is interesting.
Chris: It is interesting. Yeah.
Dave: I've got more. I've got five more here. Modals and keyboard traps, same as popovers. It's not going to open your modals.
Dave: Unless you tell it to. Which makes modals in this weird, like, it's non-testable code, so maybe you shouldn't even have them on your website. But if you use dialog, chances are that you broke dialog is pretty low, so the predictability of how a--
Chris: I see because the browser is going to do it correctly - or whatever. Yeah.
Dave: Mostly. It's going to open it. It's going to move focus. It's going to have a close.
Chris: Yeah. Okay.
Dave: An escape button closes it. That stuff should work. Right?
Tap targets doesn't know. There's a new rule about 44x44 pixel tap targets, which is kind of intensely huge.
Dave: And checkboxes don't fit into this. [Laughter]
Chris: I thought it was more like 24 or something. No?
Dave: Yeah... Well, so Chrome's Lighthouse UX report does do this, and they give you, I think, 24 pixels or something like that.
Dave: So, it's possible to do this. But anyway, that's interesting.
Chris: There's a good Nicole Sullivan post that I also bookmarked recently about this that was kind of tag-teamed with Adrien, I think, about touch targets. It's not just that they're 24. It's that they're 24 and they don't butt up against each other. Or maybe they can butt up but they can't overlap.
Dave: Yeah. Yeah. Yeah, they can't. If they do overlap, can you still tap each one? Does that make sense?
Chris: Right. Yeah. The example was star ratings, and one of the prongs of the little star wanks over into the other star tap area, and that's not cool.
Dave: Even play buttons on your video player, they shouldn't overlap and stuff like that.
Dave: Yeah. She has a good post. We'll link it up. I forgot. I remembered that she wrote that, I read that, but I forgot about it.
Chris: Never forget. Save all links forever!
Dave: All links! Write a blog post immediately! Press publish! [Laughter]
An accessibility tester can't do 200% to 400% zoom. It's not going to do that.
Dave: But if you use fluid type in CSS, it probably is fine. It's probably going to work. Maybe there's--
Chris: Well, careful there. I'm glad that the world jumped on this, but fluid type can mean just use viewport units.
Chris: Which is not good. So, for a lot of... I feel like people get jumped on this enough early on that it's pretty much nipped in the bud. I don't see a lot of examples out there that just do that. But they're always, like, "Use a calc and use something like a rem in the calculation."
Chris: That holds for container units as well, I think.
Chris: It has to have some factor. That way if you change your preference that even though it's fluid to the page of the container, some user preference is applying, too.
Dave: Yeah. Yeah, it would just be... I feel like if you could detect hard-coded widths, you'd be like, "Hey, this probably has a problem."
It's usually stuff like that or does a font size... could it theoretically... if it's viewport-based font sizes, could you chuck a small number at it and a large number at it and just see if it still works? It seems like it's scannable is sort of what I was thinking, but obviously no guarantees. Right?
Then the last two I had were cognitive failures, like if you have bad UX, like a button on the bottom of the page that opens something on the top of the page.
Chris: Hmm... Nothing is going to catch that. Yeah.
Dave: No one is going to know about that, unless we had ARIA controls (or something like that) to detect, like, "Hey, this actually shoots up." I think Popover will make this a lot better too. Just the idea, like, "Hey, this can actually relate to an element - or whatever - and anchor it correctly."
Chris: Oh, yeah. That's the anchor positioning thing, which is separate but related.
Chris: I think Popover weirdly just puts it in the middle unless you deal with it, doesn't it?
Dave: Yeah, isn't that weird? Yeah. Yeah, I think it does. Or relative?
Chris: The last I looked at it, it was just centered. It looked just like a dialog did. And I was like, "Oh, that's weird." But I guess I kind of get it if you have to pick a default. But of course, you can control it in CSS. Isn't that nice? Like when view transitions is dropping, it just does some nice defaults but you can control it in CSS.
Chris: It's great.
Dave: It's great.
Chris: It's really nice.
Dave: The last one is successful task completion. I've spoke at the Texas School for the Blind and Visually Impaired with some kids.
Dave: Asked them about their problems, and blind people are super resilient to all the shit we put on websites. But one thing that was frustrating to them or they expressed to me was when they get real far into a process and then--
Chris: And then you can't do it? Oh...
Dave: And then you can't do it. Almost like when you're trying to book a flight and then it doesn't accept your credit card or something. You know? Do you ever have that experience where you can't complete the task you just spent 30 minutes doing? This happens to them every day ordering pizza and stuff like that.
Chris: That sucks. Right? I wonder if you build up some kind of intuition for it or something. Not that that's acceptable in a way, but you just get a sniff test like, "I know this thing is going to suck at the end."
Dave: Yeah. Well, and that's just it, right? We automate or we analyze pages page-by-page, and so maybe a Gerry McGovern top tasks methodology is sort of the better idea.
Dave: They have to check out. They have to sign up for an account. That's the top task for this website. Or his example is always search the NIH for what is this thing growing on my arm. You need a good answer. It can't just say, "You are going to die," every time.
Dave: I don't think there's anything that fixes that. Although, if you stand up some automated tests next to each other, you might get a better idea of the likelihood they finish a task.
Dave: They don't--
Chris: Right. There's some relationship there. If you've done the work to do automated testing that you're probably the kind of person who is willing to do a little more work.
Dave: Right. Right. Well, and if you have green lights, cool. Now I know if I take the time, and I know that that's managed, I know if I take the time to fix a structural problem or something, it'll probably stay fixed. Hopefully. Anyway, it's interesting.
Chris: Just to extend this story, there's... First of all, you've got kids. There's an innate human desire to want to do it yourself. Right? Like, "Not done for me!" You know?
Dave: Mm-hmm. Mm-hmm.
Chris: Like, "I want to do it!" Right?
Dave: "I dood it," that's what my kids say. [Laughter]
Dave: "I dood it. I dood it." You know?
Chris: That's good too, and I'm not trying to draw a connection between somebody that needs assistive devices and toddlers or anything here, but there was a Carl Smith story I remember he told one time where he also went and worked with a school for the blind kind of thing, but they were in high school. They wanted to apply for college, and it reminded me of this task completion thing where they would start to apply for college, and then it all boiled down to just form input label pairs. That they got really far in the process, and then it got to this required field that it was like, "Input, input," or something.
Chris: They were like, "What do you want? What do you want here?" On, like, 90% of the way to applying myself for college and I can't. I have to have somebody come over here and tell me what this stupid input field wants that they didn't tell me what they want. Unbelievable.
Dave: Isn't that wild?
Dave: Isn't that wild? Yeah, I mean it's not... It's like the PHP white screen, if you could think of it that way. If somebody is using a braille reader and it just says, "Input, input, input," you'd just be like, "What the crap?"
You know they may not even have a screen to bring somebody over in a coffee shop and say, "Hey, can you come help me apply for college?" because this is actually in braille. That might not even...
It just stinks how we let people down. And so, I just wish there was... I don't know. I wish Gerry McGovern's top tasks was encoded for everybody just because it's such... I don't have a good Scottish accent, but it's just like, "Make sure they can check out," or whatever, dude. You know? They just have to do that. Anyway, and that's for everybody.
Could you imagine not being able to apply for college and how that would change your life, the trajectory of your life, just because you couldn't apply for college.
Chris: You might just be like, "You know what?" It's almost like a smell test for what your experience is going to be in the future.
Chris: If this is so hard before even day one, what do you think day two and day eight is going to be like?
Dave: Well, a university, too, tends to be more accessible than your average website. So, bad news, right?
Dave: Ugh. Yeah. Anyway, I know I'm not... There's been some accessibility shaming going around. I don't know if you caught wind of that over in the Vercel--
Chris: There was. They launched this little AI tool, which, on the surface, very innovative. You type in, "I want a website with a butt that farts on it," or whatever, and it'll be like, "I'll make you that out of React components and Tailwind."
Chris: I was like, "Of course, it's Tailwind on here."
Chris: Just to make sure the drama is at full peak. Of course, the only styling that happens is fricken' Tailwind.
Chris: But it doesn't tend to create... I mean you wouldn't do a butt with farts. You'd say, "Give me a photo interface."
Dave: I already have that. [Laughter]
Dave: That's my CodePen website.
Chris: Yeah. Yeah.
Dave: That's my CodePen portfolio.
Chris: Make an image gallery or make a login form for me with a rainbow behind it - or something - and it tends to do that. Then it doesn't do the world's greatest job, but it makes something that looks a little modern. You're like, "Okay. Thank you. Maybe I'll grab that code and squoosh it up." Of course, there was a little bit of talk. Perhaps was at even from Guillermo?
Chris: He was like, "This is production-ready code, baby."
Chris: The pushback was, "No, it isn't." And not on any level is it production ready. [Laughter] But it's especially not production-ready when it comes to accessibility because there is, for example, problems with label input pairs.
Chris: Which makes people not apply for college.
Chris: Which is kind of bad. Anyway, the accessibility community... There are always so many sides to a story, but there shouldn't be. They said, "There are problems with the accessibility here." They shouldn't have to say, "Sir, please. There are some accessibility problems."
Chris: You shouldn't have to be--
Dave: On your pile of billions of dollars, could you please make this work?
Chris: Please, sir, would you make this accessible? They should just be like, "F-U. This is messed up. Fix it." But you can't.
Chris: Of course, this is a society and you have to be nice and whatever and, generally, were nice about it and then got the smackdown like, "What does that crap matter?! That crap don't matter!" You know?
I don't know. It looked bad. The attacks at somebody trying to point out an accessibility problem was unbelievable and not handled well.
Dave: I think I said the word accessibility shaming, but I just mean it in the, like, somebody pointed out that it was inaccessible. Then it brought a whole bunch of ablism from the, I guess, Vercel community. These accessibility advocates were like, "You can't call this production great. It doesn't even pass an automated test." It's just very low-hanging fruit. You know?
Chris: Even without that, it's almost like there should be a warning or something.
Dave: Yeah, like, "Hey! Warning. This is definitely not production-great code. You have to fix this."
Dave: Because for every person who understands it's not production-great code, there are 100 people who are just copy/pasting it to production right now, immediately. If you don't know how to QA it, you don't QA it. Yeah, anyway, that's frustrating.
But the gross thing was all the ablism that came out. People were just like, "Do blind people even matter?" You're just like, "Oh, my God, dude!" You have to log off.
Chris: This conversation just got--
Chris: It just got pushed back ten years, it feels like.
Dave: Oh, 100 years. Thousands of years. Just awful.
Chris: We're back at, "Do blind people matter?" That's where we got to here?
Chris: Holy cow!
Chris: I thought we were past that one.
Dave: Yeah, it felt like we had sailed past that one a century ago. But geesh. Geesh!
Chris: I have... Just to show off a little bit... No. Maybe I shouldn't, but I kind of am. I have a call later today, just in an hour from now, with somebody who wrote in, which I won't share their name because I didn't ask ahead of time. But they were so generous, like insanely generous to CodePen and says, "Oh, I've been using some parts of your app, and I'm blind, and I use an accessibility device. I want to show you what the problems are. Do you want to do a Zoom with me, and I'll just show you?"
Chris: I was like, "Uh, yeah."
Chris: Thanks. That's the nicest thing ever. Sorry about the problems you're having. I will fricken' vow to fix them as soon as I have this call and know what they are. You know?
Chris: It's just so cool. They shouldn't have to do that. I didn't ask for it because that's not cool to be like, "How about some free labor? What do you got for that?"
Dave: Right. Right. I mean that's just the thing. Hopefully... It's hard for me, too, somebody who is very much in this world, to imagine every scenario that somebody might encounter. And so, I think you do need to test with people and get real people feedback. But that can be hard. There are tools like Fabel Labs. Almost like usertesting.com. You can hire somebody who uses a screen reader to run through your site.
Dave: But I would say, as good as that is, it's not the same as a developer who wants to use your site but doesn't have a good time. That's way more valuable. That user feedback is super valuable.
I wrote about this, but just super valuable to small teams, especially. If somebody tells you they have a problem and they can show me or repro or whatever, gah, my appetite to fix that problem is through the roof. I'll do whatever I can, if it's possible, within my coding knowledge to try to fix it.
Chris: Yeah. Yeah, yeah. Uh... Good list! Are you going to blog it? Is that a pre-blog?
Dave: That is a pre-blog.
Dave: I'm going to send that over. Probably post it. I don't know. Maybe Monday sounds good.
Dave: I don't know. I think I'm very bullish on automated tests. I think you should have them in place, which is why we built Luro. I just think you have to be very cognizant of what they can't do, and so you have to be very - I don't know.
But I think the secret, too, is we need good HTML to help us do this, and so we can statically analyze our sites more. Tabs elements, there's a new thing in Safari accordions. Did you see that? It's a stack of details and you use the name attribute.
Dave: Yeah! New Safari 17 feature.
Chris: No way.
Dave: Yeah. Yeah.
Dave: You use name almost like a radio. [Laughter] Right? Like a group of radios.
Chris: Yeah, right.
Dave: And so, a stack of details with the same name will just kind of do an exclusive accordion.
Chris: No flipping way.
Dave: Single panel accordion. Yeah.
Chris: Gah... That's amazing. What a good idea.
Dave: Isn't it?
Chris: Do you see that they shipped an HR within selects, too?
Dave: Oh, really?!
Chris: Yeah, and so you can go... a select has a group of option, option, option, option, option.
Dave: That's beautiful. Yeah.
Chris: Then you could just chuck an HR in there.
Chris: If you just want a line to separate some options.
Dave: Yeah, I do.
Chris: You used to be able to do opt group. You can still do opt group but opt groups you have to name and the UI is a little different in there. Sometimes you're like, "Uh, could it be a line?" and so many people just do option with dash-dash-dash-dash-dash as the value.
Chris: Which is like, "That's not good."
Chris: You should not do that. Yeah, an HR. What a clever idea. Why not?
Dave: Oh, man. That gets me out of all kinds of jams. That's great.
Chris: I like it. How am I going to remember that? I'm going to write it down: details with name. I need to check that out. That's rad.
Dave: Yeah. I wrote that post that was in response to Adrien Roselli's "Details are not an - insert thing here."
Dave: Where he's like, "They're not an accordion." I was like, "What?!" [Laughter] That's the most accordion-like thing I've ever seen in my whole life.
The whole idea in my post was there's one major issue. It's that a summary... You can't put a heading and a summary, like summary H4 "More Information" - or something like that. It's going to clobber the semantics of the heading. Right? You can't have dual roles: role heading and--
Chris: Because the summary element is a button, essentially.
Dave: It's a button.
Dave: Yeah, a summary or button. And so, it's going to eat the H4.
Dave: And so, if you're browsing by headings, it doesn't show up. I think that is still the case.
Chris: Yeah, which it should always be the case. It's a fricken' interactive element.
Dave: But I think the fact that this got through OpenUI and stuff and assume it passed some accessibility standards and reviews. Scott O'Hara is in there, I think.
Dave: But I'm not saying it's guaranteed perfect, but I think I will probably use this for accordions as well. We have a few in Luro I'm now itching to refactor because I'm just like, "Ooh, well, if that's the case, I could just use a details with the same name." You know? How cool is that? It saves a bunch of headaches.
Chris: I love it. They're pretty styleable if you need them to be. Probably don't overdo it because there are some affordances you're getting for free there with the little arrow and stuff.
Chris: Pretty good. Yeah, all right, so Safari 17. Yeah, it's got some good stuff in it, some Popover stuff, which is good.
Dave: Popover made it!
Chris: Yeah, and it fixes some display contents, which is nice, too. I don't know if that's across all browsers or not, but I just used it the other day. You know what I mean, display contents?
Dave: Yeah. If you have a table and you're like, "TR display contents," or something to put it on a grid.
Dave: It will wipe out the semantics of the table row. It just nukes it.
Dave: There's always been some on-and-off with semantics.
Chris: Oh, I see. I see. Yeah.
Dave: Even if you were like, "TR display flex," Safari would nuke it. But I think all that is fixed in Safari 17.
Chris: Oh, wow. Rock-n-roll. Tables.
Dave: We can style tables now, baby. [Laughter]
Chris: Yeah, that's cool. I used it the other day. It was on my blog, too, so go to chriscoyier.net.
Dave: I'm going. I'm going. I'm logging in.
Chris: Then you see my photo in the upper left.
Dave: Mm-hmm. Mm-hmm.
Chris: Then where it says, "Howdy," below that, it has a little bio.
Dave: Yep, yep, yep.
Chris: I stole that from Robin Rendell, by the way. He had made that point. It's been made over the years, but people tend to forget it, including me, is that your homepage is your about page. I don't want to click "About." Just say what you are about on the homepage, please.
Dave: I still have an "About" page, but maybe I'll switch it up. I don't know.
Chris: Whatever. I'm not trying to shame anybody, but it took the point, especially because mine was two paragraphs.
Chris: I'm like, "Okay, that's fine."
Chris: But when you make the page smaller then what I wanted to do is not make my image a full-width thing on mobile because I'm like, "You don't need to see my face 100% wide, even on 300 pixels wide."
Dave: Mm-hmm. Mm-hmm. Yeah, definitely.
Chris: That's not necessary.
Chris: So, I make myself pretty small, and then I go side-by-side with the "Howdy" box.
Dave: Okay. Yeah.
Chris: Only those two, so anything else I put in that sidebar will just stack. But those two are left and right. You see what I mean?
Dave: Yeah. Yeah. Yeah.
Chris: Okay, so how do you do that? I was like, "Okay. At the breakpoint where that column becomes the one main column, I need a left and right situation for just those two boxes only."
So, there's one way you could do that and just be like, okay, well, make that column display grid. Make it have two columns: image on the left, that one on the right. Then all the rest will span the width of both of those two columns for the rest of the way down. But that's not how I did it.
Dave: All right.
Chris: I said, "Nope, I'm not going to do that." I'm going to wrap those two divs only in a class I just called "mobile grid."
Dave: Mm-hmm. Mm-hmm.
Chris: That mobile grid will use display grid to give me the two things that I want. Then maybe on the larger breakpoint, I'll just make that grid one column or something. But I didn't do that either.
I said rather than rearranging the grid, I said at the larger breakpoint, take that div, that mobile grid, and just display contents it. Just pretend it's not even there.
Dave: Ooh... Ooh...
Chris: Because that's what display content does is it says, "Just ignore me. Just pretend that that DOM element just doesn't exist," and everything that's a child of it just gets booted up one level in the DOM.
Dave: That's cool. Yeah, so it's like an optional grid, basically.
Chris: Yeah, like the grid kicks in at a breakpoint. Then when it's not that breakpoint, it's just gone. It's like not even in the DOM.
Dave: Oh, that's cool.
Chris: But I worry a little bit because I did that and then, the next day, the release notes for Safari 17 came out and was like, "Fixed accessibility problems with display contents." I'm like, "Ooh, yeah, that's right." [Laughter]
Dave: [Laughter] Yeah.
Chris: Is anybody who is not on Safari 17, though, did I dink up some semantics within that thing? Probably. [Laughter]
Dave: I don't know what semantics you would dink up. I would imagine a link still works or still announces.
Chris: There's nothing interactive in there other than links.
Dave: But I'm sure there are other... I'm trying to think of what could have got doinked up, but usually it's list stuff usually gets brutal.
Dave: Like list item announcements and stuff like that. I think the quintessential example is if you put display contents on a UL, which is something you'd kind of want to do to make it participate in the parent grid.
Chris: Exactly. The LIs you want to participate in the parent grid. Yeah.
Dave: Yeah. Yeah, you want the LIs to be in the parent grid. That UL is really a functional wrapper, right? You put that on there.
Chris: Yeah, but if you donk that off with the display contents, I remember that one. That one was broken.
Dave: Yeah, and so I think that is what got fixed. I'm thinking based on this accessibility issues thing, so yeah. So, ensuring elements with ARIA roles grid, tree grid, table, row, grid cell, cell, column header, tree, tree item are properly exposed.
I guess it didn't say list item, but let's just assume it is true. [Laughter]
Dave: I think I'm going to cite Hidde's blog here that outlines some problems, as well as Eric Bailey's "Display contents considered harmful."
Chris: Yeah. I don't want to seem like, "I don't care!" I do care. I just don't think that the way I'm using it here is one of the ways that causes harm. So, there we go.
Chris: All right, so did you see Andy? No credit to his absolute call-out on ShopTalk Show for his modern reset. Days later published an updated CSS reset.
Dave: Yeah, so we publicly shamed him into updating his reset.
Chris: Mm-hmm. I would say.
Dave: He was just trying to get us back by invalidating everything we said on the podcast.
Chris: I see the smooth scrolling is gone. Um... yeah. It looks better.
Dave: Did any of our advice here get heated, changed? I don't know.
Chris: Yeah. I think so.
Dave: Oh, let's see... Yeah.
Chris: Then some newish stuff like the tech strap balance on the headers.
Chris: I see Andy is taking a strong stand against H5 and H6's, though. Those are still not present.
Dave: Still does not even acknowledge their existence. Wow.
Chris: I don't believe I've used an H6, to be fair. The CSS-Tricks days, on a really massive, massive post, because, for weird legacy reasons, they started at H3 but occasionally get to an H5, but never H6. That's deep.
Dave: I remember there were some early Paravel sites that had H7 and H9's. I don't know how we got there. [Laughter]
Chris: Yeah, which that's not... It's not H integer, people.
Chris: It actually does stop at H6, as far as HTML is concerned.
Dave: Caps. Caps at six. I also would argue we need an H0.
Dave: This is a hidden--
Chris: Negative one?
Dave: Hidden element.
Chris: Oh... really?! Yeah, I could see that.
Dave: Well, that's me.
Chris: I do struggle sometimes. Like in a document, it always makes perfect sense to me. But then as soon as you're in an app, and I know there's no distinction, but imagine a CodePen-like thing where there are widgets or a dashboard or something where there's just crap all over the place. [Laughter]
You're like, "Okay. I'm in a little widget thing that I don't even know where is used exactly. I'm definitely not going to go H1, but should I go H2, or am I in H3 territory now?"
Like if I'm in the footer, and I want to have a row labeled "Links," and then put some links below it, what's going on in the footer? Are we calling that H3? I hate that.
Dave: I would wonder what somebody would say? Not like you should ask this person you're talking with, but--
Chris: Yeah, because I want them as H's because I want them to be navigational landmarks - or whatever. They're H2's because I feel like, other than the title of the Pen--
Dave: That's what's most important.
Chris: Which I feel like deserver's its thing. I think so, yeah.
Dave: Then you have the footer. I wonder if that would benefit from a hidden one that says "controls" or something.
Chris: Hmm... Maybe.
Dave: I don't know. I'd wonder what somebody... Again, it's like I don't want to make crap up. I want people to tell me what would be good.
Chris: Yeah. Our hardest one forever and ever is the fact that the tab key is meaningful when you're in an editor.
Dave: Oof. Yeah.
Chris: As soon as you're in there, it is trapped tab. So, you need to know how to get out of there.
Chris: There are a number of ways. Escape works, which I feel like that's probably the first go-to.
Chris: Then there's a hidden link that allows you to jump past it.
Chris: You can focus on that and then jump past it, especially in our embeds.
Dave: Oh, yeah.
Chris: Then the fact that there are keyboard commands to jump between the edits. So, if you're trapped in HTML but your goal is to get to CSS, there's a keyboard command to get you there. But you'd have to know that or find it in one of our popup modal things that tells you about it. A little tricky, but I just don't see any other way.
Chris: It's never been clear to me in ten years of working on this thing that that's it.
Dave: You're like, how do you--? Yeah. When you're in a tech, like a full rich text editor, what's the expectation? Yeah, I don't have a good answer.
Did you see Vitaly's? Vitaly is cool. Gosh. I don't know.
Dave: You know how you meet people over the course of your career, and you're just like, "That person is cool"? You know? I've been having those moments lately.
Dave: But Smashing Magazine--
Chris: He's kind of got all the good qualities of, like, stereotypical Russianness, I think, where he's large and boisterous and got virtual cajónes. You know? [Laughter]
Dave: Yeah. Or even confrontational skills I don't have, like, "Why would you think like this?" or whatever.
Chris: Right, right, right.
Dave: You're like, "Oh, I don't know..." Okay. But he has a good accessibility course now. It's basically like UX, like how to do UX, basically. Anyway, it's a very cool...
Gosh, it was on my computer for like ten weeks. Where is it? Where is it?
Dave: Is it Success at Scale? Is that the name of it? No, that's...
Chris: It might even be a subdomain, right?
Dave: I think it's a subdomain.
Chris: Of smashingmagazine.com. But it reads kind of like a blog post. I don't get it. Maybe it's because it's going to be a paid course at some point or something. I don't know.
Dave: I really want to find it.
Chris: Maybe he wanted to use Astro. [Laughter]
Dave: Well, there's a paid course. Yeah, he wanted to use Astro. [Laughter] Everyone... Is everyone doing that? Am I the only one not doing that?
Chris: Astro is the best, Dave. Get on it.
Dave: Just like spinning up, making stuff up so you don't--
Dave: You're just making up little tasks so you don't--
Chris: I bet I can find it. Usually, if it's a good enough link, I just go to Jeremy's website. [Laughter] I'm like, "He probably linked it up, right?" [Laughter]
Dave: That's funny--
Dave: --because I have definitely done that.
Chris: I got it. It's smart dash... I like the dashes, too. And it's not a subdomain. It's smart-interface-design-patterns. [Laughter]
Dave: Okay, smart-interface-design.patterns. He's really embracing the hyphen, which is very--
Chris: Wow! That's a lot of hyphens. That was free. I think once you get past three, they just give it to you.
Dave: [Laughter] It's 99 cent domains.
Dave: Okay. That's good. Anyway, he has a really... It's an upcoming video course, and it's little 20-minute videos that show you how to, like the hamburger UX. How do you code a fricken' hamburger menu accessibly, and stuff like that?
I might buy this just because, when I'm thinking about it, I want to know where it is. You know what I mean? I just want to know I have an answer.
Chris: Yeah, that's cool.
Dave: But one thing he did here was he did that classic thing where Vitaly's conferences, he writes a little letter for, like, "Here's how you tell your boss to pay for this," right?
Chris: Yeah, he always does that.
Dave: Did you ever see those?
Chris: Yeah. Yeah, for sure.
Dave: Oh, so good. Right? Very genius. But he wrote a good post for how to make a strong case for accessibility on there on the smart-interface-design.
Chris: Yeah, that's what everybody was linking to because it's pretty good. It does a great job. It's the stuff we all know, but it's like, "We don't have disabled users." It's like, "Really, though?" [Laughter] Yeah, that might be self-selecting data.
Chris: Right. He's got the conversation in 2023 where we're supposed to be instead of, like, "They don't exist," which was a lot of years ago.
Chris: Which is somehow where we ended up.
Dave: Yeah. "Accessibility is an edge case," and it's like it is, but... I mean, straight up, I have a friend, a dear friend, who had a bacterial infection in their eye and they're at risk of losing their eye. It's like, boom, sudden. You know? Very shocking.
Dave: Your fortune can change in an instant. You know what I mean? Your 20/20 perfect vision can change instantly or very suddenly in the course of a couple of weeks. And so, this idea of it's an edge case and stuff like that is just not true. It's not an edge case. It's like an eventual case. We're all heading that way where bodies are going to work less good or vision or anything. That's where the human body is headed. Different people have different things.
Anyway, Vitaly does a really great job of articulating why it's important. Anyway, just want to give a shout-out to that. It's very well done, and I'll probably buy the course.
Chris: Yeah. Right on.
Dave: It's a free plug. #freead
Chris: Hit view source on it as our last bit here. Can you sniff it out? What is it?
Chris: I'm going to say 11ty because it's really hard to tell, and 11ty has no tells.
Dave: Checking for generator. Negative. All right. We passed. We're not WordPress.
Chris: Yeah. Everybody wants to--
Dave: It is non--
Chris: The no tallness is almost the tell.
Dave: I'm getting... Okay, I'm getting non-minified HTML vibes. Okay?
Chris: Yeah. Right.
Dave: That makes me think it is 11ty because it doesn't ship with some kind of optimization like that out of the box where I think Astro would. What's your Astro site? Smash burgers.
Chris: It's the new one .chriscoyier.net. Yeah, it's minified to all get-out, dude.
Dave: Oh, yeah. I'm getting minified vibes from this, so that's telling me--
Dave: Look at all these animations. Goodness. That's... It's fun. It's all fun. But yeah, so I'm getting... Yeah, because... I'm going to go for 11ty purely based on the does not have automatic minification.
Chris: Just on that?
Chris: And there's no generator.
Dave: No generator.
Dave: Because I know they use Hugo for the big site, don't they?
Chris: Do they? No.
Chris: Is it? Maybe it is.
Dave: I thought that was the original refactor, but maybe they've refactored it a couple of times after that.
Chris: I know the thing was Jamstack, and Jeff Graham, who is over there now, said they're using Tina, too, which is kind of rad.
Chris: That means they get previews and stuff, which is pretty important in Jamstack land.
Dave: That's cool. Yeah. Yep, I'm going to say 11ty. Final answer.
Chris: I'm taking it, too. I'd prefer to disagree with you somehow, but I said it first, so I win.
Dave: Oh, here. Hold on. There's another sign at the bottom. It says MM Image Preload. Is that an image swap? No, I'm just kidding. It's not Dreamweaver.
Chris: Oh, you thought it was Macromedia Dreamweaver.
Chris: Yeah, I don't think so.
Dave: Oh, that's funny.
Chris: A little Vimeo on there, still. Yeah, nothing. Nothing.
Okay, well, thanks, Dave. Good show.
Dave: Yeah. We should wrap it up.
Chris: Nice talk, yeah.
Dave: Thank you, Chris. That was a good conversation. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter or Mastodon, [email protected].
Chris: That's right. Nailed it.
Dave: Not enough hyphens. They paid a lot of money for that.
Yeah, then, of course, join us in the D-d-d-d-discord. That's where all the fun happens, patreon.com/shoptalkshow.
Chris, do you got anything else you'd like to say?
Chris: [Tongue roll] ShopTalkShow.com.