wai-aria相关内容

可访问的仅 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 其他开发

无障碍切换

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

HTML5 标签和 WAI ARIA

一个简单的问题,如果我在我的标记中使用“main",我是否仍然有义务使用“role"属性? 例如,我应该使用: 或 ? 解决方案 main 元素 具有 main 角色默认. 您可以使用此值显式设置 role 属性,但它是 不推荐: 在大多数情况下,设置匹配默认隐式 ARIA 语义的 ARIA role 和/或 aria-* 属性是不必要的,不推荐,因为这些属性 ..
发布时间:2021-09-20 20:37:38 前端开发

从键盘和屏幕阅读器正确隐藏内容

我们在页面上有一个模式,当隐藏时,我们希望不让键盘用户能够进入内容,也不允许屏幕阅读器阅读. 为了处理这个问题,在父 DIV 上,我进行了设置,以便在隐藏时,它具有以下内容: 不会从已经可聚焦的子元素中移除焦点. 解决所有问题的最简单方法是移除过渡并简单地切换显示属性.这不仅解决了你的注意力问题,而且还消除了对 aria-hidden 的需求,让事情变得更简单. 话虽如此,转换可能 ..
发布时间:2021-09-20 20:37:35 其他开发

标题/标题位于文章标签之外的布局的最佳 HTML5 结构

我有一个布局,让我可以选择: 在文章标签中包含侧边栏,即使它不是文章特有的 在文章标签之外有标题 目前我在文章标签之外有标题,但验证器告诉我 itemprop="headline" 不是任何项目的一部分. 构建它的最佳方式是什么?是否有用于将标题与文章相关联的 for 属性? 如果您想知道什么类型的布局会迫使我做出这个选择,它是一个全宽的标题部分,然后是下面的文章和侧边栏 ..
发布时间:2021-09-20 20:37:28 前端开发

是否有关于何时选择 aria-descriptionby 而不是 aria-labelledby 的指导?

是否有关于何时选择 aria-describedby 而不是 aria-labelledby 的指导? 阅读关于这两个属性的 MDN 指南,我觉得它们相似且可以互换.两者似乎都表明它们可用于输入标签和其他内容,但许多合规工具似乎不喜欢输入标签上的 aria-describeby.我讨厌盲目地应用某个特定的属性,因为某个工具说我应该这样做,而且我更愿意知道一些具体的时间和原因 以下是 M ..
发布时间:2021-09-20 20:37:25 其他开发

HTML 验证:为什么将交互式元素放入交互式元素中无效?

免责声明:我知道它不是有效的 HTML.我想了解为什么不允许这样做? W3C 建议像 button 或 a 这样的交互元素不能包含另一个交互元素. 我可以找到很多提到这条规则和一些变通办法的资源,还有一些与这如何影响可访问性和屏幕阅读器相关的资源,但几乎所有这些资源都谈到这是一项要求,但没有解释为什么. https://adrianroselli.com/2016/12/be-w ..
发布时间:2021-09-20 20:37:22 前端开发

单页应用程序的 ARIA 实时区域

我对网页的可访问性不熟悉.我有一个应用程序,其中正文的内容根据 ajax 调用中的标题链接单击而更改,而无需刷新页面.因此,正文中的 HTML 内容会针对每个链接点击更新,并使用不同的页面内容(表格 + 按钮 + 信息文本). 我的要求是屏幕阅读器应该在每次加载页面时宣布信息文本.这里的容器是所有页面的主体(或主体内部的直接 div).因此,我将其设为 aria-live=“polite", ..
发布时间:2021-09-20 20:37:19 前端开发