robdodson · March 19, 2015 18:22
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
  </head>
  <body>
    <!-- You MUST use JavaScript to inject a string into a role=alert container that was already present in the DOM on page load for it to actually speak out loud to the screen reader user! -->
    <!-- http://pauljadam.com/blog/wai-aria-rolealert-on-static-warning-messages-stopping-voiceover-for-ios-from-speaking-css-generated-content-icons-with-aria-hidden/ -->
    <p id="toast1" role="alert"></p>
    <button onclick="showAlert1();">Show (works) Alert</button>
    
    <!-- Dynamically adding role="alert" doesn't work -->
    <p id="toast2">This is another alert</p>
    <button onclick="showAlert2();">Show (broken) dynamic alert</button>

    
    <!-- Creating the toast on the fly and inserting doesn't work -->
    <div id="toast3"></div>
    <button onclick="showAlert3();">Show (broken) created alert</button>

    <!-- Setting text to '', then setting back to original content works -->
    <p id="toast4" role="alert">This will reload its text in the DOM</p>
    <button onclick="showAlert4();">Show (works) reload alert</button>

    <!-- Doesn't work. Not sure why. Probably because region is hidden -->
    <p id="toast5" role="alert" style="visibility: hidden;">This is a timed alert</p>
    <button onclick="showAlert5();">Show (broken) timed alert</button>
    
    <div id="toast6" role="alert"></div>
    <button onclick="showAlert6();">Show timed alert</button>

    <script>
    var toast1 = document.querySelector('#toast1');
    function showAlert1() {
      toast1.textContent = 'This is an alert';
    }

    var toast2 = document.querySelector('#toast2');
    function showAlert2() {
      toast2.setAttribute('role', 'alert');
    }

    var toast3 = document.querySelector('#toast3');
    function showAlert3() {
      var myAlert = document.createElement('p');
      myAlert.setAttribute('role', 'alert');
      var myAlertText = document.createTextNode('yo yo yo! alert time!');
      myAlert.appendChild(myAlertText);
      toast3.appendChild(myAlert);
    }

    var toast4 = document.querySelector('#toast4');
    function showAlert4() {
      var txt = toast4.textContent;
      toast4.textContent = '';
      toast4.textContent = txt;
    }

    var toast5 = document.querySelector('#toast5');
    function showAlert5() {
      setTimeout(function() {
        var txt = toast5.textContent;
        toast5.style.visibility = 'visible';
        toast5.textContent = '';
        toast5.textContent = txt;
      }, 1000);
    }

    var toast6 = document.querySelector('#toast6');
    function showAlert6() {
      setTimeout(function() {
        var toast = document.createElement('p');
        toast.setAttribute('role', 'alert');
        var txt = document.createTextNode('this is a timed alert');
        toast.appendChild(txt);
        toast6.appendChild(toast);
      }, 1000);
    }
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
	</head>
	<body>
	<!-- You MUST use JavaScript to inject a string into a role=alert container that was already present in the DOM on page load for it to actually speak out loud to the screen reader user! -->
	<!-- http://pauljadam.com/blog/wai-aria-rolealert-on-static-warning-messages-stopping-voiceover-for-ios-from-speaking-css-generated-content-icons-with-aria-hidden/ -->
	<p id="toast1" role="alert"></p>
	<button onclick="showAlert1();">Show (works) Alert</button>

	<!-- Dynamically adding role="alert" doesn't work -->
	<p id="toast2">This is another alert</p>
	<button onclick="showAlert2();">Show (broken) dynamic alert</button>


	<!-- Creating the toast on the fly and inserting doesn't work -->
	<div id="toast3"></div>
	<button onclick="showAlert3();">Show (broken) created alert</button>

	<!-- Setting text to '', then setting back to original content works -->
	<p id="toast4" role="alert">This will reload its text in the DOM</p>
	<button onclick="showAlert4();">Show (works) reload alert</button>

	<!-- Doesn't work. Not sure why. Probably because region is hidden -->
	<p id="toast5" role="alert" style="visibility: hidden;">This is a timed alert</p>
	<button onclick="showAlert5();">Show (broken) timed alert</button>

	<div id="toast6" role="alert"></div>
	<button onclick="showAlert6();">Show timed alert</button>

	<script>
	var toast1 = document.querySelector('#toast1');
	function showAlert1() {
	toast1.textContent = 'This is an alert';
	}

	var toast2 = document.querySelector('#toast2');
	function showAlert2() {
	toast2.setAttribute('role', 'alert');
	}

	var toast3 = document.querySelector('#toast3');
	function showAlert3() {
	var myAlert = document.createElement('p');
	myAlert.setAttribute('role', 'alert');
	var myAlertText = document.createTextNode('yo yo yo! alert time!');
	myAlert.appendChild(myAlertText);
	toast3.appendChild(myAlert);
	}

	var toast4 = document.querySelector('#toast4');
	function showAlert4() {
	var txt = toast4.textContent;
	toast4.textContent = '';
	toast4.textContent = txt;
	}

	var toast5 = document.querySelector('#toast5');
	function showAlert5() {
	setTimeout(function() {
	var txt = toast5.textContent;
	toast5.style.visibility = 'visible';
	toast5.textContent = '';
	toast5.textContent = txt;
	}, 1000);
	}

	var toast6 = document.querySelector('#toast6');
	function showAlert6() {
	setTimeout(function() {
	var toast = document.createElement('p');
	toast.setAttribute('role', 'alert');
	var txt = document.createTextNode('this is a timed alert');
	toast.appendChild(txt);
	toast6.appendChild(toast);
	}, 1000);
	}
	</script>
	</body>
	</html>