Problem/Motivation

As a keyboard-only user or a screenreader user, I need to understand how to use the Show row weights mode to re-order or nest menu items, taxonomies, blocks and more. [Note: The original issue had ideas for improving the tabledrag functionality; see below.]

Proposed resolution

Post documentation for how to use 'Show row weights' to order and nest items by weight. In comment 3 below there is a list of important information to include in this documentation. In addition, it is suggested that we add a table summary attribute to tabledrag tables to provide in-context documentation for screenreader users.

Remaining tasks

Write the documentation based on the comments here. Also write a small patch to add the table summary attribute.

User interface changes

None, except for a table summary that will be read by screenreaders.

API changes

None.

Original report by daniel.nitsche

Issue

Thread for context: http://groups.drupal.org/node/204543

Some users may need to rely on field/group weights to change the order of fields and groups. Problems with the current interface for these users may include:

  • It's not obvious what the "show row weights" link does, or more specifically, that it will provide an alternative method for reordering fields (according to the user in the original thread).
  • When using the "show row weights" option:
    • no instruction is given as to what to enter in each weight field; and
    • it difficult to determine if a weight field is associated with a group, or with a single field.

Possible WCAG 2.0 failures

Probable WCAG 2.0 failures

Some possible solutions to get the discussion started

  1. Show weights in table by default.
  2. Change the input of weights to a <select> to avoid user error/confusion.
  3. Ensure drag widgets are not read by screenreaders (to avoid confusion).
  4. Consider renaming the "weight" column, or, provide instructive text at the top of the page, or, wrap weight in an <abbr> tag.
  5. Consider separating the each group into a separate table, or, somehow markup the table to indicate fields are children of groups (eg. with a <th scope="row" rowspan="3">)

Also, I can't see any reason we can't use JavaScript to let users reorder rows on the fly if we add an html element that lists the order of the fields, then user an aria-live attribute on this element.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bowersox’s picture

Good suggestions! @daniel.nitsche Thanks for filing an issue.

mgifford’s picture

Interesting idea to wrap the weight column in <abbr>. It's not an acronym, but it's fair to say that it is indeed an abbreviation of a longer description about ordering content.

The link to http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-idioms seems to have changed.

For form errors there is also this related issue #1493324: Inline form errors for accessibility and UX

Would be great if we could move this to some specific patches.

bowersox’s picture

Category: task » feature

@mgifford, @Everett Zufelt, @lennwebb and @bowersox discussed this one further at the Sprint. Here are some key issues:

  • The words 'Show row weights' likely do not make sense to all new users, but showing a longer phrase or explanation on screen is probably not acceptable to the UX team. Instead documenting and explaining what 'Show row weights' may be the most fruitful approach.
  • I believe that solutions #2 and #3 from the original issue are already in place.
  • Solutions #1 and #4 could make things worse, not better.
  • Solution #5 raises the important point that some users do not realize the weights only apply to the group or section of the table, not everything in the table. There may be some fruitful ideas here, and if we do agree to implement an idea we can file a specific issue for that.

At this point I believe this is best addressed as a Documentation issue, [and I have now converted the issue summary to reflect that]. There are lots of aspects of this to document:

  • Explain what 'Show row weights' is, and that ordering blocks and nesting menus is accessible in this way.
  • Explain that this concept applies all over Drupal, in the Manage Field screens, Taxonomy, Menus, Blocks.
  • Weights only apply within a group of items in the same section or siblings in the hierarchy.
  • Weights can be positive or negative numbers.
  • There are also keyboard mappings for keyboard-only users to drag and nest the rows (Everett may be one of the few people who knows and uses them).

In addition to an external documentation page that we can point people to, I suggest we also add a table summary attribute to any tabledrag table. Suggested markup for this is:

summary="This table allows you to re-order [and nest] items. Click the Show row weights link in order to order items by number. [To nest an item, click its edit link and change the Parent and Weight values.]"

(If there is nesting, the parts in the square brackets should be displayed.)

bowersox’s picture

Title: Manage field screen is confusing when relying on field/group weights » Document 'show row weights' mode
Category: feature » task
Issue tags: +Documentation
mgifford’s picture

Category: feature » task

Great summary, so we just need to get a patch written now.

mgifford’s picture

mgifford’s picture

So we have to modify our expected outcome based on #843708-86: Add option to set caption & remove summary in the html table (Accessibility)

We're going to need to insert something like this within the table rather than the summary.

+      <details>
+        {% if summary is not empty %}
+          <summary>{{ summary }}</summary>
+        {% endif %}
+        {% if description is not empty %}
+          {{ description }}
+        {% endif %}
+      </details>

That's definitely trickier than simply appending to a summary if it is available. I think we're going to have to address both Views tables as well as those generated without it. Both however would need to be wrapped under "visually-hidden" as this isn't content you'd want others to see.

bowersox’s picture

Issue tags: +TwinCities
bowersox’s picture

Issue summary: View changes

Converted the issue summary to focus on documentation rather than UI changes.

mgifford’s picture

Issue tags: +atag

Perhaps worth mentioning on the help pages:

  • /admin/help/taxonomy
  • /admin/help/system
  • /admin/help/menu_link
mgifford’s picture

Issue tags: +TCDrupal 2014

Had an interesting conversation with Nate about this, and people complaining because they didn't know they'd disabled Drag/Drop when they clicked on this link and didn't realize what it did..

Documentation can help reduce questions like this in the issue queue.

mgifford’s picture

Status: Active » Needs review
FileSize
1.34 KB

I didn't do anything for:
/admin/help/taxonomy
/admin/help/menu_link

But don't want to duplicate this either.

bowersox’s picture

@mgifford's explanation looks good to me!

jhodgdon’s picture

Status: Needs review » Needs work

This is in the Uses section of a hook_help(), so it is supposed to be documentation about how to use Drupal features, not about motivations or about Drupal history. So please rewrite this so it just explains how to disable the drag-and-drop functionality using straightforward language.

Also, the other "Uses" sections use Sentence case, not Title Case. And as far as I know, "Drag and Drop" is not a proper name. So it should probably be "Disabling drag-and-drop functionality" for the header.

And... This patch doesn't satisfy the issue summary. Either the issue summary needs an update to remove the part about adding help to the tables themselves, or the patch needs to include this?

mgifford’s picture

Status: Needs work » Needs review
FileSize
1.28 KB

But yikes, this issue took a lot to get into Core. We can't talk about it? :)

Seriously, thanks for focusing this comment & ensuring the case is consistent. I'm terrible at case consistency.

I don't know how to address the issue of the tables themselves. We don't have a "?" icon I can just slap in there with a link or mouse-over help function. I'm also not sure if there should be something in the Taxonomy & Menu help where folks are likely to run across this problem.

If the patch is good and there are no other ideas I can update the title/summary of this issue.

jhodgdon’s picture

Component: field system » base system
Status: Needs review » Needs work

Sorry for apparently being unclear.

The DT element should not say "Disabling Drag and Drop'". It should say "Disabling drag-and-drop functionality".

Similarly the start of the DD should not say "Drag and Drop functionality". It should say "Drag-and-drop functionality".

There are several other problems with this patch:
- The first two sentences of this documentation seem to be redundant. Can they be combined?
- The third sentence is not a sentence at all:

The sortable tables in Core which include this functionality including Menus, Taxonomies & HTML Filters.

- In the 4th sentence, "labelled" is misspelled. Should be "labeled"
- 4th sentence does not end in .
- The link in the UI actually says "Show row weights" not "Show/Hide row weights".

So... All in all, I would suggest completely rewriting this... how about something like this:

Disabling drag-and-drop functionality

The default drag-and-drop user interface for ordering tables in Drupal presents a challenge for some users, including users of screen readers and other assistive technology. The drag-and-drop interface can be disabled in a table by clicking a link labeled "Show row weights" above the table. The replacement interface allows users to order the table by choosing numerical weights instead of dragging table rows.

mgifford’s picture

Status: Needs work » Needs review
FileSize
1.32 KB

Ok, here's the patch as you've described.

I used Show/Hide row weights as it was a shorthand for:

To enable or disable this feature, click on the link above the table labeled "Show row weights" or "Hide row weights".

It's fine though to just describe the one I think.

I also thought about including a description of how it could be useful for folks with multi-page drag/drop - but that all got clunky:

jhodgdon’s picture

Status: Needs review » Reviewed & tested by the community

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 16: Document-show-hide-row-heights-1413670-16.patch, failed testing.

Status: Needs work » Needs review
jhodgdon’s picture

Status: Needs review » Reviewed & tested by the community
webchick’s picture

Status: Reviewed & tested by the community » Fixed

Committed and pushed to 8.x. Thanks!

  • webchick committed cd952ba on 8.0.x
    Issue #1413670 by mgifford | daniel.nitsche: Document 'show row weights...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.