IE11 JAWS accessibility issue with role alert

Question

role alert is read by JAWS 2020.2001.70 in chrome, firefox but its not reading in Microsoft IE11 and Edge.

The same is also working with mac voiceover in chrome and firefox.

We need to write "show" in the text input and "Role is working" will be automatically read due to role=alert (without tab out)

$(".container > input").keyup(function(){
  if(event.target.value === "show"){
    $(".dl").removeClass("dl_hide");
  }
});

.dl_hide{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input type="text" name="your_name" value="" />
  <div class="dl dl_hide" role="alert" tabindex="0">
   Role is working
  </div>
</div>

Martin Martin · Accepted Answer · 2020-06-01T14:28:33

Firstly, the live region should be present in the DOM at page load. (Not set to display: none.) Now there are exceptions to this as some screen reader/browser combinations do support dynamic loading of live regions. However, as you've noticed with IE, it does not.

Secondly, aria-live regions are only supposed to be read out loud when there is an update to the live region's content.

Try this approach instead:

   <div class="container">
        <input type="text" name="your_name" value="" />
        <div class="dl" role="alert"></div>
    </div>

 $(".container > input").keyup(function () {
    if (event.target.value === "show") {
        $("div.dl").text("Role is working");
    }
});

IE11 JAWS accessibility issue with role alert

1 Answers