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

时间:2015-08-18 07:57:02

标签: jquery modal-dialog accessibility

您好我有一个使用jquery UI的模式,虽然我很难使用JAW来访问它。代码包含在下面,我需要在模式从调用页面上单击启动时读出文本。有什么我想念的吗?我添加了aria-live =“断言”但它似乎没有什么区别。

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

非常感谢,

<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>

1 个答案:

答案 0 :(得分:2)

norm(F,H), cnf(H,C)仅在呈现页面时加载标记时才起作用,而不是在动态添加标记时(至少不是使用Jaws和VoiceOver)。您可以遵循以下几种方法:

  1. 在呈现时添加javascript以关注aria-live。同时为其添加标记#RequestMessage,以便对其进行关注。

  2. 在源位置添加此标记:

  3. https://jsfiddle.net/2n3s6vbe/

    tabindex=0

    然后,只要你想要宣布的东西,就做$(“#shouter”)。text(“喊出这个”)

    我通常遵循第二种方法,来自多个来源的多个通知将被渲染。但是,如果您仅使用此模态作为警报,则第一种方法更清晰。