Here's a first sub-task of the greater "Improve the user experience of Drupal forms" metatask.

I took standard Drupal log-in dialog and similar Basecamp (http://www.basecamphq.com) dialog, run them through the VisCheck (a color blindness analyzer)
and added couple of defict simulations of my own.

The results with comments are attached.

For reference, VisCheck simulation URLs are here (but I am not sure how long they gonna stay in cache):

Drupal:

http://www.vischeck.com/vischeck/vischeckImage.php?&img1=http%3A%2F%2Fvi...

Basecamp:

http://www.vischeck.com/vischeck/vischeckImage.php?&img1=http%3A%2F%2Fvi...

CommentFileSizeAuthor
#27 admin.css_.patch259 bytescatch
#17 admin.css_.patch259 bytesgaele
#14 yahoo-registration-form[1].png21.79 KBrobloach
#4 drupal_forms_error_required.jpg76.18 KBkika
#3 drupal_forms_styling_required.jpg112.66 KBkika
#2 drupal_forms_styling_required.png74.47 KBkika
drupal_forms_accessibility_simulation.png179.32 KBkika

Comments

dries’s picture

dries commented

Committed some first changes to HEAD to facilitate these suggestions. See my mail sent to the mailing list for details.

kika’s picture

kika commented
StatusFileSize
new drupal_forms_styling_required.png74.47 KB

Here's the next task: styling the required form fields

I tend to prefer the combination of #2.1 and #3.1

kika’s picture

kika commented
StatusFileSize
new drupal_forms_styling_required.jpg112.66 KB

Improved "styling required" mockup

kika’s picture

kika commented
StatusFileSize
new drupal_forms_error_required.jpg76.18 KB

styling "error" form fields mockup

kika’s picture

kika commented

recommended reading

http://www.stuffandnonsense.co.uk/archives/stylish_accessible_forms.html
http://www.aplus.co.yu/dots/forms/?css=1

cool demo

http://www.sitepoint.com/print/simple-tricks-usable-forms
http://www.sitepoint.com/examples/simpletricks/form-demo.html

additional reading

http://www.formsthatwork.com/ftp/dropdown.pdf
http://lists.interactiondesigners.com/htdig.cgi/discuss-interactiondesig...
http://lists.interactiondesigners.com/htdig.cgi/discuss-interactiondesig...

dries’s picture

dries commented

Any pointers on how we can preserve the "sunkeness" of these form fields? I tried fiddling with paddings and margins of 'form-item input.error' in misc/drupal.css, yet to no avail.

kika’s picture

kika commented

An item to the linkdump:

http://www-106.ibm.com/developerworks/usability/library/us-widget/
Jodi Bollaert defines several basic HTML Web widgets, shows graphic examples, and discusses common usability problems and solutions

coreb’s picture

coreb commented
Version: x.y.z » 6.x-dev

Moving from x.y.z queue to 6.x-dev.

kkaefer’s picture

kkaefer commented
Version: 6.x-dev » 7.x-dev

This won't be tackled in 6.x anymore (also, it's merely a theming issue).

pancho’s picture

pancho
Location UTC+2 🇪🇺 EU
commented
Title: Form accessibility » Improve accessibility of forms and messages
Component: base system » theme system
Priority: Normal » Critical

True, but let's at least tackle it in D7! This is another member of first generation issues that still haven't been solved.
I mark this critical as we are striving to be the most accessible CMS, and the reality is that we are very much behind the 'state of the art'.

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
commented

Wow. Neat issue. Subscribe.

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
commented
Title: Improve accessibility of forms and messages » DROP Task: Improve accessibility of forms and messages

And in fact, let's DROP-ify this.

Completing this task will first require re-running the tests in kika's original post, since the images are over 3 years old now, and reporting on the results. Next, we'll need a patch that solves any accessibility issues within the default theme functions.

Stefan Nagtegaal’s picture

Stefan Nagtegaal commented

Hmmm... Indeed it is webchick.. :-)
This is on my todo list, if none of you guys/girls beat me to it...

robloach’s picture

robloach
he/him
commented
StatusFileSize
new yahoo-registration-form[1].png21.79 KB

Another thing that might be helpful is the jQuery Form Input Example Plugin: Demonstration.

catch’s picture

catch
he/him
Primary language English
commented
Title: DROP Task: Improve accessibility of forms and messages » DROP Task: Improve accessibility of forms and messages

We noticed that the password strength checker has red text on a red background during usability testing at UMN, I can't imagine any way this would pass accessibility requirements so changing title.

aclight’s picture

aclight commented

subscribing

gaele’s picture

gaele commented
StatusFileSize
new admin.css_.patch259 bytes

Re #15: this is about .admin-missing in admin.css.

Here is an online color contrast checker: http://snook.ca/technical/colour_contrast/colour.html

Red text is #FF0000, background is #FFCCCC. The color difference is too low. A text color of #A30000 would do. (Too me it's easier on the eye too.)

lilou’s picture

lilou commented
Status: Active » Needs review
Anonymous’s picture

Anonymous (not verified) commented
Status: Needs review » Needs work

The last submitted patch failed testing.

gaele’s picture

gaele commented

The results are detailed indeed, but totally incomprehensible.

catch’s picture

catch
he/him
Primary language English
commented
Status: Needs work » Needs review

re-setting to see if it was a broken HEAD.

Anonymous’s picture

Anonymous (not verified) commented
Status: Needs review » Needs work

The last submitted patch failed testing.

catch’s picture

catch
he/him
Primary language English
commented
Status: Needs work » Needs review

and again.

Anonymous’s picture

Anonymous (not verified) commented
Status: Needs review » Needs work

The last submitted patch failed testing.

catch’s picture

catch
he/him
Primary language English
commented
Status: Needs work » Needs review

daa dee da

Anonymous’s picture

Anonymous (not verified) commented
Status: Needs review » Needs work

The last submitted patch failed testing.

catch’s picture

catch
he/him
Primary language English
commented
Status: Needs work » Needs review
StatusFileSize
new admin.css_.patch259 bytes
webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
commented

Can we please get a screenshot with this patch applied to more easily evaluate it?

gaele’s picture

gaele commented
Status: Needs review » Active

Forget about the patch.

The old password strength checker was abusing the .admin-missing style. But the whole password strength checker was replaced with something better #199870: Usability: Even better password strength experience. Now .admin-missing is only used on a grey background (for missing modules on the modules page), so #FF0000 is appropriate.

Not sure what to do with the issue. Can we close it? Or should we turn it into "run all of D7 through a color blindness analyzer" after code freeze?

catch’s picture

catch
he/him
Primary language English
commented
Priority: Critical » Normal
Status: Active » Postponed

It'd be good to have a 'run D7 through a color blindness analyzer' -but it might be better discussed in the usability/theming groups (if there's no specific accessibility group). Let's mark this postponed until code freeze.

mgifford’s picture

mgifford
he/him
Primary language English
commented

I just ran the user page through the Vischeck Analyzer.

I had applied the patch, but that seems to no longer be required. The results are up on Flickr.

Mouse-overs seem to be the biggest problem from these tests.

Mike

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +Accessibility
mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +CSS

Just added this related post - http://groups.drupal.org/node/20189

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +Needs color accessibility review

Adding a tag for color accessibility review. Needs to be done for both red/green as well as contrast. Seven in particular uses a lot of greys and the vertical tabs have some issues with the summary text too.

Status: Postponed » Needs review

Re-test of admin.css_.patch from comment #27 was requested by mgifford.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Status: Needs review » Closed (duplicate)

Looking back at the original issue & the screenshots there I am going to mark this as a duplicate of #447816: WCAG violation: Relying on a color by itself to indicate a field validation error which is now set as RTBC.

Also related to #660576: Ensuring Proper Color Contrast for Garland