The problem with multiple nav elements (and the simple solution)

Подписаться 917 тыс.

Просмотров 48 тыс.

50% 1

When we have multiple nav elements on a given page, it's important that we use aria-label to label them... most of the time!
🔗 Links
✅ a11y project: www.a11yproject.com/
✅ Leone Watson's video: • How ARIA landmark role...
✅ Skip to main links: • Most sites have a skip...
⌚ Timestamps
00:00 - Introduction
00:57 - Two navs and what is up with semantic HTML
02:46 - The issue with multiple navigations
04:02 - Fixing the problem
06:27 - When you don't need unique names
#a11y
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

15 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 68

@mimosveta 2 года назад

always great help. and if that lady you're sending us to, is the same one you once had as a guest, she literally blocked me on twitter for saying something against vegetables packed in plastic bags and containers, when there's really no need for that, like a cucumber, one cucumber, covered by plastic, for gods know what reason. it's just garbage for the sake of pollution, with no actual value provided to anyone

@Morrile1 2 года назад

My website does have two navigations, ‘primary navigation’ and ‘language’s navigation’ so aria is critical to differentiate the two. Excellent work as usual from Kevin 👍👍👍

@zachjensz 2 года назад

When Kevin gets his screenreader out you know it's gonna be good

@georgeargyrousis2348 2 года назад

When using landmarks (in general), it's a good idea to use an aria-label attribute with descriptive text. The screen reader will announce the aria-label before the implicit landmark role. Really good video Kevin!

@KajahaX 2 года назад

Great content as always! Would love to hear more about accessibility concerns when designing websites.

@INAVACL 2 года назад

i absolutely love helping out with accessibility, and i really appreciate your videos talking about anything i can do for that since it makes it easier for me and anyone coming across it

@RonWaller 2 года назад

This was really good to see how screen readers work. I have wondered how you can test accessibility like this. Thanks Kevin

@Astras-Stargate 2 года назад

I really needed this today, thanks Kevin!

@CrackerJayherber 2 года назад

Awesome, Kevin. the page I'm working on right now has many navigations and I needed to hear this. Thank you!

@bourge 2 года назад

Great content ! Very well explained. Thank you !

@alexpop2728 2 года назад

I have a question: why use an unnamed list for the navigation block (nav>ul>li)? Perhaps it would be easier to use a simple block with several links, tag (nav>a)?

@KevinPowell 2 года назад

It's a topic of some debate, but really, it is a list of links, so semantically it makes sense, plus most screen readers announce that it's a list and how many items are in it, which from what I understand, users tend to like.

@MMH94MMH 2 года назад

Thank u very much for this amazing content , ur tutorials helped me a lot to understand CSS , I appreciate ur effort

@rishandilruk9365 2 года назад

Thank you so much for this lesson❤

@sovereignlivingsoul 3 месяца назад

i like your comment about what to put on your nav lists, i tend to always use nav but i think i will revert to ul for external links

@WebDesignTuts 2 года назад

Thank you for the info Kevin

@flaviomauri 2 года назад

Speaking of semantics... I never liked the use of UL for menus. Contrary to what people say on Stackoverflow, items in the navigation are definitely *ordered*, an order chosen by the designers/content managers, but nonetheless. It is important that a certain product category appears before another, and we purposedly choose to put Portfolio before About, and so on. I know it's silly, but considering the bullets are hidden just the same, I prefer the use of OL, I find it makes more sense. Am I missing something, is this reasoning wrong?

@disconnect5601 2 года назад

For as long as i have followed you (quite some time) , i always thought you said 'hello my friend and friends' My mind was blown when i realised the actual intro always said 'Hello my front end friends' I only realised this like 3 days ago. Sorry Kevin lol

@aestheticallyamazing2003 2 года назад

this was an amazing video, I learned something new from this ,

@MasayaShida 2 года назад

Thanks for teaching us the importance of accessibility

@MyDistortedWorld 2 года назад

The web is for everyone... So accessibility is key but often overlooked. Very good video Kevin. Thanks!

@valeriousmonk654 2 года назад

More semantic HTML please.

@brucenorton 2 года назад

Why do you use ul > li instead of just anchors in the ?

@kamertonaudiophileplayer847 2 года назад

Any reason why nav elements are always elements? I am asking because on no CSS day, all navigations look really weird.

@LeandroBR07 2 года назад

Hey Kevin, can I make a navigation without using a list? eg: "" instead "". Semantically it seems more correct to me, because when you think of a list, you imagine several items listed one below the other with a mark (bullet, dash, number). You use a list and then remove all characteristics from the list (position, style). It makes no sense to me. Why not create a navigation with just "" and ""?

@fredhair 2 года назад

I understand what you're saying but the look of the list is irrelevant to the semantic meaning of it. If you have a navigation with a list of links, it's still got a list even if it doesn't have to look like a bulleted or numbered list. I always use a list for this sort of thing because I want it to be clear to any screen reader, search engine or scraping technology that my Navigation has a List of Links. The styling is irrelevant when it comes to the markup, after all the aforementioned technologies may not care in the slightest about how the elements are styled / rendered.

@JayWithABeanie 2 года назад

In short: browsers and users need to be able to interpret the navigation correctly. Think about what a navigation is: its a list of items the user can navigate between. The correct element to use for that is a . A person with a disability will be able to interpret the page correctly when the navgiation bar is structured properly. Besides, semantically it's still a list. List items don't have to be put below each other with a bullet point. Using lists is simply the valid way for a page's navgiation to be interpreted properly

@Absolute585 2 года назад

? Doesn't seem semantically correct to me. How would you build a hierarchy? Anchor nesting isn't even allowed. Positioning and styling only affect presentation, not semantics. It doesn't really matter which way you build a navigation menu. You could use the section element alternatively since you are allowed to nest them. With some creativity you could even use heading elements. If you want to build a navigation menu in a different way, make sure browsers will understand what you are doing and make sure it remains accessible for users by assigning aria roles to relevant elements.

@KevinPowell 2 года назад

I think lists make more sense semantically, since it's a list of the pages on your site. It also has added benefits for screen readers, with lists it announces how many items are in the list, for example. That said, it is a debated topic. One screen reader won't even treat it like a list once you did `list-style: none`, but that's one and not all, and what is best is talked about a lot. But most of the consensus from what I've read, from resources who talk to people who use screen readers, is lists are best.

@n_mckean 2 года назад

Beyond the answers below, an alternative way to think about it is that this bulleted list of links is exactly what you'd see if only viewing your HTML and that is far easier to use, especially if you have multi-layer nesting that a bunch of links which would show no hierarchy etc.

@johnpaulgillespie9103 2 года назад

Cheers kev I’ll let Johnny know mate.

@SuperGylden 2 года назад

Luv' you, Kev

@Antimated 2 года назад

What about a dropnav? Like a secondary nav inside the "main nav"?

@nil______ 2 года назад

will you be creating more videos/shorts for most html tags? that would be very useful compared to reading documentations online.

@KevinPowell 2 года назад

I won't be going into the weeds, but will keep looking at the more important and common things for sure :)

@adityabokade5 2 года назад

I have a problem when I use background animation my nav links and button don't work. Can you make a video on this how we can use these at a same time.

@iR0nline 2 года назад

What if you have a nav for mobile, and a nav for desktop? So only one is visible at a time, but there's still 2 in the HTML. I try to prevent this, but sometimes it's just impossible and I'd like to know how to handle this with aria labels.

@KevinPowell 2 года назад

If it's hidden or display: none, then the exta one is not in the DOM and you shouldn't have to worry about it :)

@n_mckean 2 года назад

There's always the edge case of loading the HTML only and seeing them both. Another area that is open to debate, especially with purists of progressive enhancement. But your level of purity is up to you :)

@lev_bul 2 года назад

info your and no diy websites

@diegognoatto8706 2 года назад

Hey @kevin Powell, ive been confused about aria importance for a long time, does dedicating time to correct those things isnt me making my website acessable to a very small almost none existent group of people that got inparring issues or it has a more relevant purpose? this extra work aways seemed to me like the "i want my website compatible with internet explorer" dilema, extra work to make happy really rare cases, unless my client is frm government agency or some justifyable nich i aways do the minimal possible in respect to aria and IE compatibility. am i wrong?

@JoppeKroon 2 года назад

About 15 to 20% of the world population has some kind of permanent disability, so not even counting temporary or situational disabilities. Not all of those will be helped by well used aria attributes, but it's definitely not a small amount, or niche. But, first rule of aria is don't use aria! So a well designed site shouldn't need to much aria. In this example though, aria is the only way to label the navigation landmark.

@n_mckean 2 года назад

Its more users than you think. But beyond the moral reasons for creating something that can be used most widely, web accessibility is required by law in a tonne of countries as part of Disability legislation, Equal Opportunities legislation or the like. A building needs a ramp or lift for a wheelchair user so they can access it, your website needs to digital equivalent.

@diegognoatto8706 2 года назад

@@n_mckean those are the moral reasons, i undertand them, i was legit asking in the tecnical point of view if there was a purpose beyond what i see but never mind i see my answers are been censured (deleted) for the moral reasons, thanks powell for not answering me the tecnical aspect of my question liking the moral reason comment and deleting my comment as if i was trying to offend people here. i guess theres some questions cant be made out loud altho tecnical, because they touch "the moral reasons",sorry have made the question in the first place, thought this was a place i could clarify ideas about the doubt. ive watched your every video since your stutter first ones. pretty cool to know you better 👎🏻

@n_mckean 2 года назад

@@diegognoatto8706 to better answer you now that I re-read. ARIA stands for Accessible Rich Internet Applications’. There are little to no benefits outside of accessibility. Also though, people misuse ARIA a lot and so other than learning WHEN to use it, it’s not much extra effort TO use it. Using semantic HTML is the first step, ARIA is occasionally needed on top when certain scenarios arise. And often, no aria is better than bad aria.

@diegognoatto8706 2 года назад

@@n_mckean thanks for the input mate

@markopavlovic107 2 года назад

Hey Kev, can you make a video how to disable hover in responsive mode, for example: if you have @media 1440px width and also have hover on navigation list to show nested list, but you dont want that hover in mobile view, how can you disable hover effect?

@meka3506 2 года назад

I hope I'm of help to you when I suggest to go to W3Schools to possibly find you answer.

@GamerOner2H 2 года назад

Just override them.

@jasontravers554 2 года назад

Hi Kevin, I've loved your content for a while now. I'm going to be teaching web dev to high school level students. I'd like to encourage them to follow online content creators extra information and learning. Would it be ok for me to reference you in printed material? I wouldn't be using anything specific except maybe a screenshot of a title card and your name. Thanks in advance for consideration. Either way, I'll still be watching and learning!

@joaofranciscocazanca4225 2 года назад

Do you use any css framework?

@KevinPowell 2 года назад

I have my own system that I use on larger projects :)

@joaofranciscocazanca4225 2 года назад

@@KevinPowell Can you make a course teaching how to do?

@DivididedbyInfinite 2 года назад

i never knew about landmarks

@dakshdas5946 2 года назад

When did you start coding?

@KevinPowell 2 года назад

Late 90s, but it was a hobby for years before I took it more seriously

@aprimic 2 года назад

Does this help with SEO?

@n_mckean 2 года назад

Not significantly. You'd do it for accessibility. A chance to prioritise people over search engines.

@bogdanalexandru3269 2 года назад

That nav was lost among all those divs in the first screenshot. Feelsbad man...

@evolutionxbox 2 года назад

I'd say the `nav` element is only meant for major navigations. Secondary navs are not major imo

@Absolute585 2 года назад

This is a misunderstanding. Documentation on this subject says it is preferable to use the nav element where it makes sense. Use them for things like 'page navigation menus', 'site maps', 'affiliate links list' or any other list of items that consists of links that could be considered navigation.

@KevinPowell 2 года назад

Like Absolute585 said, it depends... and it doesn't say secondary navs anywhere, just "major" navigations... so not a list of 2 pages or something mentioned in the middle of an article, but anything that is used for navigating, like the table of contents on a11y, would for sure be a "major" navigation.

@JaimeBIDtravel 2 года назад

I thought you would be using aria labelled - by in that case

@KevinPowell 2 года назад

Could do that as well, but I think most of the time people don't have a heading that goes with their navigation

@JaimeBIDtravel 2 года назад

@@KevinPowell that makes sense indeed 👏

@n_mckean 2 года назад

Handy if your nav is an on-page table of contents and you have a visible heading, not as much without. Though some people will add a heading, hide it and use aria-labelled by and with nav being a sectioning element that heading would name the section (but that's only in the document outline which doesn't really exist beyond theory).

@JaimeBIDtravel 2 года назад

@@n_mckean good point!

@legostud 2 года назад

Quick note. Please don’t use the word “navigation” in the nav landmark. It’s annoying to hear “navigation” read twice “primary navigation navigation landmark”. Please use aria-label=“primary” instead.