不读取AjaxToolkit模式弹出窗口的屏幕阅读器

2018-06-17 21:03:15

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

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

您可以在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.

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

链接地址: http://www.djcxy.com/p/50481.html

上一篇: Screen Reader Not Reading AjaxToolkit Modal Popup

下一篇: How can I make NVDA read elements on the same row separately?