DROP Task: Improve accessibility of forms and messages
kika - May 27, 2004 - 15:15
| Project: | Drupal |
| Version: | 7.x-dev |
| Component: | theme system |
| Category: | task |
| Priority: | normal |
| Assigned: | kika |
| Status: | postponed |
| Issue tags: | accessibility, CSS, Needs color accessibility review |
Description
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...
| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| drupal_forms_accessibility_simulation.png | 179.32 KB | Ignored | None | None |
#1
Committed some first changes to HEAD to facilitate these suggestions. See my mail sent to the mailing list for details.
#2
Here's the next task: styling the required form fields
I tend to prefer the combination of #2.1 and #3.1
#3
Improved "styling required" mockup
#4
styling "error" form fields mockup
#5
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...
#6
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.
#7
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
#8
Moving from x.y.z queue to 6.x-dev.
#9
This won't be tackled in 6.x anymore (also, it's merely a theming issue).
#10
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'.
#11
Wow. Neat issue. Subscribe.
#12
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.
#13
Hmmm... Indeed it is webchick.. :-)
This is on my todo list, if none of you guys/girls beat me to it...
#14
Another thing that might be helpful is the jQuery Form Input Example Plugin: Demonstration.
#15
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.
#16
subscribing
#17
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.)
#18
#19
The last submitted patch failed testing.
#20
The results are detailed indeed, but totally incomprehensible.
#21
re-setting to see if it was a broken HEAD.
#22
The last submitted patch failed testing.
#23
and again.
#24
The last submitted patch failed testing.
#25
daa dee da
#26
The last submitted patch failed testing.
#27
#28
Can we please get a screenshot with this patch applied to more easily evaluate it?
#29
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?
#30
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.
#31
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
#32
#33
Just added this related post - http://groups.drupal.org/node/20189
#34
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.