【问题标题】:How can I systematically disable certain irrelevant a11y warnings when compiling with Svelte?使用 Svelte 编译时,如何系统地禁用某些不相关的 a11y 警告?
【发布时间】:2020-07-31 00:23:40
【问题描述】:

以下是我在使用缺少 alt 属性的 img 编译组件时收到的警告:

Plugin svelte: A11y: <img> element should have an alt attribute

所有开发者都会同意 A11y 是个好东西;除了我的情况,它只会惹恼屏幕阅读器。我正在制作一个游戏引擎,我的对象如下所示:

SVG 图像,项目标签。对于屏幕阅读器,这将显示为“Fabric Sc​​rap Fabric Sc​​rap”;这里有一个 alt 属性真的没有意义,但是文档必须为我提供的最好的东西是我可以像这样混乱我的代码:

<!-- svelte-ignore a11y-autofocus -->
<input bind:value={name} autofocus>

我真的很想避免这种情况,那么如何让 Svelte 停止向我显示这个特定错误?理想情况下不禁用整个 A11y 模块。

【问题讨论】:

  • 如果这是通过外部调用加载的 SVG(即不在 HTML 中内联),则必须具有 alt 属性。您看到的警告是因为您关闭了 alt 属性或将其设为空(&lt;img/&gt;&lt;img alt/&gt;)。您必须使用alt="",以便屏幕阅读器不会读出图像。将其关闭将读取文件名。显然,如果这个 SVG 是内联在你的 HTML 中,而不是通过 &lt;img&gt; 标签引用,那么这是无关紧要的(但那时我猜 svelte 不会抱怨)。
  • 为什么要禁用有效的 a11y 警告?
  • 啊,很高兴知道空的alt=""@GrahamRitchie。但是,它仍然会使代码变得混乱,我将使用选定的答案。 Nathaniel:请阅读我的问题,了解为什么这些警告在我的应用程序中确实无关紧要(实际上,更糟)。
  • 它不是这样工作的,如果图像是从外部加载的,你必须有一个描述的 alt 标签 (alt="")。如果你不这样做,这对屏幕阅读器用户来说会很糟糕,此时运行可访问性测试根本没有意义。你无法决定你的代码看起来有多干净。您担心“Fabric Sc​​rap Fabric Sc​​rap”烦人的屏幕阅读器用户,但您认为“yourdomain/assets/images/icons/fabric-scrap.svg Fabric Sc​​rap”在屏幕阅读器上听起来如何?如果您不添加 alt="" 属性,听起来就是这样。
  • 再一次,如果我们可以禁用每个站点,那就太好了,即缺少 alt 标签相当于alt="",但遗憾的是我们不能。没有问题,祝你游戏好运!

标签: accessibility svelte rollupjs svelte-3


【解决方案1】:

您可以在项目级别禁用警告。

如果您使用汇总,可以通过提供自定义 onwarn 处理程序来抑制警告:

import svelte from 'rollup-plugin-svelte'

export default {
  plugins: [
    svelte({
      // Warnings are normally passed straight to Rollup. You can
      // optionally handle them here, for example to squelch
      // warnings with a particular code
      onwarn: (warning, handler) => {
        // e.g. don't warn on a11y-autofocus
        if (warning.code === 'a11y-autofocus') return

        // let Rollup handle all other warnings normally
        handler(warning)
      }
    })
  ]
}

【讨论】:

  • 谢谢!请注意,它实际上可能是warning.pluginCode。对于不明确的pluginCodes,只需这样检查:warning.message.includes('your error msg')
猜你喜欢
  • 2016-07-21
  • 2018-08-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-10-12
  • 2020-06-25
  • 2021-11-07
相关资源
最近更新 更多