This AutoComplete example demonstrates how to make the widget more screenreader accessible.
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.
typeAhead
featureBy 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.
autoHighlight
featureBy 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 autoHighlight
feature.
Markup:
1 | <div id="myAutoComplete"> |
2 | <label id="myInputLabel" for="myInput">Enter a state:</label> <input id="myInput" type="text"> |
3 | <div id="myContainer"></div> |
4 | </div> |
view plain | print | ? |
JavaScript:
1 | YAHOO.example.Accessibility = function() { |
2 | // Set up DataSource and AutoComplete instances |
3 | var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates, {responseSchema: {fields : ["state"]}}); |
4 | var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS); |
5 | |
6 | // Set up span element with screenreader text |
7 | var elLabel = YAHOO.util.Dom.get("myInputLabel"), |
8 | origLabel = elLabel.innerHTML, |
9 | screenreaderLabel = '<span style="position:absolute;left:-999em;">Use the arrow keys to navigate suggestions.</span>'; |
10 | |
11 | // Insert the screenreader text whenever user starts an AutoComplete interaction |
12 | oAC.textboxFocusEvent.subscribe(function(){elLabel.innerHTML += screenreaderLabel;}); |
13 | oAC.textboxBlurEvent.subscribe(function(){elLabel.innerHTML = origLabel;}); |
14 | |
15 | // The typeAhead feature must also be set to true for screenreader support |
16 | oAC.typeAhead = true; |
17 | |
18 | // Turn off autoHighlight for less confusion |
19 | oAC.autoHighlight = false; |
20 | |
21 | return { |
22 | oDS: oDS, |
23 | oAC: oAC |
24 | }; |
25 | }(); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
INFO 52ms (+35) 10:02:27 AM:
LogReader instance0
LogReader initialized
INFO 17ms (+2) 10:02:27 AM:
AutoComplete instance0 myInput
AutoComplete initialized
INFO 15ms (+14) 10:02:27 AM:
DataSource instance0
DataSource initialized
INFO 1ms (+0) 10:02:27 AM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings