Difference between revisions of "ARIA Alertdialog"

From Level Access Web Labs
Jump to navigation Jump to search
Line 2: Line 2:
 
<head>
 
<head>
 
<script>
 
<script>
 +
  var seconds;
 
   function showAlert(){
 
   function showAlert(){
 
document.getElementById('alertdg').style.display='block';
 
document.getElementById('alertdg').style.display='block';
Line 10: Line 11:
 
document.getElementById('setFocusBtn').focus();
 
document.getElementById('setFocusBtn').focus();
 
  }
 
  }
  function timer(){
+
  window.onload = function(){
setInterval(function(){myTimer()},1000);
+
setInterval(myTimer,1000);
  }
+
  };
 
  function myTimer(){
 
  function myTimer(){
var d=new Date();
+
seconds = (seconds>0)?seconds--:20;
var t=d.toLocaleTimeString();
+
document.getElementById("clock").value = seconds;
 
 
document.getElementById("clock").value = t;
 
 
}
 
}
  
Line 36: Line 35:
  
 
</head>
 
</head>
<body onload="timer();">
+
<body>
  
 
<h1> Alertdialog example </h1>
 
<h1> Alertdialog example </h1>
Line 50: Line 49:
 
   <div id="warn" >WARNING! </div>
 
   <div id="warn" >WARNING! </div>
 
     <div id="warn_body">
 
     <div id="warn_body">
       <p>Your session will timeout in </p>
+
       <p id="lbl-clock">Your session will timeout in </p>
 
<p>
 
<p>
         <input id="clock" name="clock" value="20" size="7"/> seconds.</p>
+
         <input type="text" aria-labelledby="lbl-clock" id="clock" name="clock" value="20" size="7"/> seconds.</p>
 
<p>Click the button below or press the space bar to continue.</p>
 
<p>Click the button below or press the space bar to continue.</p>
 
</div>
 
</div>

Revision as of 14:46, 21 June 2017

Alertdialog example

Results

JAWS 17 IE 11 JAWS 17 FF 47 NVDA 2016.2.1 FF 47 VoiceOver Safari iOS 9.3.3 Talkback 4.5.1FF 47 Window-eyes 9 IE 11 Window-eyes 9 FF 47
When the Alert Dialog is displayed The Name and Role of the Dialog are announced as expected. The Text of the Edit field (containing the time) inside of the dialog is not announced automatically. The rest of the page content outside of the dialog is also announced when it should not be. When the Alert Dialog is displayed The Name and Role of the Dialog and dialog text are announced as expected. The Text of the Edit field (containing the time) inside of the dialog is also announced automatically as expected. The rest of the page content outside of the dialog is not announced as expected.