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

标签 javascript jquery html accessibility uiaccessibility

我有一个项目需求,其中我正在构建的网页需要由 JAWS 屏幕阅读软件读取,但客户端只能访问最新版本的 JAWS 11。

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

<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>

最佳答案

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

尝试使用 aria-hidden='false'

关于Web 辅助功能屏幕阅读器无法读取 JavaScript 弹出对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30878330/

相关文章:

javascript - 未捕获的类型错误 : Object [object Object] has no method 'bxSlider'

javascript - 工具提示 html 渲染上的 C3JS JSX 语法

jquery - 星级评分 jquery 星级评分小部件和 split 星的错误呈现

javascript - 如何使 &lt;input type ="text"> 元素不可见,但仍显示用户输入?

jquery - 模式弹出窗口 (div) 的关闭按钮(div 包含在其中)未完全显示

html - 希望 Nav-Item 与 Nav-Bar 高度相同

Javascript 正则表达式与 Java 正则表达式

javascript - 如何使用 HTML 从树结构中显示选定的文本

javascript - 使用动力学文件调整多个形状中的目标形状的大小

javascript - 单击主复选框时无法更改所有复选框的 css