JSP 屏幕阅读器无法自动阅读模型窗口

j5fpnvbx  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(190)

我正在尝试一个JSP模型窗口不是由屏幕阅读器自动读取的。这个模态窗口是第二个模态窗口。第一个模态窗口是自动读取的。但不是第二个模型窗口。
下面是代码:

<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();
});

在上面的代码第一个div包含第二模态窗口内容代码蓝图。我需要这是由NVDA屏幕阅读器自动读取,我尝试把role="dialog" aria=labelledby="id" aria-describedby=""的父div,但屏幕阅读器仍然没有自动阅读。

camsedfj

camsedfj1#

我能够让屏幕阅读器自动读取模式覆盖的内容,并在我的覆盖部分结合以下内容:

aria-labelledby="title_id" aria-describedby="body_id" aria-live="assertive"

加上将焦点设置到覆盖内容中的自动聚焦元素:

overlay.querySelector('*[autofocus]').focus();

只有把所有这些东西放在一起才有效。

相关问题