问题标签 [wai-aria]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
705 浏览

role - 创建自定义 WAI-ARIA 角色

我是 WAI-ARIA 的新手。我想知道如何根据现有角色创建自定义角色。

例如,我想从 aria 按钮角色创建一个自定义按钮角色。如果有人提供这样做的步骤,那就太好了。

0 投票
1 回答
392 浏览

gwt - 如何在 GWT 2.4 中使用 WAI-ARIA

我已经在 GWT 中创建了组件,但现在我需要为我们的组件添加可访问性。我们正在使用 GWT 2.4。IE 如何在 DisclosurePanel 中添加角色标签或 aria 标签。谢谢。

0 投票
2 回答
4397 浏览

jquery - 为 jQuery .toggle() 方法添加 WAI-ARIA 支持

我想将WAI-ARIAaria-hidden支持与 jQuery 的 .toggle() 方法配对。

所以给定<p id="myElement">Hi there</p>

$('#myElement').toggle()将隐藏元素,并设置aria-hidden="true"

<p id="myElement" style="display: none;" aria-hidden="true">Hi there</p>

再次执行相同的$('#myElement').toggle()脚本将显示(切换)元素,并设置(切换)aria-hidden="false"

<p id="myElement" style="display: block" aria-hidden="false">Hi there</p>

我可能想使用该方法的完整功能,也许类似于

.toggle()扩展以切换状态的最高效解决方案是aria-hidden什么?

0 投票
4 回答
827 浏览

html - ARIA 树上的 HTML5 验证

我正在使用http://validator.w3.org/nu/对我的文档执行 HTML5 验证。我不明白为什么我在以下代码中收到验证错误。我检查了http://www.w3.org/TR/wai-aria/roles#treeitem并认为可以将具有 role="treeitem" 的 li 元素放置在具有 role="group" 的元素 ul 中。nu 验证器告诉我这是不允许的。我想知道 nu 验证器在他的判决中是否正确,如果是,我们在哪里可以找到有关规定 ARIA 树模式的信息。谢谢你。

不验证的示例代码:

0 投票
1 回答
425 浏览

html - 使用 HTML5 元素/ARIA 角色的首选技术

所以这是我时常思考的一个小问题。大约一两年来,我一直对使用 HTML5 元素的最佳方式感到好奇。

我看到的最常见的技术 - 除了类和 ARIA 角色之外,使用页眉、页脚、部分等元素。对旧版浏览器使用 html5shiv.js。

这更符合优雅降级而不是渐进增强。如果 JS 在较旧的移动/桌面浏览器中未启用/根本不可用,我们将失去对仅使用 HTML5 元素构建的布局进行样式设置的能力。

我见过的另一种方法更符合渐进增强,并且不依赖于在旧浏览器中启用 JS 以使布局正常工作。我已经与 Josh Clark[Global Moxie] 简单讨论过这个问题。他们在 m 中使用了这种方法。人物杂志版。http://www.people.com/people/mobile/home/他们使用 HTML5 元素来帮助勾勒文档的语义和带有样式类的 div。没有样式依赖于 HTML5 元素,如页眉、页脚、旁边、部分。

我的一个问题是,如果已经在 div 上设置了 ARIA 角色,那么在我的 div/spans 周围分层 HTML5 元素是否有益于为文档标记提供更好的轮廓?除了“语义化”之外,这还有什么好处?

如果在用于样式的 div 周围添加 HTML5 元素,将 ARIA 角色从 div 移动到 HTML5 元素是否有益?我假设它会,但希望获得有关此技术的更多反馈。

0 投票
1 回答
1816 浏览

javascript - Javascript,更改组合框中的选定项目

我正在尝试使用 javascript 更改组合框中的选定项目,但它看起来不像 HTML 中的普通下拉列表。我试图在网上找到答案,但只为不同类型的下拉列表找到了答案。感谢任何帮助我的人。

这是代码:

0 投票
0 回答
508 浏览

jquery - JAWS 和 IE 9 没有读取手风琴标题的内容

我正在使用扩展为包含WAI-ARIA 1.0 Authoring Practices for Accordions 的 jQuery 手风琴。使用 NVDA 时的结果是我对所有浏览器的预期。一旦您关注手风琴的标题,就会读取标题中的所有内容。

将 IE 9 与 JAWS 配对时,JAWS 仅读取标题中的第一行并跳过其余内容。JAWS 与 Chrome 和 Firefox 一起阅读整个标题。

标头 HTML 的内容:

0 投票
2 回答
1690 浏览

label - JAWS 无法读取标题的 aria-label

这是场景;我需要屏幕阅读器来读取标题的其他内容,而不是实际显示的内容。

显示“我的标题”,但屏幕阅读器显示“这是我的标题”

上面的代码在 VoiceOver 上实现了所需的行为,但我无法让 JAWS 做同样的事情。任何想法如何使它在 JAWS 中工作?

最终,我将寻找与 VoiceOver 和 JAWS 兼容的解决方案。

谢谢

0 投票
1 回答
878 浏览

html - ARIA mobile menu, correct label

I have a responsive website, once the website reaches mobile width the menu gets hidden and only shown when you click the menu icon. This icon is hidden within the HTML until you reach this break point.

Question: what is the correct label that I should be giving the element?

I was thinking of adding aria-hidden="true" which is correct for desktop browsers but on mobile it's not hidden.

0 投票
1 回答
2173 浏览

knockout.js - 下巴不读书
在动态框架内

我正在一个更大的站点内对一个动态构建的测验进行辅助功能工作(我们正在使用 Knockout 绑定来填充问题。)我目前正在处理我们的单选按钮问题。我们最初有一些 Knockout 将“aria-labeledby”卡在适当的位置,但我们认为它会更快的加载时间来正确处理字段集和图例。

只有在我们的框架中,在 IE8 中使用 JAWS 12,关注单选元素只会读取它的标签,而不是我期望的图例。

我什至采用了这个简单的示例代码,它可以在我们的网站上找到。当我将它卡在我们的框架中并且它停止读取图例时。

我知道我应该从我们的网站发布整个 HTML(它是由许多模板构建的),但它是巨大的。

这是我关心的一些早期的位:

这是实际的无线电问题:

人们有什么想法我可能会继承导致这种情况吗?

提前致谢!