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
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 👍👍👍
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)?
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.
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!
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
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?
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 ""?
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.
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
? 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.
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.
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.
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
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.
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 :)
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?
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.
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.
@@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 👎🏻
@@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.
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?
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!
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.
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.
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.
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).