How to notify screen readers using WAI-ARIA that a div is now visible

Question

How do you notify screen readers using WAI-ARIA that a div is now visible?

If we got the html

Present main content
         


        

Answer 1

I created a sample showing how you could using role="alert" to notify screen reader users when they are approaching the character limit of a textarea element, if you are trying to understand how to use the alert role, it may help:

There's more to it, but here's the small part of the code which produces the alert:

if (characterCount > myAlertTheshold) {
       var newAlert = document.createElement("div"); /* using the native js because it's faster */
       newAlert.setAttribute("role", "alert");
       newAlert.setAttribute("id", "alert");
       newAlert.setAttribute("class","sr-only");
       var msg = document.createTextNode('You have ' + charactersRemaining +' characters of ' + myMaxLength + ' left');
       newAlert.appendChild(msg);
       document.body.appendChild(newAlert);
     }

http://codepen.io/chris-hore/pen/emXovR