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.

Autocomplete single select

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.

Demo - autocomplete multiselect

How to include on page

<label for="input2">
    Town
</label>
<div>
    <input type="text" id="input2" style="width:200px"/>
</div>
<script>
    visionaustralia.makeAutocompleteMulti("input2",myMatch);
</script>

Multiselect workings

Code after setup has run

<label for="input2">
    Town
</label>
<div>
    <div role="list">
        <div role="listitem" tabindex="-1">
            No values selected
        </div>
    </div>
    <span id="va-acdc1">
        Start typing, then select results below the input field. Selected values are displayed in the list above
    </span>
    <input id="input2" autocomplete="off" aria-describedby="va-acdc1" type="text">
    <span aria-live="assertive"></span>
</div>

Code with options available and a few options already selected

<label for="input2">
    Town
</label>
<div>
    <div role="list">
        <div role="listitem">
            Box Hill
            <button type="button" aria-label="Remove Box Hill">
                <svg width="11px" height="11px" viewBox="0 0 100 100" focusable="false">
                    <path d="M 20,20 l 60,60 M 20,80 l 60,-60"></path>
                </svg>
            </button>
        </div>
        <div role="listitem">
            Dixons Creek
            <button type="button" aria-label="Remove Dixons Creek">
                <svg width="11px" height="11px" viewBox="0 0 100 100" focusable="false">
                    <path d="M 20,20 l 60,60 M 20,80 l 60,-60"></path>
                </svg>
            </button>
        </div>
    </div>
    <span id="va-acdc1">
        Start typing, then select results below the input field. Selected values are displayed in the list above
    </span>
    <input id="input2" autocomplete="off" aria-describedby="va-acdc1" type="text">
    <span aria-live="assertive">
        2 results
    </span>
    <button aria-label="Close results">
        <svg width="16px" height="16px" viewBox="0 0 100 100" focusable="false">
            <path d="M 20,20 l 60,60 M 20,80 l 60,-60"></path>
        </svg>
    </button>
    <div role="list" class="vaautocomplete">
        <div role="listitem">
            <button aria-label="Aberfeldy Township" role="checkbox" aria-checked="false">
                <span class="check" aria-hidden="true">
                    
                </span>
                <span style="text-decoration:underline;">
                    Ab
                </span>
                erfeldy Township
            </button>
        </div>
        <div role="listitem">
            <button aria-label="Wallaby Creek" role="checkbox" aria-checked="false">
                <span class="check" aria-hidden="true">
                    
                </span>
                Wall
                <span style="text-decoration:underline;">
                    ab
                </span>
                y Creek
            </button>
        </div>
    </div>
</div>

Download

vaautocomplete.js

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.

Terms of Use

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.

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