屏幕阅读器无法读取 Firefox 中的 Aria-Live

2024-02-25

我遇到一个问题,屏幕阅读器无法读取 FireFox 中 aria-live 部分中更改的文本。

这是一个简单的页面示例,在 Chrome 中,屏幕阅读器会读取更改,而在 FireFox 中则不会:

<div aria-live="assertive" id="moo">

</div>
<script>
  let i = 0;
  setInterval(() => {
    document.getElementById('moo').innerText = 'moo' + i++
  }, 2000)
</script>

难道我做错了什么?除了人们在 Firefox 中使用的 aria-live 之外,还有其他方式在更改发生时宣布更改吗?

我在 Mac-Firefox-VoiceOver 上进行了测试(它适用于 Mac-Chrome-VoiceOver)


当前的火狐版本:83.0(64 位)
火狐夜间版:85.0a1 (2020-11-29)(64 位)
在最新的 Nightly 版本中,结合了Firefox 上的 aria-live + VoiceOver是固定的! ???? 万岁!

参考: Firefox/Voiceover:aria-live 区域尚未公布 https://bugzilla.mozilla.org/show_bug.cgi?id=1198336

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aria-live Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style>
    body {
  margin: 1em;
}

button {
  margin-top: 1em;
  display: block;
}
  </style>
</head>
<body>
  <h1>Aria-live Demo</h1>
  <p>Testing <code>aria-live</code><br><button>Add Content</button><button id="add-more" >Add more content</button></p>

  <!-- add aria-live="polite" -->
  <div class="target" aria-live="polite" ></div>
 
  <script type="text/html" id="test-content">
    <h2>Custom Content</h2>
    <p>Hello there! I am content that is going to be plunked into a container via javascript</p>
  </script>

  <input placeholder="messgae somebody"/>
<script>
$("button").on("click", function(){
  $(".target").html($("#test-content").html());
});

$("#add-more").on("click", function(){
  $(".target").append("<p>Hello World</p>");
});

$(document).on("keydown", function(e){
  // press space to add content
    if(e.keyCode === 32) {
        $(".target").append("<p>Hello World</p>");
    }
});

</script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

屏幕阅读器无法读取 Firefox 中的 Aria-Live 的相关文章

  • npm 脚本:node-sass 不监视部分 sass 文件

    我有这个项目结构 src assets css sass main scss variables scss 我正在尝试编写一个 npm 脚本 该脚本将监视我的所有 scss 文件 包括部分文件 中的更改 然后仅编译我的 main scss
  • 表单未使用 AJAX 提交

    再次更新 如果有人关心的话 我之前发布的解决方案由于某种原因停止工作 我在 ajax 请求中包含了 beforeSend 并将验证表单的 js 部分粘贴到其中 现在就像一个魅力 form on submit function e e pre
  • 大小相同的表格单元格填充包含表格的整个宽度

    有没有办法使用 HTML CSS 具有相对大小调整 使一行单元格拉伸其所在表格的整个宽度 单元格的宽度应该相等 并且外表的大小也是动态的 table width 100 目前如果我不指定固定大小 单元格只是自动调整大小以适应其内容 您甚至不
  • Atom“自动完成”不起作用

    因此 当您安装 Atom 时 autocomplete 会随其一起提供 并且默认情况下处于启用状态 当我编写代码时 什么也没有显示 为什么 是否需要配置任何文件才能正常工作 In autocomplete plus settings pag
  • 如何获取调用函数的“this”值?

    如果我有一个这样的函数 function foo this console log this function bar bar prototype func function foo this var test new bar test f
  • 使用JS将图像的特定背景颜色设置为透明

    我正在使用以下代码来修改图像的透明度 然而 我想做的只是修改图像的背景颜色并将其 alpha 通道设置为 0 而不是整个图像 以下代码将整个图像的 Alpha 透明度设置为 0 var ctx this data getContext 2d
  • HTML5 拖放 - 没有透明度?

    当我将一个元素拖放到页面上时 该元素会变成 幻影 基本上它获得了一些透明度值 有什么办法可以做到吗opacity 1 看来是做不到了 拖动的元素被放入具有自己的不透明度 低于 1 的容器中 这意味着虽然您可以降低拖动元素的不透明度 但您无法
  • Typeahead.js 干扰 Bootstrap 输入组

    如何防止 Typeahead js 拆分我的 Twitter Bootstrap 3 输入组 每当我将 Typeahead javascript 指向属于输入组一部分的文本区域时 连接的文本区域和提交按钮就会停止连接 这只是 Typeahe
  • 如何在流程图中间隔刻度线?

    我下面有一个流程图 您将看到标签被压缩 我想使刻度之间的宽度确保显示所有标签 标记如下 div div class graph info a href span span a a href class active span span a
  • 反转二进制网络

    如何反转二元方程 以便找到哪些输入将产生给定的输出 Example Inputs i0 through i8 Outputs o0 through o8 Operators XOR AND 二元方程 1 i0 1 i1 0 i2 1 i3
  • 为什么这个 CSS nowrap 不起作用?

    我试图阻止 bar top container div 包裹它的内容 无论页面有多宽 即两个选择应该始终出现在同一行 但是当页面宽度太小而无法容纳它们时 这不起作用一方面 我该如何解决这个问题 Styles bar top containe
  • 检查 href 中是否存在 jQuery 中的查询字符串

    我目前有一段 jQuery 用于附加带有一些位置信息的 URL jQuery a attr href function return this href location 123 abc 我的问题是大多数链接都有一个 其中使用上面的 就可以
  • 网页抓取 - 如何识别网页上的主要内容

    给定一个新闻文章网页 来自任何主要新闻来源 例如时报或彭博社 我想识别该页面上的主要文章内容 并丢弃其他杂项元素 例如广告 菜单 侧边栏 用户评论 在大多数主要新闻网站上都可以使用的通用方法是什么 有哪些好的数据挖掘工具或库 最好是基于Py
  • ERR_IMPORT_ASSERTION_TYPE_MISSING 用于导入 json 文件

    这段代码运行良好 我不知道是因为我升级到 Node 17 还是什么原因 但现在我明白了 TypeError ERR IMPORT ASSERTION TYPE MISSING Module file Users xxxxx code pro
  • 使用后代选择器的响应式网站

    我试图使用媒体查询使我的网站响应 但是当我在代码的某些部分使用后代选择器时 页面没有响应 当我使用此代码时 该页面是响应式的 div1 float left width 20 height 200px background color re
  • 禁用 Materialise Carousel 上的触摸

    看起来以前没有人问过这个问题 因为我几乎在互联网上寻找一个非常简单的答案 如何禁用在物化轮播上向左 向右滑动的功能 在 Materialize js 添加 编辑 var allowCarouselDrag true value functi
  • 如何使盒子阴影显示在容器中的下一个元素上?

    请看这段代码 http codepen io Varin pen kkGgVd http codepen io Varin pen kkGgVd div class container div class outside2 div clas
  • 使用 php 变量更改 css 类

    这里需要您的帮助 正如标题所示 我正在尝试使用 PHP 变量更改 css 类 所以基本上我想创建一个回显某些代码的循环 但我希望第一个循环中的 div 类有所不同 它应该被隐藏 这是我为使问题变得清晰而编写的简化代码 我不知道错误在哪里 请
  • 如何在odoo中重写js函数

    我想加载 shop checkout url 函数是 odoo define change info order website sale change info order function require use strict oe w
  • Javascript:修改原型不会影响现有实例[重复]

    这个问题在这里已经有答案了 我创建了原型的 2 个实例 更改了原型中的函数 更改反映在两个实例中 很棒 但是 当我通过删除该函数来修改原型时 该函数对于现有实例仍然存在 function A this name cool A prototy

随机推荐

  • 在 Ruby 数组中收集重复项的最快/单行方法?

    转换数组的最快 单行方法是什么 1 1 1 1 2 2 3 5 5 5 8 13 21 21 21 到这样的对象数组中 1 gt 4 2 gt 2 3 gt 1 5 gt 3 8 gt 1 13 gt 1 21 gt 3 为了实现您想要的格
  • 如何等待WPF绑定延迟完成

    我的 ViewModel 实现了 INotifyPropertyChanged 和 INotifyDataErrorInfo 接口 当属性更改时 将触发验证 从而启用 禁用 保存 按钮 由于验证步骤非常耗时 因此我使用了 延迟 绑定属性 我
  • GAPI 的 OAuth - 首次登录 Javascript 后避免身份验证和授权

    我创建了一个 chrome 扩展 可以读取电子邮件 执行某些操作并使用 javascript 的 google 客户端 API 创建任务 我使用 chrome 身份进行身份验证和授权 扩展按预期工作 然而 它每隔一段时间就会要求签名 我想要
  • Boost::Log 和日志编号

    我最近尝试通过 Boost log 将一些日志记录添加到一个小型应用程序中 但是 使用日志轮换 由于某种原因 我无法让它在日志目录中拾取正确的计数器 例如 如果我的Logs目录包含文件Log 000 log and Log 001 log我
  • 将 javascript 注入 SwiftUI WebKit

    如何将 SwiftUI WebKit 视图的文本大小设置为 State 变量 我有这段代码 允许我在 SwiftUI 中使用 WebViews import SwiftUI import WebKit struct WebView UIVi
  • 如何在 Angular 2 中实现 Chart.js?

    我正在使用最新版本的 Angular 2 V4 0 0 并且我想在我的项目中使用 Chart js 库中的图表 而不会有太多复杂性 如何在我的 Angular 项目中实现 Chart js 并且不会在最终生产中给我带来问题 您可以按照以下说
  • 如何在Opencart中添加子选项?

    我使用的是最新的3 0 2 0版本的opencart 对于选项 我想添加子选项 我也想像选项一样对子选项进行定价 从 2009 年及更早的时间起 有很多关于 opencart 的依赖选项的讨论 但它从未出现在核心版本中 为什么大家都说实现依
  • 有任何 API 或 Web UI 项目来管理 Docker 私有注册表吗?

    我找不到如何管理私人注册表中的图像 我可以推送或拉取图像 因为我知道 id 但如何获取推送图像的列表 举例来说 一个人想要查看其组织的私人注册表下的可用图像 她该怎么办 除非我弄错了 否则我找不到 API 或 Web UI 来发现注册表内容
  • 更改 Mac/Linux 上进程的用户所有者?

    我有一个以 root 身份运行的程序 该应用程序调用另一个程序 processA 来运行 当 processA 运行时 它由 root 拥有 但我希望它的所有者是当前登录的用户 怎么做 嗯 这有点棘手 取决于它是守护进程 服务 还是运行此命
  • 可以从 Google Chrome 设置面板中的地址栏(小书签)运行 Javascript 吗?

    我想制作一个书签来打开谷歌浏览器的设置面板并通过单击清除我的缓存 一段时间以来 我有一个书签 可以打开 Chrome 的设置面板 并已选择 清除缓存 设置 单击书签 通常在新选项卡中打开它 后 我必须打开该选项卡并提交表单 然而 在开发时
  • msiexec MsiSetExternalUI 的外部处理程序

    早上好 我希望为 msiexec 实现一个外部处理程序 但不能阻止 msiexec 执行任何不同的操作 我希望能够利用 MsiSetExternalUI 拦截所有消息 但仍然对最终用户具有相同的响应和对话框 我的主要目标是拦截安装 msi
  • UIImage 方面适合并对齐到顶部

    看起来像aspect fit默认情况下将图像与框架底部对齐 有没有办法override对齐同时保持aspect fit intact 编辑 这个问题早于自动布局 事实上 在提出这个问题的同一周 汽车布局就在 WWDC 2012 上公布了 简
  • 如何使用 ChefSpec 测试我的 LWRP?

    我创建了自定义 LWRP 但是当我运行ChefSpec https github com sethvargo chefspec单元测试 它不知道我的 LWRP 操作 这是我的resource actions install uninstal
  • 配置文件模板生成makefile

    Linux 中几乎所有开源 C 项目都有一个 配置 文件 用于在构建源代码之前生成 Makefile 我正在从头开始编写一个项目 这个 配置 文件有任何模板吗 大多数时候 配置文件不是手动创建的 而是由诸如autoconf http www
  • 在 Windows 10 上的 Lyrix.exe(Delphi 7 旧应用程序)上加载数据库时出错

    有一个用 Delphi 7 编写的名为 Lyrix 的应用程序 似乎 我只有可执行文件夹 以及不再运行的安装程序 我无法让它在 Windows 10 上运行 但它似乎在 Windows XP 7 和 8 1 上运行良好 它说 Error c
  • 如何使用CHMOD获得“drwx---r-x+”文件夹权限? - Bash 脚本 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我在通过网络移动某些文件时遇到问题 这似乎是由文件权限引起的 目前我有具有此权限 drwxrwxrwx 的文件夹 我需要运行一个 bash
  • 录制第二个音频剪辑时 MediaRecorder 崩溃

    我正在尝试使用 MediaRecorder 录制音频剪辑 但当我启动 停止和再次启动时 我的 Logcat 中不断出现这些错误 该活动也将结束 INFO DEBUG 1285 INFO DEBUG 1285 Build fingerprin
  • Apache poi 分页符

    我需要创建一个简单的 Word 文档用于从 java 程序打印 有必要将输出打印在单独的页面上 我正在使用以下代码 XWPFDocument document new XWPFDocument XWPFParagraph paragraph
  • 读取文件内容时出现奇怪的字符

    我不确定出了什么问题 for line in open textfile r print line Output abcd 该文件是使用 textpad 使用 Unix EOL 和 UTF8 编码创建的 现在 它可以在 notepad 上使
  • 屏幕阅读器无法读取 Firefox 中的 Aria-Live

    我遇到一个问题 屏幕阅读器无法读取 FireFox 中 aria live 部分中更改的文本 这是一个简单的页面示例 在 Chrome 中 屏幕阅读器会读取更改 而在 FireFox 中则不会 div div 难道我做错了什么 除了人们在