Screen Reader Not Reading AjaxToolkit Modal Popup
I'm using the AjaxToolkit modal pop-up on my .NET page and trying to add the appropriate ARIA tags so a screen reader can read the pop-up.
Here is my .aspx code:
<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>
I've added the ARIA landmark role="dialog" on the panel that's the modal pop-up and aria-labelledby . I've also added tabindex="-1" to set the focus on the modal pop-up.
I'm using NVDA for a screen reader. When the modal pop-up displays, the screen reader continues reading what was underneath the pop-up (where the link is to activate the pop-up).
Are there any steps that I might be missing? Is this a known issue for the AjaxToolkit modal dialog?
When the modal pops up, you must set the focus into the modal dialog. The browser/screen reader will not do this automatically for you. Then, when the modal dialog closes, you must set the focus back to the element that activated the dialog (or some other logical place, if relevant, depending on the purpose of the dialog).
You can read about it in the WAI-ARIA authoring guidelines http://www.w3.org/TR/wai-aria-practices/#modal_dialog. Specifically, paragraph three states
When the dialog box is opened, focus should be set to the first tab
focusable element within the dialog.
The rest of that section describes the focus management you must implement in detail.
链接地址: http://www.djcxy.com/p/50482.html