Use absolute positioning and a more logical source order to make forms with optional fields more usable to keyboard users and those using screen readers.

As we’ve seen in the first two examples, forms provide some interesting issues to users of assistive technology like screen readers, in particular as it relates to visual layout versus the linear source order. In this example we’ll take a look at a search form that includes some “optional” radio buttons for refining the search. A typical example might appear as illustrated as follows:

Screen shot of form field with label, search button to the right of the text field and optional radio buttons beneath.

The HTML for this example might be:

<div>
<label for="searchtxt">
Search Terms:
</label>
<input id="searchtxt".../>
<input type="submit" value="Search" />
</div> 
<div class="group">
<div>radio buttons</div>
</div>

This is a fairly natural way to code the form when using a CSS based form layout – visually the first “row” of the form includes a label, a text box and a search button, and the second “row” includes the optional radio buttons that help refine the search.

View the Search form example

Based on what we know about source order, this presents a minor obstacle to a screen reader user as they will encounter the text field, then the search button, and then the radio buttons. They may not realize that the radio buttons exist – the natural tendency is to submit the form once the submit button is reached.

This form layout also causes a minor inconvenience to a keyboard user – to choose the optional radio buttons they must tab past the submit button, and then navigate backwards (often using Shift + Tab) to submit the form.

This problem can be solved by improving the source order and using CSS to absolutely position the Search button as follows:

First, we modify the HTML source:

<div>
<label for="searchtxt">
Search Terms:
</label>
<input id="searchtxt".../>

<div class="group">
<div>radio buttons</div>
</div>

<input id="submitbtn" value="Search" />
</div>

Then we apply the following CSS to visually place the Search button at the top right of the form, much as in the previous examples:

input#submitbtn {
position: absolute;
left: 31em;
}

The result is that we have a form that visually shows the Search button beside the text box, but has a better source order for keyboard and screen reader users. It may also be useful to not position the Search button at all for a Zoom layout, allowing the Search button to fall vertically at the end of the form (while I have implemented the zoom layout in the example, note that it has not been tested with low vision users)

View the Search Form with source ordering Example