Download & Extend

Make position of #description configurable

Project:Drupal core
Version:8.x-dev
Component:forms system
Category:feature request
Priority:normal
Assigned:penyaskito
Status:needs work
Issue tags:accessibility, Usability

Issue Summary

For short form fields it makes sense to have the #description appear below the form widget; however, in long lists of checkboxes and/or radio buttons it would be nice to be able to have a toggle whether the #description appears above, or below, the form widget.

Although this can be themed with theme_form_element, it is not currently possible to make this change from within the GUI. I see it as being an option similar to setting the size of a text field (default 60 characters, but editable). At present I ask my clients to include their instructions for long form widgets in the "label" (#title) instead of the #description so that the instructions appear at the "right" end of the form.

An example screenshot of the form themed is available here: http://flickr.com/photos/emmajane/2890910395/

I would also like to see this available for CCK "multiple fields" (such as imagefield). This does not use the core function theme_form_element; however, it would be able to take advantage of the new toggle #description above/below setting.

Comments

#1

Component:usability» forms system

Tagging so it's identified to the usability team

#2

Not sure whether this should be an option in the GUI, this will only occur if the description needs to be read in order to successfully fill out the form. emmajane, could supply more context when you ask your clients to do something like this?

#3

Not convinced either. I'm not really seeing a reason *why* you want to do this.

You are putting more text in front of the user before you let them at the actual task of filling in the field. Drupal already has a (bad) habit of showing help text *before* functionality (see the block admin page for an extreme example), the way I see it you are proposing to replicate that same behaviour on a per-field basis. I don't think that will make for more productive forms.

#4

The help text includes instructions on how to fill out the form. For very long form options (e.g. multiple images or very long lists of checkboxes) it is important to explain what is being filled out before people start filling out the options. A label should be a label. It should not contain instructions on how to complete the form.

For example: some of my clients are "unsophisticated" and do not understand the difference between the visual of a checkbox and a set of radio buttons. In this case the information on how to fill out the form must appear BEFORE they start filling out the form especially when the list of options is longer than the page is tall (making the instructions invisible as they are at the bottom of a long list of options). The same is also true for multiple images. People need to see what images they are meant to select before they start choosing images.

#5

I completely agree with emmajane. IF you have a textarea field that is 20 rows high, and you want to supply help text, it's not until you get to the end you actually see what you were "supposed" to put in the field. In addition if you have 10 or 20 check boxes you also have the same problem. I am creating a funding application form for a client in D6 and its imperitive on a number of the items that the user gets the instructions before setting out to answer the question.

These forms will be filled out by the general public and they need the information in a logical way, which to me would be Label, Help text, input.

Just as a side note and would hope for a PM - not to be answered on this thread but emmajane if you had a method to do this in D6 for your clients I'm in dire need of finding one and would really appreciate if you could help me out!!

My 2 pennies :) Adam

#6

Just piling on here, but I would also like to see this. Also, the 'description' internal name is a bit misleading as it's labeled as 'help' text when creating/editing new fields. Maybe a simple solution to this problem is to have a 'Label' field, a 'Description' field below the label but about the widget and a 'Help' field below?

#7

Title:#description above form widget» Make position of #description configurable

#8

Hm. I'm not sure. I don't like the idea of FAPI embedding presentation logic.

Could you not work around this with #prefix?

#9

I would prefer to see this solved in contrib, not in core. I can see the use case but overall still looks like an edge case. The proposal is to make this a per-field option? That would mean mean an extra checkbox for each field in your content type. Overkill for core imo.

#10

Status:active» needs review

As you can see in this screenshot the description for the set of radios is placed below them instead of between title and first radio button.
What if we make this "hardcoded", but only for radios and checkboxes?

AttachmentSizeStatusTest resultOperations
314385_description_position-10.patch835 bytesIdleFailed to run tests on MySQL 5.0 ISAM: failed during invocation of run-tests.sh.View details | Re-test
description_before.png15.41 KBIgnored: Check issue status.NoneNone
description_after.png15.32 KBIgnored: Check issue status.NoneNone

#11

Let's not :). Although I understand the need for this, Drupal descriptions are not ready yet.

#12

I am fine if this is hidden in code, or in contrib.

#13

btw: the code used in my previous patch can be done also in your theme by overriding theme_form_element() (as I do on every of my sites).
Its just a simplification and changing of default behavior.

#14

#prefix won't work (that comes before everything and cannot be edited from the field config screen). If #description were broken into "help above" and "help below" that would work. I'm specifically looking to have optional help text between the Field Label and the input field(s). The solution doesn't need to have a toggle, but I do need to be able to configure the location of the help text per field from the GUI.

#15

+1... on my site users specifically told me that they were very confused by the descriptions being below form elements, especially text areas, so I themed it such that descriptions always appear above the field (just below the label). This looks very good IMHO as long as a label is present. However, for fields that don't have labels this becomes confusing and looks awkward. A good solution for me would be to place descriptions between the label and the field if a label exists, and below the field if there is no label.

Edit: I achieved this by adding a conditional to my theme's template.php that outputs the description prior to the field if a title is present and after the field otherwise

#16

Status:needs review» closed (won't fix)

Sorry, but as explained above - there are clear reasons why we don't do this in core yet. I would be fine, if our descriptions were short -to the point, and get users to understand what we mean - but a lot of descriptions simply don't. And we won't fix this before release - by far. Lets keep this as an overwriteable theme function, which enables the clients that do request this to get this.

#17

Version:7.x-dev» 8.x-dev
Status:closed (won't fix)» active

http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-...

"A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label."

#18

Just FYI, this is the solution I used for my site and theme, and it's received unanimously positive reviews: #557162: Position field descriptions more intelligently

I completely understand hesitancies about implementing this in core, but it does seem to me that this is the most logical default and thus I don't think every single module should have to re-implement it like I did

#19

Thanks for the multiple patches / snippets to fix this. While I agree an option per each field in core is overkill, descriptions above the input and below the label are essential for most of my client work. Consider a wysiwyg textarea that by default fills the screen (i.e. CKeditor), or an unlimited field, or a field collection (multigroup). In each instance the user will not see the help until they scroll, in last case sometimes for a screen or two. This is compounded when a user is editing content that has already been created in unlimited fields or field collections case.

In my opinion help text that gives a user information essential to completing a field must be visible to the user before they begin to fill out that field. It's a clear usability pass/fail.

Some core descriptions are long, multiple lines including allowed html tags and the like. I can see them being distracting above the field. Possible solutions seem to be:

  • Invite some copy specialists rethink and edit down long core descriptions, then place all descriptions on top.
  • Creating a new, secondary description field and defining the purpose of one as essential help text, one as additional, non essential information (analogous to link or img title text in html).
  • Global option for all field descriptions on the Drupal installation.
  • A more complex module that offers choices by content type or UI area. This might be a good project for D7 to gauge interest in the alteration for D8.

If I had to choose one or the other for my whole installation, I would choose top no questions. Lots of text above the field can be a usability speed bump, but not having access to instructions or an essential piece of help text is a usability failure.

#20

Moved and edited from http://drupal.org/node/1122894

From a usability standpoint I believe that the description text should always be shown between the Field Label and the Field itself.

As it currently stands the text is semantically after the Field which I assume means those using screen readers don't hear the text until after they have encountered the field negating it's use.

This is also relevant for sighted users, as most people don't read ahead when filling out forms.

Either way I believe if it is an option it shouldn't change the semantic placement of the description, but only the visible positioning ie. via CSS.

Reference material:
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfri...
From slide 61

http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H65.html
Suggests use of title element on input's

http://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-c...
Section 2

#21

Thanks. What would argue against this though, is that too many of our descriptions are still way too long. Increasing distance between label and form field by more than one line would look silly and I assume be counter-productive too.

#17, @mgifford, that quote refers to labels, not descriptions. Drupal form labels are already on top by default.

#22

Yoroy, I don't think we really have an option it we want Drupal to pass wcag recommendations.

And many organizations websites are required by law to meet the wcag, but most of all I'm concerned about the affect on visually impaired users.

#23

Titles & Labels are both valid ways to identify form controls. In Drupal 7 & FAPI we weren't able to get both elements into the API. In Drupal 8 I am hoping that FAPI gets rewritten so that the concerns expressed about including a title element. The invisible label was a work-around.

I'm updating the link here to the final (rather than 2008 draft) of WCAG 2.0 - http://www.w3.org/TR/WCAG-TECHS/H65.html

The usability team has done some great work on encouraging the community to think more closely about the language that we use. So much of the time it isn't clear enough. Having a one line description would usually be sufficient.

I don't think it's a huge issue, but do think it would be great if there were a default setting where one could switch the location of the description to either above or below the field. Heck, maybe even stuff it into a tooltip type of functionality like http://hanshillen.github.com/aegisdemo/

#24

Yes. I have same issue. sub first

#25

Issue tags:+accessibility

IMO, not a WCAG 2.0 requirement, should anyone disagree please provide SC that we are currently not passing.

I agree that it could be useful for fapi, if not field api to provide this option.

In fapi we could add a new property:

$element['#description'] = t('My description');
$element['#description_position'] = 'before' | 'after' // default to 'after' for all elements

This is a theme setting, and might not be appropriate as a fapi property, however, the options are:

1. Do nothing

* Keep things as we have them now and individuals can solve this themselves with theme overrides (sometimes very complicated if you only want this to apply to certain elements).

2. Use #description_before #description_after

* This would require refactoring of every Core / Contrib module that uses #description. It would also not be semantic and would cause some accessibility problems. There is a 1 - 1 relationship between element and description semantically (elements do not have two descriptions), and in accessibility APIs there is a 1 - 1 UI control - description relationship.

3. Allow for a fapi property to indicate if the description should be rendered before or after the element, and modify theme_form_element() to use this. Field API could then possibly leverage this (in core or contrib) as an additional setting when creating a field.

#26

I attached a patch to #1325488: Add an option to show help text before field and marked as needs review before finding this one. I'm not sure if I should mark it as duplicate, because there have been some comments there too. How should I proceed?

The approach taken is the same one that is described at comment #25 -> option 3, but called #description_display for consistency with #title_display, but #description_position seems to be a better name. Should I change it?

#27

penyaskito: attach your patch here to continue the discussion. I marked the other issue as a duplicate of this. Thanks for checking in here :)

#28

Status:active» needs review

Patch attached.

AttachmentSizeStatusTest resultOperations
description-position-314385-10.patch6.29 KBIdlePASSED: [[SimpleTest]]: [MySQL] 34,020 pass(es).View details | Re-test

#29

New patch using #description_position instead of #description_display.

AttachmentSizeStatusTest resultOperations
description-position-314385-28.patch6.3 KBIdlePASSED: [[SimpleTest]]: [MySQL] 34,020 pass(es).View details | Re-test

#30

Status:needs review» needs work

Testing the patch in #29, and it doesn't work yet for text fields with the text format dropdown selector. The description text for those fields is being output in theme_text_format_wrapper(), not theme_form_element(). Here's the api.drupal.org link:

http://api.drupal.org/api/drupal/core--modules--filter--filter.module/fu...

#31

Assigned to:Anonymous» penyaskito

Thanks for catching it and pointing to me to the right direction, @Lis Lem.

However, if I edit that function the description will be print before the Body label. I'm looking at field_multiple_value_form to see if I find where to put it just after the Body label.

#32

Never noticed this issue, but I have a sandbox module for d6 solving this. Ancient code, I know, but I believe FAPI didn't change that much between D6 –> D7, so if you need something immediately, porting this wouldn't be all that difficult.

#33

Hi kaare. Didn't know about your sandbox. I had a look and the feature is the same than in this patch, but the unsolved problem here is with text with summaries and with formatted text areas, that have changed a lot once fields are included in core since D7.

Thanks anyway for sharing!

nobody click here