问题标签 [wcag2.0]

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

accessibility - 仅在使用标签导航后才显示焦点状态

我正在开发一个需要遵守 WCAG 2.0 AA 的网站,但尽管我们尝试让标签导航在我们的网站上可用,但由于单击可聚焦元素时呈现的奇怪边框和轮廓,它确实严重影响了设计。

我的想法是,隐藏所有焦点状态,直到实际按下 tab 键。

所以,我的问题是,这会对网络的可访问性技术造成任何潜在的问题吗?

0 投票
1 回答
1771 浏览

validation - 如何使标签 i WCAG 2.0 兼容?

我正在使用 Semantic-UI 框架,对于我必须使用i标签的图标。这是一个例子:

我想让我的代码符合 WCAG 2.0(AA 级)并且我正在使用AChecker validator。对于包含i标签的每一行,我都会收到以下错误:

由于我无法使用 Semantic-UI 组件替换它em或者strong因为我没有使用iitalic 你知道我该如何修复它或任何解决方法以使检查器没有错误吗?

0 投票
2 回答
3914 浏览

html - 如何标记 WCAG 2.0 合规性的按钮?

在争取 WCAG 2.0 合规性的过程中,我发现了很多关于正确处理按钮的信息,特别是考虑按钮可访问性和合规性所需的信息。

标记 a 的适当方法是<button>什么?他们需要具备哪些属性或组合?

我的按钮分为三类:

  1. 具有描述其预期操作的文本的按钮。(例如“了解更多”以启动包含更多产品信息的模式)
  2. 具有未描述其操作的文本的按钮。(例如“X”或标题手风琴内容部分的文本)
  3. 没有描述其预期操作或其他内容的文本的按钮。(例如,切换轮播上下文的图标/图像)

例如,在上面 3 的以下简单示例中:http: //codepen.io/ga-joe/pen/ggeLeW

是否可以只aria-label为没有文本的按钮添加属性?是否name和/或value总是需要?请发送帮助!谢谢!

这些似乎是相关的 WCAG 指南:

0 投票
2 回答
185 浏览

css - 在制作屏幕外内容以实现可访问性时,使用静态定位而不是绝对定位意味着什么?

在创建满足 WCAG 2.0 指南的视觉内容的替代方案时,一种常见的方法是将内容的替代显示放置在视口之外,以便辅助技术可以阅读,但对有视力的用户不存在。引用最多的示例通常如下所示:

使用这种方法,很容易导致布局容器上有额外的滚动条。但是,如果使用固定定位,它似乎可以消除问题,因为屏幕外内容不再位于其容器的上下文中。我的问题是,将静态定位用于屏幕外可访问内容的潜在缺陷是什么?我最初的指示是屏幕阅读器会将其视为与以其他方式定位的内容相同的内容,但我尚未找到使用静态定位的示例。我错过了什么吗?

0 投票
1 回答
225 浏览

accessibility - 带有单选按钮和/或复选框的自定义行为。可访问性(WCAG 2.0)

我想在选择某些复选框/单选按钮时显示一些隐藏的文本/元素(无论如何)(假设有一个复选框/单选按钮列表可供选择)。

我应该怎么做才能达到 WCAG 2.0 AA 标准?

以及 AT 用户如何理解单选按钮/复选框,因为显然这不是复选框/单选按钮的假定行为。

谢谢!

0 投票
1 回答
26 浏览

accessibility - 在带有链接的图像中提供替代文本,该链接位于同一块内容中的 2 个不同位置

我有一个 HTML 结构,如:

两个链接都指向同一个地方。我是否应该在 alt 属性中添加用户名,否则对于屏幕阅读器用户来说这将过于重复?

我应该删除屏幕阅读器的第二个链接吗?如果这是一个解决方案,我该怎么做?


将来我会更改 HTML 结构,但现在我必须保留它。

0 投票
1 回答
914 浏览

wai-aria - WCAG 2.0 A (1.3.1) 地标之外的内容

试图使我们的 SharePoint 网站符合 WCAG。我已将 WAI-ARIA 地标添加到真实内容中,但它没有通过,因为并非所有内容都包含在内。

使用 HTML5 或 WAI-ARIA 地标时,最好将页面上的所有内容都包含在地标中。通过这种方式,辅助技术的用户可以使用地标来导航页面,而不会丢失对内容的跟踪。

确保页面上的所有内容都包含在 HTML5 或 WAI-ARIA 地标中。

问题是,作为错误返回的事情是我不想提醒屏幕阅读器喜欢 Googele 跟踪代码管理器的事情:

和随机 SP 生成的代码,如:

我应该忽略这些,因为它不是“真实”的内容吗?不确定这里真正的最佳实践是什么。

0 投票
1 回答
314 浏览

html - ARIA 屏幕阅读器 - 如何读取角色名称?

我正在尝试使我的 Web 应用程序更易于访问,并且我想做的一件事是创建一个角色组,并且应该以特定的方式阅读其中的内容。对于 UI 上的 ex,它看起来像一个菜单栏

html看起来像

我希望屏幕阅读器只关注按钮并阅读“button1 按钮,标题”和“button2 按钮,标题”。现在它不是这样读的。有什么想法吗?

0 投票
2 回答
5961 浏览

wcag2.0 - WCAG 2.0 合规检查器

要求网站与有视觉障碍的人兼容(WCAG 2.0 合规性)。找到了一个在线工具 Achecker,但它似乎无法识别 html 5/bootstrap 属性。如果有人可以推荐任何在线工具来检查为使网站与 wcag 指南兼容而进行的更改是否正确,那将很有帮助?

谢谢

0 投票
2 回答
1643 浏览

label - 输入后是否可以使用标签?

如果标签位置在输入元素之后,我想知道下面的代码片段是否无法访问?

在我使用 NVDA(屏幕阅读器)进行测试期间,按下箭头键会读取输入字段后的标签。

是必须在订单中保留标签元素的必要条件吗?

向下箭头键是表单元素的有效测试吗?

小提琴:https ://jsfiddle.net/yjqb6mt2/