JSFiddle : https://jsfiddle.net/jnv07akx/
Я использую программу чтения с экрана NVDA для тестирования моего графического интерфейса на соответствие 508 / доступности.
У меня есть поля "Info Dialog", созданные с помощью Bootstrap Modal. В Firefox все абзацы и элементы в диалоге читаются вслух, когда на них наведен курсор, но в Chrome они не читаются - при наведении указателя на что-либо внутри модала возникает тишина.
Во-первых, протестируйте модал в Firefox в JSFiddle, чтобы убедиться, что параграфы / кнопки модала работают (озвучьте). Затем сравните с Chrome: ни один контент внутри модального не работает. Единственное, что озвучивается в Chrome, это ярлык кнопки, который находится снаружи, а не содержимое модала.
Модальные диалоги Bootstrap выглядят так:
<div class="modal" id="modalGapInfoSimple" tabindex="-1" role="dialog" aria-labelledby="modalGapInfoSimpleLabel" aria-hidden="true" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin:0 auto;">
<div class="modal-header" style="text-align:center;padding-bottom: 5px !important;">
<div style="text-align:center;">
<div class="modal-heading">
<div style="text-align: left; width: 90%;">
<h3 class="modal-title" id="modalGapInfoSimpleLabel">
<div class="modalHeader">Oops you have Gaps!</div>
<span class="modaltext">
Please edit the timeline to remove the Gaps. You can click on the Gap in your timeline and select the appropriate option presented to you in the prompt.
</span>
</h3>
</div>
</div>
<div class="modal-body panel" style="margin-bottom: 0px !important; padding: 3px !important;">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-right">
<div class="col-md-10 col-sm-10 col-xs-10"></div>
<div class="pull-right">
<input value="OK" onclick="handleModalGapInfoSimple();" class="modalButton" data-dismiss="modal" aria-label="Close" type="button">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
ПРИМЕЧАНИЕ. Я ввел ошибку для NVDA: https://github.com/nvaccess/nvda/issues/9156