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
- Labels: "Show row weights" and "Weight" -- is it clear what a "weight" is in this context, and what changing a weight will do? (http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-idioms)
Probable WCAG 2.0 failures
- The weight field allows any text to be entered, including symbols where it isn't clear which symbol should have more weight than another (http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-identified)
Some possible solutions to get the discussion started
- Show weights in table by default.
- Change the input of weights to a <select> to avoid user error/confusion.
- Ensure drag widgets are not read by screenreaders (to avoid confusion).
- Consider renaming the "weight" column, or, provide instructive text at the top of the page, or, wrap weight in an <abbr> tag.
- 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.
Comment | File | Size | Author |
---|---|---|---|
#16 | Document-show-hide-row-heights-1413670-16.patch | 1.32 KB | mgifford |
#14 | Document-show-hide-row-heights-1413670-14a.patch | 1.28 KB | mgifford |
#11 | Document-show-hide-row-heights-1413670-11.patch | 1.34 KB | mgifford |
Comments
Comment #1
bowersox CreditAttribution: bowersox commentedGood suggestions! @daniel.nitsche Thanks for filing an issue.
Comment #2
mgiffordInteresting 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.
Comment #3
bowersox CreditAttribution: bowersox commented@mgifford, @Everett Zufelt, @lennwebb and @bowersox discussed this one further at the Sprint. Here are some key issues:
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:
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:
(If there is nesting, the parts in the square brackets should be displayed.)
Comment #4
bowersox CreditAttribution: bowersox commentedComment #5
mgiffordGreat summary, so we just need to get a patch written now.
Comment #6
mgiffordPutting in link to issue about table summary attribute - #1645308: Improve table semantics by adding scope or headers/id attributes to theme_table()
Comment #7
mgiffordSo 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.
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.
Comment #8
bowersox CreditAttribution: bowersox commentedComment #8.0
bowersox CreditAttribution: bowersox commentedConverted the issue summary to focus on documentation rather than UI changes.
Comment #9
mgiffordPerhaps worth mentioning on the help pages:
Comment #10
mgiffordHad 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.
Comment #11
mgiffordI didn't do anything for:
/admin/help/taxonomy
/admin/help/menu_link
But don't want to duplicate this either.
Comment #12
bowersox CreditAttribution: bowersox commented@mgifford's explanation looks good to me!
Comment #13
jhodgdonThis 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?
Comment #14
mgiffordBut 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.
Comment #15
jhodgdonSorry 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.
Comment #16
mgiffordOk, here's the patch as you've described.
I used Show/Hide row weights as it was a shorthand for:
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:
Comment #17
jhodgdonComment #20
jhodgdonComment #21
webchickCommitted and pushed to 8.x. Thanks!