CODEWITHSUNDEEP
javascriptinputaccessibility
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

Making this form more accessible with JavaScript

I'm tring to make more accessible the following code (inside a form):

<div class="contButton">                                            <p><a tabindex="11" title="home" href="#" class="mx"><span>Buscar un hotel</span></a></p>

   </div>

I suggested the following:

<div class="contButton">
                                            <p><a tabindex="11" title="home" href="#" class="mx"><span>Buscar un hotel</span></a></p>
                                            <input type="submit" style="display:none"/>
                        </div>

But they (i.e. my boss) suggested the following:

<div class="contButton">
    <p>
        <a tabindex="11" title="home" href="#" class="mx">
            <span> <input type="submit" value="Buscar un hotel" onclick="lanzarConsultaDisponibilidad(); return false;" style="float: left; position: relative; color: #333; cursor: pointer; font-size: 14px; font-weight: bold; line-height: 25px; text-decoration: none; background: transparent"></span> 
        </a>
    </p>
</div>

(Of course we would eventually move the in-line CSS code to an external stylesheet.)

But I'm worried about the <a><input/></a>

What do you think?

Upvotes: 0

Views: 75

Answers (1)

Quentin
Quentin

Reputation: 943571

A submit button that is display: none is highly inaccessible. It won't be rendered if CSS in on. (And if it isn't rendered, it can't be navigated to).

Support for input elements inside anchors is dodgy at best, it is so problematic that the HTML 5 draft forbids it.

If you want accessible, then use a plain, simple submit button.

This will:

  1. Look like something that will submit a form (unless you fritz with the styling)
  2. Be available in any list of form controls (i.e. will show up in screen reader's Forms Modes)
  3. Not require JavaScript to function

Upvotes: 3

Related Questions