Question

我正在使用modal.js，我在代码中看到aria-hidden="true"当显示模态时，此值不会变为false。

这是代码的一部分：

<a href="#document" class="btn btn-red" data-toggle="modal">
    Consulter la page des documents
</a>
<div class="modal fade" id="document" tabindex="-1" role="dialog" aria-labelledby="documentLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" role="document">
        ...

Answer 1

试试这个：

<h1 hidden="true" >This is some text</h1>

然后这个：

<h1 aria-hidden="true" >This is some text</h1>

你会发现aria-hidden实际上并没有隐藏引导模态。 ARIA意味着可访问的富Internet应用程序是一种标准，旨在使残障人士更容易访问Web应用程序。所以aria-hidden告诉屏幕读者不要读出模态的内容。

隐藏和显示模态的javascript和CSS，而不是aria-hidden属性。

您可以将模态放在任何位置，例如：

<div id="block1">I love to code.</div>
<div id="modal">Email: mybrother@hiswebsite.com</div><!-- YOUR MODAL -->
<div id="block2">I learnt it from my brother!</div>
<button id="modalButton">Contact my brother</button>

这很好;但不适合使用屏幕阅读器的人。这就是为什么aria-hidden总是如此。

Answer 2

这是bootstrap模式中的错误。你将手动改变aria-hidden =＆＃34; false＆＃34;每当你做$（＆＃34;＃yourID＆＃34;）。modal（＆＃34; show＆＃34;）。使像JAWS这样的辅助评论者能够阅读模态内容。

像这样：

$('#myModal').on('shown.bs.modal', function () {
    $("#myModal").attr('aria-hidden', false);
});

然后是隐藏事件：

$('#myModal').on('hidden.bs.modal', function () {
    $("#myModal").attr('aria-hidden', true);
});

根据定义：咏叹调隐藏效果：在支持浏览器以及支持辅助技术的过程中，内容不会通过辅助技术传达给用户。 Aria hidden documentation

为什么隐藏在模态上的咏叹调始终是真的？

2 个答案: