Speaker is going to give additional resources on how to create better navigation on a website. They are going to peruse the navigation for their side project and wants to use it in future projects.

Speaker explains to Speaker how the end should be placed at the bottom. They explain the difference between the active page and the non-active one. Speaker is going to use the Aria hype and current po attribute and value instead of a class. This makes the active link in CSS obsolete. Speaker is showing everyone how it works.

Speaker is looking at the navigation. It's my looking at it. A blind screen reader can't access the navigation as quickly as a sighted user.

Speaker explains to Speaker how landmarks are marked on the page. They use header and footer as well as nav. Speaker is going to follow the street style of animation in their next project.

Speaker spent their last work session going through documentation and looking at previous code. They want to make it simpler for someone else to do their project. Speaker is a big fan of a webdev website. They were here earlier to talk about how the learn HTML section was added and they started a blog post about it.

Speaker is learning how to create a good navigation for a website. They advise Annie on how to create a website that is minimalistic but not too large. Speaker uses progressive enhancement principle to achieve that. They explain how to create a basic navigation in HTML and CSS.

Speaker shows how to style a website. They advise Speaker how to do some basic styling.

Speaker is impressed with the well-supported website. The navigation is accessible with a mouse, a keyboard and a screen reader, but there is room for improvement. Speaker is excited about the new features of the website.

Speaker will see Pawnee be 50 minutes after their final break session.

• web dev slash website
• building layer
• progressive enhancement principle
• basic navigation
• screen reader
• logical properties
• applications standard offers
• current state
• web applications

Welcome back.

Your dreams were your ticket.

I welcome.

That same old place, the chief well then since you but those dreams have remade, and they turn around Alright, welcome back y'all.

Let us give a stretch.

Oh yeah.

Okay.

All right.

So yeah, just cut spent my last work session, going through documentation and looking at previous code because gonna be something similar by need to.

Again with this project, I wanted to be as straightforward for someone else to do it, you know.

Without having to do too much.

So that's what I have been kind of thinking about how to make fewer steps because when I did it for my own project and basing this off of there're all sorts of like custom things that I did.

I don't want the person I want to be able to like just follow like some steps and have it working without having to do anything to extra.

So that's what I am working on.

So we will see.

We will see.

We will see ya.

All right.

Cool.

Now, let up.

Talk about.

So earlier on the last Cipher, spoke about webdev, right?

And what big fan of that site?

And so I am sure my screen here.

And, so I am going to copy and paste the link to it again like I did last time, so we will be right next to the recorded video.

So, I was here earlier to kind of talk about how the learn HTML I guess section was added.

Information finish it off and I started this blog post but I thought was kind of cool and its web dev slash website, hyphen navigation and Adding a link to that as well.

And it was just kind of like building the main navigation for a website.

And I was like, all this pretty cool tutorial that they have there.

And so this tutorial describes how to build an accessible main navigation of a website, you learn about semantic HTML accessibility, and how using Aria attributes can sometimes do more harm than good.

And so, I just thought it was kind of like a cool thing to look over.

It came out like, last year, was the first time I am seeing it, and I was like, oh, that's pretty cool.

So if you're ever building like a website or whatever you are, most of the time is going to need like a navigation, right?

And so it's kind of cool to be able to see, you know, how someone else would do it.

And again it being accessible and all these other things you did semantic action just kind of be able to you know, a good way of creating it something that you're going to use a lot, you know?

So they're saying I so there are many different ways of building the main navigation of a website in terms of styling functionality and the underlying markup and semantic information, if the implementation is to minimalistic, it works for most people but the user experience, the ux might not be great if it's over engineered, it might confuse users or even hinder them from being able to access it at all.

So it's kind of you that have a fine balance.

It's Annie.

I would probably normally to go towards like not being too more.

Minimalistic not too large, you know, I mean just kind of like just have the thing there, you click it, you're good to go.

And so then for most websites you want to build something, that's neither too simple, nor too complicated.

Like I said, find a nice balance and building layer by layer in this tutorial, start with a basic setup and add features layer by layer up to a point where you provide just Styling and functionality to please.

Most users to achieve that you make use of progressive enhancement principle, which states that you start with the most fundamental and robust solution, and progressively add layers of functionality.

If one layer fails to work, for some reason, the navigation will still work because the gracefully falls back to the underlying layer.

So yeah, so for me again whenever I am creating like a navigation, especially if I am using like Astro or something.

You like HTML, like I will have it.

Just go directly to like this site.

Like, it's just an, a, a link.

I am saying a href and you're good to go and so yeah.

So then the basic structure, so, the kind of show you which working with.

So we're basic navigation, you need two things, a elements, like, I just mentioned, and a few lines of CSS to improve the styling.

Default and layout of your links.

So, here's the a elements, right with href going to these different pages, and when they are, And so see, they're using CSS variables.

So that's pretty cool.

So, they're using was, it's like a kind of like a gray or something.

When they're all the same color.

Define variables for your colors and then using border box.

Let us see here.

What's cool is?

They also have you like links if you want to find out more information about the different box models?

You can do that as well.

Just be dope and do some basics like font styling here.

Then the link styling.

So they're using that same CSS variable.

So, and but then the using it again here for the color.

Right.

So, you see text color, the colors shades dark, which is color Shades dark up here, all right?

And using that, and then they're using it again here.

Now, border color.

Where's that at?

Order color.

I guess he didn't set it, so it's going to be transparent.

There's a text color.

Cool.

Oh here's watercolor.

So it's focused the Border color.

I didn't you put it after well I guess it makes sense.

I guess you could put it afterwards but so wherever there's like an is hovered or Focus.

Let us call the using that this thing.

I was that.

Yeah, check that out.

Wonder what's the?

I mean, if they put it here, it must be pretty well-supported.

All right.

Let us see, text color.

So they use the success of its Hubbard.

It's as a text color, cool.

Then here we go.

I like how they have like a you see the code and then an actual real world example, like working example, right there in front of you, through a code pain, which is pretty cool.

So you can look through the HTML.

And so, again that's we saw above and then the CSS.

All see, they have seen, they added something here.

Shades Darker Shades light.

Okay.

Cool.

Then we you hover.

The Border should be the, yep.

There you go.

Same color.

All right, cool.

And the see here.

Yep, there's that same thing there.

All right, cool.

AC the Border block and that's why it's like down there.

Okay.

Cool.

I never use border block a school to see now.

Okay, alright either.

They're all right, cool.

Then they do that great.

So this works well for most users no matter how they're assessing the website, the site.

The navigation is accessible with a mouse, a keyboard at S4 screen reader, but there's room for improvement, you can enhance the experience by extending this basic pattern with additional functionality information.

So yeah, so it's pretty dope like Right?

If you want to just out of the box, here you go.

Then saying well you can add more to that you so choose so you can highlight the active page.

So if it's on about us then highlight about us, right?

And now it's a number of items to screen readers.

Okay.

Screen reader users.

That's interesting to note about that at a landmark and allow screen readers to access the navigation directly using a shortcut C.

And then, you know, know about that hide the navigation on reports.

So like if you want to have a hot dog, hot dog hamburger menu and input improve focus styling, so I guess instead of just having it underlined Okay.

Oh Senator Stevens margin in line.

Ended margin block and are known as logical properties, and they give a link to that and in alternate and an alternative thing.

Margin right margin Bonzi.

I normally write that Lottery.

Properties are a new way of working with directions and dimensions.

Oh, and that allows you to control layout through logical rather than physical mappings.

This is especially useful.

If you're dealing with websites that present in different languages and riding modes, like right to left okay because like well here is left like you read left to right but in some cases you read right to left.

And so if it's like okay I think I have seen for it.

So if it's like end for me, it's like margin block, n, the end would be like, on the right, right?

But for other people, they read from right to left.

Right?

Is a start, and left is the end, okay?

Okay.

So yeah, so margin in line and it gives margin right margin block and because it makes it like a full thing.

So we would now put that in the bottom which explains why here that border block end.

And so that's why I put it at the bottom.

If I made this inline end Right?

Does that work?

I should refresh.

Oh, look at that.

Okay.

Dope.

All right.

See you learn something new.

So yeah, it's a physical versus logical.

Something I might have to.

Look more into, that's pretty cool.

Alright, so, highlighting the active page, right?

So the Highlight the active page, you can add a class to the corresponding link by.

So again, if you're on about us you just put the active page about it.

Let us see.

It conveys, the information which link is active purely, visually blind screen reader.

User couldn't tell, if it's tell the difference between the active page and other Pages, fortunately, the that's Aria accessible Rich internet applications standard offers a way to communicate the information semantically as well.

And then use the Aria hype and current po attribute and value instead of a class.

That's pretty cool.

Okay, so then are your current state indicates the element that represents the current item within a container?

Or set of related elements.

A page token used to indicate a link within a set of pit pagination links where the link is visually style to represent the currently displayed page.

So, with the additional attribute, a screen reader, announces something like current page link about us.

Oh, instead of just link about us.

Oh, that is cool.

I am definitely going to do that.

Okay, it doesn't undo that on this next project.

A convenient side effect is that you can use it attributes to select the active link in CSS, making the active page class obsolete.

Also, you can just use this and now I have to use the classical saying before.

That is pretty dope.

Let us see here.

So, yeah, so I can have just that there.

They took out the class.

This is how you treat an ass pretty dope.

Okay.

Yes, I knew about these.

I didn't I know about like the brackets, I never thought about like using a style, Aria stuff that's pretty dope.

So he has an idea about us that is pretty cool.

They changed color there.

So I click this, what happens?

Yes, it is.

All right, everyone.

Yeah, that's pretty dope.

Right there.

But if you haven't yet, when with your highlight it and then see there's the color highlights.

They're doing that, okay?

This is pretty dope.

Okay.

Alright, never mind.

Announcer number of items.

It's my looking the navigation.

Sighted users can tell that it only contains four links.

A blind screen reader.

User can't obtain this information.

As quickly.

They may have to work their way through the whole list of links.

This might not be an issue.

If the list is short, like in this example, but if it contains 40 links, this task can be cumbersome.

If a screen reader, note user knows up front of the navigation contains.

A lot of links, they might decide to use a different more efficient way of navigation, like the site search.

A nice way of communicating the number of items up front.

Is wrapping each link in a list item, nested in an unordered list.

Okay, okay, I am over time but let us see here.

Okay.

So you're really okay you to do anything like, it will just Go now something like list for items.

How would you make it say like links?

So there's a video here.

So let us take a listen.

Heading level 1 navigation, demo list with four items bullet link home, bullet link current page about us bullet, link pricing bullet, Link contact.

Heading level 1 navigation demo interesting.

Okay.

So now you have to adapt, the started making look like before, all right.

Using just display flex.

And using Flex wrap, to wrap it around a few things, too small at the viewpoints too small All right.

See this is I like this is what I like to see like because I mean sometimes I take for granted these things but seeing this kind of really puts it out there for you and it was this Landmark thing which I don't think I have ever done before, so I want to check that out.

That's pretty dope.

This thing.

What landmarks are like a cat or something?

That marks a special region on the page, like the header.

Okay, footer and Main.

So yeah.

Okay.

I have done those before.

I use main a lot on my sites like my components but like that's main part that loads up now use header and footer as well.

Sometimes you section I guess section is not that so oh and there's like nav.

Whatever section is 10K.

You section every once in a while as well, there's a lot of stuff here which is kind of cool and kind of steps you through it and it shows even how to do like the burger menu and everything too.

He's with some JavaScript and everything but yeah, let us see if it shows you the final.

There's a final one.

So yes, I guess here.

So you can see you there.

Anymore.

They have it slides out.

All they do.

Look at that.

But then, I wanted to do what we do some ocean.

So yeah, this make sure only people who have no preference reduce motion.

Let us see the animation.

See that's pretty dope, like, having the reduce motion stuff there, see that, that is cool.

So, this is goes really in depth, which is pretty dope.

Alright, see ya.

So my next project, I am definitely going to follow this the street do so.

Yeah.

Well, then they do the even like the high contrast joints too.

Okay, that's already see here.

That's another thing that you can like look for on the preferences if I am not mistaken.

Yeah, no visibility own a visibility, less visibility, okay?

Okay, yeah, so prefers reduce motion, no preference and then it does the things like it out.

Okay, and if we're going to be like, go over this, it's pretty dope.

I thought I like navigation versus menus.

Okay, my bad.

I am kind of just going to give you additional resources.

That's pretty dope.

Very cool.

So yeah, so I always like to check these type of things out.

So it's pretty cool.

So I have a link to it in the recorded video so you can check it out for yourself and let us help make, you know, So I am going to scroll back up to the top, should be like a scroll to the top of some.

It's a very long.

So yeah.

So I like Tutorials like this, that kind of Step you and help.

You create better basic navigation because use navigation and pretty much all like web applications for the most part.

Right?

And so, being able to build something that is accessible.

And like just works better for as many people.

As possible is pretty dope.

So shots to manual, and I am not going to try and save the last thing, I am sorry.

But yeah, shots, are you?

I will make sure to tag you on Twitter when I post this.

But yeah, super dope.

That's thank you for this, for this.

That's pretty dope.

So all right.

But we out of here.

Thanks for hanging out.

Let me stop this.

All right, so I am gonna get you all back to work again.

Thanks for hanging out that I kind of just came across today.

And I am just kind of like looking it over, but I didn't know it was going to be like so much stuff, which is pretty dope.

So I am definitely going to peruse that when it comes time to create the navigation for my side project here and I definitely want to get it into that and in future projects so super cool.

Alright thanks again for hanging out.

I will see y'all soon.

I am going to send you off with some traveling music.

This is a new Jabez featuring a Pawnee be the track is called.

Thank you.

Thanks again for hanging out and I will see you around again.

This is nujabes featuring a Pawnee be, thank you.

Alright, I wish you much productivity and I will see you 50 minutes after our ho final break session.

See you later.

Peace.