This page is under re-construction - give it a week and it will be ready
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.
Often, 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.
This page provides two autocomplete controls with a good level of accessibility:
- Single-select autocomplete
- Multi-select autocomplete
<label for="input1">Town</label> <input type="text" id="input1"/>
The file vaautocomplete.js" can be obtained from our downloads page
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.
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.
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.
. 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.
This work is licensed under a
Creative Commons License