Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
Our draggable tables (tabledrag.js) hasn't changed much since it was introduced in D7. Let's look at ways to make tabledrag's accessibility better.
Currently tabledrag doesn't really work for screen readers, and we kept the fallback method with row weights. It's worth looking at ways to modernize this, so screen reader users can have a more equivalent experience.
Proposed resolution
A number of more modern approaches to accessible drag and drop are in #2920006: Research accessibility of drag-and-drop grid interfaces.. Some improvements we could make include:
- Make it understandable for screen reader users. Currently the drag-handles are keyboard-operable but the outcome of moving it isn't yet perceivable or understandable. If the outcome of using the drag-handles can be conveyed to screen reader users, they will have a more equivalent experience to sighted users.
- Use different icons to visually convey what kind of movements are allowed. A vertical 2-arrow icon for a simple up/down order, versus a 4-arrow icon for situations where rows can be ordered as nested trees. A vertical 2-arrow icon is available in the Libricons icon set used by Classy/Bartik/Seven.
- #2912737: Table Drag showing visual feedback when move was forbidden
- Make the show row weights alternative method work better for situations where there are more than 31 rows. See Problems with weight range in book module. Quick-win idea: use a HTML5 number input instead of the limited range dropdown. (Note, we already have this in MediaLibraryWidget.)
- #3035435: Make the show/hide row weights button more informative for assistive tech users.
Remaining tasks
Use child issues for implementation.
- Add a styling hook for the 2-arrow vs 4-arrow icons. NEEDS CHILD ISSUE.
- Include the 2-arrow (up/down) vs. 4-arrow (nested) distinction in the Claro theme. #3032365: Table drag style update.
- Convert the "-15 to 15" row weights to a HTML5 number field. NEEDS CHILD ISSUE.
User interface changes
Yes, modest design changes may be involved to help convey some aspects of tabledrag behaviour visually.
Non-visual improvements for assistive tech are also proposed, which may involve new translatable strings.
Comments
Comment #2
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedAn idea for a quick-win improvement for the visual style of the drag handles....
Tabledrag can be configured to for nested and un-nested lists.
For un-nested lists, items can only be moved up and down. Left and right movements are not allowed. Yet the icon on the drag handle shows 4 arrows, and implies that 2-dimensional movement is allowed.
How about using a different icon for the un-nested tabledrag, showing just the up/down directions?
Comment #3
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedThe tabledrag icon comes from Lubricons, originally added in #2032773: Use Libricons (icon font) in Seven, consider using it more broadly in core.
It looks like Libricons has an up-down icon, we just don't have it Drupal core.
Comment #4
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedRelated: the row weights fallback can be hard to use too. We've had a report that if there are more than 31 rows, you can't achieve full control over the order. It seems reasonable that book module would exceed this limit. See Problems with weight range in book module, posted in the Drupal Accessibility Group.
This should probably have a separate issue, bevause we also have weight fields outside the context of tabledrag.
Comment #5
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedOrganized issue summary so it's a bit more like a plan now.
Showing a different icon for up/down only constraint would need some kind of styling hook; e.g. a class or data-* attribute to distinguish the nested-tree and up/down tabledrag variants. I looked at the markup using browser dev-tools, and there isn't anything like that currently.
Comment #6
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedAdding this older proposal into the plan. #2912737: Table Drag showing visual feedback when move was forbidden
Comment #7
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedIn the accessibility group discussions, there was a request for help with book module. It turns out that the "show row weights" alternative method doesn't scale to situations where there are more than 31 rows to re-order. See
Problems with weight range in book module. This should get a child issue: a quick win might be to replace the 31 option drop-down select with a HTML5 number field, to permit click-nudging or directly typing a number.
The row weights UI is a very old part of Drupal, which pre-dates the JS dragable behaviour. Even if we can report the outcome of keyboard arrow operations to screen reader users, the row-weights method is still worth keeping around. Speech control users can access it.
Comment #8
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedComment #9
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedAdding an issue that came out of the Media Library accessibility plan. Look at how to improve the show/hide row weights button, and inform the user of the outcome.
Comment #10
tim.plunkettFixing tag
Comment #20
mgifford