danielantelo/accessible-ajax-dropdown.html

## accessible-ajax-dropdown.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Accessible Ajax Select Elements</title>
    <meta name="description" content="An example of how to markup accessible tabs with aria attributes">
    <meta name="keywords" content="template, html, accessible, tabs, usability, ARAI, WAI-ARIA">

    <style>
        /* placess accesibility info texts off screen */
        .access { position: absolute; left: -9999em;}
    </style>
</head>
<body>
    <h1>Accessible Ajax Select Elements</h1>
    <form>
        <fieldset>
            <legend>Chained dropdowns</legend>
            <!-- some off screen text can help screen readers describe element behaviour to the user -->
            <p class="access">You must first select a country, this will automatically populate the relevant cities.</p>
            <label for="country">Country</label>
            <select id="country" name="country" aria-controls="city" title="Selecting a country will automatically update the cities available">
                <option value="">Select a country...</option>
                <option value="a">Country A</option>
                <option value="b">Country B</option>
                <option value="c">Country C</option>
            </select>
            <label for="city">Secondary field</label>
            <select id="city" name="city">
                <option value="">Select a country first ...</option>
            </select>
        </fieldset>
        <fieldset>
            <legend>Dropdown controlled visible content</legend>
            <!-- some off screen text can help screen readers describe element behaviour to the user -->
            <p class="access">By selecting a type you want to view, the below panel will update with the relevant content.</p>
            <label for="type">Type</label>
            <select id="type" name="type" aria-controls="content" title="Selecting a type will update the content below">
                <option value="">Select a country...</option>
                <option value="1">Type 1</option>
                <option value="2">Type 2</option>
                <option value="3">Type 3</option>
            </select>
            <div id="content" aria-live="polite" aria-relevant="additions removals" aria-hidden="true">
                <!-- content loaded via ajax -->
            </div>
        </fieldset>
    </form>

    <!-- Javascripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            /**
             * Change event on chained select
             */
            $('select#country').change(function() {
                // an ajax call may return the following json (i.e. $.getJSON)
                var data = '{"0":"City '+Math.floor(Math.random()*10)+'", "1":"City '+Math.floor(Math.random()*10)+'", "2":"City '+Math.floor(Math.random()*10)+'"}';
                // parse it
                var values = jQuery.parseJSON(data);
                // get a reference to the secondary dropdown
                var select = $('select#city');
                // empty current values
                select.empty();
                // populate second dropdown
                $.each(values, function(key, value) {
                    select.append($("<option />").val(key).text(value));
                });
            });

            /**
             * Change event on chained select
             */
            $('select#type').change(function() {
                //$.get('data/content/' + $('select#type').val(), function(content) {
                    // an ajax call may return the following wysiwyg content
                    var content = '<p>some wysiwyg content from server ' + Math.floor(Math.random()*10) + '</p>';
                    // update content div
                    $('#content').html(content);
                    $('#content').attr("aria-hidden", false);
                //});
            });
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Accessible Ajax Select Elements</title>
	<meta name="description" content="An example of how to markup accessible tabs with aria attributes">
	<meta name="keywords" content="template, html, accessible, tabs, usability, ARAI, WAI-ARIA">

	<style>
	/* placess accesibility info texts off screen */
	.access { position: absolute; left: -9999em;}
	</style>
	</head>
	<body>
	<h1>Accessible Ajax Select Elements</h1>
	<form>
	<fieldset>
	<legend>Chained dropdowns</legend>
	<!-- some off screen text can help screen readers describe element behaviour to the user -->
	<p class="access">You must first select a country, this will automatically populate the relevant cities.</p>
	<label for="country">Country</label>
	<select id="country" name="country" aria-controls="city" title="Selecting a country will automatically update the cities available">
	<option value="">Select a country...</option>
	<option value="a">Country A</option>
	<option value="b">Country B</option>
	<option value="c">Country C</option>
	</select>
	<label for="city">Secondary field</label>
	<select id="city" name="city">
	<option value="">Select a country first ...</option>
	</select>
	</fieldset>
	<fieldset>
	<legend>Dropdown controlled visible content</legend>
	<!-- some off screen text can help screen readers describe element behaviour to the user -->
	<p class="access">By selecting a type you want to view, the below panel will update with the relevant content.</p>
	<label for="type">Type</label>
	<select id="type" name="type" aria-controls="content" title="Selecting a type will update the content below">
	<option value="">Select a country...</option>
	<option value="1">Type 1</option>
	<option value="2">Type 2</option>
	<option value="3">Type 3</option>
	</select>
	<div id="content" aria-live="polite" aria-relevant="additions removals" aria-hidden="true">
	<!-- content loaded via ajax -->
	</div>
	</fieldset>
	</form>

	<!-- Javascripts -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
	/**
	* Change event on chained select
	*/
	$('select#country').change(function() {
	// an ajax call may return the following json (i.e. $.getJSON)
	var data = '{"0":"City '+Math.floor(Math.random()10)+'", "1":"City '+Math.floor(Math.random()10)+'", "2":"City '+Math.floor(Math.random()*10)+'"}';
	// parse it
	var values = jQuery.parseJSON(data);
	// get a reference to the secondary dropdown
	var select = $('select#city');
	// empty current values
	select.empty();
	// populate second dropdown
	$.each(values, function(key, value) {
	select.append($("<option />").val(key).text(value));
	});
	});

	/**
	* Change event on chained select
	*/
	$('select#type').change(function() {
	//$.get('data/content/' + $('select#type').val(), function(content) {
	// an ajax call may return the following wysiwyg content
	var content = '<p>some wysiwyg content from server ' + Math.floor(Math.random()*10) + '</p>';
	// update content div
	$('#content').html(content);
	$('#content').attr("aria-hidden", false);
	//});
	});
	});
	</script>
	</body>
	</html>