JAVASCRIPT

Good Example: Focus moved to AJAX content with tabindex="-1" after a delay

<p><button id="liveButton">Create announcement</button>
<span id="liveRegion" aria-live="assertive"></span></p>
<p><button id="liveButton">Create announcement</button></p>
<script>
$('#liveButton').click(function(){
  var live = $('#liveRegion');
  live.css({
    'display':'inline-block',
    'background-color':'#fff5bc',
    'padding':'0px 4px'
  }).text('Hooray for accessibility!');
  setTimeout(function(){ 
    live.text('');
    live.removeAttr('style');
  }, 3000);
});
</script>

Good Example: Focus moved to AJAX content with tabindex="-1" after a delay

<div id="decContainer"></div>
<script>   
$("#decButton").click(function(){
  $.ajax({
    url: "assets/html/module-dynamic/ajax/declaration.html", 
    type:'GET',
    cache: false,
    success: function(result){
      $("#decContainer").show().html(result);
      var decHeading = $("#decContainer h2:first");
      /* set tabindex="-1" so the heading can receive keyboard focus */
      decHeading.attr('tabindex','-1');
      setTimeout(function(){ 
        /* move focus to the heading after a delay of 1 second */
        $("#decContainer h2:first").focus(); 
      }, 1000);
    }
  });
}); 
</script>