Autocomplete

Autocomplete controls consist of an input field and a list of suggested values. As you type in the input field, matching values are displayed so you can choose one of them.

Most autocomplete controls are not accessible to screen reader users because the users cannot access the matching values or do not know that values are available.

The autocomplete provided below has a good level of accessibility. To use, download the script, add it to your page and specify the id of the input field. You also need to supply a match function that returns an array of matching values for a given text. The script comes with a default match function that removes an existing combo box and uses the values to supply matches.

Try here:

Code example

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" src="vaautocomplete.js"></script>
<script
type="text/javascript"> visionaustralia.makeAutocomplete("input1",myMatch);
</script>


<label
for="input1">Town</label> <input type="text" id="input1"/>

Download

The file vaautocomplete.js" can be obtained from our downloads page

Notes

Forms mode

When a screen reader is used to type text in a form field it is in "forms mode". When in forms mode, all keys goes through to event handers.

Autocomplete controls are often inaccessible because the screen reader leaves forms mode when the user navigates from the input field to the suggestions and suddenly the event handlers do not work as expected. Also, the list of suggestions is often placed at the bottom of the page (but positioned below the input field) and therefore it will not be straightforward to move between input field and suggestions.

The autocomplete control supplied on this page inserts the suggestions in the source code immediately below the input field and uses focusable elements (buttons) for each suggestion. Therefore, it doesn't matter if the screen reader stays in forms mode or not.

Double step

When pressing the Down Arrow to move from the input filed to the suggestions, screen readers often leaves forms mode. This means that first the event handler kicks in and moves the focus down one step, then forms mode is turned off and the screen reader moves down a second step (the default action for Down Arrow).

This has been addressed by adding a slight time delay in the even thandler before it places focus on the first item in the list of suggestions.

Note

When the script runs, it adds the text " - type to filter then select from list below" to the label for the input field. If multiple autocomplete controls are used on a page and users are likely to use the controls repeatedly, it will be helpful to change this text to " - autocomplete" or " - filtercontrol". This can be done by amending the script.

Terms of Use

Developed by Pierre Frederiksen . Pierre is a Digital Access Specialist at Vision Australia

This software is being provided "as is", without any express or implied warranty. In particular, Vision Australia does not make any representation or warranty of any kind concerning the reliability, quality, or merchantability of this software or its fitness for any particular purpose. additionally, Vision Australia does not guarantee that use of this software will ensure the accessibility of your web content or that your web content will comply with any specific web accessibility standard.

Creative commons licence - logo
This work is licensed under a Creative Commons License






Print Print larger font