- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在努力寻找一种使 Ext JS Combobox 组件与 IE/JAWS 兼容的方法。目前我们正在使用以下标记:
<div role="presentation" id="combobox-1011">
<label id="combobox-1011-labelEl" for="combobox-1011-inputEl">
<span>Choose:</span>
</label>
<div id="combobox-1011-bodyEl" role="presentation">
<!-- This wraps both input and triggers -->
<div id="combobox-1011-triggerWrap" role="presentation">
<div id="combobox-1011-inputWrap" role="presentation">
<input id="combobox-1011-inputEl" type="text" name="choose"
role="combobox" aria-readonly="false"
aria-haspopup="true" aria-expanded="true"
aria-autocomplete="none" aria-owns="boundlist-1014-listEl"/>
</div>
<!-- Trigger element styled to look like a button -->
<div id="combobox-1011-trigger-picker"></div>
</div>
<!-- This is used to announce input validation errors -->
<div id="combobox-1011-ariaErrorEl" role="alert" aria-live="polite"></div>
</div>
</div>
<div id="boundlist-1014">
<div id="boundlist-1014-listWrap">
<ul id="boundlist-1014-listEl" role="listbox" aria-hidden="false">
<li role="option" tabindex="-1" aria-selected="true" id="ext-element-7">Option 1</li>
<li role="option" tabindex="-1">Option 2</li>
</ul>
</div>
</div>
bodyEl
这样的包装元素的存在。 ,
triggerWrap
, 和
inputWrap
.这些元素对于应用相关的 CSS 类、在输入验证失败时呈现错误指示器元素等是必需的。
listbox
元素呈现在组件元素之外。这可以改变,但不容易;也将它呈现在输入附近似乎根本没有帮助。值得一提的是,列表本身在第一次展开时动态呈现,
aria-owns
事后添加的属性。
role="combobox"
在外部元素上。没有做任何有用的事情,组合不被认可。 role="combobox"
和相关属性在 inputWrap
.这样,当输入直接聚焦时,IE 将宣布“选择编辑组合”;当从另一个元素切换时,它将改为宣布该元素的角色以及组合标签。很有趣,但不是很有帮助。 role="combobox"
在 triggerWrap
并分配 role="button"
到触发伪按钮。从理论上讲,这应该接近第一个设计模式,但组合不被认可。 inputWrap
上放置组合框角色。和制作
inputWrap
tabbable 而不是实际的输入。这对应于
this example 中的标记似乎或多或少地与 IE/JAWS 一起工作;然而,这个解决方案是非常不受欢迎的,因为它打开了潘多拉的盒子,里面充满了非常毛茸茸的焦点管理错误。
<div role="combobox">
是可制表的。
最佳答案
对于我们的自定义组合框小部件,我也遇到了同样的问题。我发现如果您将输入字段标记为只读并在输入字段上使用 role="combobox"那么 IE 上的 JAWS 会将其读取为组合框。此解决方案存在一些问题,例如普通用户无法键入文本来过滤组合框。
关于html - ARIA 组合框的 IE 兼容标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32365206/
我是 ARIA 角色的新手。如果我有工具提示类型功能,即如果有人单击问号按钮,会显示更多文本详细说明如何填写表单字段,我应该使用 aria-expanded 属性、aria-hidden 属性还是两者
我正在查看一些代码,其中一个标签具有属性 aria-owns 和 aria-expanded。我用谷歌搜索了它们,但没有找到足够的细节来完全理解它们的作用。 有人可以解释一下这些特定属性的用途吗?我对
当我通过 W3C 验证器运行它时,几天前使用无错误通过的 HTML 5 代码现在显示错误。错误看起来像这样: 元素 li 缺少以下一个或多个属性:aria-checked、aria-expanded、
有人可以详细说明aria-live="assertive"之间的区别吗?和 aria-live="polite" ? 据我了解 aria-live="assertive"将获得更高的优先级并清除队列,
我只是注意到,虽然 aria-label , aria-labelledby和 aria-describedby据说属性适用于每个元素(参见 https://www.w3.org/WAI/PF/ari
在我的网站上,用户可以单击“实时聊天”按钮,然后会出现一个聊天窗口。我正在寻找一些文本来读出(对于使用屏幕阅读器的辅助用户) 当聊天窗口出现时,焦点将转到输入文本框 - 用户可以在其中输入文本与顾问聊
W3C 将 WAI-ARIA 角色分为四组: 抽象角色 小部件角色 文档结构角色 标志性角色 有人可以解释一下抽象角色类别吗? 最佳答案 规范中确实提到: Abstract roles are the
W3C 将 WAI-ARIA 角色分为四组: 抽象角色 微件角色 文档结构角色 里程碑式的角色 有人可以解释抽象角色类别吗? 最佳答案 它确实在规范中说: Abstract roles are the
我试图让 voiceover 只读取 aria-describedby,但它是这样读取的(“我是一个按钮”未被读取) : 而如果有一个定义了 id aria-describedby="modal-la
人们问过 aria-controls 和 aria-owns 之间的区别。 aria-controls 是基于层次结构的父子关系,而 aria-owns 不是。 我想变得非常具体。 aria-cont
我已经四处搜索,如果可以将 aria-label 组合起来,我没有找到任何信息。和 aria-describedby对于一个元素,它是否会导致使用屏幕阅读器的人感到困惑? 我有一个包含许多项目的列表,
我有一个页面,我应该可以在没有太多更改的情况下访问该页面。 页面中的一个组合框被编码,以便在单击输入框时,div 的内容被复制到同一页面中的 iframe 元素中,并且该 iframe 在输入框下方可
使用时对元素的真正影响是什么 aria-owns="id" 和(!) aria-controls="id" 当使用这两个属性时,浏览器如何通知屏幕阅读器? 最佳答案 两个aria-controls和
使用 Bootstrap 模式,我经常看到这些 aria 属性,但我从来不知道如何使用它们。 有谁知道什么情况下使用这些属性?我用谷歌搜索——只是没有找到任何直接的答案。 最佳答案 HTML5 ARI
我想确定当用户单击其后代时可以自动隐藏一个元素(使用 JavaScript 来实现)。 例如: A Link 这是正确的方法吗? 最佳答案 虽然您可以创建自定义
使用 jQuery 在 #div1 中添加角色警报,读取 #div2 内容,即使它对于 JAWS 来说是隐藏的。 some content some con
我正在尝试将 aria-label 添加到网站上没有的所有链接。我想使用链接文本作为 aria-label。 $(document).ready(function () { $("a").each
我在互联网和 Angular Aria 文档上进行了搜索——它没有提到 aria-expanded 或 aria-selected? 有没有办法实现这个? 这将使: 谢谢。 最佳答案 我使用 ng
我发现了两种使用 aria- 属性标记区域的方法。 第一个: Blah-blah 第二个: Search results Blah-blah JAWS 读取它们完全相同。那
我有一个工具栏与各种按钮的列表。在某些情况下,按钮有一个标签,在其他情况下,它使用图像。。两者都被生成为具有到包含div的aria-Labelledby,该div具有标题属性。屏幕阅读器(NVDA,叙
我是一名优秀的程序员,十分优秀!