Question

For my html form, it seems that I’m unable to create cross browser hover and pressed states for <button>.

I really want this as it creates good user feedback (and a polished look and feel). With <a> it’s easy to do, but it breaks accessibility rules.

What should I do?

As requested, an example:

<form name="contact" action="index.php" method="post">
    <ul>
        <li>
            <label for="name" class="name">Name</label>
            <input type="text" name="name" id="name" size="30" />
        </li>
        <li>
            <button type="submit" class="submit">Send</button>
            <input type="hidden" name="submit" value="yes">
        </li>
    </ul>
</form>

button.submit
{
    background:#F99;
    font-size:3em;
}

button.submit:hover /* white button with colored text */
{
    background:#FFF;
    color:#F99;
}

Answer 1

The pattern I see myself do over and over with accessibility is to start with what’s accessible to everyone and replace it on the client-side with the preferred solution. Then if they don’t have that technology, it degrades gracefully. Specifically we’re talking about javascript here.

For instance, start by using a normal button in your form. This will work for everyone, regardless of whether or not they have javascript enabled. Then use javascript to replace that button with an anchor tag (so you can use :hover in your css), or simply use javascript to perform the hover effect you want (if you’re using jQuery, you can bind an event to the button’s mouseover).

This means the small subset of people who don’t have javascript enabled and aren’t using a browser that supports more advanced :hover usage won’t see your hover effect, but you’ll ensure that it always degrades gracefully.