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

Posted 2023-03-12

【中文标题】Web 辅助功能屏幕阅读器未读取 JavaScript 弹出对话框

【英文标题】：JavaScript Pop-Up Dialog Not Being Read by Web Accessibility Screen Reader

【发布时间】：2015-06-16 21:14:14

【问题描述】：

我有一个项目要求，其中我正在构建的网页需要由 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"  src="~/Images/loader2.gif"   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"

@unobf 谢谢，但没有骰子； JAWS 屏幕阅读器在打开时仍不会读取 JavaScript 对话窗口的内容。我可以通过选项卡浏览选项，但 JAWS 软件似乎不知道上面显示的 JavaScript 对话框覆盖已在其他所有内容之上打开。

您需要将焦点设置到对话框中

【参考方案1】：

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

尝试使用 aria-hidden='false'

【参考方案2】：

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

另一方面，如果它是通过链接打开的，您可以完全删除该 tabindex 属性并将包装器 div 的 id 放在链接 href 中，例如<a href=#EditContentModal>

无论哪种方式，请记住在模态关闭时将焦点发送回它开始的位置。

编辑澄清：包装器 div 上的 tabindex="-1" 属性阻止键盘访问。去掉它。请参阅MDN's tabindex reference：负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航访问。