jquery - 在 Jaws 中读取模态消息的辅助功能

Question

您好，我有一个使用 jquery UI 的模式，尽管我正在努力使用 JAW 使其可访问。代码包含在下面，我需要在通过单击调用页面启动模式时读出文本。我有什么遗漏的吗？我添加了 aria-live="assertive"但似乎没有什么区别。

#RequestMessage 文本是使用 ajax 加载的。非常感谢任何建议

非常感谢，

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all " style="display: block; position: absolute; overflow: hidden; z-index: 1002; outline: 0px; height: auto; width: 633px; top: 466px; left: 355.5px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-VatInvoiceRequestModal"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on"><span class="ui-dialog-title" id="ui-dialog-title-VatInvoiceRequestModal" unselectable="on">&nbsp;</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on"><span class="ui-icon ui-icon-closethick" unselectable="on">close</span></a></div><div id="VatInvoiceRequestModal" aria-role="dialog" aria-describedby="RequestMessage" class="ui-dialog-content ui-widget-content" style="height: auto; min-height: 127px; width: auto;">

    <div class="modal-header">

        <a class="close-modal vat-modal" title="close" role="button" aria-label="close">
            <img src="close_button.png" width="17" height="17" alt="">
        </a>

    </div>

    <div class="modal-main" style="float: left;">

        <img style="margin-left: auto; margin-right: auto; display: none;" id="VatInvoiceRequestProgress" src="ajax-loader-white.gif" alt="">

        <p id="RequestMessage" style="tab-index: -1" aria-live="assertive">
            some text 
            <a href="#" target="_blank">hyperlink text</a>
        </p>

        <div style="display: none"></div>

        <div class="okay-button">

            <button type="button" class="test-modal" aria-label="Close">
               Close
            </button>

        </div>

        <br><br>

    </div>

</div></div>

Answer 1

aria-live 仅当在页面渲染时加载标签时才起作用，而不是在动态添加标签时起作用(至少在 Jaws 和 VoiceOver 中不起作用)。您可以遵循以下几种方法:

1. 添加 JavaScript 以在渲染时将焦点集中在 #RequestMessage 上。还要为其添加标签 tabindex=0，以便它可以聚焦。

2. 在源代码的某个位置添加此标签:

https://jsfiddle.net/2n3s6vbe/

<p aria-live="assertive" role="alert" id="shouter" style="position: absolute !important; right: -1000px !important;" tabindex="-1"></p>

然后，每当您想要宣布某事时，只需执行 $("#souter").text("shout this")

我通常采用第二种方法，有来自多个源的多个通知需要呈现。但是，如果您仅使用此模式作为警报，那么第一种方法会更清晰。