Question

我在我的.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模式对话框的已知问题吗？

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

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

屏幕阅读器不读AjaxToolkit模态弹出窗口

1 个答案: