如何在 ngMaterial 中禁用 ngAria？

Posted 2023-03-07

【中文标题】如何在 ngMaterial 中禁用 ngAria？

【英文标题】：How do I disable ngAria in ngMaterial?

【发布时间】：2015-08-20 09:59:52

【问题描述】：

ngAria（一个可访问性模块）正在向我的 Angular Material 项目添加一个不必要的凉亭导入 - 现在它正在抛出警告：

节点上缺少可访问性所需的属性“ aria-label ”

我只添加了 ngAria，因为它似乎对 ngMaterial 是必需的。我的应用不需要屏幕阅读器辅助功能。

无论如何，如何从 ngMaterial 中删除 ngAria？或者至少禁用所有警告。

编辑：似乎禁用 ngAria 警告的唯一简单方法是 console.warn = function() ;，它只会关闭浏览器的警告（我不建议这样做，因为它可能会隐藏与 aria 无关的警告)

【问题讨论】：

您为什么选择阻止几千人使用您的应用程序？屏幕阅读器不仅被完全失明的人使用，而且考虑到只需要一些图像/图标的替代文本（为了正确的网络标准，无论如何你都应该这样做）我不明白为什么你认为忽略可访问性是最好的选项在这里。

因为我的应用对有屏幕阅读器的人没有用处。类似的框架，如 Bootstrap，不需要“aria-label”标签——所以我想很多人会想知道“aria 到底是什么？”希望我的问题可以节省他们思考“必须有办法关闭此警告”的时间。

您真的担心最终用户会查看控制台吗？我认为开发世界之外的许多人都不知道控制台消息是什么，或者如何显示它们。

一点也不，我只是想在开发过程中保持控制台干净，这样我就可以看看是否真的出了问题。

@benshope 鉴于您遇到的错误，如果您只是为图像和图标添加替代文本（无论如何您都应该这样做，用于谷歌抓取和连接不良的人，并适合基本网络标准），那么您将不会收到任何警告。

【参考方案1】：

从 1.1.0 开始可以全局禁用消息：

app.config(function($mdAriaProvider) 
   // Globally disables all ARIA warnings.
   $mdAriaProvider.disableWarnings();
);

（但请注意其他答案中关于 aria 标签对可访问性很重要的讨论！）

【参考方案2】：

据我所知，ngAria 不能被禁用，也不应该被禁用，它是 angular-material 的核心部分。 要禁用警告，您可以将aria-label="..." 添加到以下特定项目

输入 md 按钮 md 对话框 md 图标 md-复选框 md 单选按钮 md-滑块 md 开关

我想，我已经涵盖了所有这些，但可能还有其他的，所以要小心！

【讨论】：

太糟糕了……我刚刚和 ngMaterial 的开发者讨论过，他们似乎并不急于让 ngAria 被禁用。

我只是在查看文档，我在 aria-label 中看到了这一点：“可访问性的可选标签。仅在不存在占位符或显式标签时才需要。”

@benshope 你在哪里讨论过这个？我想加入

@Kosmotaur 你会在 ng-material 的 GitHub repo 上发现讨论是一个问题

【参考方案3】：

我认为 Salal Aslam 的答案更好，但如果您想暂时禁用 Aria 警告，您可以对原始问题中建议的 console.warn 覆盖进行调整。可能是这样的：

console.realWarn = console.warn;
console.warn = function (message) 
    if (message.indexOf("ARIA") == -1) 
        console.realWarn.apply(console, arguments);
    
;

编辑：对于复杂的情况，可能需要更精细的解决方案。查看Shaun Scovil 的 Angular Quiet Console

【讨论】：

更新了答案以应对多参数console.warns。由于“Aria”警告似乎只是单一参数，因此这是一个快速解决方案。但是，如果不是，我们需要遍历 arguments 数组。

在某些情况下，您可能需要禁止某些 Angular Material 控制台警告。我有一个这样的案例，所以我根据这个答案创建了一个模块，使您能够注册各种 regEx 模式以忽略。 github.com/sscovil/angular-quiet-console

不错的肖恩！仍然想保持简单/只回答问题，但我用你的建议更新了我的答案

【参考方案4】：

只需在 md-checkbox 上添加另一个标签 aria-label="WriteHereAnyLabelYouLike" 即可解决问题。

<md-checkbox type="checkbox" ng-model="account.accountant" class="md-primary" layout-align="end" ng-true-value="1" ng-false-value="0" aria-label="ShowHideAccountant" ></md-checkbox>

aria-label="WriteHereAnyLabelYouLike"

【参考方案5】：

如果你真的想禁用它，你可以通过简单地覆盖或 angular 调用它decorating 位于 angular-material 库中的原始 mdAria 服务。

angular.module('appname').decorator('$mdAria', function mdAriaDecorator($delegate) 
    $delegate.expect = angular.noop;
    $delegate.expectAsync = angular.noop;
    $delegate.expectWithText = angular.noop;
    return $delegate;
);

这在 angular-material v1.0.6 中工作，但您可能必须检查所有方法是否已被清除。

基本上上述所有操作都是替换暴露给 $mdAria 服务的公共方法，它将用noop 替换这些方法（无操作）。