When the right hand doesn’t listen to the left.

January 24, 2010

Topics: Accessibility, Web standards.

Thanks to the power of internet criticism, the code discussed in this blog post has since been fixed! Sometimes just making a complaint is all it takes to get something fixed. I was highly critical of the code authors for this low-quality code; but they truly did care, and made changes. Thank you.

Authoring forms is an important part of keeping the web fully accessible — not just providing access to information, but allowing users to fully interact with the web in all it’s glory. Interactivity is what makes the web powerful and persuasive.

As such, I can’t help but be frustrated when I run across basic form construction which is simply well below the standards I’ve come to expect. A form like this one, for example, is incredibly irritating to my sense of what the web should be:

...[numerous similar fields deleted to avoid boring the hell out of you]...
First Name:
Last Name:

Please sign me up to get occasional information from select sponsors, partners, and other fun people.

Discount code (if applicable):

But in this case, it’s not just the nature of the form itself. There’s a lot wrong here — the use of table for layout is a big problem, but even if you’re accepting the table as logical (and there is a particular logic which would except tables for forms,) the lack of a summary or headings in that table and the use of empty table cells to provide spacing is a big problem. Then we look at the form itself — not a label element in sight; instead we have plain text using a span and class to indicate if a field is required. There’s no coded indication that a field is required; it’s a purely visual indicator.

My sense of accessibility hurts.

And do you want to know where this code came from? Here it is.

Here are a few good articles on high quality form construction – but don’t bother reading them. After all, they didn’t.

  • Sensible Forms
  • Pretty Accessible Forms
  • Making Compact Forms more Accessible

This is something that pisses me off; but you can find it everywhere. Large organizations responsible for web publishing don’t always maintain the standards they talk about. Is it just talk, then? Does the fact that An Event Apart does what A List Apart condemns mean following standards and implementing accessibility doesn’t mean anything?

Thankfully, no. It does mean that web sites aren’t perfect; and the people doing the labor are frequently not the people who know best how it should be done. But it is a problem — as much as we can evangelize best practices, it doesn’t mean that they’ll be used.

There’s a lot of pressure in the web industry to produce fast results. Sometimes this means people take shortcuts; sometimes it means hiring people who may not be as fully trained or qualified as you really wish you had; and sometimes it means things just go wrong.

But I’m left with a definite feeling of frustration to find that a leading web standards event like An Event Apart should exhibit this kind of HTML (HyperText Markup Language) on their web site.

How can this be avoided?

Ooh, that’s a tough one. Work processes, new employees, insufficient testing — all of these can allow inferior code onto a site. As a freelance designer, it’s positively rare that I have sole control over new content or template changes after the initial launch. As a member of a team, I can only imagine that it’s even more difficult — anybody with sufficient permissions to commit a change can change the overall level of competency exhibited on the site.

Application of a tool like Marco Battilani’s Big Red Angry Text technique can help, but it’s a little scary to put into a published site if you know that the editing won’t always be done by knowledgeable people. It may demonstrate mistakes, but can sometimes serve to do nothing more than piss off or frustrate your client or staff. It depends on the control and education you’ve been able to impose.

  1. Educate. Teach the people who will be doing work on the site as much as you can – the what and the why.
  2. Review the site. Review the work that’s been done; a 30 second glance at the code is likely to result in fixing at least some errors, and will hopefully prevent future errors of the same type.
  3. Provide tools for self-checking. Not a first choice, since all automated tools are flawed by their very nature, but they can still be of use.

It’s not always practical; but if following these steps is at all an option, it’s really worthwhile.

Have something to contribute?

« Read my Comment Policy

5 Comments on “When the right hand doesn’t listen to the left.”

  1. I appreciate your response, Kevin. I’m glad to know that you’re taking a look at it – I look forward to peeking at the revised code!

    I do understand how older projects, shall we say…accumulate.

  2. Joe,

    The HTML (HyperText Markup Language)/CSS was written by Nova Fabrica, not An Event Apart or A List Apart. It is our code and Nova Fabrica holds the copyright. As such, I own up to all the mistakes you noted.

    You expressed interest in how it got this way. In large part because this particular code is many years old and hasn’t evolved the way it should have. It’s like cleaning your closets–if you don’t do it every spring, it’s easy to let a few years slip by before you get to it.

    But once someone opens your closet and items topple on top of you, you can’t ignore it. So we’ll be working to resolve some of the issues you noted.


  3. That was definitely a thought which occurred to me, as well. Now, my initial thought was something along the lines of subcontracting — I don’t know Kevin, so I know nothing about his work process.

    Now, a second thought was that what Kevin actually provided was a site build with templates, and that this page was actually created from that template by an employee of An Event Apart. The visual flaws (overflow from the form into the right hand white space) also suggested this possibility.

    I’m not inclined to attribute the problem to a specific person; I have no way of knowing.

    Also, on the work-for-hire question — if this was done under freelance auspices, technically Kevin or his company do own the copyright, unless the two companies prepared a transfer of rights document on the design and related elements. Work-for-hire rights only apply to direct employment situations. That said, however…I’m still surprised to see an actual claim of copyright.

  4. From the source of the page, 2nd attempt:

    <meta name=”author” content=”Kevin Skoglund, Nova Fabrica” />
    <meta name=”copyright” content=”Nova Fabrica” />

    (Unrelated oddity: he claims copyright on work-for-hire?)

  5. I was going to lay the blame on the cheap labor of dubious quality available at elance, rentacoder, etc.. but out of curiosity checked the source of the full page, to find this:

    Well, now. Kevin isn't a $6/day code monkey; he writes books and is the founder of this particular web development company.

    Not that the sins committed here are so bad (compared to the majority of the HTML (HyperText Markup Language) that's flushed through the internet tubes!), but this is a guy who should be producing sparkling model code.

    [Aside: how do I preview my post? I have no clue what will happen to the tags...]