[英]Screen reader not reading model window automatically
I am trying on a JSP model window is not read automatically by a screen reader.我正在尝试屏幕阅读器不会自动读取 JSP model window。 This modal window is a second modal window first modal window is read automatically.
此模态 window 是第二个模态 window 第一个模态 window 是自动读取的。 But not the second model window.
但不是第二个 model window。
Here is the code:这是代码:
<div id=second-popup style="display:none" aria-live="polite" role="dialog">
<input type="hidden" id="none-label" value="nonetext"/>
<jsp:include page="somepagelinkhere.jsp" flush="true"/>
<html:hidden property="intialized"/>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<html:select styleId="" property="">
<html:options collection="" property="">
</html:select>
<html:select styleId="" property="">
<html:options collection="" property="">
</html:select>
</div>
<c:set var="var1"><bean:message /></c:set>
<input type="hidden" value="" id="removelabel">
<div class="div5">
<form:label property="" >
<select name="country" id="countrylabel" class="country" >
<option value="">${countrieslist}</option>
<c:forEach var="" items="">
<option value=""> ${countrieslists}</option>
</forEach>
</div>
<div id="city" class="citylist">
<form:label property="">
<select name="" id="" class="">
<option value=""></options>
</select>
</div>
</div>
</div>
</div>
,showhide: function(){
$("button").click(function(e){
e.preventDefault;
$("button").attr("aria-hidden","true");
$("second-popup").attr("style","display:block");
$("second-popup").attr("aria-hidden","false");
});
}
$(document).ready(function(){
$("first-popup").attr("tabindex",0);
$("first-popup").attr("tabindex",0);
$("Second-popup").focus();
});
In the above code first div
contains second modal window content code blue print.在上面的代码中,第一个
div
包含第二个模态 window 内容代码蓝图。 I need this to be read automatically read by NVDA screen reader and I tried by putting role="dialog" aria=labelledby="id" aria-describedby=""
on the parent div
, but still screen reader is not reading automatically.我需要 NVDA 屏幕阅读器自动阅读此内容,我尝试将
role="dialog" aria=labelledby="id" aria-describedby=""
放在父div
上,但屏幕阅读器仍然不会自动阅读。
I was able to make the screen reader automatically read the content of a modal overlay with a combination of the following on my overlay section:我能够使屏幕阅读器自动读取模态覆盖的内容,并在我的覆盖部分结合以下内容:
aria-labelledby="title_id" aria-describedby="body_id" aria-live="assertive"
plus setting the focus to the autofocus element in the overlay content:加上将焦点设置为覆盖内容中的自动对焦元素:
overlay.querySelector('*[autofocus]').focus();
It only worked with all these things together.它只能与所有这些东西一起工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.