Difference between revisions of "ARIA Alertdialog"

From Level Access Web Labs
Jump to navigation Jump to search
 
(23 intermediate revisions by 4 users not shown)
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';
document.getElementById('alertdg_close').focus();
+
        document.getElementById('alertdg_close').focus();
 +
 
  }  
 
  }  
 
  function closeDialog(){
 
  function closeDialog(){
Line 10: Line 12:
 
document.getElementById('setFocusBtn').focus();
 
document.getElementById('setFocusBtn').focus();
 
  }
 
  }
  function timer(){
+
  window.onload = function(){
setInterval(function(){myTimer()},1000);
+
setInterval(myTimer,5000);
  }
+
  };
 
  function myTimer(){
 
  function myTimer(){
var d=new Date();
+
seconds = (seconds>0)?seconds-1:20;
var t=d.toLocaleTimeString();
+
document.getElementById("clock").value = seconds;
 
 
document.getElementById("clock").value = t;
 
 
}
 
}
  
Line 36: Line 36:
  
 
</head>
 
</head>
<body onload="timer();">
+
<body>
  
 
<h1> Alertdialog example </h1>
 
<h1> Alertdialog example </h1>
 
<!--<label for="myAnswer" >Type in your answer: </label>
 
<!--<label for="myAnswer" >Type in your answer: </label>
<input type="text" id="myAnswer">-->
+
<input maxlength="10" type="text" id="myAnswer">-->
<button id="setFocusBtn" onclick="showAlert()">set focus</button>
+
<button id="setFocusBtn" onclick="showAlert()">Display Alert Dialog</button>
  
 
<div class="aldg" id="alertdg"  style="display:none" >
 
<div class="aldg" id="alertdg"  style="display:none" >
Line 50: Line 50:
 
   <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="4"/> 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>
Line 61: Line 61:
 
</div>
 
</div>
 
</div> <!-- popup conainer -->
 
</div> <!-- popup conainer -->
 
<!-- <p id="alertdg_title" >Alert Box</p>
 
  <p id="alertdg_message">Incorrect Password!</p>
 
  <input id="alertdg_close" type="button" value="Close" onkeydown="closeDialog()" onclick="closeDialog()"> -->
 
  
 
</div>
 
</div>
  
<div>
+
<div style="padding-top:1em;">
   Test: <input type="text" />
+
   <label for="s1"> Placeholder:</label> <input id="s1" type="text" placeholder="placeholder" />
 
</div>
 
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>
 +
 +
==Results==
 +
 +
{| class="wikitable" border="1"
 +
|-
 +
! '''JAWS 2018 IE 11'''
 +
! '''JAWS 2018 FF 61'''
 +
! '''NVDA 2018.2.1  FF 61'''
 +
! '''JAWS 2018 Chrome'''
 +
! '''NVDA 2018.2.1  Chrome'''
 +
! '''VoiceOver Safari iOS 11.4.1'''
 +
! '''TalkBack 6.2.1 Chrome'''
 +
|-
 +
|When the Alert Dialog is displayed The Name and Role of the Dialog are Not announced automatically. 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 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. || 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. || 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 not announced automatically. The rest of the page content outside of the dialog is announced when it should not be when the arrow keys are used. ||When the Alert Dialog is displayed The Name and Role of the Dialog are Not announced automatically. 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 announced when it should not be. ||When the Dialog appears, the text Your Session will time out in is announced repeatedly. this makes it impossible to read the rest of the page. It is possible to activate the Continue Working link to dismiss the dialog. ||When the dialog is displayed, the Name, Role and text of the dialog are not announced automatically. The text of the edit field in the dialog is not announced automatically. It is possible to swipe through the dialog content. It is possible to swipe to countent outside of the dialog when the dialog is displayed. This is not the expected behavior.
 +
|-
 +
|}
 +
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 00:48, 20 November 2018

Alertdialog example

Results

JAWS 2018 IE 11 JAWS 2018 FF 61 NVDA 2018.2.1 FF 61 JAWS 2018 Chrome NVDA 2018.2.1 Chrome VoiceOver Safari iOS 11.4.1 TalkBack 6.2.1 Chrome
When the Alert Dialog is displayed The Name and Role of the Dialog are Not announced automatically. 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 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. 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. 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 not announced automatically. The rest of the page content outside of the dialog is announced when it should not be when the arrow keys are used. When the Alert Dialog is displayed The Name and Role of the Dialog are Not announced automatically. 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 announced when it should not be. When the Dialog appears, the text Your Session will time out in is announced repeatedly. this makes it impossible to read the rest of the page. It is possible to activate the Continue Working link to dismiss the dialog. When the dialog is displayed, the Name, Role and text of the dialog are not announced automatically. The text of the edit field in the dialog is not announced automatically. It is possible to swipe through the dialog content. It is possible to swipe to countent outside of the dialog when the dialog is displayed. This is not the expected behavior.