wai-aria相关内容

角材料垫标签可访问性

我有一个带有文本输入控件的 mat-form-field.我有一个 mat-label,我还直接在 input 元素上放置了一个 aria-label 属性 attr.aria-label. mat-label 本身是否足以用于屏幕阅读器?attr.aria-label 是必要的还是多余的? 用户名 ..
发布时间:2021-11-26 19:29:42 其他开发

JAWS 未读取 DIV ARIA-LABEl

我有一个 angular2 应用程序,我正在将一些动态文本绑定到嵌套 DIV 的 ARIA-LABEl.但是当我使用 JAWS 阅读器在页面上定位 DIV 时,它没有读取指定的文本.这是我正在尝试阅读的文本 - attr.aria-label="Product details for {{productDetails?.ProductName}}" 另外,如果我给这个 div 分配一个标题角 ..
发布时间:2021-11-26 19:28:33 前端开发

什么是适合地图元素的 WAI-ARIA 角色属性

在我的网页中,我有一半是使用 Google 地图的地图显示.我应该向显示地图的 canvas 元素添加什么 aria-role?我查看了 WAI-ARIA 文档 以了解可能的角色定义和最接近的我发现是 widget. 页面上地图的合适aria-role是什么? 解决方案 如果你使用谷歌地图,你应该使用 role="application" 因为可以使用屏幕阅读器进行交互使用地图并根据 ..
发布时间:2021-11-26 19:26:02 其他开发

标签部分的语义标记和 WAI-ARIA?

我正在标记一个网站,我一直在努力磨练我的可访问性技能.我想知道标签式内容最语义化的标记是什么.这就是我现在所拥有的: 材料材料材料 ..
发布时间:2021-11-26 19:25:52 前端开发

aria-owns 和 aria-controls 有什么区别

使用时对元素的真正影响是什么 aria-owns="id" 和(!) aria-controls="id" 当使用这两个属性时,浏览器如何通知屏幕阅读器? 解决方案 aria-controls 和 aria-owns 当两个元素之间的关系可以't 由 DOM 层次结构本身确定. aria-controls 旨在指示一个元素控制另一个元素.例如例如,用于视频的控制按钮、用于可视 ..
发布时间:2021-11-26 19:23:21 其他开发

可访问的仅 CSS 选项卡视图

我正在开发的网站需要 (a) 不使用 JavaScript 和 (b) 可通过键盘访问. 我使用标签目标技巧来构建标签视图(https://css-tricks.com/functional-css-tabs-revisited/),但我注意到它依赖于被点击的标签.我不知道如何让它与键盘一起工作.这可能吗? .tabs {背景色:#eee;最小高度:400px;}.tabs__list ..
发布时间:2021-11-26 19:17:35 前端开发

在 ember 中将屏幕阅读器的焦点设置在模态警报上

我正在尝试使我的 ember.js 应用程序更易于访问,并且正在通过 Apple 的内置 VoiceOver 实用程序进行测试.我正在根据需要添加 ariaRoles- 导航目的不明确的标签属性.我在关注模态警报时遇到了问题,因为读者的注意力集中在模态后面的页面项目上.有没有人有处理屏幕阅读器模式警报的经验?我的印象是,在我的视图中声明“ariaRole:'alertDialog'"会为此类对话框 ..
发布时间:2021-11-26 19:17:09 前端开发

制作没有href的链接

在我工作的网站上使用了第三方脚本,用简单的 替换了一些 实例>.由于脚本的另一部分,链接仍然有效.但它们不再被用户代理视为链接. 我可以通过添加 tabindex="0" 将它们恢复到选项卡式导航顺序,但是我如何让辅助技术将它们作为链接发布或将它们包含在页面上所有链接的列表中? 添加 role="link" 会有帮助吗? 我正在推动第三方改进他们的脚本,以便保持 href 不变. ..
发布时间:2021-11-26 19:16:15 前端开发

如何在模态对话框中保持焦点?

我正在使用 Angular 和 Semantic-UI 开发一个应用程序.该应用程序应该是可访问的,这意味着它应该符合 WCAG 2.0.为了达到这个目的,模态应该将焦点保持在对话框内,并防止用户离开或在位于模态下方的页面元素之间使用“标签"移动. 我找到了一些有效的例子,如下所示: JQuery 对话框:https://jqueryui.com/dialog/#modal-confi ..
发布时间:2021-11-26 19:15:29 其他开发

如何使用 WAI-ARIA 通知屏幕阅读器 div 现在可见

如何使用 WAI-ARIA 通知屏幕阅读器 div 现在可见? 如果我们得到了 html 呈现主要内容 隐藏内容 然后我们 $('#foo').hide();$('#bar').show(); 我们如何通知屏幕阅读器他们应该通知用户现在可见的 div(或者可能自动关注现在可见的 div)? 解 ..
发布时间:2021-11-26 19:12:23 前端开发

无障碍切换

我们正在重新设计我们的网站,内部存在一些担忧,认为可访问性会影响设计元素.建议使用切换模式.我们的标准版本仍然可以访问,但对比度和更大的字体大小除外,当您切换到可访问模式时,它们将可用.有没有人有这方面的经验? 解决方案 您确定您真正想要的是切换吗?这迫使某些用户执行额外的步骤以使用您的网站.当您谈论对比度和字体大小的切换时,这尤其令人担忧. 由此我可以推测您的设计中有些部分对比度较 ..
发布时间:2021-11-26 19:10:55 其他开发

什么是 HTML5 ARIA?

什么是 HTML5 ARIA?我不明白如何实现它. 解决方案 WAI-ARIA 是定义对可访问 Web 应用程序的支持的规范.它定义了一堆标记扩展(主要作为 HTML5 元素的属性),Web 应用程序开发人员可以使用这些扩展来向屏幕阅读器等辅助技术提供有关各种元素语义的附加信息.当然,要让 ARIA 工作,解释标记的 HTTP 用户代理需要支持 ARIA,但规范是这样创建的,即允许下层用户 ..
发布时间:2021-11-26 19:03:54 前端开发

如何隐藏文本并使其可通过屏幕阅读器访问?

我有一个简单的文本,它会根据操作进行更新,我希望屏幕阅读器可以宣布该文本.但我不希望该文本在网页上可见.我尝试了 display: none 和 visibility: hidden,但屏幕阅读器软件似乎无法访问它们.我找到了一种方法来完成这项工作 - 即通过使用负 999999 值一直绝对定位元素,这将使其离开屏幕并从网页中隐藏.我不是这个解决方案的粉丝.有没有更优雅的方法来实现这一目标? ..
发布时间:2021-11-26 19:01:29 前端开发

如何使网页中的脚注可访问?

在 PDF 文档中,有时会在每页的末尾放置脚注,以阐明某些术语或添加附加信息. 例如: 我希望创建一个与脚注等效的 HTML 网页. 页面必须符合 Web 内容可访问性指南 (WCAG) 2.0 下的可访问性指南,AA 级.网页也必须是 HTML4. 我的第一个想法是像维基百科上的参考资料部分那样创建脚注.但是,我的网页可能很长,我担心这样做可能会使人们迷失方向,并导致他们 ..
发布时间:2021-09-20 20:37:41 其他开发