accessibilitysvelterollupjssvelte-3

How can I systematically disable certain irrelevant a11y warnings when compiling with Svelte?


Here is the warning I get when I compile a component with an img that lacks an alt attribute:

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

All developers will agree A11y is a good thing; except in my case, it would serve only to annoy a screen reader. I'm making a game engine and my objects look like this:

Example

SVG image, item label. To the screen reader, this would read "Fabric Scrap Fabric Scrap"; it really doesn't make sense to have an alt attribute here, but the best the docs have to offer me is that I can clutter up my code like such:

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

I really want to avoid that, so how can I get Svelte to stop showing me this specific error? Ideally without disabling the A11y module as a whole.


Solution

  • You can disable warnings at the project level.

    If you're using rollup, warnings can be suppressed by providing a custom onwarn handler:

    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)
          }
        })
      ]
    }