Screen Reader Not Reading AjaxToolkit Modal Popup

Question

Я использую модальное всплывающее окно AjaxToolkit на моей странице .NET и пытаюсь добавить соответствующие теги 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. 

В остальной части этого раздела описывается управление фокусировкой, которое вы должны реализовать подробно.