wai-aria相关内容

向屏幕阅读器隐藏图标的适当方式是什么

在我的Web应用程序中,我为自己设置了一个完全由图标组成的字体。我使用这些图标来补充应用程序中的标题和副标题,使其在视觉上更具吸引力。 但是,像JAWS这样的屏幕阅读器会读出这些内容,这会给屏幕阅读器的用户带来不愉快的体验。 例如,字符c显示云的图像。我以这种方式使用它来补充标题,例如 : c 现在我希望屏幕阅 ..
发布时间:2022-06-30 10:50:32 前端开发

如何使用WAI-ARIA创建完全可访问的嵌套下拉列表?

几天前,我开始在Internet上搜索有关WAI-ARIA的教程和文档,了解几乎所有类型的AJAX请求。 我习惯于使用jQuery和AJAX编写嵌套下拉列表。它工作得很好,但不是本机可访问的。例如,我们需要使用特定于WAI-ARIA的标记来启用所有类型的动态内容(如AJAX)的辅助功能。 我的一个要求如下: 假设我有一个State下拉列表,它使用onChange事件更新一个Reg ..
发布时间:2022-06-30 10:41:54 前端开发

如何使没有href属性的链接可访问?

我工作的一个站点正在使用第三方脚本,该脚本将的几个实例替换为。由于脚本的另一部分,这些链接仍然有效,但它们不再被用户代理视为链接。 我可以通过添加tabindex="0"将它们恢复为选项卡式导航顺序,但如何使辅助技术将它们声明为链接或将它们包含在页面上所有链接的列表中? 添加role="link"真的有帮助吗? 我正在推动第三方改进他们的脚本,以使HR ..
发布时间:2022-06-30 10:30:24 前端开发

是否可以将整张卡片包装在<;a>;标签中?

在我的网站上有“卡片”,每一张都有很多元素(图像、文本、日期等)。有点像推特里的推特卡片: 我希望整个卡片都是可点击的(应该是指向另一个页面的链接)。 目前,我将顶层元素作为标记,并使用aria-label和aria-describedby,因此屏幕阅读器可以正确读取它。 ..
发布时间:2022-03-10 09:08:04 前端开发

如何指示屏幕阅读器将";doit";读为";do it";?

我在一个网站上工作,该网站全面使用首字母缩写(";doit";,发音为";do it";)。不幸的是,视障人士的屏幕阅读器将首字母缩写读错了(";duh-i.t.";)。 我认为有两种解决方案之一: 在整个网站(HTML5)中查找所有使用&doit&…的元素,并以某种方式向屏幕阅读器添加一些内容,使其不阅读显示的文本,而是使用&do it ..
发布时间:2022-03-09 23:56:16 前端开发

辅助功能和星号尾注

我有一个很长的文档,我需要将其转换为符合WCAG AA的HTML,作者使用星号作为结尾注释,如*、**和***。下面是一个示例: Solano County Atlas Fire (Solano County) 10/17* Ponderosa Fire (Butte County) 08/17* Helena Fire (Trinity County) 08/17* ... * For ..
发布时间:2022-03-09 23:50:14 前端开发

如何在单击“显示更多”按钮后公布新内容?

我一直在尝试在用户单击Show more按钮后加载一些附加内容的区域中添加VO支持(请参阅所附的截图)。 必需的行为: 我需要VO宣布有关额外加载的元素的信息,比如什么是cookie?和另外11个项目(&Q;)。 已尝试: 方法-1:使用的aria-live=";polite";aria-Related=";Additions"; 行为 ..
发布时间:2022-03-09 23:35:50 前端开发

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

我有一个简单的文本,它会在某个操作上得到更新,我希望屏幕阅读器会宣布它.但我不希望该文本在网页上可见.我尝试了 display: none 和 visibility: hidden,但似乎屏幕阅读器软件无法访问它们.我找到了一种方法来完成这项工作 - 即通过将元素绝对定位到负 999999 值,这将使其脱离屏幕并隐藏在网页之外.我不是这个解决方案的粉丝.有没有更优雅的方法来实现这一点? ..
发布时间:2022-01-30 14:06:42 前端开发

是“aria-haspopup"吗?属性主要用于工具栏菜单?

我已经看到 aria-haspopup 属性被用于应用程序的工具栏菜单,例如 所见即所得编辑器.但是,我还没有看到它被用于任何 ARIA 演示网站的主导航. 这个属性主要是为应用程序的工具栏菜单引入的吗?在网站的主导航(有子菜单)上使用它是否合适合理? 解决方案 刚刚看到这个属性被用在 jQuery UI Selectmenu(在a元素上,是选择菜单的开关).所以似乎可以在任何代码上 ..
发布时间:2022-01-20 22:58:30 前端开发

公告结束时切换 aria-live?

我目前正在开发一个交互式 pdf 阅读器项目,以使其更易于访问.我制作了一个在屏幕上不可见的 元素,并为其赋予了 aria-live 属性.每当我想宣布某事时,比如打开一个抽屉,我都会设置那个 元素的文本.但是,如果用户希望整个页面都是公告,Voice Over 的键是 VO + a,那么 元素也会被读取,但是我想防止这种情况发生. 有人可以建议这是否是宣布更改的正确 ..
发布时间:2022-01-19 13:09:42 前端开发

标签的 HTML5 角色属性

我的 HTML5 模板在页面左上角的每个页面(我用于关键字)上都有 h1 元素. 是否有一个 role 属性可以将它们标记为类似于 WorPress 中的标签的标签? 解决方案 根据 W3C 的定义,您可以将此值用于 role 属性: 横幅 补充 内容信息 定义 主要 导航 注释 搜索 contentinfo 目的是提供有关内容的元信息,因此可用于标签管理. ..
发布时间:2022-01-18 21:42:15 前端开发

什么是导航栏/菜单的 WAI-ARIA 兼容实现

我们正在为门户网站的主导航菜单实施(即添加)WAI-ARIA 支持.菜单是这里显示的那个: Menu 是通过经典的 // DOM 树实现的,样式为CSS 看起来像水平标签. 这种小部件的 WAI-ARIA 兼容实现是什么? 我已经阅读了 w3org 的最新 WAI-ARIA 规范的许多部分,以获得一般的理解、分类等.然后我阅读了几个 UI 小部件实现的示例.我找不到任何专门针对 ..
发布时间:2022-01-06 14:30:13 其他开发

角材料垫标签可访问性

我有一个带有文本输入控件的 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 其他开发

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

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

aria-label、aria-labelledby 和 aria-describedby:屏幕阅读器中非常不可预见的行为

我刚刚注意到,虽然 aria-label、aria-labelledby 和 aria-描述的 属性据说适用于每个元素(见 https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-scribedby),它们似乎只适用于像 a 这样的几个元素,而不适用于例如NVDA 和 JAWS 中的 div 或 p. 我创建了一个小代码笔来 ..