Wrapping Up

[00:00:00]
>> If it was coming from the inside, I would probably push for a linter as quick as possible, just so we can get in there and get some data obviously coming from the outside. I don't have access to the code, so instead of access to the code, I'll just start with an audit.

[00:00:13]
So we'll just go ahead and we'll just do a lighthouse audit just to get started with it and see kind of what blows back. So again, just going to lighthouse, selecting only accessibility for now and then running the audit. Cool, so the score looks pretty good 81 again, lighthouse doesn't catch everything but I think it's a really good starting place.

[00:00:37]
So we can kind of see a lot of stuff that we covered today, which I always think is cool. So one thing is buttons that don't have accessible names to them. So if we go ahead and we kinda click on this button And expand it. Okay, so I've seen this a lot.

[00:00:53]
So, this is like, I actually should probably add this to one of my talks. So this is a super common pattern. And let me go ahead and right click here and scroll into view on this thing. So you have a button, which is the right element, and instead of text in there you have an icon.

[00:01:08]
And that works very, very well, right in these situations for visual users that use the mouse. So the only content inside this button is this icon. This is like very, very, very common. And so what it's complaining about though is that since it has no content to be read by screen readers when they hit this button, they'll have no idea what the button is supposed to do, that it's supposed to tackle to the left or right of something.

[00:01:33]
So you can kinda solve that with labeling it or you could put visually hidden span in there with some previous item, next item description, something like that. Yeah, that's actually a really great example because that happens that's just like such a common web pattern is a button with an eye tag in it and that's it.

[00:01:53]
Links do not have a discernible name, I think this will be the same thing, so these are, we can kinda see these nice screenshots. Let me click on this one here, yeah, it's just the same thing, this is kind of really wish I had covered this. Anchors and buttons that don't have any text content in them.

[00:02:09]
It's just so popular right, like a link with a picture link with a GIF file link with button with a GIF. These are all kind of the same thing. So again for these your two options, are you adding Aria label to it or adding a visually hidden little span with a description of what they do.

[00:02:26]
So we've got this one here, which shows the scrolling view, cool this one's an ad. This is another good example. I think this is an ad, no, it's not. Okay, it's your own get okay, cool. Ads are really interesting though, because that's another thing that you'll find is that your site will be super accessible.

[00:02:45]
And then you'll have to integrate with some third party app and then you'll start getting errors in your lighthouse builds, like that happens all the time. And then it's like, now starting a conversation with another company about their accessibility offering and how you can maybe help them with that.

[00:02:57]
But yeah, these are the same as the other ones which is just, give kind of label to it so screen readers can know. Looks like there's one contrast issue, or maybe a couple. See this one is so interesting, so it's complaining about this button here, which to me with the font size like the white on the red is very easy to discern the two of them, but it's saying that they, let's see what score that they have.

[00:03:20]
I don't know that it actually gave a specific score, but I mean we could grab them and do a color contrast, but it is complaining about some of these contrasts on these buttons. They're so interesting though cuz some of them just look It really just doesn't like the red, it's like it seems to be red.

[00:03:40]
It seems to be an issue but so again, like we could maybe just play around with the color I wonder if it's in, okay, cool. So this is interesting though this says oops, okay, so here we can see that, so lighthouse gave it an issue. However, we can see that it actually is double A compliant.

[00:04:00]
Its contrast ratio is 3.4. So I think that if you're okay with that, that's great. It's not triple A compliant. Alternatively, you could even just sort of like if you want to stay in the same family, you could just kinda drag it down to like right here or somewhere in there, right.

[00:04:16]
So it's a little darker now but now it's triple A compliant. You can mess with that if you wanted to, but I think being doubly compliant is fine for those. Cool, so kind of going through those, this is where we go, we covered this one so it says headings are not in a sequentially descending order.

[00:04:32]
So I think here we have some h4s that are probably not inside h3. So again, if you need these to be smaller, for some reason like these should be h3 basically because they're inside or they even maybe should be h2, so I'm not sure. But again, you only wanna use the next h when you're inside of a current h section, right?

[00:04:53]
So you start off with the h1. So the rest of your page to be all h2s, when you do an h2 then if you have something before the next h2, it goes 3. And you can again feel super free to style at however big you want with CSS like there's nothing wrong with making this an h2 and keeping it 13 pixel font-size.

[00:05:10]
But the header tag will make it confusing when people use like the router to display the list of all links. All right, list items are not contained within ul or li. So we looked at this a little bit earlier that it was kind of interesting that markup parsing was part of accessibility.

[00:05:33]
But here's a really good example of why because lists have some meaning, that they should be contained inside. That list items should be contained inside a list. And maybe screen readers or assistive tech is not exactly sure what to do. So this div class items here should be either a ul for unordered or ol if you want it to be ordered, we can go ahead and scroll it into view.

[00:05:57]
Again, these are interesting. I see these a lot where it's like where you've done your own design, right? Like this is totally your own custom design. So either make this a ul, which is totally adequate, or these just don't need to be ul, they could be spans and then you could design them that way too back.

[00:06:14]
Yep awesome that's it. Cool, yeah I mean it scores really well. I'm so glad you pointed out these examples of the buttons and the links cuz that's just so common. I see that a lot doing audits. The rest of it, yeah some color stuff, although, it seemed like a lot of the colors were double A compliant.

[00:06:33]
Some headings which I think you can keep the exact same styles just change the actual tag to an h2 or h3. And then these just either make the parent a list or make the children not list items. I like doing these, they're fun, because I don't have to do all the hard work of fixing it.

[00:06:47]
I can just say, hey, this is what's wrong, see here. [LAUGH]
>> Yeah, I just had a question about internationalization, if you can point to any resources? Just very quickly.
>> Yeah it kind of depends a little bit. Usually they're a little bit bound to the framework. So like at my job, we use react and so we use a react in all by Yahoo, I think or somebody I can't remember.

[00:07:13]
So usually finding the internationalization if you're using a UI framework. If you're not using a UI framework I wish I had a better suggestion because they all work in like the same way where you enter the key to an object and then you have a million different files, one for each language or that key maps to a string.

[00:07:33]
And then based on you know, they swap out which file is being loaded, but I know for sure if you do, can you tell me a little bit about the codebase? Is it using like, front end framework or is it just raw HTML?
>> I was using it for a small like Jekyll project.

[00:07:49]
Gotcha, I want Jekyll might have one. So another way for static sites, sometimes the way that they work is they'll generate pages like so it'll be like your site comm slash language slash the link or whatever yeah, so this is interesting. I wonder how, this looks like they're doing a manual.

[00:08:09]
So there's a lot to think about the questions really good because there's so much to think about. So like, one thing to think about is, how are you going to get the translation. So there's like free apps that you could use, there's paid services that you could use, and then there's like actually requiring that one to one touch of a user creating your blog.

[00:08:27]
So for example like, I think Dan Abrams, who works on react, his blog is very popular. So what happens is that, he'll write like an article, and then readers will actually translate it for him, which is really cool. And so what he does is if you submit a manual translation to him, he'll build a new page like in his Jekyll app.

[00:08:51]
That would be slash the language and then slash the thing, right? And then this will be the translated one. So it depends a little bit on like how you're getting the translations, right. If you're getting the manually sent in, then it's probably fine to just manually make a new folder and paste it in there.

[00:09:05]
If you're using a service then you definitely have to find something to help automate that a little bit. I'm not sure about Jekyll, I really appreciate everybody coming hanging out all your great question. I truly feel like your questions made the workshop a lot better than it would have been without.

[00:09:20]
So thank you very much for that and fun being somewhat social, this counts as social for me these days. This is like the most, most people I've seen, even though it's digital in quite a while. So, thanks so much for spending the day. And like I said, I'm always online like if you find me on Twitter or whatever and want to talk about something or open a GitHub issue on the repo like I love engaging so if you have more questions or find an error or anything like that.

[00:09:45]
I'd always be happy to talk about accessibility stuff.