Autocomplete controls consist of an input field and a list of suggested results. As you type in the input field, matching results 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 results or do not know that results are available.
The autocomplete provided here 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 an example match function.
Single select autocomplete implemented via ARIA now have good support. Therefore the alternative single select autocomplete we have previously supplied is no longer needed.
We'll provide usability recommendedations for ARIA autcompletes shortly.
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.
Developed by Pierre Frederiksen. Pierre is a Principal Technical Consultant 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