With new DOM structure enabled in {T261802} and with feedback provided by AFB {T263834} it's time to revisit
heading order.
Citing from AFB's report:
> New DOM structure:
> https://en.wikipedia.org/w/index.php?useskinversion=2
>
> - The new DOM structure for the main page has a strange heading layout which may confuse a screen reader user.
> -- Page starts with level 3 heading which contains a search field. followed by level 2 heading with the 'Navigation Menu' and then the 'main landmark From today's featured article' as a level 2 heading.
Heading document outline (Vector modern)
| Current outline after moved personal tools | PS 13
| {F34639994 width=50%} | {F34640000 width=50%}
In comparison Vector legacy:
{F34640006}
AFB's suggestions:
> 1. The Search field doesn't have to be wrapped within heading because the screen reader user can easily get to it using the landmark keyboard shortcut by pressing letter 'd' on the keyboard.
> 2. Similarly, the items within the 'Navigation menu' heading are also part of the landmark region which can easily be navigated by screen reader user.
> 3. Either bring the 'Navigation menu' heading further down in the page after the level 1 heading or remove the level 2 heading 'Navigation menu' completely and leave the 'Namespaces and Views' navigation landmark region items at the top without the heading.
Further explanation of [[ https://webaim.org/techniques/semanticstructure/#headings | why semantic heading structure is important to screenreaders ]].
=== AC
Check following conditions in a screenreaders like VoiceOver or Jaws/NVDA for Windows.
[] **All changes above will be scoped to modern Vector only**
[] The "Navigation menu" h2 element is not read out when reading through [[ https://jmp.sh/yDUIMqq | this section ]]
[] The h3 in all navigation menus (i.e. user links menu, menus in the side bar, language variant, the "more" menu, etc) will not be read out
[] The "Search" h3 is not read out when reading through the search box
A simple way to confirm the changes above is to check the heading structure in your screen reader, it should only show the headings of a particular article.
Before: https://jmp.sh/XDb6iG8
After: https://jmp.sh/q1MaRwi
Also ensure that the other landmarks didn't change because of this change: https://jmp.sh/M40HRCR