Difference between revisions of "ARIA Live property"

From Level Access Web Labs
Jump to navigation Jump to search
m (Jon Avila moved page ARIA Lve property to ARIA Live property)
Line 1: Line 1:
 
The news story number below will cycle from 1 to 4 and then back to 1.
 
The news story number below will cycle from 1 to 4 and then back to 1.
 +
Use the radio buttons below the "Controls" heading to adjust the type of live region being used.
  
<html lang=en-us>
+
<html lang="en">
 
   <head>
 
   <head>
 
     <title>Roy Aria Live Regions</title>
 
     <title>Roy Aria Live Regions</title>
<script type="text/javascript">
+
<script type="text/javascript" src="aria-live.js"></script>
  window.onload = run;
 
 
 
  var minimumTime = 3000;
 
  var index=0;
 
  var lrID = "LiveRegion1";
 
  var messagesArray = new Array("News story 1.",
 
"News story 2.",
 
"News story 3",
 
"News story 4");
 
 
 
function updateLiveRegion(liveRegionID, textString){
 
  textNode = document.createTextNode(textString);
 
  targetNode = document.getElementById(liveRegionID);
 
          //targetNode.style.visibility = "hidden";
 
  while (targetNode.firstChild) {
 
    targetNode.removeChild(targetNode.firstChild);
 
  }
 
  targetNode.appendChild(textNode);
 
          //targetNode.style.visibility = "visible";
 
}
 
 
 
function run(){
 
updateLiveRegion(lrID, messagesArray[index++]);
 
if (index > 3){
 
index=0;
 
}
 
window.setTimeout(run, minimumTime);
 
}
 
 
 
</script>
 
 
</head>
 
</head>
 
<body>
 
<body>
Line 42: Line 13:
 
   <div aria-label="live region label" id="LiveRegion1" aria-live="polite" aria-relevant="text" aria-atomic="false"></div>
 
   <div aria-label="live region label" id="LiveRegion1" aria-live="polite" aria-relevant="text" aria-atomic="false"></div>
 
   <hr>
 
   <hr>
 +
<h2>Controls</h2>
 +
<form data-elementid="LiveRegion1">
 +
<fieldset>
 +
<legend>aria-live=</legend>
 +
<input name="arialive" id="aria-live_polite" type="radio" checked /><label for="aria-live_polite">polite</label>
 +
<input name="arialive" id="aria-live_assertive" type="radio" /><label for="aria-live_assertive">assertive</label>
 +
<input name="arialive" id="aria-live_off" type="radio" /><label for="aria-live_off">off</label>
 +
<input name="arialive" id="aria-live_-" type="radio" /><label for="aria-live_-">[REMOVE]</label>
 +
</fieldset>
 +
<fieldset>
 +
<legend>aria-atomic</legend>
 +
<input name="ariaatomic" id="aria-atomic_true" type="radio" /><label for="aria-atomic_true">true</label>
 +
<input name="ariaatomic" id="aria-atomic_false" type="radio" checked /><label for="aria-atomic_false">false</label>
 +
<input name="ariaatomic" id="aria-atomic_-" type="radio" /><label for="aria-atomic_-">[REMOVE]</label>
 +
</fieldset>
 +
<fieldset>
 +
<legend>Role</legend>
 +
<input name="roles" id="role_alert" type="radio" /><label for="role_alert">alert</label>
 +
<input name="roles" id="role_status" type="radio" /><label for="role_status">status</label>
 +
<input name="roles" id="role_log" type="radio" /><label for="role_log">log</label>
 +
<input name="roles" id="role_region" type="radio" /><label for="role_region">region</label>
 +
<input name="roles" id="role_none" type="radio" /><label for="role_none">none</label>
 +
<input name="roles" id="role_-" type="radio" checked /><label for="role_-">[REMOVE]</label>
 +
</fieldset>
 +
</form>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 18:13, 19 June 2017

The news story number below will cycle from 1 to 4 and then back to 1. Use the radio buttons below the "Controls" heading to adjust the type of live region being used.

Roy Aria Live Regions

ARIA (Accessible Rich Internet Applications) Live Regions



Controls

aria-live=
aria-atomic
Role