可访问性在 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 中无效）。您可以采用以下几种方法：

添加 javascript 以在呈现时关注 #RequestMessage。还要给它加个标签tabindex=0，这样就可以重点关注了。
在源的某处添加此标签：

https://jsfiddle.net/2n3s6vbe/

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

然后，无论何时你想宣布什么，只要做 $("#shouter").text("shout this")

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

可访问性在 Jaws 中读出模态消息

accessibility reading out modal message in Jaws

jquery

accessibility

modal-dialog