We're not using an unordered list (ul) for our links. You might see this recommendations floating around the web, but this article from Chris Coyier really solidified things for me.
Have you read the following post where Chris acknowledged that the previous post wasn't as right as he'd thought it would be?
At the end of this article, he's changing his previous belief.
Good catch! To be honest, I haven't ready this article myself. I wouldn't say this completely invalidates the approach I recommended here though. As a described here, adding unordered lists for this "type" of navigation would actually hurt accessibility. This is because we can't say that our logo / homepage link belongs to the list, which is a bit odd.
That said, this post raises some good points about role=navigation for example. I'll do a little digging on aria attributes to see how I can clarify my post 😁
As far as logo/homepage link is concerned, I'm not sure why can't you put your logo outside your <ul> but inside <nav> element? It would be exactly what you did in your markup but instead of using <div> you would use <ul>. As far as I can say, it would be valid accessible markup, as both <ul> menu and logo/homepage link reside inside the <nav>.
Fair! I definitely agree it would be valid. However, given the reason screenreader users enjoy list groupings, it wouldn't make much sense to exclude the homepage link for that list.
Take the L shortcut for finding lists as an example. If a user were to find our new dropdown element in our nav, they may assume these are all the links they can navigate to, without clear direction on getting back to the homepage. At that point, there's not a lot of benefit to adding that list element for a11y. It also adds some complexity to our markup since we need to style both the li and the link inside the li (been burned by this before).
It's all bike-sheading at this point 😆Just thinking that uls wouldn't add a lot of value here, and it would make the dev process a little more complex 🤷♀️
Update: I linked this article above instead of my previous recommendation! Kept the code samples as-is, but added a clearer explanation of the design decision as well.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
We're not using an unordered list (ul) for our links. You might see this recommendations floating around the web, but this article from Chris Coyier really solidified things for me.Have you read the following post where Chris acknowledged that the previous post wasn't as right as he'd thought it would be?
At the end of this article, he's changing his previous belief.
css-tricks.com/wrapup-of-navigatio...
Good catch! To be honest, I haven't ready this article myself. I wouldn't say this completely invalidates the approach I recommended here though. As a described here, adding unordered lists for this "type" of navigation would actually hurt accessibility. This is because we can't say that our logo / homepage link belongs to the list, which is a bit odd.
That said, this post raises some good points about
role=navigationfor example. I'll do a little digging on aria attributes to see how I can clarify my post 😁As far as logo/homepage link is concerned, I'm not sure why can't you put your logo outside your
<ul>but inside<nav>element? It would be exactly what you did in your markup but instead of using<div>you would use<ul>. As far as I can say, it would be valid accessible markup, as both<ul>menu and logo/homepage link reside inside the<nav>.Fair! I definitely agree it would be valid. However, given the reason screenreader users enjoy list groupings, it wouldn't make much sense to exclude the homepage link for that list.
Take the
Lshortcut for finding lists as an example. If a user were to find our new dropdown element in our nav, they may assume these are all the links they can navigate to, without clear direction on getting back to the homepage. At that point, there's not a lot of benefit to adding that list element for a11y. It also adds some complexity to our markup since we need to style both theliand the link inside theli(been burned by this before).It's all bike-sheading at this point 😆Just thinking that
uls wouldn't add a lot of value here, and it would make the dev process a little more complex 🤷♀️Update: I linked this article above instead of my previous recommendation! Kept the code samples as-is, but added a clearer explanation of the design decision as well.