[wp-trac] [WordPress Trac] #29838: Post editing area: keyboard accessibility, tab order and focus

[WordPress Trac]

#29838: Post editing area: keyboard accessibility, tab order and focus
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Editor             |    Version:  4.0
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 This ticket aims to focus on a specific area of the UI, let's call it
 "Post editing area", the one that starts with the "Title" field and ends
 with the editor area, both in "Visual" and "Text" mode.

 Related: #27553 while researching we noticed:

 > '''joedolson''': outstanding issues surrounding tab order, but this are
 long-standing and not relevant to this specific patch and issue; that
 needs to be raised separately.

 There's room for accessibility improvements here, especially when it comes
 to tab order and focus management. To fully understand what's going on you
 should stop for a while being a "nervous clicker" :) and:
 - apply the patch from #27553
 - unplug your mouse and disable your trackpad :)
 - use just your keyboard
 - tab around, both forwards and backwards
 It would be great to test also switching off your display and using a
 screen reader, I would recommend Firefox and NVDA.

 Two main issues:

 Focus.
 When you're in the "Title" field and then you tab forwards, focus is moved
 directly inside the editor area skipping all what's in between.
 While this *may* be useful for sighted keyboard users (they save a few key
 presses, say 1 second?), it's a very critical experience for screen reader
 users: when they tab forwards, they get that right after the title there's
 the editor. But when they tab backwards, they get many more elements that
 "weren't there before".
 [https://core.trac.wordpress.org/ticket/27553#comment:17 more details on
 27553 comments].

 Tab order.
 The "tabbing experience" in Visual and Text mode should match as much as
 possible. Ideally, there should be a better [http://www.w3.org/WAI/GL/2014
 /WD-WCAG20-TECHS-20140902/G59 logical sequence in the markup]. When
 editing the title, the next logical step is editing the content, all the
 other controls (Add Media button, additional buttons provided by plugins
 and themes, etc.) should not be placed between the Title and the editor.
 The CEUX project proposed something similar at some point.

 There is ongoing research and development on the editing experience, see
 for example Editor Focus/DFW in #29806 and the idea to review relevant
 parts of the UI, see [https://make.wordpress.org/core/2014/10/01/agenda-
 for-october-1st-dev-chat/#comment-19392 explore moving the Publish | Save
 | Preview buttons out of the metabox, etc.] so it would be a great
 opportunity to explore this ticket too.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/29838>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform