Keyboard navigation issues on node edit forms

Open on Drupal.org →

Created on 13 February 2025, 5 months ago

Problem/Motivation

Keyboard navigation on node edit forms (for example node/16/edit?destination=/admin/content) has one serious problem, you first tab through the navigation sidebar, then you get through the top bar, then you tab through the actual fields on the node edit form, then you get again back to the top bar, when you then continue you get to the advanced sidebar . BUT if you now use shift-tab, you get back to the top bar, if you continue pressing shift-tab you get to the navigation sidebar, if you then use just tab again you get back to the top bar, but then you get again to the advanced sidebar. You are unable to get back inside the section for editing the fields in the node edit form once you "tabbed yourself out" (SC2.4.3). So technically you are ping ponging between both sidebars that way from now on, omitting the actual content fields in between (check node_edit_form_focus_order.mp4).
After you have tabbed past the Search Engine Optimization (SEO) Information on for example node/add/project there are two tabs without a visible focus outline before the save button gets into focus for a second time on the third tab press. (SC2.4.7)
A node edit form is lengthy and hard to navigate for sighted keyboard users and screen reader users using the keyboard.
1. For keyboard only users the tab trail is also rather long and cumbersome to navigate in, the only available shortcut is the Skip to main content link.
2. Screen reader users using the keyboard have landmark regions available alongside. Only downside landmarks regions are either too granular, not clearly labeled, contain noise, and or are missing regions (check landmarks.mp4). The navigation sidebar has an overarching landmark Complementary, where you would expect it is an aside element but not a navigational sidebar (the nav landmark would provide more clarity). The Complementary landmark wraps the two navigation blocks Administrative toolbar content navigation and Administrative toolbar footer navigation (the nav landmark would be the reasonable pick; so those two landmarks are either too granular and obsolete, or other way around and the nav landmark is obsolete). Then there are two landmarks (Breadcrumb navigation and Toolbar items navigation) within the top bar which doesn’t have a landmark itself. Then there are three empty navigation landmarks with no visible counterpart outlined on the page. The banner landmark is the header with the h1 and the Save, Preview, and Toggle button. Next is the main landmark containing the node edit form, and a Rich Text Editor application landmark is located within the main region, it is a single field and again not really a full fledged region. After that there is an empty application landmark, again without a visible counterpart outlined on the page. The advanced sidebar on the other hand has no landmark assigned at all.

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Steps to reproduce

Go to node/16/edit?destination=/admin/content and try to navigate with keyboard and landmarks in the screen reader.

Proposed resolution

The tab trail from the start to the end of the tabindex and back to the start should be identical and predictable that way.
It should be considered to add more “shortcuts” to the tab trail. Meaning, add more destinations/options aside the skip to main content to the skip link, the first child of the body element, and consider adding more of those skip links to other landmark regions. For example, have another skip link at the end of the node edit form where the user has the options to for example go back to the top bar, the navigation sidebar, or the advanced sidebar. In the accessibility track we’ve considered proposing to add the skipto → interaction pattern for keyboard navigation to Drupal CMS, or Drupal core in general - Joomla adopted that pattern a while ago.

[joomla.jpg]

Avoid the two tab presses with no visible focus outline.
Streamline the list of existing landmarks. Have one nav landmark for the navigation sidebar, one landmark for the top bar, keep the banner and main landmark, remove the empty navigation and empty application landmarks, relabel the rich text editor application landmarks to provide more context, and finally add a landmark for the advanced sidebar.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report

Status

Active

Version

4.0

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.

Accessibility
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Drupal CMS a11y

wcag243

wcag247

Sign in to follow issues

Comments & Activities

Issue created by @rkoller
Comment 5 months ago →
🇩🇪Germany rkoller Nürnberg, Germany
Comment 5 months ago →
🇨🇦Canada mgifford Ottawa, Ontario
Some of our admin pages are quite complex and would probably benefit everyone to have an easy way to both see a table of contents of the editorial sections and jump right to that section.
Comment 23 days ago →
🇨🇦Canada mgifford Ottawa, Ontario
Looking at my DDEV site I can repeat this problem on https://drupal-cms-1.ddev.site:8014/node/7/edit

I think the cleanest illustration of that is here.

For testing if you

click in the "Tags" field at the bottom (or whatever the bottom field is in the form,

tab (nothing is in focus), tab (nothing is in focus) - you can later click on this to see where it goes seems to go to the first field in the form

go ahead past "Save" and "Preview" then to the "Hide Sidebar Panel" button.

Then try to go back using shift-tab

You can't seem to get back into the main body of the page to make edits.

And yes, it is a complicated page so having a better way to skip into the content would be helpful.
Comment 23 days ago →
🇨🇦Canada mgifford Ottawa, Ontario

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024