屏幕阅读器不阅读 AjaxToolkit 模式弹出窗口答案

【问题标题】：Screen Reader Not Reading AjaxToolkit Modal Popup屏幕阅读器不阅读 AjaxToolkit 模式弹出窗口
【发布时间】：2015-09-17 18:27:32
【问题描述】：

我在我的 .NET 页面上使用 AjaxToolkit 模式弹出窗口并尝试添加适当的 ARIA 标记，以便屏幕阅读器可以读取弹出窗口。

这是我的 .aspx 代码：

<ajaxToolKit:ModalPopupExtender ID="mpeDetails" runat="server" TargetControlID="btnHiddenDetails" PopupControlID="pnlDetails" CancelControlID="cmdCloseDetails" BackgroundCssClass="modalBackground" PopupDragHandleControlID="DetailsCaption" Drag="true">
</ajaxToolKit:ModalPopupExtender>

<asp:Panel ID="pnlDetails" runat="server" role="dialog" aria-labelledby="lblPopupHeader" tabindex="-1" CssClass="modalBox" Style="display: none;" Width="800px" Height="180px">
  <asp:Panel ID="DetailsCaption" runat="server">
    <asp:Label ID="lblPopupHeader" runat="server" Text="Label" CssClass="sm-hdr"></asp:Label>
  </asp:Panel>
</asp:Panel>

我在模态弹出窗口的面板上添加了 ARIA 地标role="dialog" 和aria-labelledby。我还添加了tabindex="-1" 以将焦点设置在模态弹出窗口上。

我正在使用 NVDA 作为屏幕阅读器。当模式弹出窗口显示时，屏幕阅读器会继续阅读弹出窗口下方的内容（用于激活弹出窗口的链接）。

有没有我可能遗漏的步骤？这是 AjaxToolkit 模式对话框的已知问题吗？

【问题讨论】：

标签： asp.net modal-dialog accessibility ajaxcontroltoolkit screen-readers

【解决方案1】：

当模态弹出时，必须将焦点设置到模态对话框中。浏览器/屏幕阅读器不会自动为您执行此操作。然后，当模态对话框关闭时，您必须将焦点设置回激活对话框的元素（或其他逻辑位置，如果相关，取决于对话框的目的）。

您可以在 WAI-ARIA 创作指南http://www.w3.org/TR/wai-aria-practices/#modal_dialog 中了解它。具体来说，第三段状态

When the dialog box is opened, focus should be set to the first tab
focusable element within the dialog.

该部分的其余部分详细描述了您必须实施的焦点管理。

【讨论】：