This AutoComplete example demonstrates how to make the widget more screenreader accessible.
Implementers who are working with data from third-party sources, user input data, or otherwise untrustworthy sources should be sure to read the Security Considerations section of the AutoComplete user guide.
There are a few simple things you should do to make your AutoComplete implementation more screenreader accessible.
First, provide a label element for your input field. Within this label, you can include a span that is styled via CSS to be displayed offscreen with helpful text that screenreaders will read aloud.
If you insert the span element that holds the screenreader text into the label dynamically at runtime, most screenreaders will read it aloud each time only when the user focuses on the input for a new AutoComplete interaction, instead of during regular page browsing.
By setting your AutoComplete's
typeAhead property to true, screenreaders (in focus mode) will read aloud each suggestion as the user navigates them with the up and down arrow keys.
By default, AutoComplete's
autoHighlight property is enabled, which may add confusion when screenreaders read aloud the first suggestion when it is autohighlighted. To avoid this scenario, disable the
Note: Logging and debugging is currently turned off for this example.