Styling Drupal Buttons For Usability
By Gerard McGarry on 20th February 2007, filed in Drupal, Web Design & Standards. You can leave a response below. Tags: Accessibility, CSS, Drupal, Usability, Web Design
I came across this very interesting article by urlgreyhot on how to style the default Drupal buttons for that they provide some visual cues as to which buttons are most important.
In most of the standard Drupal themes, the Preview, Publish and Delete buttons are styled in the same way, which gives equal visual weight to each button. Arguably the most dangerous would be to mistakenly click on the Delete button and wipe out a draft post!
This simple tutorial shows how to style the three buttons so that the Publish button is most prominent, Preview is next and the Delete button is displayed almost as an inline link. Excellent notion, slightly marred in that the solution isn’t particularly accessible for those with poor or no vision (I think the guidelines say that you shouldn’t use color to provide meaning).
I like this idea a lot
Regarding accessibility, it’s OK to use colour to convey meaning, as long as you can provide an equivalent for visually impaired users. A quick bit of research around colour-blindness could help avoid any bad colour combinations, and making some modifications to Drupal at theme level could provide the right semantic info for anyone that’s not getting the visual CSS.
I’ve never done this before, but are you allowed to put submit buttons inside fieldsets?
If that’s not breaking the spec, you could use two fieldsets to enclose the submit buttons - one called, for example, “Save” for the Preview and Submit buttons, and the other called “Delete” for the Delete button.
After that, it shouldn’t be too hard to style it back up to the visual appearance of urlgreyhot’s example.
Mark: Thanks for your comment. I don’t think there’s any technical reason that a submit button wouldn’t work in a fieldset - I’m fairly sure I’ve done it before without issue!