Keyboard navigation issues on node edit forms

Created on 13 February 2025, about 2 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.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024