如何在ngMaterial中禁用ngAria？

Question

ngAria（一个辅助功能模块）向我的Angular Material项目添加了一个不必要的Bower导入，现在它会抛出警告：

节点缺少用于辅助功能的“aria-label”属性

我只添加了ngAria，因为它似乎对ngMaterial是必需的。 我的应用程序不需要屏幕阅读器可访问性。

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

编辑：似乎唯一容易禁用ngAria警告的方法是使用console.warn = function() {};，这将关闭浏览器的所有警告（我不建议这样做，因为它可能隐藏与ARIA无关的警告）。

- benshope

---

你为什么要阻止几千人使用你的应用程序？屏幕阅读器不仅被完全失明的人使用，而且只需要为图像/图标提供一些alt-text（这是符合网络标准的正确做法），我不明白为什么你认为忽略无障碍性是最佳选择。 - clairebones

因为我的应用程序对使用屏幕阅读器的人没有什么用处。类似的框架，如Bootstrap，不需要“aria-label”标签-所以我认为很多人会想知道“什么是aria？”希望我的问题能够节省他们像我一样思考“必须有一种方法可以关闭这个警告”的时间。 - benshope

你真的担心最终用户会看控制台吗？我认为除了开发领域的人，很少有人知道什么是控制台消息以及如何显示它们。 - Christian Bonato

完全不是，我只是喜欢在开发时保持控制台的清洁，这样我就可以看到是否真的出了问题。 - benshope

@benshope，根据你的错误提示，如果你为你的图像和图标添加alt文本（这是你应该做的，用于Google抓取、对于网络连接不佳的人以及符合基本的Web标准），那么你就不会收到任何警告了。 - clairebones

Answer 1

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

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

(但请注意其他答案中关于Aria标签对可访问性的重要性的讨论！)

- ZachB

Answer 2

据我所知，ngAria不能被禁用，也不应该被禁用，因为它是angular-material的核心部分。

要禁用警告，您可以将aria-label =“…”添加到以下特定项：

• 输入
• md-button
• md-dialog
• md-icon
• md-checkbox
• md-radio-button
• md-slider
• md-switch

我想我已经涵盖了所有内容，但还有可能存在其他内容，所以请注意！

- Salal Aslam

---

很遗憾...我刚刚与ngMaterial的开发人员进行了讨论，他们似乎不急于允许禁用ngAria。 - benshope

我刚刚在文档中看到了这段关于aria-label的内容：“可选的无障碍标签。只有当没有占位符或明确的标签时才是必需的。” - Salal Aslam

@benshope 你们在哪里讨论的？我也想加入。 - Kosmotaur

@Kosmotaur 你会在ng-material的GitHub存储库的Issue中找到这个讨论。 - benshope

Answer 3

只需在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"

- rc.adhikari

Answer 4

我认为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。

- Jonas.z

---

更新了答案以应对多参数的 console.warn。由于 'Aria' 警告似乎只有单个参数，所以这是一个快速修复。但是，如果它们不是，我们需要遍历 arguments 数组。 - Jonas.z

在某些情况下，您可能需要抑制特定的Angular材料控制台警告。我遇到了这样的情况，因此我基于此答案创建了一个模块，它使您能够注册各种regEx模式以进行忽略。https://github.com/sscovil/angular-quiet-console - Shaun Scovil

不错，Shaun！我仍然想保持简单/只回答问题，但我已经用你的建议更新了我的答案。 - Jonas.z

Answer 5

如果您真的想要禁用它，您可以简单地覆盖或者按照Angular所称的方式 装饰 在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(无操作)替换这些方法。

- Shannon Hochkins