Header/Navigation Proposal

[yatil]

The following is the proposal that @slhenry, Sarah Pulis and I worked on during the Face-to-Face meeting in San Diego in March 2018. Here’s my understanding of what we want to do:

Remove Drop Down Menu

Reason: The drop down does not work well with the site's content – some main categories have only a few items, others have many. The menu has been hard to use, and different users have different assumptions on how a menu like this should work (See discussion in #14).

Approach: Remove the drop-down and instead use left navigation that has all links to the current category. Click on an item to reveal sub-pages of that page.

Change would address/resolve the following issues:

• Unable to close mega menus using escape key #9
• Please don't open menus on hover (unless user has already clicked to open) #14
• Menubar needs even more keyboard capability #15
• May want to tweak the keyboard operation of the drop down menu #16
• menu structure #17
• Left space on a navigation-less pages #21
• Two taps needed to expand menu on touchscreen Windows laptops #22

Visual changes

1. Fix claim position (closer to “logo”)
2. Change uppercase “About WAI” & “Get Involved” to lower case (Use of uppercase letters for link text in header #23, Header Design feedback #33)
3. Change color behind navigation to a darker blue to make the navigation more visible (Navigation affordance #20, Header Design feedback #33)
4. Work on spacing/padding (Header Design feedback #33)
5. Adjust font sizes (Header Design feedback #33)
6. Finesse responsive view of navigation (Header Design feedback #33)
7. Increase tapable areas on the menu to meet WCAG 2.1 AAA for those items (Header Design feedback #33)

In-Progress Preview:

An in-progress version of those visual changes can be seen here:

And here on “mobile”:

[brewerj]

I think that this is a good proposal, especially given the plan (I think) to make the content currently available through the drop-down menus instead available through a left on-page nav. I would be sorry to lose the drop-down menus if there weren't a good alternative solution, as I think that the subheads are powerfully useful at communicating what kind of resources (aka buried treasures) exist on the website that many visitors otherwise won't know to look for. But I'm unclear from the "preview" version how this would work, so I want to make sure that I'm understanding your plan accurately. Are the left nav options supposed to be visible in the desktop preview above? (The mobile version makes sense visually, based on what I'm seeing in your proposal above, so this is a question only about the mobile version.)

[shawna-slh]

quick note so I don't forget: The thing we lose is being able to "walk the menus"...

[yatil]

• change tagline separator to be centered between tagline and site name area

[yatil]

Shawn & I agree to go forward with the proposal for now.

[shawna-slh]

Seeing this in place now... with the darker blue on the nav, I think the overall effect is too dark. (related to w3c/wai-website-design#134)
Also, it doesn't make sense for the left side nav to have the lighter blue of the top part instead of the blue matching the nav -- thought I saw that somewhere, but maybe it it's being changed...

@yatil, let me know if you want to discuss this, or for me to provide color numbers...

[yatil]

Seeing this in place now... with the darker blue on the nav, I think the overall effect is too dark. (related to w3c/wai-website-design#134)

It looks very distinctive and professional. I really, really like it. The rest of the page is light and having a good contrast between header and content is good.

Also, it doesn't make sense for the left side nav to have the lighter blue of the top part instead of the blue matching the nav -- thought I saw that somewhere, but maybe it it's being changed...

I just built in the functionality. As we discussed previously the design and styling of the side navigation is about to change because we already had identified that it is too heavy in the current design. This was one of the feedback we got. I did not get to that yet.

@yatil, let me know if you want to discuss this, or for me to provide color numbers...

Colors to chose from: https://w3c.github.io/wai-website-components/components/detail/colors.html

[yatil]

Implemented most of the functionality, still open

• Role of breadcrumb, do we need it? (Never got a clear answer to that question.)
• Mobile menu is not showing the sub-menu right now, that needs to be fixed.
• Mark current page and path

[yatil]

Seeing this in place now... with the darker blue on the nav, I think the overall effect is too dark. (related to w3c/wai-website-design#134)

It looks very distinctive and professional. I really, really like it. The rest of the page is light and having a good contrast between header and content is good.

Also when we had a lighter blue was criticized in #20 as the menu was not distinctive enough, which you marked as addressed with the change we have now.

[carmacleod]

Is there a link to see these changes? I tried https://w3c.github.io/wai-tutorials/ but that seems to still be old?

[yatil]

@carmacleod The preview can be found here: https://w3c.github.io/wai-website/