Live Session (2024)

All right.

Welcome to the live session on Way ARIA, which is one of the most technical topics.

I think probably the most technical topic.

And so if you had like, you know, if this was like, and I know it's like the videos

are a lot of like just listing like things and trying to explain them.

But like I think the real like fun or the real like understanding comes when you actually

like use some of these.

So that's what we're going to do here in this session.

I will show a couple of like ARIA examples, a couple of non-ARIA examples and just show

also how they work using the screen reader.

So you can, you know, get more of a understanding of like what different things do.

And that's, yeah, that's like the main goal of the session.

I want to start as always asking if there are any questions or if you had like any,

you know, problems understanding.

If there's anything I should like explain again.

This is your time.

As always, I'm always a bit curious about the single page app or the app perspective

of things.

There's an angle there.

And the differences from web, like when it comes to ARIA use, because I think it's a

little bit like it's a little bit more extensive sometimes in apps, let's call it.

Yeah, I mean, the basis of ARIA is for accessible web applications, right?

It's right in the name.

So the idea is like when you have applications, you have more complicated interactions and

that's where you want to like use some of the ARIA stuff.

Most of the things are like just for like custom components.

So if you want to do it like really doing like things that are like very custom to your

application but should function like something that's not custom, that's when you would use

them.

And like and it's fun because ARIA is built upon those accessibility APIs, right?

And so that means basically that you have the you have built in there that a lot of

what you're doing with ARIA is also in the different platforms.

You know, it's not a one on one thing.

So if you're thinking about native applications on iOS, for example, it's called traits.

It's what like ARIA would call roles.

So there's always like these slightly different ways to express things and the ARIA way is

trying to like give us a common wording for that stuff and how it is applied to web.

That make sense?

Yes.

Thank you.

Yeah, sure.

Any other questions?

And I will have a couple of like examples on like, you know, what you can do in apps

when I show the demos.

Okay.

Looks like no other questions there.

Then I will start to show the demo.

Rearranging stuff.

Always think you have it arranged as you want it and then you don't.

Ah, fun.

Share.

There we go.

That's what I want to do.

Here we are.

And I will make this a little bit bigger.

I will make the screen smaller.

And then I want to go here and switch on that.

We see keystrokes because that's cool.

Good tab.

Perfect.

Because when I show screen reader, right, you want to know what I'm doing, I assume.

Make this bigger.

Yes.

Perfect.

Okay.

And then I'm going to so I have this code pen repository with ARIA demos and I put that

in the chat but it's also linked from the what's it called from the thing where I put

the things.

You know what I mean.

Where the video is from the page with the video.

That's what I wanted to say.

And basically it's like it's just a random collection of stuff that I've seen and that

I played around with.

It doesn't mean that all of these things are best practices, of course.

But just also to like figure out like how different things just work.

Yeah.

And it's a number of things.

Let's see if we can go through all probably.

So this the first one is like one of my first things I've ever done on code pen.

It's from November 13th, 2015.

And it was part of the blog post that I did for 24 ways.

Which was the accessibility mindset in 2015.

So where do I find this?

Archives.

There we go.

2015.

And then here on the 17th I did this the accessible mindset article.

Which I really like.

It's still something I'm incredibly proud of.

And if you don't know what 24 ways was, it basically was like an event calendar where

you got like, you know, one article a day from the 1st to the 24th.

And yeah.

And I was allowed to publish there.

Which is awesome.

But yeah.

Just wanted to start with that.

Because it's quite old.

But it still like shows some of the like thinking around buttons and how to use them.

So let's see.

So we have this edit button.

And it is basically just a pen.

And then we have a pen with edit next to it.

And then we have two other buttons with just the pen icon on it.

And then we have a button without an icon on it.

And then another button with an icon on it.

But they're all going to be announced like slightly differently.

Which is exactly what I want to show.

Because they have been implemented differently, too.

So let me close this.

And let me close that.

So we go from like just having the icon as a span.

So this is the typical like font awesome way to implement stuff.

We then have the edit visible.

Then we have a title here.

We have the ARIA label here on those two.

So this is the button where you see the icon.

And this is the button where the icon is broken.

Oh, that was not good.

Where the icon is broken.

That's why it says icon pencil, too.

Just like to break it.

And then here we have the SVG.

And we're putting a raw image on it.

And then using ARIA labeled by to reference this pencil title here inside of the SVG.

And that basically makes this an image with the alternative text edit.

And it will be read as such.

So let's show the live examples.

And then we can talk a little bit about that.

I'm switching my voice over.

And I think I'm not sharing my audio.

So I need to do that.

So now you should be able to hear the screen reader.

Perfect.

>> Safari.

ARIA.

>> And now we just tap through the individual buttons.

This says only button because there is no accessible name on the button.

Then we have the edit.

And here you see that like voiceover recognizes there is a character because this is always

using characters but can't read it.

So it doesn't.

But it recognizes there is a character there.

Then we have here edit button, edit.

And if you look at which of the examples that is.

That is actually this title edit button.

And it says it twice because title usually only gives you accessibility description.

So basically an ARIA described by.

But if there's no accessible name, it's also used as the ARIA label.

So it says edit button.

Like edit is the ARIA label.

And then it says edit at the end because the description is also edit.

So this is a fun little quirk that I like to share.

And then we press tab again.

It only says edit button.

This is the ARIA label.

So now there is no description.

So it doesn't like say the edit twice.

Then we have edit button on this one without the image.

And this is where I always warn between the disconnect between what's visually shown and

what's in the ARIA label.

Because here the visual could be anything.

It would still be announced as edit.

So you want to try to connect that a bit.

And that works well with the SVG example which is the last one.

It basically does the same thing because the accessible name again comes from the image

alternative text.

And then because it's like inside of the SVG, it's always consistent.

If you copy this, copy it in another button, it will always show an edit icon and also

have the edit alternative text which is exactly what we want.

>> Wondy has left the meeting.

Wondy has joined the meeting.

>> So can I mute those announcements?

Let's see.

>> Voice over off.

>> Because it's totally fine if you need to leave and join the meeting.

I don't think I can.

No problem at all.

So that's the first example about like the edit button and how that works.

I think it's pretty straightforward.

And you usually want to just make sure that like you keep track of your ARIA labels because

otherwise it's very hard to like to have an accessible UI, right?

Then let's talk here.

Here I have an example deactivating ARIA current item for mouse users.

So this is actually a technique I really like.

Maybe not doing this exact thing, but generally like technically making sure that if you use

an ARIA to convey something, that you use that as a styling hook for your content.

So here I use, you know, if it has ARIA current page, I cancel pointer events.

You can do that.

So this link, despite being a link in the code, I cannot click on it.

Just doesn't fire the event.

And I also put text decoration and color zero on it.

Usually you don't want to do that, right?

You usually want to just leave it as a link.

But this is just an example.

As I said, not all examples are best practices.

Some are only to show what's going on.

And let's switch voice over on again.

>> Voice over on Safari.

ARIA.

Deactivating ARIA current item for mouse users.

Live preview.

Web content.

>> Yeah, yeah.

You talk too much.

>> Link.

Menu item two.

List five items.

Link.

Menu item one.

Link.

Menu item two.

Current page.

Link.

Menu item three.

>> So it now says current page link menu item three.

And if I press return, it also would go there.

Because that's not a pointer event.

Now because this is like only hashtag as a URL, it doesn't actually activate.

But yeah, it's only disabled for pointer events.

You have to keep that in mind as well.

Yeah, and then -- >> Link.

Menu item four.

Menu item five.

>> And it will announce the other menu items.

But that's how you get this connection between the ARIA --

>> Deactivating ARIA current item for mouse users.

Web content.

>> That you should be using.

And the styling.

And of course, like if you would use -- >> ARIA demo.

A collection by Eric Egger.

Code pen.

Web content.

>> Don't talk so much.

If you want to -- >> Open link in the background.

HTML coeditor.

93% loaded.

>> In like a normal navigation.

Like here I have horizontal navigation with home products, services and about.

And the products is highlighted as the current menu item.

It's basically doing the same thing.

Here it says -- >> CSS coeditor.

Edit text.

>> When -- >> And ARIA current equals page background

color.

>> So this is a tip if you're using a screen reader and you're not used to it.

If you press the left control button on your keyboard, it shuts up immediately.

So that's good to know.

Because otherwise just going to talk again.

And if you're not used to it, like it's a little bit annoying.

But here I go like, you know, I format all my navigation items and then I say if something

is designated as the current page, then I do the background color as dark red and the

color as white and that highlights visually what's going on.

So I only -- so this makes sure that when I mark something as the current menu item,

it will be highlighted visually and for screen reader users, assistive technology users.

So that's usually what we want.

>> From WANDI to everyone.

Sorry can you slowly with Vokea -- >> One unread messages.

>> Zoom.us.

Show chat.

Press command plus -- >> Voiceover off.

>> Yeah, I can make the voiceover a little bit slower.

Sure.

No problem.

Good request.

Where do I do that?

Oh, it's on the speech.

That's too slow.

So let's try this.

Okay and I switch on voiceover and we see how it works with the navigation here.

>> Voiceover on Safari.

AXL/Chats.

Link.

Home.

List four items.

So here we -- and we get from the screen reader automatically that it's a list with four items

in it.

>> From WANDI to everyone.

It is good.

>> Thank you.

Great.

And then it says link home as the current thing that we're on.

And then if we press tab.

>> Current page link.

Products.

>> It says that this is the current page because I have ARIA current page on it and, you know,

make sure that when that's the case, it's also highlighted in color.

>> Voiceover off.

>> So that's the second of those.

Then I have another -- oh, yeah, this is also a fun one that many people are asking about.

Like, you know, you might want to use buttons instead of -- or you want to use divs instead

of buttons because for styling reasons.

That's often something that we hear and now here for the example, I have four buttons.

First, second, third and fourth.

That's the labels.

The visible labels.

And I will now go through with the tab key and see how they read.

Then we will go through it with the screen reader arrow key navigation to see, like,

what's the difference there.

And then I will explain what is the difference between those, like, four buttons that look

the same.

And if I'm clicking on them, they all open a dialog box and it just works, you know,

as expected.

Like, for a mouse user, there is no difference between those four.

It's all clickable with the mouse.

But that's obviously not the case with the screen reader or with the keyboard.

Because otherwise I wouldn't show you the demo; right?

And we can use the screen -- the non-screen reader keyboard first.

So I press tab.

I go to the first button.

And I can press return and it opens the dialog box and I close the dialog box again.

Then I press tab again.

It goes to third immediately.

So it just skips over second.

But I can then press return and nothing happens.

I press space.

Nothing happens, too.

So this is, like, the button is reachable.

But I cannot activate it.

Not optimal.

And then I press tab again and I go to fourth and I press return and that does nothing and

I press space and that also does nothing.

And these are four different implementations.

So only the first one is accessible using keyboard only.

Now, for screen readers, it's a little bit different.

>> VoiceOver on Safari.

>> Rani has joined the meeting.

>> So pressing tab to go to the first item.

>> First button.

>> So I get the information first and button.

So that means the ARIA label, the accessible name is first and the role is button and I

can open it with return and space.

>> Close toggle button.

First button.

>> And now space.

>> Close toggle button.

First button.

>> I don't know why the default close button in Safari dialog boxes, default dialog boxes

is a toggle button.

Don't @ me.

I didn't do this.

It's a default browser default thing.

Then I press tab again to go to the second one which will be skipped because we already

know that.

>> Third group.

>> And now it's announced as third group which is like this is weird and the reason is because

this is not designated as a button.

It's just a div with a tab index zero.

So you can reach it using the tab key but it will not give you your information that

you can activate it using return or space.

And in this case you actually can't.

So if I press return, nothing happens.

Space, nothing happens.

And then I press tab again.

>> Fourth button.

>> Now it says fourth button but it's still return and space do nothing.

What I can do is if I go back to the first, I can also use arrow key navigation.

>> Close tab first button.

>> And on voiceover that's pressing control and option at the same time and then use the

arrow keys.

And that basically skips through more than just interactive elements.

The tab key only goes through interactive elements.

The arrow key navigation also goes through text, through paragraphs and stuff like that.

So if I do this here.

>> Second clickable.

>> It goes to second and it announces it as clickable because there's a click event handler

on it.

Now this is the screen reader doing the work for you.

So this is reachable with the screen reader but keyboard only users have no chance of

reaching it.

And you still if you press return.

>> Close toggle button.

>> That actually works.

>> You first button.

>> Maria has joined the meeting.

But then it moves the focus to another like to the first item.

So that's not optimal.

>> Second clickable.

>> But that's basically how screen reader try to circumvent or give users options even

if the web developer did it wrong.

Now you can always use the voiceover keys so control and option and press return.

>> Manfred hand has been raised.

>> Zoom.us has new window.

>> Press CMD plus tilde to open pop up.

Manfred hand has been lowered.

>> Sorry.

>> It doesn't have to lower the hand.

We just have to like work through it.

Let me quickly show the rest of the demo.

And then I can answer the question.

So what you can do is you can press control, option and return and that will basically

simulate a click at that point on the page.

So if I do that.

Oh, maybe it's space.

Oh, yeah.

That doesn't work because I have overwritten that with like resize command for my window.

So that's good.

Why am I just in the room?

>> Third group.

>> Let me double check that.

>> Clickable.

>> It should work.

But yeah, I think it's command, option and space.

But I use that to resize my window because I'm not the screen reader user normally.

But that would like simulate a click in the middle of the selected thing.

And then this would be activated like clicking on it with the keyboard.

With the mouse.

And then we have third here.

>> Third.

Clickable.

>> And also third clickable.

So you have the tab index zero around it.

So you can have it with the tab key.

But it has a little bit different announcement when you're using arrow key navigation.

>> Fourth button.

>> And then fourth is button again because there is the roll button on it.

So Manfred, your question.

>> And now I was just.

>> Voiceover off.

>> Yeah.

Maybe you're coming to that later.

But I was thinking since we have voiceover or screen reader users using the arrows to

navigate in one sense.

And then sometimes, you know, in terms of tab or keyboard navigation, you can have non-screen

reader users using and screen reader users using like the keys to, the arrow keys to

navigate within a component.

For example, a drop down and things like that.

So are you, could you later, if you're going through that, take some examples a little

bit about how to handle the potential conflict there between the two.

>> Yeah.

So the reason is why you press usually voiceover keys and arrow keys is to avoid those conflicts.

So if I'm just navigating using the tab key, I don't press any of the modifiers, right?

I just use tab and shift tab to go through it.

If I'm using arrow key navigation for screen readers, I usually press another button.

Now there are screen readers.

>> Okay.

Command or option or something with that.

>> So control option is the default for voiceover.

But you can basically map that to anything.

>> Okay.

So I didn't catch that.

So you actually add another button to it.

So there won't be a conflict unless.

But I guess there could be conflicts like when people actually forget to or, you know,

accidentally.

>> Yeah.

I mean, I put a conflict on myself by like saying my window manager should use a command,

control option and space to like maximize the window, right?

So yeah, I brought that on myself.

But like a screen reader user wouldn't do that, I hope.

So they could fix it.

There can be websites that interfere with some screen reader things, for example.

So on voiceover, it's normal to press the voiceover keys.

That's the default expectation for navigation.

But in other browsers or screen readers, it's a bit different.

So for example, in I think JAWS, you just press the H button to go to the next heading.

And so if your application just uses the one H button to do something, then that's problematic.

>> Yeah.

Okay.

>> And that's why we have the WCAG character key shortcuts failure where you basically

cannot use like one like single character as a shortcut unless you have like --

>> Or your area like navigation, let's call it.

>> Yeah.

Okay.

Good.

Good stuff.

>> Yeah.

And just look -- just a quick look in the code.

And this one is actually pretty good documented, which I usually don't do.

Like my documentation skills are very bad.

So this is pretty nice.

So you have this button with the class, which I'm trying to be fancy here, just to make

the styling for all the same.

Then you have the diff with the class and second.

And then you have a diff with the class and tab index zero.

That's why you can get there with the tab key.

And I just blocked recently an article on my blog which talks about the difference between

programmatically focusable and sequentially focusable elements.

And things with tab index zero, like here, they are in the tab sequence.

So when you press tab, it will be set inside of the different -- yeah.

Inside or in sequence basically of what it is.

So this with tab index zero is on third.

Because there's -- or second, because there's one focusable element before it.

And then this is on third, because it comes later in the source order.

And if that fourth diff was like the -- like went one up, going to the third position,

it would be before the one that has the third on it.

This is, you know, very hard to explain.

But basically tab index zero makes stuff tabable.

But still, like, things like pressing return or space doesn't work if you only specify

an on click event handler, which I did here.

Because that only reacts on click.

And if you use a button, then by default it adds -- like basically it translates.

It says like, oh, on key down, return space.

I will also trigger the click event.

Although it's not really a click.

But if you use a diff, it will not do that for you.

So you basically have for everyone that is not a button.

Basically you have to put in your -- I don't know, on key down probably events to -- or

on key up events to like take care of return and space, you know, manually.

Which nobody wants to do.

Just use a f-ing button.

And yeah.

And I can show that in the example as well.

Like even if I use a screen reader, it should not react to pressing return or space on the

third and fourth buttons.

>> VoiceOver on Safari.

Close tab button first third group.

>> When I press return, nothing happens.

Space, nothing happens.

>> Fourth button.

>> For fourth.

And so you see that like putting that role, that button role on the fourth button makes

that promise that return and space works.

But it doesn't.

So you have to be, you know, aware that like you don't get any mechanical advantages from

just using roles.

That's just not what they do.

They are just for like information purposes in the end.

>> VoiceOver off.

>> Okay.

Let's try another one.

I should put the blog post in the chat.

There we go.

I'm bad at operating chat today.

Okay.

Oh, yeah.

Another nice example of like what you can do with ARIA because it is like it's very

powerful and you most of the things that you can do with ARIA you shouldn't do.

Like I put like I put into the videos, you know, the rules of ARIA and that you shouldn't

use it if you can do it another way.

Here we have fun thing that I saw on a blog a couple of years ago which basically was

like oh, I want to have this fancy like almost 3D or like I don't know what the name is.

Like RGB split up name of heading.

And this is for France Nouvelle.

I'm really bad at French words.

Sorry.

And basically the author did that do this with using a data attribute and basically

used the data attribute and then used before and after like I did here to like use the

content of the data attribute and put it out.

Now, if you use before and after, that these strings will usually be added to your accessible

name.

So if I have France Nouvelle in there and then I put France Nouvelle as the before and

the after attribute there, it will use those and it will basically read it three times.

We can actually just simulate that here.

I think real quick.

So I now do data, ARIA label and then I will do log.

Copy that.

I should copy everything.

No.

Good like it is.

Just a little CSS trickery here.

So data ARIA label.

Just like it's not a good data attribute.

And then you should get for before and after the content of the data ARIA label.

So now these two look the same.

Let me put the bad one first.

There we go.

And then we can see how that reads.

And you know, and we don't actually have to use a screen reader for this.

Like if you go right click inspect element and then you can here under node, this is

very small.

There.

This is better.

Here under node you can see under accessibility it says the label which is the accessible

name.

This is in Safari.

It's like terribly named.

It says three times France, but here on the H1 with the ARIA label, it basically overwrites

what's inside of the element with the ARIA label.

So you're reusing this for the visuals.

But then you basically say like, yeah, don't like listen to anything that's inside of this

H1, just override it.

So you get this like just much simpler announcement.

So let's try this out.

So using the arrow key navigation again.

Heading level one, three items.

France, Norway.

Three times.

And then we go to the next one.

Heading level one, three items.

France, Norway.

And this is also one of the fun things.

Like because this is now an ARIA label, it will read that in my system language instead

of the language specified.

Which like is not optimal, but I don't think there's an optimal way to do this.

In reality.

If you want to have it not as a graphic or something like that.

But yeah.

It's a fun -- >> Voice over off.

>> Fun thing to do.

And I mean, I specified the language on here.

So technically it should say it in the right language.

But like it's, you know, these things are fickle.

That's why the recommendation is don't use ARIA if you can.

What you could do is basically put the H1 inside of a diff and then, you know, do the

before and after with the like data attribute on the diff around it and then probably wouldn't

read it at all.

So there are probably ways around that.

Maybe I should investigate that at some point.

Yeah.

Then, yeah.

I want to show a couple of other things like this toggle button and the play/pause button

and this counter.

>> I have a question.

>> Sure.

Go ahead.

>> Do you have an example of a model where you trap the focus so you don't navigate with

all the elements in the background?

That would be interesting.

>> Yes, I do.

But like for models, I would just recommend not using ARIA for that but use the native

HTML dialog element.

Because it has everything built in and like doing a model properly with ARIA is like pretty

hard actually because you have to make everything in the background.

But when you're using the native dialog element, you get all of that for free.

So yeah, I can show the example here on my blog.

And that has like here the preferences have a dialog.

So I can switch on.

>> VoiceOver on.

Visit link.

Preferences.

Dialog popup button.

Banner.

So preferences.

Beta.

And five more items.

Web dialog.

Use system setting.

This setting adapts to the preference you chose in your system setting.

It changes the appearance of the site when you change your settings.

Use system setting.

This setting adapts to the preference you chose in your system setting.

It changes the appearance of the site when you change your settings.

Selected radio button.

One of three.

Select a theme.

Group.

>> Oh, it read a lot of things twice which it didn't do when I programmed this.

>> So this HTML element automatically like adapts the focus on this dialog.

>> So if you use the native dialog element and then you use open modal as the JavaScript

open modal, it will basically make everything in the background inactive.

It will focus on the dialog.

And you can choose where you want to put the focus on.

So I put the focus on the first item here.

I think by default it uses the first interactive element.

But you could also put it on the heading, for example.

You know, depends a little bit on what you want to do.

But yeah, that's how it works.

It's like super straightforward.

>> Okay.

Thanks.

>> Voice over off.

>> And yeah, and the like, you know, support for browsers is pretty good as well.

And I can just show really quick.

So I have the button here.

And then I have where do I see the event listeners?

Yeah, I do have click event listener, of course.

That's not my event listener.

Here we go.

Yeah, you shouldn't use my like code that I use for my private stuff.

That's an example.

But yeah, basically like if you have like here I just take the where is the dialog?

Close dialog.

Preferences.

Oh, yeah.

This is it.

So basically here when the preferences button is clicked, then it gets the data from the

local storage.

And then it just opens the modal dialog here at the bottom.

And dialog is set as a constant or as a variable here.

Which is theme selector as the ID.

And if you look at the HTML real quick, I think it's all the way on the bottom.

And you see that that's just a dialog element here at the end of the screen.

And it will just like pop it open.

And you can format the background, everything.

It's really convenient.

I always recommend that.

Yeah, so that HTML element is recognized by the screen readers.

Yeah, exactly.

Like it uses all the default ARIA roles and things that you would expect.

Yeah, so you would not recommend trapping the focus in JavaScript by like having a list

of the elements and like excluding every other element in the DOM tree.

No, no.

And like this is all done by the dialog anyway.

Like you cannot jump out of the dialog here.

Yeah.

You know, using the tab key.

And you can close it with escape.

Like get everything free.

And it just works.

Yeah, okay.

Thanks.

So yeah, I really don't bother like teaching people how to do their own dialog.

It's like teaching people how to make their own cars when like you can just buy a car

from like the store.

All right.

Just another couple of demos before I think we make a break.

I think this is one of those where we make a break and then come back.

So this is a mute toggle button.

And we have the icon that has like a mute switch.

Now it's muted.

And then we change.

And this is one of those examples I show to basically show that you want to, if you're

using a toggle button like this, a toggle button using ARIA press true and ARIA press

false, so that will be announced to screen readers.

That if you do that, you don't want to change the label inside of or the accessible name

of the button.

So you want to have mute pressed and mute unpressed, I guess.

But you don't want to say like it's mute pressed and then it's unmute pressed.

Because then you think like oh, is it now unmuted because it's pressed and stuff like

that.

Gets really complicated really quickly.

So either change the access of the name or change the status.

And here I opted to change the status from ARIA pressed to true to ARIA pressed false.

And it says mute selected toggle button.

So selected is the pressed state.

And then if I unpress it, you hear that you don't hear anything.

And that's because screen readers try to not overwhelm their users with announcements.

Though in this case it might be pretty okay to do it.

But sometimes they just don't.

And if I now navigate away, you get to mute toggle button.

So it's basically unmuted.

So the toggle button says you can have it selected or unselected.

And then you select it with the space bar with return in this case.

And if it says selected, you know that, yeah, this is activated basically.

And that's why you don't want to switch also the accessible name around.

That's actually a thing I did with the other example.

>> HTML code editor.

Edit text.

Play.

>> Which is this play/pause button.

And you can also see that I put in here an ARIA live polite.

So now we don't use a toggle button.

So no ARIA pressed true or false.

Just a normal button.

No ARIA stuff.

But I put on an ARIA live polite to make the screen reader announce the accessible name

when it changes.

So that's actually a pretty neat technique if you need like the immediate feedback for

users.

So let's see how that works.

Doesn't want to announce it because it already announced it.

And now I press return.

>> Pause.

>> Press return again.

Play.

>> So you always know what is the current state.

And that's pretty useful.

Yeah.

So an easy way to make a button announce when you need it is using ARIA live polite.

And then it will just announce it.

Because that's fun.

>> HTML code editor.

Edit text.

And here we have the example of like having a live region apart from the button that you're

using which is the normal thing.

In this case I use the output element in HTML.

This is automatically a live region.

So super useful.

If you need to convey something, you can use the output element.

And then here we have the count up event.

And we'll just, you know, use the text that's inside it and count up from it like it's metric.

The most simple coding examples here.

But the interaction is good.

So go here.

>> 55.

75% count.

Count up button.

One.

Two.

Three.

>> This is a fun thing that sometimes happens where the screen reader is reading stuff twice.

And in this case I don't know why that happens.

It shouldn't do that.

But it does.

So this is always the challenge with ARIA things.

Sometimes there are implementation differences.

Sometimes it's just, I don't know, just weird.

Because it shouldn't read that twice.

Because we're only changing the number in there.

So I don't know what's why it's doing that.

And I think that's also good learning.

That like not everything is like explainable.

When using ARIA, it's like you try it and you do your best.

I guess.

So my like hunch is that basically they think this three is the label and the description.

But then it's like I don't have an ARIA description on it.

So it shouldn't be a problem.

So it's like weird.

And there might be differences between browsers.

But this always works.

Some announcement is done.

And I think, you know, in this case, because it's so simple, it's okay if it's announced

twice.

It's not the best.

But, you know, also not like breaking anything here.

>> And different screen readers react differently.

Some repeats it twice and some does not.

>> Yeah, I think so.

Well, as I said, I cannot understand why it reads it twice.

So that probably points that it's a problem with like or like a thing that this voiceover

does particularly.

I'm pretty sure no other screen reader does it.

Yeah.

Let's take a five minute break until two let's take a ten minute break until two or five.

And then I have another couple of small things I want to show and explain.

And we can also talk about your questions a little bit.

So see you in about ten minutes.

Great.

I love that this is like for people who like use the recording.

They get like no pause at all.

So that's fun.

Yeah.

Let's look at some other things that I want to share.

I think this is a good example.

And this is a good example as well.

As I want to show.

And then oh, yeah, the ARIA live one.

This one.

Yeah.

Okay.

That's good.

So here we're talking a little bit like we're looking a little bit on a demo that has different

versions to make things nonfunctional.

So we have, you know, ARIA hidden is our normal way to remove content from screen reader users.

So, you know, for example, duplicated images, duplicated text, stuff like that.

You could use ARIA hidden true for that.

But the problem is what if you have an interactive element?

You have it ARIA hidden true.

This button I can click.

I didn't care about making like dialogues come up for those.

But it has an ARIA hidden true on it.

So the first icon is just a button.

The first one is a button with ARIA hidden true on it.

Third one, there is a button inside of a div style display none.

Which basically means you can't see it.

And spoiler alert, it also can't be reached by any assistive technology because it's just

hidden.

And then you have the inert div here at the right.

Which basically means this button cannot be clicked.

It cannot be tapped to.

It cannot be activated.

And it also doesn't exist when you navigate using arrow keys.

We will see that in a second.

So there are different ways to do it in HTML and ARIA.

And the important thing now is about ARIA hidden true.

Because usually you think like stuff that is set to ARIA hidden true is just not available

to anyone.

Now, in this case, because this second button is interactive, you can navigate to it.

You can technically you can also activate it using return and space.

There is this thing that happens now which is relatively new.

Like probably like now three or four years ago, there was a change that basically said

like if you have an interactive element inside of something that's ARIA hidden true or the

interactive element itself is ARIA hidden true, we just ignore the ARIA hidden true.

Because before this change happened, buttons like this would just be not announced.

Like you could tap to them.

But the screen reader would just make no sound at all.

Like it was like going into like the void or space or something like that.

You tap and it says like button, button, button.

And it was like just nothing happened.

Is that obviously bad?

At least I think so.

And let's see how this sounds now.

Which is not like the most like mind blowing demo.

I say that immediately.

Like this is button one.

Button one.

Button.

This is a normal button.

This is a normal button.

Group.

So this is the -- and it's inside of a field set.

That's why it's announcing that twice.

I don't know why it's announcing it twice.

It shouldn't.

But it does.

So now I tap to the ARIA hidden button.

Button two.

Button.

This button is ARIA hidden equals true.

This button is ARIA hidden equals true.

Group.

So basically it will not be announced differently than any other button that you have on the

page.

And that's on purpose.

Like, you know, as I said, a couple of years ago would not be announced at all.

But now it does.

And the inner button, we can't tap to it.

Show sidebar button.

Show sidebar.

Yeah, yeah.

It just jumps up to the browser UI.

And even if I'm using the arrow keys, it looks like this.

Button two.

Button.

This button is ARIA hidden equals true.

This button is display.

None.

Group.

This button is display.

None.

Colon.

End of.

This button is this.

This button is inert.

Group.

This button is inert.

Colon.

End of.

This button is inert.

Group.

And there is no button in there.

I cannot get to it.

Because it's set to inert.

Which basically says, like, yeah, you can't use that.

It's just for, like, visual purposes in there.

So that works pretty well.

I think it makes sense if you think about it.

But the anomaly, so to speak, is that ARIA hidden true, despite you saying actively this

should be hidden from screen reader users, is active because it's an interactive element.

And the browser basically says, like, yeah, before I tell my user nothing, I just reveal

what it is.

And that's the new fallback.

And I think that's, like, a really good change here.

Because if it's if you want to really hide it, you know, use display none or use inert

as a way to do it, you can do stuff with, like, tab index minus one and then it's at

least not available using the tab navigation.

But still, arrow navigation would focus on it.

Voice over off.

Because arrow navigation reach everything.

That's the goal of it.

And we have this fun little example here.

Where no, that's the wrong one.

That was the button one again.

So here in this we have a heading.

Just to just, you know, some heading.

And if you look at the code, it is an H2.

Which, like, that's nothing, like, special.

But then uses class H3 and it uses role heading and ARIA level one.

So this is an H2 that looks like an H3, but will be announced as an H1.

Because of the ARIA.

Because the ARIA always overrides what's inside.

Like, what the native HTML is.

You wouldn't need the role heading here, because the H2 automatically has a role heading.

But I thought it's cleaner as an example of what's going on to, like, put it in there.

But yeah.

So this is fun.

Looks like an H3.

Like, a little bit of a weird design for an H3.

But you know.

But it will be announced as an H1.

So, yeah.

I'm going to pass the wrong buttons.

>> VoiceOver on Safari.

AXL/Chaz/Duck.

Code pen pre.

>> Looks like I briefly forgot how to switch voiceover on brains.

How do they work?

So navigating.

>> Scroll area.

Scroll area.

Dull or not.

Scroll area.

Dull or.

Heading level one.

Some heading.

>> So it's a heading level one for all intents and purposes for screen reader user.

They cannot, like, know that this looks like an H2 or was like formatted like an H3 and

used an H2 underneath.

And this will also show up as an H1 in, like, your heading navigation.

So if I go control option and I think it's U.

>> Headings menu.

>> Yes.

You get to the headings menu and you can use the arrow keys to go into other menus as well.

And here you get heading level one.

Some heading.

>> One.

Some heading.

>> Then you can use the left and right arrow keys to go to other menus.

>> No item heading.

Window.

Spot.

Frames.

Headings menu.

>> I don't know if it's a demo page.

But yeah.

It's an H1 for all intents and purposes.

Don't do this.

Like, this is like.

>> Heading level one.

Some heading.

Voice over off.

>> Obviously not a good idea to do that.

But sometimes you are in a situation where you have to do it.

Like you have legacy code or it comes out of an application in a certain form and you

don't want to like spend the time or the resources like server side to like fix everything.

You could use JavaScript and put like the level and change the level accordingly.

So if you have for example, you are writing your blog posts in a markdown format and it's

always you start with an H1 and then H2 and H3.

But on your website, you already have an H1 and you want to start with an H2 and then

go H3 and H4.

You could use that section on your page.

I could just say, oh, yeah, I put an ARIA level on those headings and just put them

one up.

So it like fits into the rest of the structure of the website.

You know, it would be possible.

It's not the most clean thing to do.

But like ARIA is not always about doing things cleanly.

But often just like doing the, you know, fixing things that you don't have like the most influence

on the HTML code.

This is the input range slider.

And I use ARIA here to output the text.

So with a slider in HTML, you have like different options.

And so you can say slider, then you can have a range like min 5, max 50.

So this slider goes from 5 to 50.

And then value is the current value, which starts at 20.

So about here.

Close enough.

And then I have here ARIA value text, 20 euros.

So this is something that and that corresponds to the value here.

And this is something that only ARIA gives you basically.

So you can say ARIA value text basically is like takes the value and then adds like, you

know, how you want to pronounce it basically.

And then like because this is built into the input, the slider input here, it will be announced

when you're interacting with the slider itself.

So it's like a little bit different.

If you wouldn't have had the ARIA value text, it would just say 20 instead of 20 euro.

Which is a fun, good enhancement of like what you can do.

Because even if like it doesn't work, it's not the biggest deal, right?

So let's see how that works.

Over on Safari, I'm pressing tab.

20 euro, your donation slider.

And yes, it says 20 euro because I couldn't make a change from euro to euro.

I was like lazy to do that.

But now I can use the arrow keys.

21 euro.

22 euro.

23 euro.

Wow.

It's amazing.

Like it's not the most like amazing thing.

But like it's really good that you have the option to like announce that.

And how I do that voiceover off in this demo is that I basically with JavaScript, I put

in the target value in the ARIA value text attribute.

And that will be announced automatically.

There's no ARIA live that you need to set.

Nothing like that.

It's just automatically it's a feature of these like native HTML slider that it reads

you back the value that you set.

You can do fun stuff here.

Like can have steps.

Step I think.

Equals.

Let's see.

What makes sense for this?

Like five probably.

And now we have made like the minimum of changes.

And we can reload that.

Voiceover on Safari.

Yep.

Tap.

Show sidebar.

20 euro.

Your donation slider.

And then if I make a change, press the right arrow once.

20 euro.

Oh, it doesn't want to collaborate, of course.

Show side.

Tap.

Rain drop.

20 euro.

Your donation slider.

Close to 20 euro.

Your donation slider.

25 euro.

There we go.

Like now it goes in five euro steps.

30 euro.

35.

40 euro.

50 euro.

And here you also see like if it changes too quickly, it will because this is a polite live

region, basically, it will not try to catch up.

It will just read the last value.

45 euro.

20 euro.

Which is a good thing.

Because you don't want that it has like ten minutes of like speech just to tell you like

what the current thing is.

So yeah.

I think this is a good example of like how you use a little bit of ARIA can help to do

a lot.

And also -- voiceover off.

Which is like one of my little tricks.

Like I talked about like using the ARIA current to do the styling.

Here I basically do the same to put the ARIA value text in.

Because I wait for the change.

Change event.

Right?

And then for the visible output, which is here, I put in the target value plus euro.

So if I change anything with the min range or the max range or anything like that, or

the step value, it will not -- you know, I don't make assumptions based on like oh, they

press the right arrow.

So I add one and put that out and then set the value or something like that.

So this comes from the value that the slider has.

And then I go and look at it.

And that's useful.

And then I do the same set the ARIA value text to the same like value plus euro on it.

And by the way, if you're using the mouse, it will also like jump around like in five

euro steps.

Like this is a nice thing.

And I think if you remove the CSS, because I styled this, so it's easy to see, but I

think there is a way to like oh, yeah, this was this complicated thing.

I just copied and pasted that from someone.

And because styling those range inputs is not the easiest thing.

So if I do this and then that, then you see that this is the normal like default styling

for it.

This also looks like not the best.

Let's delete all of that.

Oh, now I have also have white background color.

Sometimes you have like little like notches in there like for what you can select.

But this is not the case here.

Quickly see that I've resetted it.

Yes.

Yeah.

But this is a nice thing to like, you know, again, make sure that what's visually there

is also announced, making sure that everything like looks at each other and not have like

things assumed somewhere that then goes out of sync.

That happens quite often.

And then this is an example.

And I don't know, yes, this is just this.

So often what you will see when you're using live regions, and I think I talked about that

before, often when you have live regions and you put them onto the page at the same time

when you put the text that should be read in it, it will read nothing or it will take

like some time until it's announced.

Like there's a lot of inconsistencies there.

But live regions are notoriously hard to use that way.

So what you want to do is often to use some delay in it.

Now I forked that from my colleague Daniel.

Can I go back to that fork?

Is that a thing that exists?

Oh, no.

Now I'm forking my own.

Now I'm forking my own fork, which is like forking ridiculous.

So let's see.

I don't know if that's even like a public thing, but I think so.

Yeah, that's his.

I think, yes.

And so what he did here is he only has a diff here and this is like, it's very quite complicated

the stuff around it, but concentrate on this diff here, which basically says just live

and then he has an alert example on the bottom.

What he does is he creates a P element and that P element then gets the ARIA live region.

So you only, when he sets the content in it, it will be added to that just live diff, which

is somewhere here.

And then it should be read.

Now what you will see when I'm using the screen reader is unless I have a delay here, it will

not be read because basically that delay is here.

So what he does is like, if there's no delay, everything will be added to the DOM directly.

And if there's a delay, he first adds the paragraph empty with the ARIA live region

and then after the timeout, like after 50 milliseconds or whatever, he adds the actual

text and then that text is announced.

And the reason why he does that and why this test is done like that is because screen readers

don't always like pick up on newly added live regions to a page.

That's why my recommendation is putting live regions in the page when it loads because

it makes everything easier.

But not everyone likes that.

So let's see how that works.

Can't I see that in like the view up?

Obviously I can't.

So let's see how that goes.

So this is the no delay example where basically the paragraph and the text inside it is added

to the page immediately.

And you hear that you don't hear anything because the live regions came there and it

had text in it so there was no text change so it doesn't announce it.

>> Zero milliseconds.

Button.

Add text.

>> This is with a delay of zero milliseconds.

Also nothing.

Which makes sense.

>> One millisecond.

Button.

Add text.

>> Same try.

Nothing.

50 milliseconds.

I think it does it.

>> 50 milliseconds.

Button.

Add text.

>> I think that should work.

>> I'm alive.

50 milliseconds.

>> So basically that 50 milliseconds is the time that the browser needs to say like oh,

these are two different things that are happening.

There's a live region there and then text is added to it.

Which like, yeah, you can do that but you can also do what I like to do.

Which I have here.

And that is you have the live region on the this has not loaded correctly.

>> Page 90.

>> So this is basically you already have the live region on the page and then you only

add the text.

Like here I only add in the inner div.

I only add the text.

And I do that with timeouts and without timeouts and it doesn't matter.

And if you have no delay it will just read the text.

>> Test.

No delay.

Button.

Add text.

>> So let's try it.

>> I'm alive.

No delay.

>> Magic.

>> Zero milliseconds.

Button.

Add text.

I'm alive.

Zero milliseconds.

One millisecond.

Button.

I'm alive.

One millisecond.

>> So this is one of the things that you just have to know.

That live regions can be like fickle like that.

If you create them while the page is already loaded.

And we see that a lot with like your react or other front end code where people think

like oh I need to announce something right now.

I create this live region and I just put the text in it.

That doesn't work.

You have to have either a little delay in it.

Which depends on your application but might be like you know just slowing the user down.

Even if it's only 50 milliseconds.

Or you just put like which is my recommendation.

Just put on every page at the bottom you put a div that is that is the live region.

And you can put one for polite and one for status.

Road status.

And one for alerts.

And then you know you just put text in there and you remove it after a few seconds.

And then you're always good with that stuff.

>> Safari.

Excel slash chat.

HTML code editor.

Edit text.

>> I have this ARIA hidden demo and now I try to figure out what this was.

>> Voice over off.

>> Where's my output?

There we go.

Oh, yeah.

This is again about ARIA hidden true.

That the same thing that I showed with the button.

But now for links.

So here we have a div set to ARIA hidden true.

Link with tab index minus one.

And here we have an ARIA hidden true only for the link.

And then here an ARIA hidden true for the link.

And a tab index minus one for the link.

So if you can see the screen, basically we have four divs.

The first two divs are marked in yellow.

That means they are set to ARIA hidden true.

And then there's a link in there.

And the link in the second one is marked green.

Because it has a tab index minus one.

And then on the third example, the link has an ARIA hidden true.

So it's marked with the yellow background.

And then in the fourth example, the link has a background that is yellow and has a green

background as well.

And a dotted line around it.

And that's basically because it has both ARIA hidden true and tab index minus one.

And then as like the I don't know, the common thing, you have an inert example at the bottom.

Which will not be red at all.

Because like it's inert.

So we have already covered that.

But that's again like seeing how different things work together.

>> Voice over on Safari.

>> Don't read that.

>> Close tab link.

A link.

>> So link, a link.

I should have named this better.

So this is despite everything like the div is set to ARIA hidden true, the link itself

you can get to.

And even if I use the arrow key navigation.

>> Heading level two.

Five items.

Complete.

Less div greater.

Set to ARIA hidden equals.

True.

Completed.

>> And then I press right arrow.

>> Link.

A link.

Heading level two.

Seven items.

>> So because there's an ARIA hidden true around it, but the link is focusable, the focusable

link will always be announced.

So you can't hide a link with that.

Now let's see how it works with tab index minus one.

Of course if I press the tab key, it cannot go in there.

>> Link.

A link.

>> But what happens if I use arrow key navigation.

So let's go to tab.

>> Link.

A link.

>> And then use arrow key navigation.

>> Heading level two.

Seven items.

Heading level two.

Three items.

Only the link is set to.

>> And here it also even though I'm using arrow key navigation because the ARIA hidden

true is around the link, it will not read it.

But if it's only the link, it will let's see how it does there.

So in this sentence there is a link and the link is set to ARIA hidden true.

>> In this sentence there is that you can or cannot activate.

>> So funny enough when I focus the paragraph, it says like in this sentence there is that

you can or cannot activate.

So the link is completely hidden from it.

But now I'm pressing the right arrow again with control and option.

>> Heading level two.

Five items.

In this sentence there is that you can or cannot activate.

Heading level two.

Three items.

Only the link is set to ARIA hidden equals.

>> But if I press tab key.

>> Link.

A link.

>> I can't get to it.

So you get this like really weird option here where like oh, yeah, the link is not there

if you're using arrow key navigation.

But it is here when you use the tab key because it has the tab like it's just in the tab order.

So yeah, be very cautious with using ARIA hidden true.

And then in the bottom like if you have ARIA hidden true on the link directly and you have

tab index minus one so it cannot be focused with the tab key, you don't have an option

to go to that link.

Like if I press tab, I go to the like browser Chrome because it's the last focusable thing

here.

>> Show sidebar button.

Show sidebar.

>> And if I use arrow keys.

>> Link.

A link.

That you can or cannot act.

Heading level two.

Five.

In this sentence there is that you can or cannot activate.

Heading level two.

Three items.

Setting.

>> And there is no way to like get to this link or activate it because it's just like

it's hidden from everything.

So yeah, this is like, yeah, you know, not everything when you put ARIA hidden true.

So yeah, this is like, yeah, not everything when you put ARIA hidden true.

So yeah, this is like, yeah, not everything when you put ARIA hidden true.

So that was that.

Was there anything else I wanted to show?

No, I think that's basically it.

Yeah, I think that's it.

Yeah, I think we have all the fun demos behind us.

Any questions I should ask?

There is one question from Hugo.

>> Yeah, I think I maybe had three, but I only remember two.

So the one with the slider, I just wanted to see that I didn't misunderstand.

If you hadn't used the value text, ARIA value text, would it then still read the value?

Because it would say 20 instead of saying 20.

So if you do nothing, it will still.

>> Yes, exactly.

So if I remove the ARIA value text from here, and then I also don't set it again with JavaScript,

because that would not be helpful to answer your question, then it would only announce

like 20 or 25 or whatever you set.

>> VoiceOver on Safari, show side 20, your donation slider.

>> It says 20, your donation slider.

>> 20 euro.

20, your donate frame.

20, your donation slider.

Close tab.

Close 20, your donation slider.

25, 30, 35.

VoiceOver off.

>> Okay, great.

And then the first thing you showed with the SVG in the button, and the edit buttons, I

think it was, there was a title tag and a labeled by.

>> Yes.

>> Why would you not just use label?

>> So in this case, right?

So the, you wouldn't, so, good question.

The reason is because, like, you end up often, like, duplicating things.

So sometimes you have the edit, and this is more like being consistent in different situations

type of thing.

Like here you could probably say, like, oh, I just use ARIA label.

I mean, technically you could just put the ARIA label on button and be okay with it,

right?

So it's not a big deal.

But I like to, like, reference something that has more substance than just an attribute

sometimes.

So in this case, I referenced the title for portability reasons.

I can copy and paste that somewhere else.

And also if I feel this should not be added, but, like, edit profile, I can edit that here,

and it will be automatically referenced in the ARIA label.

It doesn't make that much of a difference.

It's some browsers, but I don't know how well that's supported these days.

Even take the title here as the automatic accessible name for the SVG.

But it's, like, that used to be a little bit hit and miss, and so I got into doing this,

and so I'm just doing that.

>> Okay.

Like, to me, you still have to, if you want to have the button be called something else,

you will still have to edit it.

And if you edit that text or the actual label attribute, it will be the same work.

>> Doesn't matter too much.

That's true.

Like, the one thing is that depending on your browser and how you do it, ARIA label attributes

do not get translated.

So if you say, like, you have, like, let's say a tourist site or something like that

where users would regularly, like, translate it to other languages on their site, it might

be good practice to use ARIA label because text that's inside of the page almost always

gets translated properly.

And ARIA label stuff, because it's an attribute, it's hit and miss.

>> All right.

Thanks.

>> All right.

Any other questions?

Doesn't look like it.

Which is fine.

We went long today.

And if you have any questions, feel free to put them into Slack, as always.

And yeah, this has been my last week with you.

So thank you for being here and listening and asking the best questions.

I leave you now into the hands and arms of Hampus, who will entertain you for the next

two weeks.

And see you around.

Yeah, thanks for being here.

Thanks for doing this.

I really appreciate the interest in accessibility.

And yeah.

See you around.

Thank you very much.

>> Thank you.

Take care.

Bye.

>> Thank you.

Bye bye.

Thank you.

Bye.