TOGOUTECH

javascript - 当 Angular 改变状态时，如何让屏幕阅读器阅读整个页面？

coder 2024-12-09 原文

要求:每次更改页面时，屏幕阅读器必须阅读整个页面内容。

我们使用 firefox+NVDA 进行测试，由于 angular 不会“更改页面”，我们尝试了以下方法使其在更改状态时读取整个页面:

aria-live="assertive"

这在很大程度上读取了我们站点中文本的更改，但它只读取了添加的内容，在我们的例子中，我们有一个表格被 ng-repeat 填充并且它读取正在添加信息但没有任何上下文(它没有说明正在读取的行或列)

另一个问题是表单，当被 angular 填充时，屏幕阅读器会在它们被 angular 填充之前读取它，这已通过 $timeout 解决，但仍然是 aria-live 读取它会跳过一些部分的更改，如果我们添加 aria-atomic 来强制读取，我们有一些带有多个选项的选择，并且那些被读取(所有这些，我们有超过一百种选择)。这不是屏幕阅读器的阅读方式，它们只会阅读前十个选项或您单击它们时可见的选项。

请记住，如果没有任何 aria-live 或 aria-atomic，当您更改 Angular 状态时，用户不会收到任何更改通知。

在几乎放弃之后，我们决定也许我们的重点是错误的，我们需要让每个州都有自己的页面，所以我们使用了以下内容:

function ForceNVDARead() {
    $(window).on('hashchange', function () {
        location.reload();
    });
}

URL 中的每次更改都会强制重新加载。这很好用，所有内容都被正确读取，我们几乎认为这解决了所有问题。除了这会导致客户端向我们的服务器发出双重请求。

有没有办法让 NVDA 像常规页面加载一样读取 Angular 状态的内容，而不必强制重新加载页面？

请不要说只使用 aria-roles 或类似的东西对此不起作用，我们已经有了它们，我们需要应用程序在更改状态时读取所有内容。

感谢任何帮助，我们即将放弃，并在没 Angular 情况下重新启动项目，因为我们无法实现我们的可访问性要求。

最佳答案

Requirement: on each page change the screen reader must read the entire page content.

从可访问性的 Angular 来看，这根本不是一个要求，它相当于让某人看着屏幕一次一行地阅读所有内容，或者使用 readquick , 这不是自然用法。

屏幕阅读器辅助功能 is acheivable when using Angular , 但我们需要重新设定一些假设:

  • 当你有页面更新时，关键是manage the focus , 并移至新内容。这允许人们以自己的方式阅读，而不是您一直假设他们必须阅读的方式。
  • ARIA live 旨在用于页面其他地方(远离键盘焦点)的小更新，而不是全部内容，这不是这里的答案，我会完全放弃它。
  • 如果人们在加载之前阅读表格，这可能是尝试使用 ARIA-live 强制阅读的副作用。如果没有，则尝试使用焦点管理在加载表单时将焦点放在表单顶部。
  • 可能值得一读a tutorial on NVDA usage ，或与“本地”用户交谈。根据经验，我可以说您并没有像最终用户那样使用它，因此请更好地理解什么是“正常”交互。

如果您放弃使用 ARIA-live 并转而使用焦点管理，您可能会解决大部分问题，但稍后从不同的 Angular 来看可能会有更多问题。

关于javascript - 当 Angular 改变状态时，如何让屏幕阅读器阅读整个页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27029258/

阅读器javascriptcodesectionangularjsfirefoxaccessibilitynvda

有关javascript - 当 Angular 改变状态时，如何让屏幕阅读器阅读整个页面？的更多相关文章

  1. javascript转到带有unicode字符的url - 2

    我有一个包含这些url的数组:["path/to/url1","path/to/url2","path/url/unicóde.txt"]我正在使用angular，通过ng-repeat我创建了一个可点击的列表，该列表执行重定向到所需的url，但是，当我点击unicodeurl时，浏览器无法找到它。我尝试使用encodeURI("path/url/unicóde")，但它检索到的是:path/url/unic%C3%B3de.txt未找到。相反，当我手动访问时:path/url/unicóde.txt(这是在ftp中，因此，我逐个文件夹直到到达文件)浏览器中的url现在说:path/u

  2. javascript - 为什么我的 Ice Candidate 请求触发了 6 次而不是 1 次？ - 2

    我正在使用WebRTC编写我的第一个点对点连接应用程序，我通过socket.io连接发送的用于从对等点请求icecandidate的代码触发了6次而不是一次。这真的很令人困惑，因为如果我错误地设计了一个大请求循环，我会期望无限递归，而不仅仅是6(8个onicecandidate事件)。那么谁能告诉我为什么下面的代码会产生6个递归？这里是消息处理程序，它只是发送一条由语法控制的socket.io消息:Muveoo.Messenger.input('icecandidaterequest',data);'icecandidaterequest':function(data){console

  3. javascript - 如何从 asar 存档提供静态文件 - 2

    我正在尝试构建一个带有服务器组件的Electron应用程序，使用express进行远程控制。express模块初始化为varstaticPath=path.resolve('app/assets')setupNotifications(server);app.use(cors());app.use('/api/',json());app.use('/api/',router);app.use('/assets',express.static(staticPath));console.log('servingstaticfilesfrom:'+staticPath);Elecrondoc

  4. javascript - 如何使用 Node js 和 babel 保留正确的行号 - 2

    我有以下设置并且我的错误/堆栈跟踪有问题我是否遗漏了什么？package.json看起来像:{"name":"xxxxxx","main":"server.js","private":true,"scripts":{"start":"nodemon--exec./node_modules/.bin/babel-nodeserver.js"},"dependencies":{"babel":"^6.5.2","babel-cli":"^6.6.5","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","babel-pr

  5. javascript - 已知的 JavaScript 指令 - 2

    ECMAScript规范定义了UseStrictDirective，但允许实现定义自己的指令。来自here:ImplementationsmaydefineimplementationspecificmeaningsforExpressionStatementproductionswhicharenotaUseStrictDirectiveandwhichoccurinaDirectivePrologue.什么是已知的特定于实现的指令？在Google上快速搜索一下，除了usestrict什么也没有。我能想到useasm和usestrong.还有其他的在用吗？

  6. javascript - 谷歌浏览器导航器在线始终为真 - 2

    基于mozilla开发者网络https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine它说Returnstheonlinestatusofthebrowser.Thepropertyreturnsabooleanvalue,withtruemeaningonlineandfalsemeaningoffline.Thepropertysendsupdateswheneverthebrowser'sabilitytoconnecttothenetworkchanges.Theupdateoccurswhen

  7. javascript - 如何使用 nodemailer 和电子邮件模板发送消息？ - 2

    我尝试使用nodemailer和电子邮件模板发送电子邮件。现在我从这里exampleemailtemplates得到了例子。但是当我检查这段代码时，出现错误apromisewasrejectedwithanon-error:[objectUndefined]请帮帮我。这是我的代码varnodemailer=require('nodemailer');varEmailTemplate=require('email-templates').EmailTemplate;exports.sendOne=function(){vartemplatesDir=config.templatesDir

  8. javascript - 在注册表单上，表单字段未保存在提交时自动填写的浏览器中。(ReactJs) - 2

    我的站点中有一个注册表单，我正在其中保存字段，并且在用户再次返回该注册表单时保存表单后，我希望将以前的字段值保存在浏览器自动填充中。下面是我的代码片段-SignUp在anchor标记的onClick代码中，我通过注册用户函数进行ajax调用。之后，我希望用户数据自动填充到chrome中的浏览器自动填充地址中。我尝试了以下方法:-1.很少有人建议使用表单“提交”按钮功能将数据保存在自动填充中，而不是使用ajax调用表单anchor标记的onClick事件。但这对我来说也不起作用。2.我看过一些帖子，其中他们告诉我要为字段使用专有名称和自动完成属性。但使用该浏览器只能猜测正确的字段值。

  9. javascript - CORS 预检错误 redux & loopback API - 2

    我在react-redux上有一个客户端应用程序，在loopback上有一个API应用程序。对于本地测试，我在端口8080上运行客户端应用程序，在端口3000上运行服务器应用程序。当我尝试使用客户端应用测试GoogleOAuth(使用loopback-passport组件)时，出现以下错误。当我使用POSTMAN对其进行测试时，没有任何问题。这是客户端代码，require('babel-polyfill');import{CALL_API}from'redux-api-middleware';importCfrom'../constants';constAPI_ROOT='http:/

  10. javascript - 在 Webpack 和 React.js 中设置代码拆分 - 2

    我正在尝试在我的应用程序中设置代码拆分/分块-通过路由，使用require.ensure。所以这是我的路线:{require.ensure([],(require)=>{cb(null,require('attendee/containers/Profile/').default)},'attendee')}}/>以下是我的webpack配置中的相关行:constPATHS={app:path.join(__dirname,'../src'),build:path.join(__dirname,'../dist'),};constcommon={entry:[PATHS.app,],o

随机推荐