Tuesday, November 30, 2010

13.1 Form and function clashes

I would like to discuss a little design and accessibility quibble I have, once again. Somehow I accidentally deleted the code from my CSS that overrides the focus box that appears on visited links in Firefox. Of course I knew it was a simple fix, but just couldn't remember what it was so I had to dig around on the Internet looking for the answer. Since I couldn't remember what the box was officially called I was stuck searching for "dotted lines in Firefox," "borders on links in Firefox," etc. This search returned lots of forums that described setting images to have a zero border and so forth, which meant I had to comb many of those forums before I found my answer. This process led me to focus on the aforementioned design quibble.

What was striking about this search was the large number of people that responded to the forum inquiries about losing the dotted lines (who fully understood the border was a feature of Firefox) by stating there was a javascript workaround or some code that could tell Firefox to override the focus box, but then wouldn't tell how to do it because it was considered "poor practice."

From David on Adobe forums:
"There are JavaScript techniques for removing focus rectangles, but they are considered very bad practice, and go against the accessibility requirements for websites laid down by most governments."

When later prompted he added:
"As for the focus rectangles, they're deliberately visible. If you were disabled, you would want them to be as visible as possible. If you think they destroy the look of your site, perhaps it's time to rethink your design."

Newsgroup_user added:
"I get it most of the time with most browsers, I came to terms with it about 8 years ago, its just one of those things."


These types of responses were relatively prevalent, and here is my issue. I don't necessarily disagree with the usage of those focus boxes accessibility is a good thing. However, I believe many users do find them annoying, yet would not take the time to disable them in the browser settings. I certainly haven't bothered and I actually know how to do it. So, we are forcing an annoying element on Firefox users, many of whom will assume the web designer intended the focus box as part of the page. How is this different than any other annoying element, such as overuse of animation? Most users that don't require the functionality of the focus boxes will not understand them to be useful or automatic and therefore will not excuse the element as being out of the designer's control.


That leads me to the next point, which is that bad practice or not, most designers are forcing Firefox to override the focus boxes. I don't have the default setting turned off, I use Firefox all the time, and yet I rarely encounter the dreaded dots. I also take issue with the arrogance of stating that if the focus boxes ruin a design the design must be poor to begin with. I don't know of any way to change the color, and that bright blue "link" hue is jarring. If a designer has spent considerable time crafting a color palette that blue just might look very wrong against the page, as it does on mine. It is unfair to say we should just get over it. In fact, I would have much less of an issue with the focus box if you could change the color to something that would be contrasty enough, yet still fit the look of the page.


I also feel that pointing out that you know how to change the effect, but won't divulge the technique because you are "saving" someone from making an error is arrogant. Don't weigh in, or else give the information with the caveat that you believe it should not be used. I might also mention here that Firefox could make the focus box feature default to invisible. Then nobody would bother overriding it since only people that wanted to see the focus box would turn it on. Right now designers are being forced to choose between all or none, which is totally unnecessary. All of that said, there are valid reasons for wanting to control the look of web designs. If I am to be faulted for bad choices by using hot pink, yellow, orange, purple, and powder blue on a page, why would it suddenly be fine to have a bright blue dotted border appear around elements on a page that uses only earth tones, or black, white, and gray? Design choices matter as much as functionality. Form is equal to function in my view (sorry Louis Sullivan, but Modernist ideology is dead) and sometimes "functional" rules get in the way of good communication through aesthetic design, which in itself creates a usage issue.

All of this aside, I eventually did find the rule: a { -moz-outline: none 0; outline: none 0; } and my website looks much better for having put it to good use.

No comments:

Post a Comment