[英]JavaScript Pop-Up Dialog Not Being Read by Web Accessibility Screen Reader
我有一个项目要求,其中我正在构建的网页需要由 JAWS 屏幕阅读软件读取,但客户端只能访问 JAWS 11 作为其最新版本。
我们目前为网络上的许多表单提供基于 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>
将主要内容设置为 aria-hidden='true' 告诉屏幕阅读器停止阅读那里的内容。
尝试使用 aria-hidden='false'
你是怎么打开模态的? 因为包装器 div 上的 tabindex 为 -1,您将只能通过 JavaScript 将屏幕阅读器和键盘焦点发送到模态。 在这种情况下,最好移动打开模态的脚本的焦点部分。
另一方面,如果它是通过链接打开的,您可以完全删除该 tabindex 属性并将包装器 div 的 id 放在链接 href 中,例如<a href=#EditContentModal>
无论哪种方式,请记住在模态关闭时将焦点发送回它开始的位置。
编辑以澄清:包装器 div 上的 tabindex="-1" 属性阻止键盘访问。 去掉它。 请参阅MDN 的 tabindex 参考:负值意味着该元素应该是可聚焦的,但不应通过顺序键盘导航访问。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.