[feat] pfe-navigation 1.x | ability to remove heading tags in pfe-navigation without visual changes

[starryeyez024]

currently if you change it to a <p> tag, the line height is messed up such that the text is nearly touching the icon. Login shows an h3, websites shows a p tag.

(We need to remove headings for SEO reasons). Notice that "websites" is the last menu item, and it appears that all other content is nested under that: https://gsnedders.html5.org/outliner/process.py?url=https%3A%2F%2Fredhat.com

[castastrophe]

I'd be interested to learn more about the SEO reasons. This markup was recommended for the best accessible experience so removing headings will reduce usability of the nav by screen readers.

[markcaron]

All navigation, especially when marked up as a list (as it should be), must have a heading. We should also reference the heading through an aria-labelledby attribute on the list and an ID on the heading. This is the best practice.

SEO should automatically benefit from any accessibility measures. It is not often (if ever) where SEO "reasons" differ from best practices in Web Standards and accessibility.

[starryeyez024]

Jairus Mitchel, our SEO lead for redhat.com, recommended that we remove headers from the nav.

In doing some research, I found some SEO tools which turn a website into an outline format by virtue of headings. In these, I noticed that it seems that much of our content is nested under "Websites", the last heading in the menu.

• https://gsnedders.html5.org/outliner/process.py?url=https%3A%2F%2Fredhat.com
• https://cloud.magiclen.org/us/html-outliner

In searching for accessible examples of menus, including mega menus, I noticed that nearly all do not include heading tags:

• https://adrianroselli.com/2019/06/link-disclosure-widget-navigation.html
• https://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element
• https://www.w3.org/WAI/tutorials/menus/structure/
• https://adobe-accessibility.github.io/Accessible-Mega-Menu/
• https://terrillthompson.com/tests/menus/accessible-mega-menu/test.html
• https://www.levelaccess.com/challenges-mega-menus-standard-menus-make-accessible/

Can you provide examples of where you've seen documentation insisting on headings within the nav? Thanks!

[starryeyez024]

Regardless, the pfe-nav styles should not change when the light DOM tags are changed from heading tags to paragraph tags.

[starryeyez024]

Update on this; this issue only seems to occur on redhat.com, not in the pfe-navigation demo page, it seems because of incoming line-height styles on h3's from the old theme.
Perhaps the pfe-nav could specify line height on the trigger, alleviating the ability for generic h3 styles to apply to the nav.

[starryeyez024]

PR: #790

[wesruv]

I'm with @markcaron, these should be heading tags. None of those mega-menu example links have titles in the menu, they simply can't fathom a mega menu as mega as our mega menu 😝

I don't think we need to find an example of how headings are used in a mega menu to justify this, this boils down to the very common a11y rule - if it's text that is short and describes what is directly underneath like a title might, it's a heading. I don't think being inside of navigation provides any caveat.

I'd also agree with @markcaron that any SEO advice that disagrees with a heading in a navigation element has to prove it; I don't buy that.

• it's better semantic HTML
• <nav> allows all phrasing content including <h1> - <h6>
• HTML5doctor.com has great examples of it copied from the specification: http://html5doctor.com/nav-element/

[wesruv]

Re: SEO thing, since no one has access to the inner-workings of search spiders, I'm guessing the 'no header in navigation' is coming from an article (I'd like to see it) or a tool, and if it's a tool I want to see the reasoning for why that's flagged.

Making that text not a header feels like removing a hand rail from a wheel chair ramp for feng shui.

[JairusMitchell]

My concerns are around heading tags creating noise.
My recommendations are to keep H tags in page body content, ordered with the H1 at the top of the page, containing the focus of the page content, with H2s and H3s nested underneath.

My concerns are from Google's SEO Best Practice Starters guide (https://support.google.com/webmasters/answer/7451184?hl=en&ref_topic=9460495):

"Use heading tags to emphasize important text

Use meaningful headings to indicate important topics, and help create a hierarchical structure for your content, making it easier for users to navigate through your document.
Best Practices

Imagine you're writing an outline

Similar to writing an outline for a large paper, put some thought into what the main points and sub-points of the content on the page will be and decide where to use heading tags appropriately.

Avoid:

Placing text in heading tags that wouldn't be helpful in defining the structure of the page.
Using heading tags where other tags like <em> and <strong> may be more appropriate.
Erratically moving from one heading tag size to another.

Use headings sparingly across the page

Use heading tags where it makes sense. Too many heading tags on a page can make it hard for users to scan the content and determine where one topic ends and another begins.

Avoid:

Excessive use of heading tags on a page.
Very long headings.
Using heading tags only for styling text and not presenting structure."