Web辅助功能屏幕阅读器未读取JavaScript弹出对话框

Web辅助功能屏幕阅读器未读取JavaScript弹出对话框,javascript,jquery,html,accessibility,uiaccessibility,Javascript,Jquery,Html,Accessibility,Uiaccessibility,我有一个项目要求,我正在构建的网页需要通过JAWS屏幕阅读软件进行阅读,但客户端只能访问JAWS 11作为其最新版本 我们目前在web上的许多表单上都有基于JavaScript的弹出对话框,而现在的一个大问题是JAWS 11软件无法读取下面的弹出文本。下面的弹出对话框(HTML)有什么问题 &时代; 编辑:内容ID 内容编号 教育机构 可回收的总金额 来源 赔偿函日期 内容接收日期 场地 @**@ 地位 接近 拯救 您是如何打开模式的?因为包装器div上的tabindex为-1,您只能通过Ja

我有一个项目要求,我正在构建的网页需要通过JAWS屏幕阅读软件进行阅读,但客户端只能访问JAWS 11作为其最新版本

我们目前在web上的许多表单上都有基于JavaScript的弹出对话框,而现在的一个大问题是JAWS 11软件无法读取下面的弹出文本。下面的弹出对话框(HTML)有什么问题


&时代;
编辑:内容ID
内容编号
教育机构
可回收的总金额
来源
赔偿函日期
内容接收日期
场地
@**@
地位
接近
拯救

您是如何打开模式的?因为包装器div上的tabindex为-1,您只能通过JavaScript将屏幕阅读器和键盘焦点发送到模式。在这种情况下,最好将移动焦点作为打开模式的脚本的一部分


另一方面,如果它是通过链接打开的,您可以完全删除该tabindex属性,并将包装器div的id放在link href中,例如
:负值表示元素应该是可聚焦的,但不应通过顺序键盘导航进行访问。

将主内容设置为aria hidden='true'会告诉屏幕阅读器停止阅读那里的内容


尝试使用aria hidden=“false”

删除aria hidden=“true”@unbof谢谢,但不要掷骰子;JAWS屏幕阅读器在打开时仍然不会读取JavaScript对话框窗口的内容。我可以通过选项卡查看这些选项,但JAWS软件似乎不知道上面显示的JavaScript对话框覆盖已被打开,而不是其他任何内容。您需要在对话框中设置焦点
<div class="modal fade" id="EditContentModal" tabindex="-1" role="dialog" aria-labelledby="editContentDialogTitle" 
aria-hidden="true" title="Edit Content Pop-up Dialog Window" aria-describedby="editContentDialogTitle">
    <div class="modal-dialog"  >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" value="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editContentDialogTitle">Edit: Content ID <span id="lblContentid"></span></h4>
            </div>

            <div class="modal-body">
                <div class='row'>
                    <div class='col-md-8'>
                        <div class='form-group'>
                            <label for="edit_Contentnumber">Content Number</label>
                            <input type="text" class="form-control" max-length="20" id="edit_Contentnumber" />
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-8'>
                        <div class='form-group'>
                            <label for="edit_Educationalinsitution">Educational Insitution</label>
                            <input type="text" class="form-control" max-length="100" id="edit_Educationalinsitution" />
                        </div>
                    </div>
                </div>
                 <div class='row'>
                    <div class='col-md-8'>
                        <div class='form-group'>
                            <label for="edit_TotalAmountforRecovery">Total Amount Available for Recovery</label>
                            <input type="text" class="money form-control" max-length="10" id="edit_TotalAmountforRecovery" />
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-8'>
                        <div class='form-group'>
                            <label for="edit_source">Source</label>
                            <select id="edit_source" class="form-control"></select>
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-8'>
                         <div class='form-group'>
                            <label for="edit_indemletterdate">Indemnification Letter Date</label>
                            <input type="text" class="form-control datepicker" id="edit_indemletterdate" />
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-8'>
                        <div class='form-group'>
                            <label for="edit_Contentreceiveddate">Content Received Date</label>
                            <input type="text" class="form-control datepicker" id="edit_Contentreceiveddate" />
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-8'>
                        <div class='form-group'>
                            <label for="edit_site">Site</label>
                            <select id="edit_site" class="form-control">
                            </select>
                            @*<input type="text" class="form-control" max-length="10" id="edit_site" />*@
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='col-md-8'>
                        <div class='form-group'>
                            <label for="edit_status">Status</label>
                            <select id="edit_status" class="form-control">
                            </select>
                        </div>
                    </div>
                </div>

                <input type="hidden" id="edit_Contentid" />
                <img id="displayBlockUI" alt="Spinner" src="~/Images/loader2.gif" width="32" height="32" style="display:none" />
            </div>
            <div class="modal-footer">
                <button type="button" id="cancel_edit" class="btn btn-default" data-dismiss="modal" value="Close">Close</button>
                <button type="button" id="save_edit" class="btn btn-primary" value="Save">Save</button>
            </div>
        </div>
    </div>
</div>