Hello,

I have used a date popup/date picker in 'date from' and 'date to' fields. It fails the WAVE accessibility evaluation since the input element does not have a label associated. Could you please let me know how to fix this or if there is any patch available. Let me know if I need to provide you with more details.

Thank you.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mgifford’s picture

Issue tags: +Accessibility

I haven't reviewed this with WAVE. What was the error you received?

jkirby’s picture

Hi,

I'm having the same issue with the date_popup picker when using it in a form. My understanding is that it's not specific to WAVE, but is a general accessibility issue under the WCAG2.0 guidelines. Basically an input element on a form should have a corresponding label, explicitly associated using the for attribute. Currently, this has failed our review due to the for attribute being associated to the wrapping div of the input element, not the input itself. See below:

<div class="form-item form-type-date-popup form-item-published-date-start">
    <label for="edit-published-date-start">Published From </label>
    <div id="edit-published-date-start" class="date-padding"><div class="form-item form-type-textfield form-item-published-date-start-date">
        <input type="text" id="edit-published-date-start-datepicker-popup-0" name="published_date_start[date]" value="10/07/2011" size="20" maxlength="30" class="form-text hasDatepicker date-popup-init"> 
        <div class="description"> E.g., 10/07/2012</div>
    </div>
</div>

Currently this is a mojor issue for us as we need to meet the WCAG2.0 AA guidelines. I would also be very interested in a patch or workaround for this and am happy to help out on the development work

mgifford’s picture

WAVE's pretty good. I wasn't trying to suggest that it wasn't promoting good accessibility best practices in line with WCAG.

Do you have an example of this somewhere? I don't have a convenient install to poke at. Do you have any resources to put into this? Ultimately it starts with someone writing a patch.

This is a module that is an issue considered for D8 core #501428: Date and time field type in core so accessibility is more of a concern.

mgifford’s picture

Two related links about Calendar accessibility.

This might be one of the best ones as far as examples:
http://developer.yahoo.com/yui/calendar/

Also, a useful guide here:
https://www.webaccessibility.com/best_practices.php?technology_platform_...

David_Rothstein’s picture

Title: Accessibility issue for date popup/date picker » Date and time form elements do not have accessible labels when the label position is set to 'Within' or 'None'
Version: 7.x-2.5 » 7.x-2.x-dev
Component: Date Popup » User interface
Category: support » bug
Status: Active » Needs review
FileSize
7.63 KB
7.6 KB

This is a more general issue, I think, not limited to the date popup widget. (I ran into it with a select widget myself.)

Here's a patch that goes through the Date module and makes sure all widgets have labels for screen reader users even if they don't display visually.

Note: I needed a version of this patch for an older version of the Date module myself (and the code was slightly different so that the same patch didn't apply). I'm posting that too but feel free to ignore it. The one to review is the second one since that's against the latest 7.x-2.x-dev code.

David_Rothstein’s picture

Note that #2 mentions the existence of orphaned form labels as well, but that's not quite the same thing as a missing form label (which my patch fixes).

For the orphaned form label issue, see discussion in #600236: Invalid XHTML "label for" when using popup.

David_Rothstein’s picture

By the way, I think a side effect of my patch is that it fixes some other functional bug as well:

-      $sub_element['ampm']['#options'] = array('' => '-' . theme('date_part_label_ampm', array('part_type' => 'ampm', 'eleement' => $element))) + $sub_element['ampm']['#options'];
-    }
-    elseif ($element['#date_label_position'] != 'none') {
-      $sub_element['ampm']['#title'] = theme('date_part_label_ampm', array('part_type' => 'ampm', 'element' => $element));
+      $sub_element['ampm']['#options'] = array('' => '-' . $label) + $sub_element['ampm']['#options'];

Note the misspelling of the array key ('eleement') in the first line of the old code.

Status: Needs review » Needs work

The last submitted patch, date-label-accessibility-1571258-5.patch, failed testing.

David_Rothstein’s picture

Status: Needs work » Needs review

That test failure looks unrelated.

mgifford’s picture

podarok’s picture

Assigned: Unassigned » vijaycs85
Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

#5 looks good
RTBC

vijaycs85’s picture

Status: Reviewed & tested by the community » Fixed

Committed b248f8f and pushed to 7.x-2.x. Thanks!!!

vijaycs85’s picture

Assigned: vijaycs85 » Unassigned

Status: Fixed » Closed (fixed)

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