BEN: Howdy, howdy, y'all! Welcome back to Some Antics. It is another lovely Tuesday, and it's
great to be back here with you all. I am joined today by the
one and only Ashlee Boyer. Ashlee, how's it going? ASHLEE: It's going well! I'm excited to be here. BEN: I'm excited to have you on. I've been following you for — There is
no good way to say "I've been following you for a while now," is there? No, but, like, you consistently put
out some fantastic accessibility blogposts, and you've been — a while
back, you did some streaming of your own. I'm super excited to have you on. Actually, kind of before we dive into
what it is we're doing today, would you like to introduce yourself for anyone
who might not have seen you around? ASHLEE: Yeah! So, I'm Ashlee. I'm from Indianapolis, Indiana. That's in my little Twitter bio there. I'm a frontend developer and I
just started, got into my fourth year of working full time. So I have a software engineering
degree from a small school in Terre Haute, Indiana, and probably no one has
heard of that because they have never heard of it, except when people are
like, "Oh, I've driven through there when I've driven through Indiana." And I'm like, "Of course you have." That's fine. It's fine. I'm not offended. And then, yeah, so I actually originally
was going to be a chemical engineer, and then I wasn't really good at it
so I tried out software and I love it. And, like, I never anticipated
getting into web development— BEN: Mhmm. ASHLEE: Because in college they
teach you stuff like, at least where I went, a lot of Java stuff. But I'm really glad that I just kind of,
like, fell into web development and then kinda sorta fell into web accessibility. Like, I just happened to have a
cool teammate that taught me about, like, screenreaders and stuff. And then I was just like,
immediately, I love it. I love learning about it
and I love talking about it. So. BEN: Alright. Well, yeah, I didn't realize
you were studying to be a chemical engineer at first. That's really cool. I came in to college undecided, and
when I eventually landed on — It took me, like, a whole year to land
on computer science for my degree. And when I announced that that
was what I was doing, basically everyone in my communities were
like, "Yeah, Ben, we know." ASHLEE: I love that! I didn't even know that programming was
a thing until I got to college, really. Like, I mean, it makes sense. I didn't think that, like,
computers were just magic. I just didn't know how to code. BEN: Yeah! ASHLEE: Until I was 19. BEN: Gotcha! Gotcha. Well, right now we are not looking
at any screens, but I think I'm gonna go ahead and just start showing
screens, just so that, first of all, we can show off Ashlee's Twitter. Go follow Ashlee on Twitter
if you aren't already. Consistently great accessibility advice. ASHLEE: Thank you! BEN: Ashlee, you also blog. Here's your blog. Go subscribe to that. And you've probably got an RSS feed! ASHLEE: I do! Very recent, actually! Like, a month and a half or two ago— BEN: You know what? ASHLEE: Thanks to, uh… it is kind of
right there, but it's very recent. Thanks to Sara Soueidan. I think that's how you say her name. BEN: Yeah! Yes, so she put together — and
actually, let me find that, too. "RSS…" She put together a thing that
was like, "Here's some advice for how do you make a website that actually,
like, works well in an RSS reader." Where…? Here we go. I'll put that in the chat as well. I dunno, like, RSS is one of those
things where I'm always like, I feel like I *should* do this, and I
do have it on my blog, but I never really know how many people are
actually reading content with RSS. ASHLEE: Mhmm. BEN: But maybe I need to actually explore
consuming RSS content more, you know. Maybe that would be good. ASHLEE: Yeah! I think you would find yourself
surprised at how many people use them, because I definitely was! BEN: Okay! ASHLEE: I was like, "RSS? It's not… Like, people still use it?" Because I thought people
didn't, and then they do! BEN: Yeah, no, I'd always heard
the sentiment that, like, RSS died when Google Reader died. Like, what is that, like a decade ago now? But I don't know! RSS is making a resurgence. Okay, so I've got one last
tab up: StaySemantic.com. Uh, what is this? ASHLEE: It is going to be a collection of
demos of different kinds of elements and, like, do's and don'ts essentially that…
They probably won't be framed that way. They're going to be more like "Here's
what happens if you add this attribute. Here is why that's not helpful, and here's
why something else is more helpful." It gives you more context of, like, how
an element is semantically presented. So, "Stay Semantic." I can't remember which tweet it
was, but I added a hashtag that said "stay semantic, folks" or something. And it was supposed to be,
like, a cutesy little sign-off. And then… I think it may have
been Anna Cook that said, like, "Oh, it sounds like a book title." I was like, "Oh, okay, I think I
have, like, a catchphrase now." So then I bought a domain,
as we developers do. BEN: Yeah! ASHLEE: Just kind of was like, "Ah,
yeah, it's like $8, $12, whatever. I'll just buy it." That is how this was born,
like, from some funny tweets. BEN: Mhmm. ASHLEE: And that's the plan,
because I think that's what a lot of people are interested in. Or at least what I get asked about a lot. Like, "what happens if I
change this attribute?" And that's kind of what we're
going to get into today. But I wanted to have stuff available that
people could actually play around with. BEN: Yeah. First of all, I can totally relate to
being a domain name-driven developer. I came up with the name "Some Antics" [Ashlee laughs] and I got SomeAntics.dev, and then
I was like, "Wait, I actually need to do something with this now." And that's how the Twitch stream came
about, was like, I needed a good project to come with a great domain name. ASHLEE: Right! Right. That was kind of, like, more how this was. I was like, "I don't know exactly
what I want to have here." But I've developed it since then. BEN: Yes. ASHLEE: And I've been working on
it and polishing and… well, I'm actually not in the polish phase. More like polishing the idea! BEN: There we go. ASHLEE: Not necessarily the pages! [laughs] BEN: Alright, so I'm going to ask a
question, and I think this is going to be a broad one, but I'm very
curious to get your insights here. Why do we care about semantics? And how, I guess, do… like, what
is the process of semantics? Like, what does that mean to you? First of all, maybe I'll start
with a different question. What does semantic markup mean to you? ASHLEE: Semantic markup to me is
like having the skeleton of a page. Like, I don't even think about styles
a whole lot, at least CSS-specific. I do think about layout, for sure, 'cause
it's definitely important when it comes to, like, the ordering of your headings
and how you nest them and all of that, and you know, a typical website where you
have the navbar at the top or something like that, which is super common. So, like, basic patterns of
layouts that you think about. But when I think of semantic markup,
I'm only thinking about the HTML. And using elements as they were
intended to be used is a really big one. And then where there are gaps and
you don't have a specific element for everything, because when you start
building widgets or components, whatever you call them, you are putting things
together to make a composite thing. That's where the name
"component" comes from. And sometimes there are gaps there where
the semantics aren't there, and at that point, after you've tested it — you don't
want to reach for ARIA stuff first — the ARIA is what you can add to your elements
that you're making into a component, and that adds semantics so that it
behaves the way you want it to behave. And I'm often mostly thinking about
this from a screenreader perspective because, you know, visually you can see
something even if underlying it's not exactly what you might expect it to be. You can see things that you
can have a different experience with, with a screenreader. So that's mostly the
perspective I'm thinking about. BEN: Okay! ASHLEE: And I often sit and think,
"If I have my eyes closed, what do I want this to say, to make sure to
give this an accurate representation of what's actually on the page? And what happens, or what is happening
when I perform actions on this page?" That's often how I try to think about it. BEN: Okay. So, yeah, you're coming up with the
experience even, like, divorced from the visual appearance of this, but
rather you're describing, like, the functionality or how I want this to be
announced to assistive technologies. Very cool. Yeah, so… there are something
like a hundred different HTML tags, I want to say, right? And they all… it seems like
they all have their own, like, particular use cases, right? And sometimes, those can
feel very hyperspecific. So I would love to explore your
process for determining which semantics to use in which different cases. So let's go ahead and dive into that. You have given me a CodePen that
we're going to be working off of. And yeah, I guess, where's the
best place to start with this? ASHLEE: Okay, so we can start
with how I chose what demos that I wanted to put in here. And I forgot to mention in the context
of this, actually, I think the tweet that I had that had the hashtag
#StaySemantic, I think it was probably, like, a hot take about buttons and links
back when the whole discussion that happened about TikTok's documentation
on using a button versus a link. And, like, there was so much
conversation on it and, you know, there was some tense stuff there,
obviously, 'cause it's Twitter. BEN: Mhmm. ASHLEE: But there were a lot of good
conversations that happened, I think, and where people got to consider things
that they had not considered before. BEN: Mhmm. ASHLEE: And so I definitely wanted to
start with buttons and links, like anchor elements, for sure, because those are
things that people ask about so much. It's such a common topic. Like, do I use a button here? Do I use a link here? And that's definitely
where I wanted to start. But beyond that, what I did was
I went to W3C — *W3Schools*. [chuckles] "W3C." W3Schools, and they have a list
there of all the HTML elements, and that was one place that I looked. And I also looked at MDN, which
I think is also linked somewhere. It just depends on what
I really want to look at. They both have different
sets of information. This one is, like, I think this
one's more condensed or something. I don't really remember. But I just kind of looked through
this and I did learn or was, like, reminded of some elements that I
don't commonly use, and that just, you know, sparks the ideas of it. And I picked for the third set of
demos that I want to do, 'cause I wanna do more than three— BEN: Okay. ASHLEE: —but the third, currently,
that I picked out is going to be the <details>/<summary> elements, 'cause I
think those are probably so interesting in all the ways that you can use them— BEN: Mhmm. ASHLEE: —and how they sound
semantically, and things that you can add to those elements to make
them sound semantically different. So that's where I really started, with,
like, "HTML is the foundation here, so let's just take it back, all the way back
to the foundations, and read about this." So that's where I started. And then from there, you can click on
the different tags they have and it will take you to the individual pages. BEN: Okay. ASHLEE: So if we go back to W3Schools. BEN: Yes. ASHLEE: And then click
on the <button> tag. I think it's in alphabetical order. Yeah. BEN: There we go. I love the simple explanation
of "defines a clickable button." ASHLEE: I love that stuff. It's like going to Google and looking for
the definition of something, and then it uses, like, the adjective that relates— BEN: Oh!
Yes! ASHLEE: —in the definition
or, like, vice versa. I'm like, "Okay. I don't know what that word means either." BEN: "Accessibility is the
property of being accessible." Like, "Okay, thank you." [Ashlee laughs] "Like, I know…? I know. I figured as much." [Ashlee laughs] ASHLEE: Yeah, exactly! So, this is, like, all about documentation
reading, and I love reading documentation! And I like writing documentation, too,
'cause I'm a weirdo, but I love it. And so what I started doing here was
reading about the different attributes, and this is how I picked the different
sets of demos that I want to do. In the page… I need to actually
move my captions over so I can see your tabs better. Oh, here we go. Nice. [chuckles] So if you go to the CodePen tab. BEN: Yep. There we go. ASHLEE: Yes. So, pages. Yeah. And then demos, buttons. So this is a Next.js app, and for anyone
who doesn't know how this works, I think Gatsby apps also work like this. You have a `pages` directory, and however
you nest things underneath there is going to be the routing of your app. So if you have pages and then index.js
or .jsx, that's going to be the homepage. And if you have a folder like
`demos` and an index.js page, there's going to be a page called `demos`. So we can show that really
quick in the sidebar here. BEN: Oh yeah, we can
look at in the sidebar. Yep. ASHLEE: So yeah, since we don't
have to use the screenreader yet. But if we go to `demos`. BEN: There we go. ASHLEE: The code for that page will be
there, and then it links to button demos. And we have a bunch there. So this is what it looks like currently. And this is a work in progress
project, remember, everyone. I will NOT be taking feedback currently. [both laugh] If you want to give feedback. It's totally fine. But this is a work in progress,
like, massively work in progress, so. There's lots of research that is going
into this, and I'm looking up resources that people can reference and it takes
a lot of time and work, but it's fun. BEN: Mhmm. ASHLEE: And I love it. I love this stuff. I wish I could get, like, paid
to do this all the time, and I would just love it so much. But that's not really
how the world works, so. [chuckles] Yeah, so all of the attributes that you
see in that page we were just looking at, that is how I picked some of these things. And it's not just about the
attributes that we're looking at. There's also a lot of concepts
that go with these attributes. So `autofocus` and `disabled` are
both really good examples of, like, "Yes, you have the ability to do
these things, but should you?" And also, a lot of the stuff that I
want this website to be good for is to help guide people in making those
decisions, because yes, there are cases where you can use a disabled
button using the `disabled` property. There are cases where you can
use the `autofocus` property. Maybe not for a button,
but for an input sometimes. BEN: Yes. ASHLEE: And there's so many considerations
that come with that, and that's really what I want this to be for. So, `autofocus` is a really fun one
that I was enjoying exploring with here. BEN: Wikipedia uses `autofocus`
to take you into the search bar. Which, you do, like, skip past
the different, like, language links, but let's be honest. The vast majority of people who are
landing on the Wikipedia homepage are just immediately, like, hoping
to, like, search for an article. Right?
So this is one of those times where, like— ASHLEE: Exactly. BEN: —yes, you do skip content,
but you get to what 99% of users actually want more immediately. ASHLEE: Exactly! So you touched on a lot of those things. Like, what are you skipping? Is it worth skipping? Is there vital information
here that's being skipped? If there is, then just don't skip it— BEN: Mhmm. ASHLEE: —because the work that you
have to do, like, if you have something have autofocus and you also want to
describe something above, like, there's so much extra code that goes into that. And is it worth it really? There's more testing you have to do. And anything you do that's outside
of the norm has more testing. You know, it has higher risk
of being buggy and broken. BEN: Mhmm. ASHLEE: And that's why you try to stick
to the basics and then build on top of it. And that's why there's a rule of ARIA and
it is "No ARIA is better than bad ARIA." That is in the
documentation, and I love it. I even made a cross stitch of it. BEN: Really? Oh, man. ASHLEE: I don't have it nearby. BEN: Is it on Twitter? Can I find it with Twitter? Oh, I disabled the
search thing on Twitter. Never mind. I installed an extension that's like,
"Please just hide the right-hand sidebar when I'm streaming," just because, I
don't know, that always feels distracting. ASHLEE: I can totally find it. BEN: Yes. If you find that and stick it in
the chat, that would be excellent. ASHLEE: I can probably
find it pretty quick. BEN: Yeah. And it's funny that you're mentioning
"should you disable a button," because that's actually the subject
of next week's stream is, I've got Sandrina Pereira coming on. We're going to be exploring, like,
whether disabling buttons in the first place is, like, a good user
experience or what can be done to make that a better user experience. So if you're curious about that
one particular micro-interaction, that's what next week is about. ASHLEE: Oh, I hope I'm
not still selling this! Oh my goodness, I am. Okay, please don't buy one of
these, because I'm not making them right now, but there's still a link
and it says three are available. But don't buy it, please! BEN: That's incredible. But, oh, that's such
a lovely cross stitch. I love that. ASHLEE: It needs ironed, but it's fine. I think I ironed it afterward, it was
just like a plain little plastic cross stitch thing, and it had two leaves
on it, and it was nice and simple. I don't have it nearby, though. I don't even remember where I've put it! I feel like I hid it from myself,
but now it's really hidden. BEN: Oh, man! I feel like that would be, like, really
great for, like, your background. Like, hung up on your wall, like,
right behind you, so that, like, you've always got, like, some accessibility
reminders, like, just behind you. Bring it out passive-aggressively on
Zoom calls with your coworkers, you know. It only conveniently appears whenever
you've, like, got some coworkers with, some accessibility de— I don't know. That feels like a bad energy, perhaps. [Ashlee laughs] ASHLEE: I do definitely need to
work on my streaming background. BEN: There we go. ASHLEE: Like, it's very plain. My walls are a little dirty because
it was, like, furniture and stuff. BEN: Ahh. ASHLEE: It's totally fine. I'll work on it eventually. BEN: Yeah.
So, we've got a few demos. Abdelrahman, thank you
so much for the follow. I really appreciate that. Yeah, let's go ahead, and I
guess we've got a few demos. Which ones would you
like to pop into first? ASHLEE: Um, let's see. So the basic button one, that would
be like super good intro for people. There's not a ton here. Oh, and each of these files
has the text on the page. So if you click the basic
button link in that tab. Each one of these are set up to
have, like… I don't really want them to be that long in the text because
I don't want people to be afraid. BEN: Mm! ASHLEE: So I'm working with the layout
of it, you know, that way people can have sections of, like, "Here are related
resources" and people come back for that. BEN: Yeah. ASHLEE: That way, they don't
have to parse all of it. But that is the basic layout that
we have going here, is like, the top has descriptions and whatnot. And, like, some of them are mini
blogposts, like the `autofocus` one and the `disabled` one. Those are definitely a little longer. And then at the bottom is the actual
elements that we can interact with. So this one, see, it's kinda long. BEN: Yeah. You weren't kidding! That's great! ASHLEE: I had a lot of fun with it. This is why it's taking so long. Because I'm enjoying it a lot,
doing a lot of reading and sharing. BEN: That's incredible. Michael Chan is in the chat
saying he loves this site. I agree. I'm super excited for this to launch. ASHLEE: Thank you! BEN: Yeah, so start with the basic button? ASHLEE: Yeah, the basic one is just there
so, you know, anyone who's brand new to using a screenreader or whatnot, they will
get to hear what a button sounds like. And all it's going to say
is "Click me, button." It's very simple. What screenreader are you using today? I guess we didn't super go over that. BEN: So I'm on a Mac, so
I'll be using VoiceOver. Let's see. ASHLEE: Okay. BEN: It's in `demos`, and that'll
get me the rest of the way. ASHLEE: Yes. BEN: Got this pulled off into another tab. ASHLEE: Yes. BEN: Just for folks in the audience,
if you're ever using CodePen or CodeSandbox, accessibility testing
gets really weird with those because of the way both of those platforms
use frames to host your site. And so we've, Ashlee and I have just
both found that it's just so much easier to do these demos when you
pull this stuff out to another window. ASHLEE: Right. BEN: So we will be bouncing back and
forth between this window and CodePen. Uh, CodeSandbox? CodeSandbox. ASHLEE: CodeSandbox. I always say "CodePen," because
that's just where I started! BEN: Yes! Here we go! So, yeah, do you want me to just, I guess,
roll over this button with VoiceOver? ASHLEE: Yeah. If you just wanna, like, tab over to it
or whatever controls you typically use. BEN: Cool! ASHLEE: Everyone does
it differently, I think. BEN: So I'm on a Mac, so
I'm turning on VoiceOver. And the way I'm going to do this is
I'm going to hold Command and press my Touch ID button three times. That's one of the ways you can turn it on. There's, like, five different
ways you can activate VoiceOver. VOICEOVER: Voiceover on Chrome. HTTP— Entering web content. Visited link, Demos, list, 2 items. Visited link, Buttons. Click me, button, main. You are currently on a button. To click this button,
press Control-Option-Space. BEN: Alright! ASHLEE: That's interesting. It said "button, main." Is it because it's in a <main> element? BEN: Yeah! Yeah. ASHLEE: Interesting. BEN: 'Cause, and it would have
basically like this… You know what? Let me nuke VoiceOver. VOICEOVER: VoiceOver off. BEN: Yeah. If we inspect the markup on this. Yeah, so we were in the <nav>
when we were up here on these— ASHLEE: Ohhh, yeah! BEN: And then the button is the
first thing that we focus on after hopping into the <main>. ASHLEE: Yes. BEN: So it's like, "Hey, just
so you know, there's a <main>. You're in a <main> now." ASHLEE: Okay! BEN: Had we gone to the <h1> first,
then it would have said, like, "h1" or "heading level 1, A Basic Button, main." ASHLEE: Yeah, okay. I forgot about that. Nice! See, I love this so much. BEN: Mhmm!
ASHLEE: This is so much fun. I need to hang out with more
accessibility people in my free time. BEN: [Ben laughs] We just, we need to get, like,
we just need to have a big accessibility advocate party. That's what we need to have. ASHLEE: That'd be awesome. I would love that. BEN: I can just imagine the
Jackbox, like playing Quiplash. Just imagine the answers. It's like, how many answers
can we just put "Overlays" for? [Ashlee laughs] ASHLEE: Oh my gosh, that's so great! I haven't played that game in forever. I love that. Accessibility party! BEN: Yup. Alright. Yeah, so that was a pretty
quick demo of a button. We didn't actually do a
whole lot with this button. Oh, Travis is asking, "So does it say
'main' the first time and not after? For instance, if you go to the h1 and then
the button, will it say 'main' for both?" It should just say "main" once. ASHLEE: Yeah. VOICEOVER: VoiceOver on Chrome. Entering web content. Click me, button, main. BEN: Let me start it— VOICEOVER: You are current—
visited link, Demos. Visited link, Buttons. Chrome— End of list. End of navigation. Main. You are currently on a main. Heading level 1, A Basic Button. This is a plain button element
with no properties added to it. Nothing happens when it is activated. When focused, your screenreader
will say, "Click me, button." Click me, button. You are currently on a— BEN: Yeah. VOICEOVER: VoiceOver off. BEN: So the, like, that VoiceOver
experience, like it just tacking "main" on into the end, that's an indication
that you've entered the <main>. ASHLEE: You'd probably get an exit also. Like, maybe not for that specific element,
but I do know it happens on some elements. BEN: Yes. "End of main" or something like that. Yeah. Very cool. ASHLEE: Yes, I think it
happens for <section>s. BEN: That would make sense. I think lists as well do that. ASHLEE: Yes. Yes. See, this is fun, 'cause, like, it's
impossible to memorize all of this stuff. I just want to point it out. BEN: Mhmm. ASHLEE: Like… it's just like code. Like, we don't memorize every
single function that we need. You know, sometimes we've got to
google it and search it and just be reminded of how something behaves
and then we're like, "Oh, yeah! That's how it works." And accessibility isn't
really that different. It's another facet of development. It's extremely important. And you learn how to learn things and you
can apply those skills to accessibility as well as just as you learn code stuff. BEN: Yes, absolutely. I think that's such a great point, because
accessibility can be one of those things that, especially looking in, can feel very
overwhelming and, I don't know, sometimes it's just really good to know, like, yes,
you can go to Google or you can just kind of go back to the basics and be like, just
test this, run your screenreader over this and figure out what it's actually doing— ASHLEE: Mhmm! BEN: —and figure out then, like,
hey, how can I improve it from there. You don't have to know everything. You just have to know
where you find things. ASHLEE: Right! And that's kind of the
process of these demos, too. Like, when I build something as a frontend
developer, if I'm building a component, I start very bare-bones, very basic. I need to know "How does this,
like, work out of the box? How does it sound out of the box?" And my dog is chewing a bone! You guys can probably hear it! Geez! How rude! [both laugh] So I start very bare-bones and,
like, I slowly add to stuff. And that's how I learn things. Like, I'll add something and then I
need to know "Is it working differently? How exactly is it doing it?" So I have a very, very iterative approach. I'm a very systematic person
anyways so, like, that's part of just how my brain needs to do
things to process what I'm doing. BEN: Mhmm. ASHLEE: But it's really helpful, I have
found, when learning something new. Like, add one thing. What changed? If I add something different, how
does it change in a different way than the other thing that I added? Why does it do that? And you just got to do
googling from there. Like, there's so much googling that you
have to do when you learn something, and it's okay to not know something also. Like, it's okay to say "I
don't know, but I'll learn." Like, that's the important part is
the effort that you put into learning it and being transparent about that. BEN: Mhmm. And then I think the other half of that
is, like, acknowledging that, like, you're not going to come at a perfect solution. You're… that's just… there's no such
thing as a perfect solution all the time, and so being willing to perform,
like, user testing where possible, right, to figure out what are the gaps that
people are encountering and when is the theoretically correct answer actually
hindering the user experience as well. ASHLEE: Right! And another, like, philosophical
thing that we've got here that this gets into is that disabled people
often have conflicting access needs. BEN: Yes. ASHLEE: You know? And so that's where personalization
is really important. So when it comes to things like
captions, we need them because we both can't really hear! So we need captions! But that can be really distracting to
other people who are just looking at that and they can't focus on what's going on. So the personalization there is enabling
people to turn those on and off on their own and empowering people to
do what they need to be able to do. BEN: Mhmm. Another example of those kind of
conflicting accessibility needs is actually color contrast, right? Because if you are low-vision or
if you're colorblind, like, having high contrast is usually beneficial. But if contrast is too high,
this could be overstimulating to, for instance, autistic people. So, yeah, that personalization
aspect is huge. So, alright! What's the next thing we're doing, Ashlee? ASHLEE: So if you go back a page…
They're in alphabetical order in the folder so, like, that's not really,
like, the logical order that I'm taking. And I actually did make these
a little bit… I do not want to talk about autofocus first. I'll have to move that. Let's talk about disabling buttons,
because that is such a fascinating topic that I did not know a lot about
until I started doing more research. So disabled buttons: when you use the
`disabled` property on a button, it removes it from the… I'm losing the words. The, um… BEN: Focus order? ASHLEE: Yeah. The tab order. I don't think "order" is
the word I'm looking for. BEN: Sure. ASHLEE: But it removes it from
the list of things that are tabbable in a document, basically. And so, if you have a form and the
button, like, to save it or submit it is disabled because the form isn't valid,
you can't really get to that knowledge, like, just by tabbing through the form. BEN: Mhmm. ASHLEE: And so if someone can't see
that it's disabled or that the button text is different because it's not
reachable by keyboard, then there's context that's being missed out on. So that's where it's a
little bit more work. It's not a ton of work. It's very valuable work. You use something like
`aria-disabled` instead, and you'd change the styles of the button. And what I learned a lot about this
is, like, when you show error messages, and that instead of disabling a
button, let the button be clicked. Show the error messages. Put that in, like, in a live region
so that it's presented whenever the form is submitted, and just making
sure that all of the words that you have there make sense and they're very
informative so that people know exactly what's happening, as if you had your
eyes closed and, like, someone was just saying it to you, which feels
kind of ironic to say as a deaf person! BEN: Mhmm! ASHLEE: Because if I close my eyes,
I cannot understand anything at all unless I have headphones on. So that's why I have headphones on. But that is a much better and usable
practice for people, especially people who use assistive technologies to
navigate pages or to, like, listen to a screenreader to have it presented to them. And that's the approach
that I was using with that. So if you hit the Save — I don't
know why it doesn't go away. The message. It should be in an aria-live <span>. BEN: Let's do this over
here on our other tabs. So it's "disabled," is what it's called. By the way, I wanted to shout out Alan. Alan, thank you so much for subscribing. Just so y'all know, subscribing, that
sub money is going towards me funding closed captions for these streams so
that I can get the uploads out faster. So just so you know, like, if you
subscribe, that's the cause that it's going to, is ensuring that I
can sustainably and quickly turn around the recordings with captions
and keep them accessible for all. So thank you all for subscribing. Alright, let me turn on VoiceOver, and
then we'll go ahead and do this button. VOICEOVER: Voiceover on Chrome. HTTPS. BEN: And I'm just gonna
skip down closer to the end. VOICEOVER: —is can, unselected. You are currently on a text— BEN: Okay, so first of all, we're
going to see that, like, I cannot tab to — Let me move this over a bit. I can't tab to the "Click me" button. So that's the first thing
that we're going to see. The second thing we're going
to see is what happens when I click the "Save Changes" button. VOICEOVER: Link, live regions. Save Changes, dimmed button. Chrome has new window. You are currently on a— BEN: Okay, so it's saying
that this is a dimmed button. Why is it saying it's dimmed? ASHLEE: I'm pretty sure that
comes from the `aria-disabled` property because… I can't remember
exactly what it was, but different screenreaders present it differently. BEN: Mhmm. ASHLEE: So VoiceOver says "dimmed" and
I think a different screenreader — I don't remember which one exactly,
'cause it's probably on Windows and I don't have Windows so I
haven't done a lot of practice with it, but it uses a different word. Which is a good thing to bring up that
all screenreaders work differently and some screenreaders cost money. A lot of money, depending
on where you're from. Like what country you're from, even. BEN: We're not pointing fingers, *JAWS.* ASHLEE: Nope, not pointing fingers! And they can be complex to use, just
because there's so many things that you can do because customizing things is
very difficult for everyone that needs to use something like a screenreader. So these are just important contextual
modes that I'm bringing up here. BEN: Mhmm. Alright, so I'm going to now go ahead
and, you know, press this button. And I think I actually have to
try this again because I've been playing with moving around this box. Let me try that. VOICEOVER: Link, live— Save
Changes, dimmed button. Cannot save. Input is not valid. BEN: Okay, so we pressed it and
immediately after, it said, "Cannot save. Input is not valid." And you said that was because we
were using an ARIA live region. ASHLEE: Yes. Those are so neat. So if we look at the code… BEN: Yes. ASHLEE: I think what I'm doing
is a bit redundant there. 'Cause I've since learned more
about `aria-live`, but what I have there is a message. That message is what's getting
rendered inside of the <span> that has `aria-live` set on it. And that <span> is only getting
rendered if there is a message. And I don't think that is
necessary, as far as I understand how ARIA live regions work. If the text changes, it is
presented, is my understanding. BEN: Sorry, I've been looking for
a moment to shut off VoiceOver, just cause it always interrupts. So let me do that real quick. VOICEOVER: VoiceOver off. BEN: There we go.
[Ashlee laughs] Streaming while demoing
VoiceOver is always an adventure. ASHLEE: It so is! BEN: Yeah, especially when there's,
like, a guest where it's like, oh, I really want to let the guest talk
because that's the important part. But also like, I can't move windows
until I shut down VoiceOver. ASHLEE: Okay, I'll try to remember that! BEN: I was on Learn With Jason a
couple of months ago, and that was this constant thing of like, I remembered
it so it was like every time VoiceOver happened, like, I remembered to
shut up, and then Jason's like, "Oh no, sorry, don't let me interrupt!" And it's like, "No, no, I just,
I know that this is just a part of streaming accessibility." [Ashlee laughs] Okay, it's a live… Ah! ASHLEE: Oh, it's at the top. BEN: Okay.
ASHLEE: Yes. BEN: So, yes, you've got this… First of
all, here's our `aria-disabled`, so that's what gave us that "dimmed" announcement,
as opposed to this button that has the, like, just native `disabled` attribute. So we can see why those
differences were there. And now you're conditionally
rendering this ARIA live region. I think one of the things that I've seen
is, this works in VoiceOver, where you're conditionally rendering this node, but I
think, as per the specs, ARIA live regions are supposed to be, like, present on the
DOM before you add any messaging to them. So conditional rendering happens to
work with VoiceOver because of the way the VoiceOver is implemented and the
accessibility tree on Mac is implemented. But I think ideally you're supposed
to have this on the page, like, all the time and you would populate
it later, if that makes sense. ASHLEE: Right. And if the text changes, so
like, if you didn't, like, clear the text and then set the text… BEN: Yes. ASHLEE: I don't think you have to do that. I think you can just change
it and it just works. BEN: Mhmm. ASHLEE: I mean, we could
try it if we want to. BEN: Okay! ASHLEE: What happens if
I were to type in here? BEN: Actually, yeah,
'cause you've got… yeah. Let me… yeah. ASHLEE: Oh, am I there? BEN: I think so. I think — oh. ASHLEE: Aha.
BEN: Aha! ASHLEE: So, what we can do here, let's
first take out the conditional rendering. So I'm just going to copy that and
paste it, and when I hit save, it has Prettier and it auto-formats, which is
like… I can't live without Prettier. This classname "screenreader-only,"
I'm pretty sure that doesn't actually do anything right now. And that is from a blogpost. Oh my goodness, who is it? BEN: So there's, like, so many
different articles floating out there, but the one I typically use is
Scott O'Hara's "Inclusively Hidden." ASHLEE: Yes, and I think he
links to the one I'm thinking of. BEN: I think Kitty Giraudel has
one as well, and yeah, like, everyone has their own version of,
like, a blogpost that shares this. I don't see a link here. But I'll stick this link, 'cause this
is what I tend to use, in the chat. ASHLEE: Okay. Great. BEN: There we go. But yeah, this is… Ashlee, do
you wanna kind of explain why we need a class like this? ASHLEE: Wait, what? Can you repeat that? BEN: Could you explain why we need a
class like .sr-only or .visually-hidden or some sort of utility like this? ASHLEE: Um, yeah! So an ARIA live region, like, it
depends on what you're using it for. So in this kind of example that we've
been talking about with a form where, when you submit the form, you show
error messages, that is beneficial for both people who can visually see
the page and people who are using assistive technology to consume the page. So we don't really need that here. BEN: Mhmm. ASHLEE: I think… This is just, like,
a work in progress, like, bit of code and I just didn't want delete it. So with something like this,
we don't necessarily need it. And I can't think of a specific
example of an ARIA live region, unless you're, like, stating that
something happened on the page and you don't really need to show that text. But that is what that's for. When something visually happens,
you need to, like, convey that to someone who's using a screenreader or
assistive technology, but you don't need to display that text at all. But the only way you can, like, put it in
the markup so that it's read is, like, you put it in there and you have to hide it. There are a lot of considerations
that you have to make for hiding, like, with browser compatibility— BEN: Mhmm. ASHLEE: —and not even just individual
browsers, but, like, versions of browsers, and all of the different
assistive technologies that are out there on different OSes. So, like, this is why so many people
have written about it, is because there's a whole bunch of ways to do it
and, like, we need it super documented. And I hope I remember who wrote that. I can think of their webpage
and I know what it looks like. BEN: Is it Kitty Giraudel? I think — hang on. Is it called "Inclusively Hidden?" "Hiding Content Responsibly." Is that it? ASHLEE: Yeah!!! Okay, so this isn't the specific
one that shows the screenreader-only class, but I think this links to it. Yeah! Yeah, yeah, yeah. Okay, this is a great place. BEN: Okay! ASHLEE: So if you want to link
this, this is exactly what I was thinking of actually. And it's a beautiful site. BEN: Yeah. ASHLEE: Very clean and classy. [laughs] So that's where I got this from. And I think I have this in separate
notes in a different app that I had actually started this project in, so. BEN: Mhmm. ASHLEE: This will definitely
be shared with the end product. BEN: Yeah. ASHLEE: So we're not going to do it here. BEN: Okay. ASHLEE: So I don't think we need
to copy and paste it or anything. All it would be doing is
hiding it so you don't see it. But I think it's valuable for this
demonstration purposes to be a pop-up, so I'm going to delete that. BEN: Yeah. ASHLEE: Just so we don't confuse anyone. BEN: So broadly speaking, if you need
to have content that is available to screenreaders and other assistive
technologies, but you don't want that to be visually shown, you don't
want to use something like display: none or visibility: hidden because
browsers take that as a cue of like, "Oh, *no one's* supposed to
get this, so I'm not even going to expose it to assistive technology." So that's why you need a class like this. This is basically a CSS hack that makes
the content, like, really small, or at least the window through which you could
see the content, like, impossibly small. So it's not *technically* hidden. It's basically effectively hidden. And this is the, like, go-to trick
for having content that is accessible via assistive technologies, but it's
still visually completely hidden. ASHLEE: Yes. Thank you for elaborating on that. BEN: No problem! ASHLEE: So what we were doing here,
we're gonna check and see what happens if we changed the message, right? Without clearing it? BEN: Yes. ASHLEE: Okay, so that's what I will do. So the first thing that we
have is it waits two seconds to put this message in here. And this is not ideal code here, alright? We're just doing it. I don't like timeouts. Timeouts are usually gross. They're usually a code smell unless
they are very intentionally used. Usually you have to, like,
have a delay on something… BEN: Mhmm. ASHLEE: …like in a test and I
don't like timeouts that much. So we're going to add another
timeout inside of a timeout, because… this is sarcasm. This is what we need to do. [chuckles] But I would not do
this in production code probably. BEN: Okay. ASHLEE: I really don't
know what to make it say. "We're testing aria-live stuff!" Oh, wait, I need to
add a timeout on there. What we should see is the behavior
that we saw before, so "Cannot save. Input is not valid." And then two seconds later, we should
be read "We're testing aria-live stuff!" That's what we're hoping for. BEN: Alright! ASHLEE: We're trying to
prove some hypothesis. A hypothesis. BEN: There we go. And I think you probably saved…
Yeah, it looks like you've saved. So this should work now. Turning on VoiceOver again, VOICEOVER: VoiceOver on Chrome. Entering web content. Link, live regions, main. Save Changes, dimmed button. You are currently on a button. This item is dimmed. Cannot save. Input is not valid. We're testing aria-live stuff! BEN: Nice! ASHLEE: It works! I love it! Also, the screenreader sounded so excited. BEN: "We're testing aria-live stuff! Woo! Go aria-live!" ASHLEE: [laughs] I love it. Also, y'all are being
hilarious in the chat. TheID… TheIdAlan? TheIDOfAlan? I don't know. …said, "Timeouts all the way down!" And then BuildingBedrockLayout
said, "I heard you like timeouts. So I timed out my timeout." [laughs] This is great. I love it when the chat messes with me. I've streamed before also, so, like, you
guys aren't going to offend me unless you actually say something super offensive. So I can take it. I can take it from the chat. BEN: I am not going to encourage that! ASHLEE: Right, so I'm — okay. BEN: There we go. ASHLEE: VoiceOver off. BEN: No,I guess have at it? Question mark? Okay. ASHLEE: Don't be mean. We got positive vibe here. BEN: Positive vibes! Alright. Yeah, so, yeah, that was, I think
this was a really nice demo of just showing, like, the difference between
these two buttons, and also getting to play around with `aria-live`. I actually wonder now how it might be
feasible… I'm sure somewhere down the road, you're going to have a set of demos
that are specifically just, like, "Here's all the things to know about, like,
`aria-live` or live regions in general." We've got, Brent is calling out
your cross stitch for being dorky. ASHLEE: Yay! That's so cool! I'm basically, like, a grandma
in, like, a 26-year-old body. So I like The Golden Girls. I like cross-stitching. I like knitting. Like, my body feels like it's
falling apart all the time and it doesn't cooperate with me. So like, it's the grandma. Like, it's fine. I love dorky stuff. BEN: Disability experience time. Do you find that when you have
one disability, you really have three disabilities? ASHLEE: Oh, hell yeah. BEN: Yeah, this is a thing
that I think, like, nondisabled people don't necessarily, like,
understand about disability is, like, it's never just one thing. It's always three things. Like, you always have,
like, a laundry list. ASHLEE: It's really not! Like, I'm deaf, so my
ears don't really work. But there are, like, things that go with
that, like I have tinnitus all the time and it actually kind of hurts sometimes. And, like, sometimes
they'll give me a migraine. And also, like, disabilities are just so
freaking annoying and bodies are annoying. So I need hearing aids to hear stuff,
but I put them in and shit's too loud. So then I have a migraine. And it's like, "What? This doesn't add up. Like I'm giving you what you need. Why won't you cooperate?" BEN: Mhmm! Yeah, forget, like, disabled people
in general having conflicting needs. Like, disabled *person*
has conflicting needs. ASHLEE: So true! Oh, God. Weary all the time. Like, there's so many things. My migraines, I have so many
of those triggers and they just conflict with everything. BEN: AngryMooseOnTheLoose says, "I
came into 'bodies are annoying,'" which is one heck of a time to come in! Congratulations, AngryMoose! We are actually going through a few
HTML demos just to really understand, like, what is a systematic approach
for understanding, like, how do we test differences in semantic markup
and, like, kind of incrementally add the experience that we want. ASHLEE: Yes! BEN: So speaking of, what's kind
of the next thing you wanted to take a look at, Ashlee? ASHLEE: Yeah, so we've taken
a look at some demos and there are all kinds of stuff. And we could literally
talk about it forever. Like, I love talking about accessibility. Love it. But we only have a few
more minutes, really. Is there a dog behind me? BEN: There is a dog! ASHLEE: Get off, tail! BEN: Welcome, dog! ASHLEE: That's Trooper. BEN: Hi, Trooper.
ASHLEE: That's so funny. BEN: My cat Tuna is over there
just, like, conked out on the bed. Like, hard at work, of course. ASHLEE: Yes. They're both doing that now. They're laying down. I have two dogs, by the way. So we don't have a ton of time
to, like, dig into more demos. BEN: Mhmm. ASHLEE: But I want to talk more about
my process, like, what I would do next. So today we had all this stuff and, like,
from a frontend development perspective, I want to build a new component. Where do I go to look this up? My favorite, probably one of my
favorite websites or pages is the W3C or the WAI-ARIA Authoring Practices. BEN: Yes!
ASHLEE: I love it. They have such good examples there. So in the sidebar, they call these
things widgets and not components and, you know, whatever you call it is fine. And they have design patterns. So it gets into some abstract stuff
and generalized stuff, and it gets into like, what is a dialog and, you know,
what are the different kinds of dialogs. You know, some interrupt a user's
flow and some don't, and you have to know exactly what you want with that. And it talks about, in some of these
examples and whatnot, like, why you would choose one or not, and the other. So, depending on the kind of person
you are, I wouldn't recommend, like, just diving in and reading this. Like, you're not going to remember a
ton of it probably until you need it. Knowing the layout of this
document is very good. That way you can come back to it
later and easily get to what you need. But typically, what I like to do if
I'm building a new component, is I will go here and I will see, is there
something similar to what I want to do? So if I'm building some kind of
menu, like ,I'm going to be building a menu at work soon, I think. I don't really know. But menus are one that
I think about a lot. So there are different kinds
of menus that show up here. But when you click on them, the way
this document is laid out, is they have examples and they get into lists of,
like, keyboard navigation, and they have these tables that just lay out everything,
like, exactly what you need, what elements they're using, what should happen. You know, if a button is focused
and you hit a certain key, what's supposed to happen? And they get into all of the attributes
and states and properties that you need. And what's nice about this is they have
the code rendered on the page also, so you can interact with it and use it
as, like, "This is what it needs to do. What I'm building needs
to sound like this." And it's really helpful in that case. Like, it's a great
reference in my experience. What's important to note here is
that there are a whole bunch of ways to make something accessible. Not only because, you know, conflicting
access needs and whatnot, but just because there are a lot of approaches
that you can take to end up at the same result in a lot of cases. Not in every single case. But just like we can all say things
differently to each other, because that's how language works, it's the
same way with the screenreader, which is why it's important to actually
test with people and say, "Is this useful to you as a screenreader user?" That's super important. User testing is so important. So this is a resource that I love using. It is also important to note,
like, in an aside, they do have a button widget, which tells you how
to build a button out of a <div>. And do not do this for
all of your buttons. Use a <button> element! But what that can be helpful for
is applying the knowledge that you need for making something clickable… BEN: Mhmm. ASHLEE: …to work like a button. So, like, if you have, like, a card or
something like that on a blogpost, and when you click on the card, it will
take you to the actual blogpost, instead of having to click a very specific
link, you know, like, you can increase your touch target size, which is good
for accessibility in a lot of cases. It will tell you… It teaches you the
concepts of doing something like that. Like, don't build a button from scratch. Like, there's so much you can
get for free out of the box. It's so much easier. But! There are attributes that you apply to
an element to make it clickable and to convey that to users, and that's what
you can learn from these examples. BEN: Alright! Are there other resources you
like to go to, or are the ARIA Authoring Practices kind of the
main, like, first place you look at? ASHLEE: Since I know, like, of other
documents, this is often where I go, since I've, like, seen other
ones, because as you can see from the view we're looking at now, there
are links to the different things. So, like, `aria-pressed` is one. `aria-haspopup`. So this links to a lot of further
documentation if you want to read more deeply about the different roles,
states, and properties that are in ARIA. But I also really like a general
resource, which is The A11Y Project. BEN: Yes. ASHLEE: And I'm pretty sure
that's a11yproject.com. Yeah, I love this site. BEN: Tatiana did such a
great job with the design. ASHLEE: Yes. The design is fantastic and I
love that it just dispels the myth that accessibility means ugly. Like, it doesn't whatsoever. You can create beautiful
designs that are accessible. And it's so good and I love it. But this site is really great
for finding further resources. They do have articles on here that
are very helpful, but there is a Resources page and it gets into
different… What word am I thinking of? Mediums. So that's really accessible because I
don't listen to podcasts a lot personally, because I have to be in the right
setting and I have to have headphones and I don't often find myself in a
setting where I can listen to podcasts. So I don't typically look at that,
but other people really like podcasts. So I think there's podcasts
listed here and books and blogs, and this is, like, talks. Yeah. So I think at the top left, there is a,
like, a table of contents type thing. BEN: Oh, yeah!
Looks like it. ASHLEE: Yeah, so it also breaks
things up into different sections. Like there's tools and all kinds of stuff. This is like really good stuff
that's been collected for awhile. BEN: Mhmm. ASHLEE: The person who curated this,
their name is completely… Eric Bailey. BEN: Yes. ASHLEE: Eric Bailey is the
main person that runs this, and it's been going for awhile. I don't know how many years. It's been multiple years. 'Cause I knew about it when I started
reading about accessibility and whatnot. So it's a fantastic collection
of resources that you can go to to learn even more. And then of course the… So I want
to know how other people say this. I say, like, "wuh-kag" in my head. BEN: Mhmm. ASHLEE: Okay. So the guidelines, the WCAG, Web Content
Accessibility Guidelines, like, that's a really good place to… I think it
can be very intimidating to see that. BEN: Yeah. ASHLEE: But the number… I am
skipping a number on my head. Is it 12 or 13 total guidelines? BEN: I feel like there's 14 now maybe,
with 2.1 or 2.2 or something like that? Something like that. ASHLEE: Right, okay. So there's roughly a
dozen total guidelines. And when you think about it from
that perspective, that's not a ton. There are just a lot of things underneath
each one that you have to learn about. But overall, that's what
you need to understand. It's like, obviously if you
get an accessibility job, you need to know specifics. Like, whatever they tell
you, you need to know. BEN: Mm. ASHLEE: But to get started,
learn what the guidelines are. Learn what the, I think, the
four principles are, which are POUR: Perceivable, Operable,
Understandable, and Robust. Did I get it? BEN: You got it! Got it in one! ASHLEE: I got it! Heck yeah! So like you, you start at the top of…
or the bottom, I guess, the foundation. And then you go from there. So that's where a systematic
approach comes up. And that's what I hope the main
takeaway is here, you know, that you feel a little more empowered and
less intimidated by accessibility. Like, you have some starting places and
you're like, "Okay, yeah, I can just open a CodePen and try out some attributes. Like, that's pretty easy. That's not any different
than the rest of my code!" So that's what I hope a
major takeaway is here. BEN: Mhmm.
ASHLEE: Like, experimenting can be easy. It can be fun. It's okay if you don't know everything. Like, it's all positive vibes here. [Ashlee laughs] BEN: Absolutely. Well, thank you so much for coming on. I've really appreciated having you on. And chat, thank you all so
much for being here as well. If talking about these kinds of
interactions, especially from an accessibility framework is
interesting to you, then you're really going to love next week's stream. I've got Sandrina Pereira coming on. We're going to be exploring specifically
how to inclusively disable a button, so really focusing on that
micro-interaction that we've already alluded to several times today. So you'll want to be there for that. That's next Tuesday at 12pm Central. Same place, same time. And, yeah, with that, I think…
Actually, you know what? I'm gonna do one more
shoutout for your Twitter… ASHLEE: Thanks! BEN: …@AshleeMBoyer. And while I'm here, I might as
well promote the Some Antics Twitter account as well. Go follow that for updates on all the
different streams that are going on. And yeah, stick around. I'm going to try to find someone to raid. If you've got anyone you want to see
you raided, let me know in the chat. But y'all, this has been great. Thank you so much for coming,
and thank you once more, Ashlee, for joining the stream. ASHLEE: Thanks for having me. BEN: Bye, y'all!
