wai-aria相关内容

如何使屏幕阅读器不能将元素识别为元素组?

我目前正在尝试使DOM元素与一到几个子元素尽可能地可访问。该元素将使用多层背景图像包含说明性内容。我目前正在使用子元素来提供图像描述,如在此内容丰富的博客文章中,有关如何在内容组中标记说明性内容。容器元素还可以包含其他包含文本内容的子元素。 当前示例元素如下所示: ..
发布时间:2020-05-31 23:48:50 前端开发

有没有一种方法可以通知屏幕阅读器有关到同一页面上新部分的过渡?

我有一个页面,该页面包含2个步骤来注册用户。 用户填写了第一部分的所有字段后,他需要确认“条款”,然后按一个按钮进行确认。 他按下按钮后,第一部分变为只读状态,第二部分(需要填写的其他字段)显示在页面底部,并且该页面滚动到该新部分。 我需要通知屏幕阅读器同一页上有一个新部分,但我不知道谁可以做。 感谢您的帮助! 解决方案 在您的html中,空的span / div带有a ..
发布时间:2020-05-31 23:48:33 前端开发

如何防止屏幕阅读器焦点(不涉及键盘焦点)离开预定义区域(例如模式)

我一直试图弄清楚如何将屏幕阅读器焦点包含在特定区域内。当我说屏幕阅读器焦点时,我并不是说可以通过按Tab / Shift-Tab键移动的默认浏览器焦点。在Mac上使用Voiceover时,我主要实现了可访问性,当您打开它时,页面上会出现一个新的焦点框,并读出“突出显示”的信息。 这时,如果要制表,浏览器和屏幕阅读器的焦点将同时移动。除了制表符以外,您还可以按住cmd + opt和左右键来将屏 ..
发布时间:2020-05-31 23:48:12 前端开发

如果包装器具有aria-label,VoiceOver导航在选项卡面板上将不起作用

我最近注意到,VoiceOver在选项卡和选项卡面板上的网络导航存在一个非常奇怪的问题。特别是,如果包装选项卡和选项卡面板的包装器设置了aria-label属性,则VoiceOver导航在切换选项卡时无法导航到选项卡面板。 问题可能出在很难用文字描述,因此我创建了此小提琴进行演示。请注意,外部包装div的 aria-label =“ Wrapper” 。下面是重现问题的步骤: 运行js ..
发布时间:2020-05-31 23:47:50 前端开发

aria-hidden = true是否表示您不必使用display:none?

我听说将 display:none 应用于不可见的东西更容易访问,然后更改不透明度。但是,使用 display:none 会弄乱我的一些CSS动画,这些动画会逐渐分层到核心功能上。 是如果在我的css中该元素被 opacity:0 隐藏并给该元素 aria-hidden = true ,则可以访问角色,还是该元素还应具有 display:none ? 要考虑的另一个因素是aria角色是 ..
发布时间:2020-05-31 23:47:07 前端开发

JAWS无法读取DIV ARIA-LABEl

我有一个angular2应用程序,我将一些动态文本绑定到ARIA-LABEl以获得嵌套的DIV。但是,当我使用JAWS阅读器在页面上找到DIV时,它没有读取分配的文本。这是我要读取的文本-attr.aria-label =“ {{productDetails?.ProductName}}的产品详细信息“ 此外,如果我为该div分配标题,它会读取动态文本,但不会在文本前添加“商品详情” ..
发布时间:2020-05-31 23:46:58 前端开发

角材料垫标签可访问性

我有一个带有文本输入控件的mat-form-field。我有一个mat-label,我也将一个aria-label属性 attr.aria-label 直接放在输入元素上。 mat-label 本身足以满足屏幕阅读器的需求吗? attr.aria-label 是必需的还是多余的? ..
发布时间:2020-05-31 23:46:46 其他开发

防止背景项目在模式叠加覆盖它们时获得焦点?

我正在努力使叠加模式更易于访问。它的工作方式基本上类似于此JSFiddle 。当您打开模态时,焦点不会正确地进入模态,并且会继续聚焦于页面中的其他(隐藏的,背景的)项。 您可以在我的JSFiddle演示中看到我已经使用 aria-controls , aria-owns , aria-haspopup 甚至 aria-flowto 。 ..

如何标记WAI-ARIA的加载动画?

我正在努力解决网页上的一些可访问性问题。我有一个用作对话框的div,并且在某个点上有一个div,其中包含加载动画和文本“ Working ...”。 我是不确定如何标记这两个项目,以便正确地通知盲人用户有进度动画并且正在工作,他应该等待。 ..
发布时间:2020-05-31 23:45:47 前端开发

在div上使用背景图像但仍可访问的最佳方法是什么?

我建立了一个使用 div s的图像库,其中包含一个背景图像,该图像的 size 设置为封面,但我担心可访问性。 我的问题如下: 我可以在 div 上使用 title 属性吗代替 img 标记上的 alt-text 属性? 将在 div 中添加 figcaption 元素作为同级元素,并将两者嵌套在 figure 元素有助于辅助功能? 我可以在 div 上使用 aria-labele ..
发布时间:2020-05-31 23:44:21 前端开发

用于JAWS开发的文本控制台?

我正在开发Web应用程序,并且希望通过屏幕阅读器使其易于使用。 在JAWS中进行测试非常耗时。 是否可以使JAWS显示文本而不是阅读文本? 我实际上不想在开发过程中听到这些内容。 我只想看看JAWS会读什么。 解决方案 据我所知,没有针对Jaws的语音查看器。但是,您可以使用“ / z”开关将其所有语音输出写入日志文件。不幸的是,由于屏幕阅读器已锁定,因此您无法在文本编辑器中查看日 ..

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

使用 aria-owns =“ id” 对元素的实际影响是什么? code> and(!) aria-controls =“ id” 当这两个属性分别为时,浏览器如何通知屏幕阅读器 解决方案 aria-controls 和 aria-owns 。 aria-controls 旨在表明某个元素控制着另一个元素。 例如例如 ..
发布时间:2020-05-31 23:42:04 其他开发

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

几天前,我开始在Internet上搜索有关WAI-ARIA的教程和文档,其中涉及几乎所有类型的AJAX请求。 使用jQuery和AJAX对嵌套的下拉列表进行编码。它工作得很好,但是本机不可访问。例如,我们需要使用WAI-ARIA特定的标签来“启用”诸如AJAX之类的所有动态内容的可访问性。 我的要求之一是: b $ b假设我有一个State下拉列表,该列表使用onchange事件更新了 ..
发布时间:2020-05-31 23:39:55 其他开发

如何处理WAI ARIA角色=“列表框”;

我有一个选项列表,可以从中选择一个。 HTML的 元素涵盖了所有目的。由于我们需要不同的视觉演示,因此我正在考虑使用 WAI ARIA角色=“列表框” 。我不清楚如何使用 aria-activedescendant , aria-selected 和 aria-已选中。 关于焦点/活动状态的问题: 如果我在列表框中使用 aria-activedescendant 指向 ..
发布时间:2020-05-31 23:39:11 其他开发

如何在没有字段集的情况下可访问地对表单输入进行分组?

问题:对表单元素进行分组 我有一个HTML表单,在几个地方,单个控件由多个输入组成。一个示例是一组单选按钮。 我想对这些输入进行分组,并对其进行显式标签,以便屏幕阅读器也可以(除了视觉上 例如,假设我有一个像这样的控件: Type ..
发布时间:2020-05-31 23:38:50 前端开发