Setting Language and Fixing Markup

[00:00:00]
>> So setting the language and fixing markup. So one easy win that you can do on a lot of web pages. And this is something that x will advise you to do is to put a language on your pages. So if there's one overall language, English for example, we can put HTML Lang equals en for English.

[00:00:23]
And that will actually have a pretty profound effect on assistive technology. So depending on how the content is like what language it's in, the screen reader will change its pronunciation. And it's really cool. So for sites with multiple languages, maybe you could change it in a template depending on what language you're rendering out.

[00:00:44]
There is page level versus element level language. So if you have a site that's mostly in English, but you have some elements on it that are in French or some other language, you can actually kind of override the page level language on a per element basis. So if I have a paragraph with lang = fr within a lang equals in that one paragraph will sound francais.

[00:01:13]
[LAUGH] It'll sound different and you can hear it in the screen reader. It's pretty awesome. So if you had a whole page of French and it was marked up as laggy and it would be excruciating to listen to, if you like the worst pronunciation ever, but actually the screen reader can do a way better job if you tell it what language it needs to be in.

[00:01:35]
I think we even have an example. So I have a stack blitz here in the project that we can actually fire up and test. So let's try that real quick. I am going to put it on preview mode. So StackBlitz itself is probably not that accessible. A lot of these tools, I want them to be more accessible.

[00:01:58]
But often when you're testing. If you can open the little demo project in a new window, sometimes that will isolate it so that the screen reader doesn't get tripped up on other UI elements of the tool itself. So I'm going to turn on Voiceover with function Command F5.

[00:02:18]
>> Navigation, visited, linked, heading level one. Web accessibility v3, home, frame preview page group you are currently on a frame to an https:// web-flat https:// web-platform-li6 gwd. Heading level 2, heading level 1, french recipes heading level 2, you are currently on a heading level two.
>> That didn't work, did it [LAUGH]?

[00:02:41]
>> [CROSSTALK] To exit this way.
>> Voivodigdin, so that's what it sounds like when it doesn't work. [LAUGH] That was so terrible.
>> Jithub, anyone?
>> VoiceOver off.
>> Yeah, that didn't work at all. So that could be Chrome. It totally worked when it didn't when I tested it.

[00:02:59]
So it does have the Lang FR. That could be reason enough to open this up in Safari. So because I am committed to this, I am going to go open it up and see. We'll see maybe our first difference. If stack blitz will load, it will. Okay, so I'm gonna fire it up again function command f5

[00:03:21]
>> VoiceOver on Safari set recipes. You are heading level one, heading level two boa four chignon.
>> No,
>> You are heading level one French recipes. You are heading level two boa four chignon. You are currently on the heading level two inside of the frame. The Character palette close by Safari.

[00:03:38]
Setting the language and fix the VoiceOver off.
>> Sad face emoji. Well, the demo gods were not blessing us in this example and I have no idea why. Maybe it's something was stack Blitz. I think when I tested it, it was not embedded within the slide window itself.

[00:03:56]
So we have to test Stuff periodically and I swear VoiceOver will do that sometimes where you're like, wait, that worked and then it didn't. But we're like embedding windows within windows, so all bets are off if it'll be beef bourguignon or beef bourguignon. That's pretty funny though. [LAUGH] At least you can see the kind of what happens when you don't have the attribute so it's informative in that way, fun.

[00:04:27]
[LAUGH] Okay, well, I'm going to close out of Safari. That was a fun little experiment.
>> I often find engineers use the button tag for a link usually because they need an uncle Click handler for something like analytics? For example, pushing to the route in a function when the next router, instead of using an actual link, what would be the best way to correctly handle this so that a link is a link, but it also calls a function?

[00:04:57]
>> Well, I think, yeah, it's gonna depend on your router for one. I haven't had to use a router in a little while and you'll learn why, [LAUGH] this week for sure. But I think if, like I've seen a lot of buttons that should be links in the code base.

[00:05:16]
I'm working on and I think sometimes styles are the constraint, like, if you're dealing with old styles that everyone's afraid to touch, that can be a reason why the stuff persists. So to try and solve that, yeah, I guess I'd have to see, can you put a, like, maybe an event listener on the element and the RF for the link.

[00:05:43]
That's just kind of talking you through my process of what I would try is to see if you can register a click event that doesn't do any navigating, but will kind of capture that analytics event. Especially if it's client side routed, I guess. One thing I would be looking out for is if the default HTML navigation with href, if it wasn't client-side routed, it would probably refresh, and you may or may not see that click event to get that, capture that analytics event.

[00:06:15]
But, if it is client-side routed, if it's not gonna refresh page. So theoretically, maybe you could do a click event and an href, but I'm not totally certain that would work. That's kind of just my thought process. Because often there are constraints like that. Like, why does this happen this way?

[00:06:36]
It's not by choice. It's just because of whatever we're trying to navigate through at work. So I think in an ideal world, we do want to try and make links look like links and buttons look like buttons. But I can say from experience that that's just not always what happens.