I think we can improve the accessibility/usability of the forms by adding in a few extra snippets of information when there are required fields. At the moment when a field is marked as required or mandatory it will add a red * after it. While this is pretty universal, it may not be obvious for screen readers or new or low skilled internet users.

My suggestion is to make two modifications to the existing form templates:

  1. Add an abbr tag around the asterisk next to individual fields:
    <abbr class="form-required" title="This field is required.">*</abbr>
  2. Where there are required fields in a form, also include a message at the start of the form that an asterisk indicates a required field:
    All fields marked with a <abbr class="form-required" title="This field is required.">*</abbr> are required.

This would help to satisfy WCAG2 SC 3.1.4 -> http://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-located.html

Whether the abbr is required for the message at the top is debatable, but when it comes to actual code changes it's pretty light on. Compatability-wise, the only 'modern' browser I'm aware of that doesn't support the abbr tag is IE6. Whether we need to support that or not, I don't know.

I've put together a patch which includes the code I used to implement the two modifications.

This is my first attempt at contributing so any pointers of how these things are meant to be done are welcome!

CommentFileSizeAuthor
webforms_improvedaccessibility.patch1.47 KBmarblegravy

Comments

marblegravy’s picture

marblegravy commented
Status: Active » Needs review
escoles’s picture

escoles commented

For what it's worth, I'm doing Section 508 validation/mitigation on a webform right now, and the lack of <abbr ></abbr> tags around the required fields is not triggering anything on the validators I'm using. However, it would break custom-set colors in theme stylesheets (important e.g. for reverse-video).

Using these validators:
http://wave.webaim.org/
http://achecker.ca/checker/index.php

quicksketch’s picture

quicksketch
he/him
commented

As you'll probably find quickly, your changes to theme_webform_element() don't actually affect the display of the form at all. In Drupal 6, Webform is unable to take over the presentation of form elements from Drupal core. theme_webform_element() is only used when viewing the results of a submission. In Drupal 7, it is used for both viewing and creating submissions.

As for these changes, I'm not sure they belong in Webform specifically over just being a general accessibility enhancement for all forms in Drupal. I know the first thing that would happen if I applied this patch would be a dozen support requests on how to turn it off.

marblegravy’s picture

marblegravy commented

Both fair comments - I guess I'm coming at it from a hardcore kind of standpoint.

I'm happy to leave out the abbr tags, but I really do think we need to include a legend for what the * stands for. I know the majority of experienced web users will know that it means required, but for the noobz out there it would be beneficial. Whether it's in webform or core, I don't know...

mgifford’s picture

mgifford
he/him
Primary language English
commented

There's a related post here for D8:
http://drupal.org/node/1162802

I do think that for consistency it would be better if this were done in core.

I'm not sure about the need for a legend. I think that most folks know what the * refers to, especially when it's defined as an abbreviation.

Might well be a candidate for bringing into http://drupal.org/project/accessible though, until Drupal 8 is ready.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Status: Needs review » Needs work
Issue tags: +Accessibility

tagging. I thought about closing this issue as I do really think it's not Webform specific & should be dealt with elsewhere.

vmk999’s picture

vmk999 commented

As you'll probably find quickly, your changes to theme_webform_element() don't actually affect the display of the form at all. In Drupal 6, Webform is unable to take over the presentation of form elements from Drupal core. theme_webform_element() is only used when viewing the results of a submission. In Drupal 7, it is used for both viewing and creating submissions.

As for these changes, I'm not sure they belong in Webform specifically over just being a general accessibility enhancement for all forms in Drupal. I know the first thing that would happen if I applied this patch would be a dozen support requests on how to turn it off.

Thanks&regards
vmk

escoles’s picture

escoles commented

Agree w/ vmk999 that the first thing needed would be a way to turn it off or change the parameters. Many developers don't have the latitude to say that text strings are what they are -- e.g., I would need to be able to change the 'required' notification text to match what the writer or creative director give me, meaning I'd have to hack that aspect of the feature right away, in addition to changing all my stylesheets to affect <abbr> instead of <span>.

quicksketch’s picture

quicksketch
he/him
commented
Version: 6.x-3.x-dev » 7.x-4.x-dev
Status: Needs work » Closed (won't fix)

I think changing our span tag to an abbr is a great idea, but it's not within Webform's current level of control.

In D8, we already made this change, but for D7 users, you'd need to override theme_form_required_marker. I think for D7 this will need to be implemented at the theme layer, or as suggested already, the http://drupal.org/project/accessible module.