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

javascript - 如何使用 aria-label 和 aria-labelledby 从阅读器获取可见和不可见(自定义)值?

有没有办法通过使用 aria-label 或使用 aria-labelledby 或任何其他属性来获取可见标签名称和自定义名称

例如下面的代码是说: -

reader:- 1.名称编辑文本(用于第一个输入框) 2.设置地址编辑文本(用于第二个输入框)

我已经通过链接在此处输入链接描述

我应该怎么做才能得到消息: -为地址编辑文本设置地址?我应该在这里使用哪个属性?

0 投票
2 回答
48 浏览

icons - 提示辅助功能的图标

我正在构建一个“辅助功能栏”,其中包括以下功能:增加/减少对比度、文本大小、行距等。

是否有可用于显示/隐藏此功能的默认、标准、推荐或众所周知的图标?

我觉得“轮椅”图标:轮椅可访问性图标并不能很好地代表网络可访问性..

有人可以提出任何广泛采用的替代方案吗?你会用什么?

0 投票
1 回答
3035 浏览

twitter-bootstrap-3 - 如何防止键盘焦点超出 Bootstrap 3 的模式窗口?

我正在研究 Web 可访问性。专家说,当 Modal 弹出时,键盘用户不应该在 Modal 窗口之外进行交互。我正在使用 Bootstrap 模式。Bootstrap 版本是 3。我认为 GitHub 上存在关于此的问题!这是模态的代码片段。

我该如何解决这个问题?谢谢。

0 投票
0 回答
37 浏览

javascript - 复制 :hover 状态的样式,所以设计是相同的,没有真正的悬停元素

我正在为残疾人开发一个应用程序,让他们可以访问任何网站。其中一项功能是使用 TAB 键的键盘导航。

问题是存在取决于 :hover 状态的下拉列表,并且通过调查其他 Stackoverflow 问题,模拟 :hover 状态是不可能的。(尽管 Chrome 在开发人员工具中内置了此功能,所以可能是这样吗?)。

我的解决方案是 JS 解决方案。当 LI 元素具有内部列表时,我将一个类添加到根级别并设置显示、可见性和不透明度全部显示。这真的很好用,除了当网站对下拉列表进行编码时,整个事情都依赖于 :hover 例如:

如果已经为悬停状态编码了许多属性,而不仅仅是显示/可见性/不透明度,我的方法中的下拉菜单将显示,但没有其真正的设计。这不是世界末日,但残疾人应该按预期使用网站。

因此,我正在寻找一种解决方案来真正模拟 :hover 状态,或者复制悬停状态的整个样式并将它们绑定到我的类。

请注意,内部和长选择器的样式,例如 - li:hover ul li div p {} - 也应该被复制(显然),因此使用 $el.css() 可能不是那么容易。

欢迎聪明的想法!

0 投票
2 回答
102 浏览

html - Total Validator 找不到跳过链接

Total Validator 没有找到此链接并向我写此警告:

添加跳过导航链接作为页面上的第一个链接。

如何以更好的方式编写此链接?

0 投票
1 回答
1646 浏览

firefox - NVDA automatically switches to Forms Mode

Currently my React component consists of a few labels and one input box. And it has a view mode and en edit mode.

When I go into edit mode, NVDA automatically goes into forms mode, due to which I'm not able to enter any text in input box or navigate through labels using arrow keys.

By default, on pressing Enter, NVDA goes in forms mode (see NVDA's keyboard shortcuts for forms) which takes all next keyboard input as shortcut to some command. To come out of that mode, we need to use the NVDA key (Default is insert key) + space. After that, we can resume typing. We are not even able to navigate through arrow key as it begins reading each character.

Readonly : ReadOnly Looks like this

Edit Mode: Edit Mode looks like this

Is there a way to prevent NVDA from going into forms mode automatically? Any help would be appreciated.

NVDA Version : 2018.11 Firefox: 60.0.1 (64-bit)

0 投票
1 回答
1333 浏览

javascript - 带有箭头按钮的 aria 角色选项卡

WCAG 有一个很棒的设计模式,用于在此处使用 Tabpanels 实现选项卡

它使用“漫游标签索引”和键盘箭头键在标签之间循环。这很好用,但我最近收到了一个请求,要求制作一个选项卡/选项卡面板小部件,它一次只显示一个选项卡,并且有“上一个”和“下一个”箭头按钮来循环浏览选项卡。

从视觉上看,箭头按钮位于活动选项卡的任一侧。但就选项卡顺序而言,WCAG 设计模式明确规定与活动选项卡关联的选项卡面板应按选项卡顺序跟随它。

只要我确保它们的标签顺序在标签/标签面板之前或之后,将这些新的箭头导航按钮添加到小部件是否会违反任何可访问性规则?我认为键盘功能可以保持目前的状态(使用箭头键在选项卡之间循环)

0 投票
4 回答
201 浏览

accessibility - 站点中每个页面的替代版本是否是 WCAG 2.0 的有效方法?

我们正在开发一个需要复杂设计的新项目,但客户也希望它符合 WCAG 2.0 AA 级。因此,我们想出了在每个页面顶部添加一个工具栏的想法,该工具栏带有一个按钮,上面写着“查看此页面增强了可访问性”,然后将首选项存储为 cookie。

问题是这是否被认为是歧视或一种很容易错过并破坏目标的技术?我们有办法让这个开关按钮非常明显,但我们还没有看到任何网站做这样的事情,也没有找到任何支持或反对它的文档。

0 投票
2 回答
7761 浏览

html - 使用引导程序的 glyhicons 时如何修复“空按钮”Web 可访问性错误

我有一个页面,其中一个按钮标有一个字形图标(引导程序)。

我有一个新要求,即使用“Wave”工具(https://wave.webaim.org/extension/)检查页面时不能出现“错误”。

问题是 Wave 会为按钮引发错误,因为它是一个“空按钮”。

我尝试使用带有替代文字的图像。这修复了 Wave 错误,但它使按钮稍微变大了,我也对为此滥用图像感到不安。

这是显示问题的页面的最小版本:

有没有比虚拟 img 更好的方法来确保可访问性(为 glyphicon 提供替代文本)?

0 投票
2 回答
2296 浏览

polymer - 屏幕阅读器在悬停时未读取带有 aria-labelledby 参考的单选按钮

Polymer 1.* 和 NVDA 阅读器

我有一组没有标签的单选按钮。我正在尝试让屏幕阅读器读出悬停时的单选按钮。

我试过aria-labelledby了,从我读到的内容中,应该通过 id 引用一个元素并读出它的内容。

但是,我没有成功。当我将鼠标悬停在它上面时,paper-radio-button它不会读出是。与https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-2/radio-2.html上的示例相比,我必须先单击它。

关于如何aria-labelledby使用 id 引用和读出元素内容的任何想法,yes以便在没有内容/标签的单选按钮上读出是?