Opened 9 years ago
Last modified 13 hours ago
#29838 accepted defect (bug)
Post editing area: keyboard accessibility, tab order and focus
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 6.5 | Priority: | normal |
Severity: | normal | Version: | 4.0 |
Component: | Editor | Keywords: | needs-patch |
Focuses: | ui, accessibility | Cc: |
Description
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". 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 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 explore moving the Publish | Save | Preview buttons out of the metabox, etc. so it would be a great opportunity to explore this ticket too.
Change History (30)
#2
@
9 years ago
This ticket is a lot to absorb! I'm going to read through all of the associated tickets and test this myself so that I have a better understanding of the behavior the ticket is describing. I'll reply back here afterwards. I'd love to help work some of these issues out :)
This ticket was mentioned in IRC in #wordpress-ui by _Redd. View the logs.
9 years ago
This ticket was mentioned in IRC in #wordpress-ui by _Redd. View the logs.
9 years ago
This ticket was mentioned in IRC in #wordpress-ui by _Redd. View the logs.
9 years ago
#6
@
9 years ago
Just to keep track of the changes related to the tab order in this area, now the WP editor "toggle tabs" are focusable, see changeset 30002
#7
@
9 years ago
Interesting also for the user experience on desktop, see the video posted by Mark Jaquith. I couldn't agree more, especially about his comment on the section on the top, in the last 30 seconds.
Post editing experience on iPhone 6
https://make.wordpress.org/flow/2014/11/11/post-editing-experience-on-iphone-6/
#8
@
9 years ago
Related: #29989
See also Ryan Boren's post:
https://make.wordpress.org/flow/2014/10/16/a-survey-of-media_buttons-macnchrome-iphone-5-4-1-alpha-20141015/
This ticket was mentioned in Slack in #design by afercia. View the logs.
9 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
9 years ago
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
9 years ago
#12
@
9 years ago
New related post by Ryan Boren:
The location of Add Media on phones
This ticket was mentioned in Slack in #core by afercia. View the logs.
8 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
8 years ago
This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.
8 years ago
#19
@
8 years ago
- Milestone changed from Awaiting Review to Future Release
Discussed this during today's accessibility bug scrub and it is definitely something we'd like to discuss at WCEU, maybe also a good candidate for a feature project.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
7 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
7 years ago
#23
@
7 years ago
For similar issues related to the new Editor project (Gutenberg), see https://github.com/WordPress/gutenberg/issues/467
This ticket was mentioned in Slack in #design by afercia. View the logs.
7 years ago
This ticket was mentioned in Slack in #accessibility by nrqsnchz. View the logs.
3 years ago
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
4 weeks ago
#28
@
4 weeks ago
- Keywords needs-patch added
- Milestone changed from Future Release to 6.5
- Owner set to joedolson
- Status changed from new to accepted
#29
@
4 weeks ago
Per conversation with @alexstine in an accessibility bug scrub, he'd like to see this happen. He comments (with reference to the classic editor):"I think we should push for the improvement. To date, it's how blind people still use self-hosted WordPress."
Practically, if this is the primary tool for a group of people, we should still explore beneficial changes.
This is definitely an important issue; regardless of any screen reader questions, the experience for a keyboard-dependent user in the editor is simply confusing; it's extremely hard to predict where you're going to go next or figure out how to get to certain controls via the keyboard.