Fix navigation menu going over the headings when navigating to them

[luontola]

No description provided.

[coderbyheart]

Please don't change the semantics, the h3 and nav serve a purpose here.

[luontola]

I changed them because they use semantic elements in a non-standard way, which would confuse visually impaired people.

When somebody with a screen reader goes to the site, they will hear the Participants section and it containing an unordered list. Going through the list items, first they will hear there is a picture of the participant, but then suddenly inside the list item there starts a new section (whose heading is the participant's name), but the section contains no text, but is followed by navigation menu, which doesn't contain links to navigate the website, but links to the participant's social media.

Headings and lists can both be used to organize the page content. A heading starts a new section and the section can contains a list, but it is unheard of that a list would contain headings/sections.

https://webaim.org/techniques/semanticstructure/ says about headings:

When encountering a lengthy web page, sighted users often scroll the page quickly and look for big, bold text (headings) to get an idea of the structure and content of the page. Screen reader and other assistive technology users also have the ability to navigate web pages by heading structure, assuming true headings are used (as opposed to text that is styled to be big and/or bold).

Likewise, do not use headers to achieve visual results only.

When skimming through the headings with a screen reader, it would have 20-30 participant names in the outline, which slows down the skimming and is confusing because the sections don't have any other content than the heading, so the headings are the content.

Some tools for seeing the outline are https://gsnedders.html5.org/outliner/ and https://wave.webaim.org/ or disabling all CSS and images in the browser. Seems that I didn't remove all elements with inappropriate semantics. There is a weird <h2 id="in-brief">In brief:</h2> in the HTML, as can be seen from the outline, but it's not visible on the page.

Then about the nav element/navigation landmark role.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role says:

Like the HTML <nav> element, navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation. If a page includes more than one navigation landmark, each should have a unique label. If two or more navigational landmark on a page have the same set of links, use the same label for each.

Landmark roles are intended to be used sparingly, to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.

and https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines explictly says:

Use the <nav> element only for site navigation menus. Collections of links such as social media profiles or a blogroll should not be wrapped in the <nav> element.

As final words, at https://internetingishard.com/html-and-css/semantic-html/ was said appropriately:

The point is, don’t use semantic elements just for the sake of using them. Implementing them incorrectly is worse than not using them at all, so if you’re ever in doubt, use a <div> instead.

[coderbyheart]

Oh, right, that makes a lot of sense.