YUI Library Examples: AutoComplete Control: Screenreader Accessibility

There are a few simple things you should do to make your AutoComplete implementation more screenreader accessible.

Label your input field

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.

Insert the screenreader label text dynamically

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.

Enable the `typeAhead` feature

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.

Disable the `autoHighlight` feature

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 autoHighlight feature.

Sample Code

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 \| ?

YAHOO.example.Accessibility = function() {
    // Set up DataSource and AutoComplete instances
    var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates, {responseSchema: {fields : ["state"]}});
    var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);

// Set up span element with screenreader text
    var elLabel = YAHOO.util.Dom.get("myInputLabel"),
        origLabel = elLabel.innerHTML,
        screenreaderLabel = '<span style="position:absolute;left:-999em;">Use the arrow keys to navigate suggestions.</span>';

// Insert the screenreader text whenever user starts an AutoComplete interaction
    oAC.textboxFocusEvent.subscribe(function(){elLabel.innerHTML += screenreaderLabel;});
    oAC.textboxBlurEvent.subscribe(function(){elLabel.innerHTML = origLabel;});

// The typeAhead feature must also be set to true for screenreader support
    oAC.typeAhead = true;

// Turn off autoHighlight for less confusion
    oAC.autoHighlight = false;

return {
        oDS: oDS,
        oAC: oAC
    };
}();

Configuration for This Example

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.

YUI Library Examples: AutoComplete Control: Screenreader Accessibility

Label your input field

Insert the screenreader label text dynamically

Enable the `typeAhead` feature

Disable the `autoHighlight` feature

Sample Code

Configuration for This Example

YUI Logger Output:

Logger Console

AutoComplete Control Examples:

More AutoComplete Control Resources:

YUI Library Examples: AutoComplete Control: Screenreader Accessibility

AutoComplete Control: Screenreader Accessibility

Label your input field

Insert the screenreader label text dynamically

Enable the typeAhead feature

Disable the autoHighlight feature

Sample Code

Configuration for This Example

YUI Logger Output:

Logger Console

AutoComplete Control Examples:

More AutoComplete Control Resources:

Enable the `typeAhead` feature

Disable the `autoHighlight` feature