モーダルのアリア - 非表示は常に真ですか？

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は、障害を持つ人々がWebアプリケーションにアクセスしやすくするための標準です。したがって、aria-hiddenはスクリーンリーダーにモーダルの内容を読み出さないように指示します。

aria-hiddenプロパティではなく、モーダルを非表示にするjavascriptとCSSです。

あなたは、たとえば、どこでもあなたのモーダルを置くことができます：

<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は常にtrueです。

Answer 2

これは、ブートストラップモーダルのバグです。 $（ "＃yourID"）。modal（ "show"）を実行するたびに、aria-hidden = "false"を手動で変更することができます。 JAWSのような補助レーダーがモーダルコンテンツを読むことができるようにする。

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

して、隠されたイベントで：

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

定義により： ARIA-隠された効果：コンテンツがない支援技術をサポートと連携してサポートしているブラウザで このよう

補助技術を介してユーザーに伝えられます。 Aria hidden documentation