Research accessibility of drag-and-drop grid interfaces.

Created on 31 October 2017, about 7 years ago
Updated 8 September 2024, 2 months ago

Problem/Motivation

As part of #2884601: Add a Layout Builder to core we want to add a drag-and-drop interface for arranging block layouts spatially.

This should be accessible, but so far it isn't very clear what behaviours we need in order to achieve this. So we need to research approaches for making it accessible. The layout builder is our initial use-case, but we may find others.

Proposed resolution

  1. Find some drag-and-drop interfaces, assess them for accessibility. These could be:
    • JS libraries, jquery plugins, web components
    • Web applications in general (even if they are not re-usable components)
    • Drag-and-drop interfaces in desktop applications
    • Drag-and-drop interfaces in mobile applications
    • Accessibility reference material, tutorials, etc.
  2. Use the things we learn to define what features (behaviours) an accessible drag-and-drop interface will need.
  3. Decide whether it's worth having a re-usable component or library in core, versus building drag-and-drop interfaces on a case-by-case basis.

Approaches which we can review

Drag-and-drop interfaces to assess (code):

Reference documentation to review:

Analysis method

Comparison points and questions to consider. (TODO: anymore?)

  • Library dependencies
  • License
  • Support status and release process
  • Is it 1-dimensional (up/down) or 2-dimensional (up/down/left/right)
  • By what means are allowed movements or destinations computed? (When, how, ...)
  • What are the scope of the accessibility claims for each approach? (e.g. implemented keyboard control, but haven't addressed informing screen reader users of action outcomes)
  • Similarly, how do these work in practice?
  • What constitutes "grabbed"? When a grab-handle button has focus? Or when a grab-handle button is pressed (toggle to grab/drop)? This point may have a big impact for speech control.

TODO: Analysis results

TBD.

User interface changes

This is a research task, initially to support draggable layout builder in core.

Original mockups for #2995689: Allow reordering blocks without a pointer device :

API changes

This is research, which may eventually lead to a new JS component in core.

Data model changes

Unknown. A new API may have some configuration options.

📌 Task
Status

Active

Version

11.0 🔥

Component
Javascript 

Last updated 3 days ago

Created by

🇬🇧United Kingdom andrewmacpherson

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.

  • Blocks-Layouts

    Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal issue.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024