JAWS未读取select选项
JAWS未读取select选项
提问于 2019-03-01 02:32:04
我正在做一个关于JAWS的项目，我返回了一个html代码
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<%out.print(request.getContextPath());%>/jquery/external/jquery/jquery.js"></script>
<script src="<%out.print(request.getContextPath());%>/jquery/jquery-ui.js"></script>
<link rel="STYLESHEET" type="text/css" href="<%out.print(request.getContextPath());%>/jquery/jquery-ui.css"></link>
<link href="<%out.print(request.getContextPath());%>/select2/4.0.6-rc.0/css/select2.min.css?v=2" rel="stylesheet" />
<script src="<%out.print(request.getContextPath());%>/select2/4.0.6-rc.0/js/select2.min.js?v=2"></script>
<script src="<%out.print(request.getContextPath());%>/select2/maximize-select2-height/maximize-select2-height.js"></script>
<script src="<%out.print(request.getContextPath());%>/select2/maximize-select2-height/maximize-select2-height.min.js"></script>
<link rel="STYLESHEET" type="text/css" href="<%out.print(request.getContextPath());%>/font-awesome/css/font-awesome.min.css">
<script type="text/javascript">
$(document).ready(function () {
$('.form-control').select2({
theme: "classic",
templateSelection: function (data, container) {
if (data.id == '') {
$(container).css("color", "grey");
} else {
$(container).css("color", "black");
}
return data.text;
},
}).maximizeSelect2Height();
});
</script>
</head>
<body>
<div>
<div class ="col-sm-3">
<label for="app1">Name:</label>
</div>
<div class ="col-sm-9">
<select required class = "form-control" id ="app1">
<option value="" >select a program name</option>
<option >india</option>
<option >china</option>
<option>netherlands</option>
<option >africa</option>
<option >nepal</option>
<option >india</option>
<option >china</option>
<option>netherlands</option>
<option >africa</option>
<option >nepal</option>
<option >india</option>
<option >china</option>
<option>netherlands</option>
<option >africa</option>
<option >nepal</option>
</select>
</div>
</div>
</body>
</html>
输出将如下所示：
当我运行JAWS时，它会读取drpdown框中的所有内容，但不会读取要选择的选项。我需要在下拉列表中的文本搜索这是一个要求。如果我删除文本搜索，我已经使用了select2插件，它工作得很好，但我需要那个搜索框，有没有其他我可以使用的替代插件。
回答 1
Stack Overflow用户
发布于 2019-03-01 04:27:36
您的问题中的示例代码只是一个简单的，但是您的屏幕截图看起来像是您想要一个自动显示下拉菜单以允许选择的。这两种用户体验是完全不同的。要执行后者，请遵循"WAI-ARIA Authoring Practices 1.1“上的Combo Box pattern。
我认为您遇到的问题是has焦点，因此向下箭头被发送到，因为当焦点移动到输入时，JAWS通常会切换到“表单模式”。在“表单模式”中，您不能使用屏幕阅读器的常规键盘快捷键来导航页面。
您可能需要一个键盘处理程序来捕获向下箭头键，并使用aria-activedescendant告诉屏幕阅读器“焦点”应该在哪里。
另请参阅"5.6.2 Managing Focus in Composites Using aria-activedescendant“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54932108
复制相关文章
相似问题