Support Article
Screen reader reads text behind the modal window
SA-23151
Summary
User is facing an issue where one can still get to the main content of the page using the UP and DOWN ARROW keys when the modal window is active. This causes confusion for screen reader users.
Error Messages
None. JAWS incorrectly reads the content behind modal window while using UP and DOWN arrows.
Steps to Reproduce
On a modal window, press up-arrow or down-arrow key on key board and the screen reader will start reading text from main screen (behind Modal window).
Root Cause
A defect in Pegasystems’ code or rules.
Resolution
Perform the following local-change:
Add below code in USERWORKFORM and call "toggleJawsAria" function before and after launching modal dialog.
<script>
var modaldialogshown=false;
function toggleJawsAria()
{
if($(".harnessContent").attr("aria-hidden")!="true")
{
$(".harnessContent").attr("aria-hidden","true");
$(".harnessContent").attr("aria-disabled","true");
$(".harnessContent").attr("role","presentation");
if(detectIE()){addIndicatorElements();}
}
else
{
$(".harnessContent").attr("aria-hidden","false");
$(".harnessContent").attr("role","");
$(".harnessContent").attr("aria-disabled","false");
modaldialogshown=false;
}
}
function addIndicatorElements()
{
setTimeout(function(){
$("#modalWrapper").prepend("<p style='width:0px;height:0px;left:-10000px;top:-1000px;position:absolute;'>You are about to leave modal dialog. Please enter down key.</p>");
$("#modalWrapper").append("<p style='width:0px;height:0px;left:-10000px;top:-1000px;position:absolute;'>You are about to leave modal dialog. Please enter up key.</p>");
console.log("appended");
},3000);
}
function detectIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
return false;
}
</script>
Published May 14, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.