I have a project requirement in which the web page I am building in question needs to be read by the JAWS screen reading software, but the client only has access to JAWS 11 as their latest version.
我有一个项目要求，我正在构建的网页需要由JAWS屏幕阅读软件读取，但客户端只能访问JAWS 11作为其最新版本。
We currently have JavaScript-based pop-up dialogs for many of the forms on the web and right now a big problem is that the JAWS 11 software cannot read the below pop-up text. What is wrong with the pop-up dialog below (in HTML)?
我们目前为网络上的许多表单提供了基于JavaScript的弹出对话框，现在一个大问题是JAWS 11软件无法读取下面的弹出文本。下面的弹出对话框有什么问题（用HTML格式）？
<div class="modal fade" id="EditContentModal" tabindex="-1" role="dialog" aria-labelledby="editContentDialogTitle"
aria-hidden="true" title="Edit Content Pop-up Dialog Window" aria-describedby="editContentDialogTitle">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" value="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editContentDialogTitle">Edit: Content ID <span id="lblContentid"></span></h4>
</div>
<div class="modal-body">
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Contentnumber">Content Number</label>
<input type="text" class="form-control" max-length="20" id="edit_Contentnumber" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Educationalinsitution">Educational Insitution</label>
<input type="text" class="form-control" max-length="100" id="edit_Educationalinsitution" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_TotalAmountforRecovery">Total Amount Available for Recovery</label>
<input type="text" class="money form-control" max-length="10" id="edit_TotalAmountforRecovery" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_source">Source</label>
<select id="edit_source" class="form-control"></select>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_indemletterdate">Indemnification Letter Date</label>
<input type="text" class="form-control datepicker" id="edit_indemletterdate" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Contentreceiveddate">Content Received Date</label>
<input type="text" class="form-control datepicker" id="edit_Contentreceiveddate" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_site">Site</label>
<select id="edit_site" class="form-control">
</select>
@*<input type="text" class="form-control" max-length="10" id="edit_site" />*@
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_status">Status</label>
<select id="edit_status" class="form-control">
</select>
</div>
</div>
</div>
<input type="hidden" id="edit_Contentid" />
<img id="displayBlockUI" alt="Spinner" src="~/Images/loader2.gif" width="32" height="32" style="display:none" />
</div>
<div class="modal-footer">
<button type="button" id="cancel_edit" class="btn btn-default" data-dismiss="modal" value="Close">Close</button>
<button type="button" id="save_edit" class="btn btn-primary" value="Save">Save</button>
</div>
</div>
</div>
</div>
1 个解决方案
#1
-1
How are you opening the modal? Because with a tabindex of -1 on the wrapper div, you will only be able to send the screenreader and keyboard focus to the modal via JavaScript. In that case it's best to make moving the focus part of the script which opens the modal.
你是如何打开模态的？因为在包装器div上tabindex为-1，您只能通过JavaScript将屏幕阅读器和键盘焦点发送到模态。在这种情况下，最好移动打开模态的脚本的焦点部分。
On the other hand, if it's opened via a link, you can just remove that tabindex attribute altogether and put the id of the wrapper div in the link href, e.g. <a href=#EditContentModal>
另一方面，如果它是通过链接打开的，你可以完全删除tabindex属性并将包装div的id放在链接href中，例如
Either way, remember to send focus back to where it started when the modal is closed.
无论哪种方式，请记住将焦点发送回模态关闭时开始的位置。
Edited to clarify: the tabindex="-1" attribute on your wrapper div is preventing keyboard access. Remove it. See MDN's tabindex reference: a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation.
编辑澄清：你的包装器div上的tabindex =“ - 1”属性阻止了键盘访问。去掉它。请参阅MDN的tabindex参考：负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航访问。
#1
-1
How are you opening the modal? Because with a tabindex of -1 on the wrapper div, you will only be able to send the screenreader and keyboard focus to the modal via JavaScript. In that case it's best to make moving the focus part of the script which opens the modal.
你是如何打开模态的？因为在包装器div上tabindex为-1，您只能通过JavaScript将屏幕阅读器和键盘焦点发送到模态。在这种情况下，最好移动打开模态的脚本的焦点部分。
On the other hand, if it's opened via a link, you can just remove that tabindex attribute altogether and put the id of the wrapper div in the link href, e.g. <a href=#EditContentModal>
另一方面，如果它是通过链接打开的，你可以完全删除tabindex属性并将包装div的id放在链接href中，例如
Either way, remember to send focus back to where it started when the modal is closed.
无论哪种方式，请记住将焦点发送回模态关闭时开始的位置。
Edited to clarify: the tabindex="-1" attribute on your wrapper div is preventing keyboard access. Remove it. See MDN's tabindex reference: a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation.
编辑澄清：你的包装器div上的tabindex =“ - 1”属性阻止了键盘访问。去掉它。请参阅MDN的tabindex参考：负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航访问。