问题标签 [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 回答
24 浏览

html - Dynamic email images that comply with WCAG 2.0

In-order to deliver personalized ads thru email, we refer the <img> tag src to our servers that return a personalized image ad.

Now that we have to comply to WCAG 2.0 standard, we'll need to dynamically fill the alt attribute too.

How can we achieve that or similar result that will comply to WCAG 2.0?

0 投票
2 回答
175 浏览

javascript - JavaScript 生成的代码和屏幕阅读器

我请你帮助我,我完全被这个问题困住了。

我想让我的代码可以通过键盘导航并适用于屏幕阅读器设备。但我有几个问题。

这是我在 JS 中的代码:

和 HTML:

当我仅使用键盘(带有选项卡)导航到btn1窗口然后按回车键(或空格)时,按钮已更改,但它失去了焦点。如您所见,我尝试将其集中在 JS 上,但没有结果。我也尝试使用tabindex标签,但也没有帮助。我希望它在被按下时能够聚焦,这样屏幕阅读器更容易导航和访问。

请帮忙!

编辑

焦点已经用 James Long 解决方案在按钮上进行了测试,并且可以正常工作!

但是,btn.setAttribute('aria-hidden', true);应该删除。

最终编辑

我刚收到,呵呵!为了让我的例子正常工作,我应该专注于btn2而不是btn1. 这太愚蠢了!所以,它是这样的:

我为自己感到骄傲:)

0 投票
2 回答
137 浏览

accessibility - wcag 2.0 的 1.3 和 2.1.1 部分

我正在阅读位于此处的 WCAG 2.0 指南(点击我),其中的某些部分对我来说并不清楚。

1) 正如我从1.3部分了解的那样,例如,我应该制作在没有 css 的情况下正确可见的内容。我想知道它是如何“与技术无关”的?简单地说,我必须在某些情况下使用 javascript,以便我的一些 css 很酷的东西可以工作。因此,如果我想让我的网站独立于 JS - 我根本做不到。此外,如果我使用的是 JS 编码的东西,我不能确定它是否适用于某些屏幕阅读器。再说一次,这取决于技术。我在这里想念什么吗?

2)关于2.1.1部分。例如,如果我的网站上有一个滑块,但由于某种原因我无法从键盘访问它,但它没有键盘陷阱并且滑块所代表的内容没有临界值(可以从其他链接访问它)地点)。这对成功的标准好吗?在 2.1.1 部分的描述中,它说“尽可能”,所以我猜这完全没问题,但我不确定。

0 投票
3 回答
1409 浏览

javascript - 仅为屏幕阅读器隐藏文本

我根本无法得到这个问题的答案。WCAG 说它可以通过aria-hidden标签来完成,但我读过它不适用于许多屏幕阅读器。

不知道如何display:none才能帮助隐藏一些适用于屏幕阅读器的文本(=对 SR 以外的其他设备可见)。这也不清楚如果屏幕阅读器display:none不支持 css 将如何处理。

是否有任何技术或最佳实践或任何我可以用来为屏幕阅读器隐藏一些文本的方法?

0 投票
1 回答
343 浏览

html - 根据 WCAG 规则,H2 航向是否可以在视觉上看起来像 H1,反之亦然?

我进入可访问性测试。就我而言,我们有两个标题

由于添加了 CSS 属性,在视觉上 H1 看起来比 H2 小。这种情况基于 WCAG 2.0 是否可以接受?

0 投票
2 回答
172 浏览

javascript - 了解可访问性的访问键

我正在尝试使我的导航尽可能地易于访问,并且我正在考虑为其添加一些accesskey-shortcuts,但有一些疑问。

1)accesskeys可能会与用户区辅助软件上的某些键绑定发生冲突。这很关键吗?也许一些JS关闭\打开accesskeys会是个好主意?

2) 当我得到它时,应该有一些特殊的数字( accesskeys) 用于可访问性。

如果是这样,还有更多吗?喜欢“帮助”还是别的什么?

3) 在w3.org上,它说我应该accesskeys在编号列表 ( ol) 中放置。它有多重要?

4) 从可访问性的角度来看,使用 JS 绑定网页的热键是一种不好的做法吗?

0 投票
2 回答
7247 浏览

html - 可访问用户的链接内的图像

假设我想制作一个可点击的图像(比如网站徽标或其他),如下所示:

如果我想让它可以访问,我应该使用aria-label链接和alt图像还是只使用aria-label

此外,关于是否一起使用 title 和 alt 有很多意见,正确的方法是什么,为什么?

0 投票
1 回答
600 浏览

hover - Web 内容可访问性指南是否适用于链接/按钮的次要状态?

是否所有文本+背景组合在其默认状态下都通过了AA 级对比度指南(即对比度为 4.5:1)?

我们有一些链接和按钮,其中背景在悬停/聚焦时会改变不透明度,然后不会通过对比度检查。任何人都可以确认这是否是一个问题,或者只要默认状态通过,它是否可以接受?

0 投票
1 回答
294 浏览

html - 删除列表项的可访问性

我正在处理网页上的可访问性,我遇到了这个我找不到答案的问题。鉴于我有一个项目列表和通过单击项目旁边的垃圾图标删除每个项目的选项(见附图),我如何确保屏幕阅读器 (JAWS) 等辅助技术可以正确关联每个垃圾带有正确项目的图标。

这与 WCAG 2.0 相关: 1.3.1 信息和关系:通过演示传达的信息、结构和关系可以通过程序确定或以文本形式提供。(甲级)

代码可能是这样的:

包含 3 个项目的列表。每个项目都可以删除。

0 投票
1 回答
31 浏览

html - 屏幕阅读器的表格样式输入

看看这张图片。我有一个包含输入的表。每个输入由一个列标题单元格和一个行标题单元格定义。您如何确保盲人用户知道在每个输入字段中输入什么内容?

让我们使用以下简化的 html 表作为示例:

https://jsfiddle.net/vzr6rmzx/