问题标签 [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.
html - 只读输入元素与非输入元素
我正在为客户评估一些代码,并且在他们的 HTML 中遇到了一些地方,他们正在渲染input
具有readonly
属性和 static的字段value
。这些字段中的数据将永远无法在相关页面上编辑,所以我的想法是,它们input
首先不应该是字段,因为它在语义上看起来不正确,但更重要的是,可能会给使用屏幕阅读器的人带来问题。我知道,使用input
,甚至是只读的,您可以获得元素获得焦点的能力,但可用性与这里无关。
我发现这个问题问同样的问题,但它是从 2013 年开始的,只有一个人回答,而且看起来不像是一个权威的答案。
对于如何呈现可能最初来自用户输入但现在呈现为与可访问性相关的只读数据的数据,是否有明确的标准或最佳实践?
html - 辅助功能问题选择带有空格键的复选框会跳过内容
我有一个带有复选框的下拉菜单,我可以在菜单中切换,进入下拉菜单,然后选择带有空格键的复选框。但是,当我再次点击选项卡时,焦点现在回到页面顶部,它应该转到下拉列表中的下一个复选框。这只是IE中的一个问题。
新更新
angular - 如何在 Angular 中使用 aria 扩展属性作为侧边栏?
我正在尝试使用可访问性中的aria属性在我的项目中实现文本到语音的场景,但无法正常工作。
我尝试了下面的代码,它没有按预期的语音工作。
预期的解决方案:
当用户尝试单击侧边栏菜单时,应该说侧边栏已打开/展开并且没有。菜单可用,当用户再次单击时,它应该说侧边栏已关闭/折叠。
如果要应用某些屏幕,可以建议在同一场景下为我的整个项目实现通用方式
html代码:
示例实时应用程序链接:
https://stackblitz.com/edit/angular-accessibility-sample?file=src/app/app.component.html
google-chrome - Firefox 和 Chrome 的可访问性树的区别
问:Google Chrome 和 Firefox 的可访问性树有什么区别?
我想知道这些浏览器如何呈现可访问性树。这些浏览器的可访问性树之间有什么区别,这种差异会影响共享到可访问性 API 的信息吗?
google-chrome - 访问网站的辅助功能树
问:如何使用开发者工具查询网站的辅助功能树?有可能做到吗?我试图了解辅助功能树如何工作并帮助屏幕阅读器。
html - 使用 tab-index 在 html 中禁用属性的可访问性
您好我在处理禁用元素的选项卡索引时遇到问题,因为我们无法聚焦元素,屏幕阅读器工具不会宣布元素并直接跳过。
例子:
我确实有仪表板具有查看用户名和电子邮件ID的功能,但在他们按下更新按钮之前不能访问更新。
在这些场景中,html 标记处理了禁用属性,它无法聚焦并跳过更新按钮。
期待:
用户应该能够集中注意力或屏幕阅读器应该能够使用 aria-label 访问禁用属性。
accessibility - 如何确保屏幕阅读器宣布大写字母
处理发送给客户的电子邮件。电子邮件有一个混合了大小写字母的访问代码。我们面临的问题是,即使设置为阅读大写字母,因为Cap
屏幕阅读器不会宣布字母的大小写并连续阅读它们。例如,我们希望它读取以下内容:
您的一次性访问代码:U8dFyX
我如何确保它说 U、F、X 是大写字母。
任何帮助将不胜感激。
accessibility - 焦点可见对比
我正在寻找关于 WCAG 2.1 SC 1.4.11 非文本对比与焦点可见表单元素相关的说明。这个新的(WCAG 2.1)SC 是否意味着表单元素焦点上使用的任何颜色现在必须与周围内容具有 3.1 或更高的对比度?
我就是这么读的,但我发现 wcag 的写法就像律师写合同一样。
html - aria-expanded 仅用于“点击”交互,还是也可以用于“焦点”?
我可以aria-expanded
在具有焦点或悬停状态的链接元素(锚点)上使用“”吗?因此,当用户在链接上使用键盘悬停或聚焦时,aria-expanded 应该变为 true,而当悬停或焦点被移除时,它应该变为 false。
根据我的阅读,我真的找不到明确的答案,除了这个链接,它说它应该只用于点击,而不是焦点。
wordpress - 如何将替代文本添加到实际上是无声、循环、自动播放 MP4 的 GIF
我在我的 Wordpress 网站上有一些帖子,其中包含很长的 GIF 视频。为了减少这些 GIF 的巨大尺寸,我将它们转换为 MP4 视频,现在使用<video>
标签来显示它们,如下所示:
我的问题是,添加 alt 文本的最佳方法是什么,就像我在<img>
标签上添加的那样?这些视频可能使用了<video>
标签,但实际上它们更像是图像,并且应该能够具有替代文本。什么最适合屏幕阅读器,什么最适合 SEO?
还有其他方法可以实现我不知道的更小、更高效的 GIF 的目标吗?