在我们的Web应用程序中,我们有一个搜索表单,其中包含一个字段,用户可以从可能选项列表中选择一个或多个答案.我们目前使用"select"html元素,其中"multiple"属性设置如下例所示:
select {
width: 150px;
}<select multiple>
<option value="A">Alice</option>
<option value="B">Bob</option>
<option value="F">Fred</option>
<option value="K">Kevin</option>
<option value="M">Mary</option>
<option value="S">Susan</option>
</select>用户测试的反馈表明,这种解决方案让用户感到困惑.通过按住Ctrl键(在窗口上)执行多个选择/取消选择,但是许多用户不知道这一点.
当仅使用键盘时,该元素似乎也不容易使用 - 这显然是一个可访问性问题.
是否有一种"最佳实践",可以通过多种方式向用户显示输入？
我想创建一个可访问的网页,其中包含许多组件,可以在用户与页面交互时隐藏和显示这些组件.当显示组件时,我期望屏幕阅读器(在这种情况下为NVDA)读取组件的内容.
举个例子:
<html>
<body>
<div id="comp1" style="display:none;" role="region" tabindex="-1" aria-expanded="false">
<div>This is component 1</div>
<button type="button" onclick="ShowComponent(comp2)">Show 2</button>
</div>
<div id="comp2" style="display:none;" role="region" tabindex="-1" aria-expanded="false">
<div>This is component 2</div>
<button type="button" onclick="ShowComponent(comp1)">Show 1</button>
</div>
<script type="text/javascript">
function HideAll() {
// hide both components
var comp1 = document.getElementById("comp1");
comp1.style.display = "none";
comp1.setAttribute("aria-expanded", "false");
var comp2 = document.getElementById("comp2");
comp2.style.display = "none";
comp2.setAttribute("aria-expanded", "false");
}
function ShowComponent(comp) {
HideAll();
// show this component
comp.style.display = "block";
comp.setAttribute("aria-expanded", "true");
comp.focus();
}
ShowComponent(document.getElementById("comp1"));
</script>
</body> …