With new DOM structure enabled in T261802: Switch to header-first DOM and with feedback provided by AFB T263834: Test new header-first DOM with screenreader users 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 |
 |  |
In comparison Vector legacy:
AFB's suggestions:
- 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.
- Similarly, the items within the 'Navigation menu' heading are also part of the landmark region which can easily be navigated by screen reader user.
- 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 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 this sectionremoved in Vector modern - 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 outare output as strong element in Vector modern - The "Search" h3 is not read out when reading through the search box
- Menu h3s are not read out to screen readers, and the heading structure is simplified.
- The "Navigation menu" h2 element is
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
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T265993#7378019 |
| 2 | ✅ | T265993#7378019 |
| 3 | ✅ | T265993#7378019 |
| 4 | ✅ | T265993#7378019 |
| 5 | ✅ | T265993#7378019 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T265993#7378032 |
| 2 | ✅ | T265993#7378032 |
| 3 | ✅ | T265993#7378032 |
| 4 | ✅ | T265993#7378032 |
| 5 | ✅ | T265993#7378032 |
