Thank you in advance!
Congrats! Perfectly solved 
Cheers,
Michael
1 Like
Wohoo great feeling!
My only question is from the notes in MDN it states that it typically is better to have the separate from the bar for accessibility readers so they can read the two features better. Does this still hold true? I originally had them separate and took me a solid few minutes to realize that this assessment wanted the header to also embody the nav bar!
Best,
Connor
1 Like
I think the forum has removed some of your text. Make sure to use backticks around tags when posting to avoid this.
If I understand you correctly you are talking about nesting <nav> inside <header> vs using <header> and <nav> side-by-side. In my understanding nesting them shouldn’t be a problem as long as you are using these semantic tags and not something like
<div class="header">
<div class="nav">
...
</div>
</div>
Could you post a link where on MDN this was stated?
1 Like
Well this has been a learning curve lol, yes it most certainly deleted by text.
This is taken directly from Basic Sections of a Document:
Many web designers consider the navigation bar to be part of the header rather than an individual component, but that’s not a requirement; in fact, some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.
2 Likes
Thanks for the link. That’s an interesting statement. It doesn’t seem like a clear thing to do or not to do. I will definitely dig around a bit about that topic.
2 Likes
If you end up digging up more I would greatly appreciate any insight! Yeah and me not having much insight yet on how screen readers in 2022 deal with this, I wasn’t sure if it was something to get too wrapped up in. Main concern obviously is making a website as inclusive for every single individual that stumbles upon it. The way these MDN articles are written is truly heartwarming. The notes included about screen readers throughout gives me this feeling that I’m thoroughly learning about HTML. Sure there are TONS of exceptions and compatibility issues nowadays but…that’s because they’ve spawned from a plethora of centralized corporations lol. The most frustrating aspect is when reading through all of this I can’t help but think “wow if we all just were on the same playing field so much of this lard would be gone”.
2 Likes
That’s a great attitude you have there. I completely agree with your statements 
So far I couldn’t find anything problematic about nesting <nav> inside <header>. The axe - Web Accessibility Testing Firefox DevTools Addon didn’t complain about the nesting. (You should check it out if you don’t already know it)
I also read a bit through the WAI-ARIA Authoring Practices 1.2 of the W3C and couldn’t spot something discouraging from nesting. Especially this sentence from 4.2 General Principles of Landmark Design - Step 2:
banner,main,complementaryandcontentinfolandmarks should be top level landmarks.
There’s no mention of navigation landmarks needing to be top level. Therefore it should be okay to nest them inside other landmarks.
Maybe this was a problem with earlier versions of screen readers and browsers not correctly announcing those landmarks.
I haven’t tested with a real screen reader. Maybe that’s a little project I should tackle sometime. 
2 Likes
Thank you for all you do as well! I can tell you are quite active on MDN and I can assure you having assistance is such a reassurance 
I did NOT know about that tool, but have already downloaded the extension. So neat that it sits right in the developer tool!!
Ahhh I see that could definitely be true. For what it’s worth given my newness to HTML, if you decide to test it out with a real screen reader I would be eager to assist either via a video chat or discord!
Have a great night,
Connor
2 Likes
Amazing thread.
I love rh discussion 
3 Likes
Your input means so much as well!
Does rh stand for red hat? 
1 Like
Thank you. The “rh” was a typographical error which should be “the”.
2 Likes
No worries! Lol turns out red hat is an open-source coding company which is actually sick. Nice little rabbit hole! They have a hybrid cloud model too…if they were to make that a distributed/peer-to-peer model that would do wonders imo. Like IPFS and what Protocol Labs are doing!!
1 Like