问题标签 [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 投票
2 回答
9570 浏览

jquery-plugins - 可访问、适合移动设备的灯箱?

是否有任何灯箱解决方案(如 Fancybox 等)既可访问(VoiceOver 和 JAWS 等,兼容,可能与 WAI-ARIA 角色)又适合移动设备?

成为 jQuery 插件的加分项。

0 投票
1 回答
1872 浏览

accessibility - 使用 Aria 角色文章和/或列表项?

我在 ul 列表中有一个文章列表。阅读http://www.w3.org/WAI/PF/aria/roles#role_definitions我可以使用角色listlistitem每个项目,但它们也被视为article.

选项 1:我可以执行以下操作(在同一元素上有 2 个角色):

选项 2:我是否应该只使用该article角色:

0 投票
2 回答
2802 浏览

iphone - iPhone - 让 VoiceOver 宣布标签文本更改

是否可以在 iPhone 上使用 VoiceOver 来宣布标签上的更新文本,如果它发生变化?

这类似于 ARIA 中的实时区域。

谢谢。

0 投票
2 回答
1338 浏览

html - “wairole”和“role”属性有什么区别?

我已经开始在 Web 应用程序上进行 dojo 可访问性测试,并且注意到元素具有角色和 wairole 属性,它们似乎具有相同的值。

经过大量搜索,我无法理解两者之间的区别。谁能解释一下?

0 投票
1 回答
1675 浏览

html - 如何在 HTML5 中标记复杂的状态指示器?

我目前正在尝试提出一种良好且易于访问的方法来格式化状态指示器,该状态指示器应在网站上的一组类似向导的页面中呈现。该网站应提供一个多页表单,其顶部有一个状态指示器,如下面的线框图所示:

在此处输入图像描述

鉴于 HTML 中的新进度标签,我的第一个想法是做这样的事情:

...但是由于 <progress> 只接受使用列表的短语内容并不是一个真正的选择。所以现在我可能会使用这样的东西,整合 ARIA进度条-role:

但同样,我不确定进度条角色是否可以以这种方式应用于列表。

另一个问题是,例如, <progress> 在 Opera 中被呈现为进度条,因此 >progress> 本身可能并不是一个真正可行的解决方案:-(

任何人都可以推荐一个不仅依赖于使用单个图像的可访问状态栏

当前解决方案

现在我将使用以下标记:

“支持”类的所有元素都将位于屏幕外。IMO 通过这种方式,我们应该在语义标记(我认为状态继承实际上是一个有序列表 ;-))和可访问性之间取得很好的折衷,这要归功于每个步骤的附加标题和状态文本。

0 投票
1 回答
210 浏览

javascript - 带有 x/html 和 javascript 的 Firefox 4.01 的奇怪行为

我致力于为盲人提供与屏幕阅读器 Jaws 和声音合成器交互的 Web 可访问性。我正在使用带有 wai-aria 和 JavaScript 的 x/html 来设计问卷用户测试的可访问网页。

在这类应用中,主要的难点是面对不同浏览器上的不同行为,以及不同版本的 Jaws 屏幕阅读器会产生不同的行为。

但是,问题在 Firefox 4(以及下一个 4.01)发布后开始出现。

新版 Firefox 4.01 浏览器不再适用盲人 Web 问卷页面的相同代码。

似乎尚不支持 JavaScript 的相同功能。事实上,即使屏幕阅读器关闭,与“tab”键的交互也会被阻止。:-(

在 Firefox 第 4 版之前,交互很好。相反,在 Internet Explorer 上,与“tab”键的交互在版本 8 和 9 上也被阻止了......我不知道为什么。:-(

最后,有一段代码摘录,在表单中带有一个单选按钮。该表格是用户测试的问卷,包括单选按钮、组合框、多选复选框、测试区域和提交按钮。

单选按钮和表单中其他元素的行为应如下所示: 盲人使用“tab”键从一个单选按钮选项跳到另一个。当用户到达最后一个选择时,如果用户没有选择任何东西,声音警报会说:“请定义你的视力障碍!” 焦点再次放在单选按钮的第一个选择上。否则,如果盲人选择了一个选项,请关注表单中的下一个元素。

表单的每个元素(例如单选按钮)都考虑两个事件:

  • onFocus,当用户第一次将焦点“转移”在元素上时。
  • onBlur,当焦点改变时。

有什么问题我没有考虑吗?

代码摘录:

0 投票
3 回答
643 浏览

accessibility - 咏叹调地标角色,仅适用于容器?

我正在现有的 html 布局上实现 ARIA 地标角色。我需要更改的代码越少越好。我发现的所有示例都将地标用于整个容器。例如。

在我的模板中,我不想标记为 ARIA 地标的内容周围并不总是有一个容器。有时更容易实现,不标记整个容器,而只在相关内容的开头设置标记。

所以它看起来像这样:

从语义的角度来看,屏幕阅读器或其他软件并不确切知道内容何时结束,或者可能认为内容为空。这会是个问题吗?

我用 JAWS 屏幕阅读器对其进行了测试,它的行为似乎相同。JAWAS 只寻找地标的开始。这是不行的吗?或者我可以这样使用它吗?

0 投票
2 回答
695 浏览

javascript - ARIA 属性、DOM 和优雅降级

ARIA 属性是否需要存在于实际的 HTML 中?或者,它们可以在运行时通过 Javascript 添加吗?

考虑以下场景...

如果用户的浏览器没有 Javascript,我们会在新页面上向他们展示验证(由服务器处理和生成)。如果用户的浏览器确实有 Javascript,我们在上面的 HTML 中添加以下内容,然后在 DIV 中动态显示验证。

我想另一个问题是,将这些 ARIA 属性直接包含在 HTML 源代码中是否会造成伤害?如果 Javascript 不存在,ARIA 会做任何事情吗?

0 投票
2 回答
16165 浏览

accessibility - aria-live 和 JAWS

我正在尝试让 aria-live 区域与 JAWS 11 和 IE8 一起正常工作。

使用下面的代码,我可以让 JAWS 在单击按钮时宣布新值,但行为不是我所期望的。

这个例子的 JSFiddle

使用我的 JAWS11/IE8 配置,每次单击按钮时,我都会听到:

问题,我的问题是:如何让 JAWS 宣布 aria-live 区域的当前值,而不是 aria-live 区域的先前值?

我也对其他屏幕阅读器将如何处理此功能感兴趣。

0 投票
5 回答
304 浏览

html - ARIA 使用的良好参考?

有没有人有任何值得信赖的参考供 ARIA 使用?我正在寻找可以作为我标记的基础的东西,但实际上无法从受信任的来源找到这么多示例。

现在我几乎从ARIA 规范这个站点开始,但希望有更多好的参考,以确保我正确地做这件事。