Move handbook meta info inside complementary landmark #504
Conversation
renintw
added
layout
Accessibility
|
This introduces a difference between source order and visual order, so when tabbing through, the focus moves to the meta before the chapter list. This works for sighted mouse users & non-sighted keyboard users, but could be confusing for anyone sighted using keyboard nav or a screen reader. Especially when the meta is pushed down the screen by the Chapter list, the focus jumps around a lot. keyboard-nav.mp4This is worse on small screens, since the chapter list is already pulled out of order, it jumps up and down. keyboard-nav-small.mp4Maybe it could be moved to after the Chapters list in the source as well? |
|
The source order & visual order is the challenge at hand here, because visually it looks nice. The main challenge here is that hierarchically, ideally we have chapters > toc > content. Across desktop that's a row of 3 columns, on mobile it's a stack of 2 collapsed elements (chapters and docs in thar order), and then content. Can the meta info live inside the chapters element? Would that thread the needle? |
Closes #400.
This PR moves the handbook meta above the chapter list in the HTML hierarchy and then uses flex order to visually place it below the chapter list, and also adding a dividing line between them.
Below is a screencast that shows when entering the complementary landmark, the screen reader first reads the handbook content and then the chapter list, which I suppose meets the request. Regarding the desktop view and @jasmussen's question about how it would look in mobile view when the three columns just became rows, could @WordPress/meta-design take a look and give some feedback?
Screen.Capture.on.2024-02-20.at.05-29-54.mov