问题标签 [ada-compliance]

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

javascript - ADA compliance - Wrapping input in label vs adding label before input

I am working on a website to implement Ada compliance.

I am wondering which is better approach in terms of ADA compliance.

VS

Similarly for other input types such as select, radio button, checkbox etc.

Also we don't need labels in majority of forms as per design, so does it will make difference for ADA compliance if I add hidden labels for inputs?

Similar thing is asked in below question but its doesn't answer in terms of ADA.

Is it better to wrap the label tag around a form item or use the "for" attribute in HTML?

Thanks

0 投票
1 回答
128 浏览

html - 没有通过键盘关注表格标签

我无法将注意力集中在我的桌子上,我不确定我应该如何标记它,以便它可以通过键盘访问。

0 投票
2 回答
180 浏览

accessibility - 跳过带有不同页面链接的导航菜单?

我们目前正在更新我们的网站以符合 ADA,并希望在主要登录页面上实施跳过导航菜单。该菜单将提供指向“登录”、“主要内容”和“页脚”的跳过导航链接。该公司提供三项主要服务,每项服务都有自己的登录页面。我正在努力解决的问题是,在跳过导航菜单中提供两个额外的链接将用户重定向到其他两个业务服务登录页面是否有用或合适?

0 投票
2 回答
396 浏览

php - 如何将 aria 标签分配给侧边栏

我正在使用 Siteimprove 的 chrome 扩展程序浏览客户的网站以测试合规性。我在一个侧边栏区域的两个侧面收到“具有相同名称的地标”错误。在functions.php的注册侧边栏代码中,我有:

这正在工作并分配标签,但此侧边栏中有两个小部件(文本小部件和事件列表小部件),Wordpress 正在为每个小部件创建一个具有相同标签的边栏。是否有某种类型的第 n 个分配或者我可以做些什么来为这个侧边栏中的每个旁边分配一个不同的标签以防止冗余?

0 投票
1 回答
72 浏览

html - 如果选项卡永远无法访问,盲人用户将如何访问信息文本?

我正在尝试使我的 Web 应用程序符合 ADA 标准,并且我仍在学习它的基础知识。如果我要在一个页面上有一份问卷,向用户提供一个问题,那么盲人用户将如何看到所呈现的问题或信息?

例如,假设我有一个问题“你今天快乐吗”和一个复选框或下拉菜单选择“是”或“否”。选项卡应该将您带到这些元素,屏幕阅读器会发现有复选框或下拉菜单,但他们永远不会到达“你今天快乐吗”,这意味着他们永远不会理解每个问题的上下文。

这也超出了问答场景。如果选项卡永远无法访问,盲人用户将如何访问我的 Web 应用程序上的免责声明或信息?

解决方案可以tabindex="0"用于一切吗?

0 投票
1 回答
2505 浏览

label - 使用占位符代替标签

在可访问性方面,通常不使用占位符代替标签,因为在字段中输入内容后,占位符会消失。但是,如果我的占位符之后充当视觉标签怎么办?

在焦点和进入之前

聚焦和进入后

在这种情况下只使用占位符代替实际标签是否仍然可以?如果是这样,我是否还需要用 aria-label 标记它?

0 投票
2 回答
843 浏览

accessibility - 如何确定网站的可访问性/合规性分数?

目前,我正在努力制定动态网站合规性。我使用 WAVE Tool chrome 扩展和手动测试键盘导航。我听到很多关于辅助功能分数的信息(我对此一无所知)。谷歌搜索后,我确实看到有一些网站这样做并向我们提供报告。但是想在这里与社区核实一下,看看这个分数是关于什么的,如果可能的话如何(免费)获得它?任何提示/建议,非常感谢!

0 投票
0 回答
255 浏览

ada-compliance - Wave Validation Tool - WCAG 2.1 - 为什么我的选择元素失败

Wave(网络可访问性评估工具)报告说客户的网站有 4 个对比错误,我真的受到了挑战。翻遍代码,原来他们报告的问题是select元素的对比度有问题,显示前景色为0000ff,背景色为ffffff

问题是我更正了 css 声明以使所有选择元素的颜色为黑色 000000,背景为白色 ffffff 我还声明了 !important 并且它们在检查器窗口中显示了这些值。

我到底错过了什么?波形工具有问题吗?

提前感谢您的帮助。

这是具体报告Wave Diagnostic Report的链接

0 投票
1 回答
1169 浏览

accessibility - WCAG ada 合规性可通过键盘访问的多级下拉菜单

我正在尝试创建一个可以使用键盘导航的下拉菜单。我可以使用 tab 键使第一级工作,但无法访问第二级。示例可以在这里找到https://codepen.io/jjfash/pen/oNgqEjx

的HTML:

CSS:

至少,我希望它可以使用键盘完全导航菜单,以符合 ADA 标准。我最好的情况是使用箭头键(不仅仅是 Tab 键)进行导航。我尝试将 tabindex="0" 添加到每个元素,希望这会起作用,但到目前为止还没有运气。任何帮助表示赞赏。

0 投票
1 回答
154 浏览

javascript - 尝试在弹出灯箱 Lightbox2 中为 ADA 合规标准添加 ALT 标记

我正在更新客户的网站以包含 alt 标签,以使他们的网站符合 ADA 合规性。我有几个页面使用来自https://lokeshdhakar.com/projects/lightbox2的 Lightbox2 。我将 ALT 属性添加到我的数组中,但它没有在脚本中被调用,所以没有被添加。

<a href="images/slide-show/at-the-beach-boys.jpg" title="An easy walk to fun at Long Sands Beach." alt="Small boys use sand toys on Long Sands Beach." rel="lightbox[Overview]"><img src="images/slide-show/at-the-beach-boys-th.jpg" alt="Small boys use sand toys on Long Sands Beach." width="256" height="176" /></a>

我尝试编辑 lightbox.js 以包含 alt 标签调用,但没有成功。

lightbox.js 的内容