Page MenuHomePhabricator
Create Task
Maniphest T265993

Heading structure & ordering in (new) DOM structure
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
Volker_E
Oct 20 2020, 11:30 AM
Tags
Referenced Files
F34654415: Screen Shot 2021-09-25 at 11.40.18 AM.png
Sep 25 2021, 6:47 PM
F34654407: Screen Shot 2021-09-25 at 11.35.35 AM.png
Sep 25 2021, 6:45 PM
F34639994: image.png
Sep 11 2021, 3:52 AM
F34640006: image.png
Sep 11 2021, 3:52 AM
F34640000: image.png
Sep 11 2021, 3:52 AM
Subscribers
Aklapper
bwang
cjming
Edtadros
Jdlrobson
Jdrewniak
Mainframe98
View All 9 Subscribers

Description

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 toolsPS 13
image.png (1×1 px, 95 KB)
image.png (1×1 px, 85 KB)

In comparison Vector legacy:

image.png (1×1 px, 77 KB)

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 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 section removed 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 out are 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.

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

ACStatusDetails
1✅T265993#7378019
2✅T265993#7378019
3✅T265993#7378019
4✅T265993#7378019
5✅T265993#7378019

QA Results - Prod

ACStatusDetails
1✅T265993#7378032
2✅T265993#7378032
3✅T265993#7378032
4✅T265993#7378032
5✅T265993#7378032

Details

SubjectRepoBranchLines +/-
Improve heading structure and heading semantics by removing redundant headings and labels for modern Vectormediawiki/skins/Vectormaster+18 -26
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 ResolvedGoalovasilevaT242131 [GOAL] Deploy new header to at least one test wiki
 ResolvedJdlrobsonT240856 [EPIC] New header for desktop improvements project
 ResolvedovasilevaT236176 [EPIC] Build opt-in/opt-out mechanism for desktop improvements project
 ResolvedSpikeovasilevaT237561 [SPIKE 10hrs] Investigate how skin suboptions can be presented in Special:Preferences
 ResolvedSpikephuedxT237635 [SPIKE] What should feature management look like in desktop improvements?
 ResolvedovasilevaT237636 [SPIKE 10hrs] Build new header within the Vector skin
 ResolvedSpikeVolker_ET240489 [Epic] Determine the optimum Vector DOM structure for a11y and performance
 ResolvedSpikeovasilevaT242419 [SPIKE] Instrument opt-in/opt-out mechanism for desktop improvements project
 ResolvedovasilevaT242381 Add a Vector skin version preference
 ResolvedBUG REPORTmatmarexT245793 [Firefox 73] Infusing a RadioOptionWidget changes first-child alignment
 ResolvedovasilevaT243281 Build opt-out link for logged-in users with new vector on
 ResolvedJdlrobsonT245456 [Dev] Adopt template partials in Vector and revise sidebar component
 ResolvedphuedxT113095 A cached server-side HTML template should update when you change a partial template which it includes
 Resolved• nrayT250093 Add title attribute to opt-out link
 ResolvedMayakp.wikiT243071 Update PrefUpdate schema to include edit count
ResolvedMayakp.wikiT246028 Data QA for Editcount on PrefUpdate schema
 StalledovasilevaT242835 RFC: Standard method for feature-management in skins/extensions
 DeclinedNoneT249918 Desktop Improvements opt-out takes multiple user actions and network roundtrips
 ResolvedEdtadrosT248644 Cannot link to subsections on Special:Preferences
 InvalidNoneT251405 Change description of desktop improvements opt-in preference
 DeclinedNoneT260570 Improve opt-out functionality in sidebar
 ResolvedovasilevaT262207 Deploy new search location and DOM order to officewiki and testwiki
 Resolved• nrayT261802 Switch to header-first DOM
 ResolvedJdlrobsonT287097 [GOAL] Accessibility compliance focus (new development & fixes)
 ResolvedovasilevaT265993 Heading structure & ordering in (new) DOM structure

Event Timeline

Volker_E created this task.Oct 20 2020, 11:30 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 20 2020, 11:30 AM
Volker_E added a parent task: T240489: [Epic] Determine the optimum Vector DOM structure for a11y and performance.Oct 20 2020, 11:30 AM
Volker_E added a parent task: T261802: Switch to header-first DOM.Oct 20 2020, 11:34 AM
Mainframe98 subscribed.Oct 31 2020, 3:47 PM
Jdlrobson moved this task from Needs triage to Technical on the Vector (legacy skin) board.Mar 25 2021, 5:19 PM
bwang moved this task from Unsorted to Semantic HTML on the Accessibility board.May 18 2021, 3:52 PM
bwang claimed this task.May 18 2021, 4:31 PM
bwang set the point value for this task to 5.
gerritbot added a comment.May 19 2021, 4:36 PM

Change 692705 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove extraneous headings in search and menus

https://gerrit.wikimedia.org/r/692705

gerritbot added a project: Patch-For-Review.May 19 2021, 4:36 PM
Jdlrobson added a project: Web-Team-Backlog (Kanbanana-FY-2020-21).May 26 2021, 3:03 PM
Jdlrobson subscribed.

There is a patch and discussion on the patch so this should be in the board

Jdlrobson removed bwang as the assignee of this task.May 26 2021, 3:03 PM
Jdlrobson assigned this task to bwang.
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson added a subscriber: bwang.
Jdlrobson removed bwang as the assignee of this task.May 26 2021, 5:20 PM
Jdlrobson moved this task from Upcoming to Blocked on Others on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson moved this task from Blocked on Others to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson assigned this task to bwang.Jun 2 2021, 6:37 PM
Jdlrobson moved this task from Needs More Work to Needs Analysis on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Talked to Bernard and this needs some analysis/conversation before it can continue. Marked patch as WIP

ovasileva triaged this task as Medium priority.Jun 7 2021, 2:14 PM
LGoto edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Kanbanana-FY-2020-21).Jun 22 2021, 5:16 PM
Jdlrobson moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.Jun 22 2021, 7:18 PM
Jdlrobson removed a project: Patch-For-Review.Jun 23 2021, 6:38 PM
Volker_E updated the task description. (Show Details)Jun 26 2021, 8:41 AM
gerritbot added a comment.Jul 13 2021, 4:40 PM

Change 692705 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] Remove extraneous headings in search and menus

Reason:

https://gerrit.wikimedia.org/r/692705

gerritbot added a comment.Jul 13 2021, 9:49 PM

Change 692705 restored by Bernard Wang:

[mediawiki/skins/Vector@master] Remove extraneous headings in search and menus

https://gerrit.wikimedia.org/r/692705

gerritbot added a project: Patch-For-Review.Jul 13 2021, 9:49 PM
Jdlrobson removed bwang as the assignee of this task.Jul 14 2021, 8:59 PM
Jdlrobson moved this task from Triaged but Future to unsed on the Web-Team-Backlog board.
Jdlrobson added a parent task: T287097: [GOAL] Accessibility compliance focus (new development & fixes).Jul 21 2021, 4:09 PM
Jdlrobson assigned this task to bwang.Jul 23 2021, 8:08 PM
Jdlrobson moved this task from unsed to Kanbanana-FY-2020-21 on the Web-Team-Backlog board.
Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-FY-2020-21); removed Web-Team-Backlog.
LGoto edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog (Kanbanana-FY-2020-21).Aug 2 2021, 9:26 PM
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Aug 2 2021, 10:59 PM
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Aug 17 2021, 5:20 PM
bwang removed bwang as the assignee of this task.Aug 18 2021, 2:54 PM
bwang moved this task from Ready for Development to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
LGoto assigned this task to cjming.Aug 19 2021, 5:06 PM
cjming reassigned this task from cjming to Volker_E.Aug 23 2021, 9:48 PM
cjming subscribed.
LGoto moved this task from Code Review to Blocked on Others on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Aug 24 2021, 5:06 PM
bwang updated the task description. (Show Details)Aug 27 2021, 4:43 PM
Volker_E updated the task description. (Show Details)Sep 11 2021, 3:52 AM
Volker_E added a comment.Sep 11 2021, 4:01 AM

Reviewing PS 13: With our move of the personal tools/search box (before this task) the heading outline got messed up from legacy Vector as AFB has pointed out. Added comparison outline screenshots.
I'd recommend to output h3s only for legacy Vector and change the HTML element to a strong with id and aria-labelledby in place. We don't need to retain those h3s for modern Vector, the only time where that would maybe make a slight difference is no CSS rendering, or certain text browsers. But the landmark nav regions should be helpful there on their own.

With this proposed change we would only put headlines around content and not chrome. Seems appropriate to me with modern browsers.

Volker_E updated the task description. (Show Details)Sep 11 2021, 4:02 AM
Volker_E removed Volker_E as the assignee of this task.Sep 13 2021, 5:25 PM
Volker_E moved this task from Blocked on Others to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdrewniak claimed this task.Sep 13 2021, 5:36 PM
Jdrewniak reassigned this task from Jdrewniak to Volker_E.Sep 13 2021, 5:40 PM
gerritbot added a comment.Sep 15 2021, 4:43 PM

Change 692705 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector

https://gerrit.wikimedia.org/r/692705

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.1; 2021-09-21).Sep 15 2021, 5:00 PM
bwang reassigned this task from Volker_E to Edtadros.Sep 16 2021, 4:54 PM
bwang moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
bwang updated the task description. (Show Details)
Jdlrobson mentioned this in T291264: Large "Navigation menu" at the bottom of the Vector skin.Sep 17 2021, 2:51 PM
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Sep 25 2021, 6:45 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: The "Navigation menu" h2 element is not read out when reading through this section removed in Vector modern
✅ AC2: 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 are output as strong element in Vector modern
✅ AC3: The "Search" h3 is not read out when reading through the search box
✅ AC4: Menu h3s are not read out to screen readers, and the heading structure is simplified.
✅ AC5: Check the heading structure in your screen reader, it should only show the headings of a particular article.

Screen Shot 2021-09-25 at 11.35.35 AM.png (1×1 px, 2 MB)

Edtadros reassigned this task from Edtadros to ovasileva.Sep 25 2021, 6:46 PM
Edtadros updated the task description. (Show Details)
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: The "Navigation menu" h2 element is not read out when reading through this section removed in Vector modern
✅ AC2: 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 are output as strong element in Vector modern
✅ AC3: The "Search" h3 is not read out when reading through the search box
✅ AC4: Menu h3s are not read out to screen readers, and the heading structure is simplified.
✅ AC5: Check the heading structure in your screen reader, it should only show the headings of a particular article.

Screen Shot 2021-09-25 at 11.40.18 AM.png (866×820 px, 1 MB)

Edtadros updated the task description. (Show Details)Sep 25 2021, 6:48 PM
ovasileva closed this task as Resolved.Sep 27 2021, 7:27 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL