问题标签 [web-accessibility]

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 回答
5655 浏览

reactjs - 如何为 React 中的链接创建可访问的 onClick 处理程序?

我的 React 应用程序中有一个链接,它调用onClick如下处理程序:

但是,由于我没有使用 nativehref属性,因此当我关注链接然后按 时,不会激活此处理程序Enter

现在,当然我可以添加一个onKeyDown处理程序,然后检查按下的键是否是SpaceEnter如果是,则调用handleClick. 但是,恐怕这不足以捕捉所有可访问性的细微差别,也不足以捕捉到它的行为是否与常规链接完全一样。

因此,问题是:有没有办法表明我希望在链接后面跟着任何可能的交互方法时调用我的函数?

0 投票
1 回答
559 浏览

html - 具有相同 ID 的桌面和移动设备导航 ADA 有问题吗?

我的任务是浏览一个站点并使其完全符合 ADA 标准。我目前遇到的问题是如何解决重复 ID 的问题。

在这里阅读:https ://dequeuniversity.com/rules/axe/2.2/duplicate-id?application=lighthouse

它指出重复 ID 是 ADA 的一个问题。

此站点上存在重复 ID 的原因是因为它有两个主要导航。一种用于台式机,一种用于移动设备。在某个视口,移动菜单会从 display: none 切换其 CSS 样式;显示:块;桌面菜单反之亦然。

我在这里读到:https ://www.html5accessibility.com/tests/hidden2013.html

那个显示:无;是一种支持向屏幕阅读器隐藏内容的方式。所以我想知道的是,重复 ID 的问题是否不是问题,并且由于移动和桌面菜单永远不会同时显示,这不是问题。

这些 ID 也没有连接到表单、表格标题单元格等的标签。所以这不是需要担心的问题吗?或者这是否仍然不符合 ADA,如果是,我可以采取什么步骤使其符合 ADA 而不将桌面和移动菜单合并为一个或同时为它们提供唯一 ID?

0 投票
2 回答
1355 浏览

javascript - Web 可访问性:html 本机下拉菜单 - 输入单击时打开菜单项

在选择输入单击时,默认情况下会提交表单。根据可访问性标准,如果焦点在输入单击时的选择元素上,它应该打开列表项。我想知道是否可以使用符合要求的本机选择元素制作可访问的下拉列表可访问性标准

我阻止了默认提交行为。

我已经尝试过 keyup 事件来触发点击事件,但它不起作用

0 投票
1 回答
17 浏览

accessibility - 可访问性:使用 JS 进行浏览器导航

我有一个包含项目列表的页面。每个项目都是指向特定项目信息页面的链接。在该页面上有一个名为“删除”的按钮。因此,当用户单击它时,该项目将被删除,并且用户将返回上一页。由于“删除”按钮是一个按钮而不是一个链接,我不确定从他所在的页面导航用户的访问方式有多容易。

当用户被带回时,有一个横幅说“项目 blah blah 已被删除”。够了吗?我需要在用户返回上一页之前警告用户吗?

0 投票
2 回答
770 浏览

wcag - 遵守 WCAG 2.0 所需的浏览器兼容性是什么?

什么决定了 WCAG 2.0 指南中所需的兼容性?

如果在 FF/Chrome/Edge 中一切正常,但在 IE11 或 10、7 或 5 中却没有,这是失败的吗?

如果是失败,是否有列出最低兼容性的地方?我假设如果使用 Netscape 失败,它仍然会通过审核。那么,谁来决定最低兼容性要求,又在哪里列出呢?

0 投票
2 回答
524 浏览

accessibility - 可访问性动态内容问题

有没有办法让屏幕阅读器可以访问动态值?问题是如果有值,它会被读出,但如果没有值,屏幕阅读器会完全跳过它。但是,我想将其读取为无值或 null 或类似的东西,这可能表明禁用用户特定值不存在或缺失。

将 JAWS 19 与 Chrome 和 IE 一起使用。

数据表示:

付款方式 价值
支票
现金 20
DD

问题:现在的问题是,如果 Cash 有 20 之类的值,它就会被重点关注并宣布。但是如果没有像 Check 和 DD 这样的值,JAWS 会完全跳过它。当值不存在时,我希望 JAWS 将其读取为空白/空。

付款类型和值包含在 dl、dt 和 dd 标记中。由于安全原因,无法共享实际代码。希望你能理解。

0 投票
1 回答
1752 浏览

html - 屏幕阅读器在阅读下一个元素标签后阅读错误消息

当我跳过输入字段时,在输入字段下显示错误消息。还要通过屏幕阅读器阅读错误消息,role="alert"并尝试使用aria-live="assertive"(无角色)。在这两种情况下,屏幕阅读器都在阅读错误消息,但不是立即阅读。它首先读取元素标签,然后读取前一个元素的错误消息。

密码笔

代码片段

0 投票
1 回答
391 浏览

javascript - 如何将 menu 和 menuitem 角色的默认 JAWS 读取更改为自定义的?

我通过将角色添加为菜单和菜单项来创建带有 div 标签的水平菜单项。

就像我正在创建的上面的代码一样。我将其设置为水平导航和绑定事件来执行此操作(左右箭头)

但是当下巴阅读时,它的阅读就像使用向上和箭头按钮来导航。我怎样才能改变这个?在我的情况下,它应该读起来像使用左右箭头按钮进行导航。

下面是 plunker https://plnkr.co/edit/rVOGMFHoWFt7F3Aicipz?p=preview

0 投票
0 回答
11 浏览

single-sign-on - 无法通过 Tab 选择 Google SSO

谷歌单点登录按钮似乎无法通过选项卡选择,并且出现了网络可访问性问题。

https://developers.google.com/identity/sign-in/web/build-button

直接将tabindex添加到 div(检查),让按钮可以通过选项卡访问,但行为不正确(授予焦点等)

默认行为是这种方式似乎不寻常,或者我错过了什么?我不希望仅仅为了增加可访问性而创建自定义按钮的长度。

0 投票
1 回答
277 浏览

html - 如何通过选项卡结构使悬停状态显示的文本可访问?

我一直在开发一个 Web 组件,该组件将通过将鼠标悬停在<div>. 我的功能按我想要的方式工作,但我刚刚意识到无法通过选项卡访问。

我能够包括tabindex="0" role="button" aria-pressed="false"到每个<div>框,这允许您在每个框之间切换,但我无法显示隐藏的内容。

你可以在这里找到我的代码,它演示了这个问题: https ://codepen.io/ckatz/pen/XQaKdB

我是否缺少允许某人点击Enter以显示文本的标记?