Sveltekit, you know I love you kid but you gotta stop yelling at me every other line. Your opinion on accessibility IS NOT AN ERROR IN MY CODE. I expect you to understand that I may or may not care about a11y issues, but when I'm developing I just need to know if things are working. If (huge IF) I get far enough to release this to the wild at all, I'll think about it then. Get OFF MY BACK.
Seeing a11y messages in your editor with nasty underlines that SHOULD be reserved for actual functionality issues and not arbitrary accessibility issues that may or may not be important for the intended target audience?
Here's how to stop the madness. Add this to your svelte.config.js file:
const config = { // existing line, paste after this
// START COPY & PASTE HERE
onwarn: (warning, handler) => {
// TODO: ignoring warnings. Fix before pushing to PROD
// add warning codes you see in console to ignoreWarn to disable them
// e.g. "ally" or "a11y-no-abstract-role" will ignore all or specific rules respectively
const ignoreWarn = ["a11y","ARIA"] // add exclusions here
ignoreWarn.some((el) => warning.code.includes(el)) ? null : handler(warning)
// the above line finds part of the warning code and if in the ignoreWarn array will do nothing.
// handler(warning) allows all other warning through so you don't miss important ones.
}, /* <= make sure to include the comma so the rest of the file works */
// END COPY & PASTE HERE
// everything that was there already...paste before this
kit: {
This may help you solve the issue of having any of these common a11y "error" messages in sveltekit:
- a11y-aria-attributes
- a11y-incorrect-aria-attribute-type
- a11y-unknown-aria-attribute
- a11y-hidden
- a11y-misplaced-role
- a11y-unknown-role
- a11y-no-redundant-roles
- a11y-role-has-required-aria-props
- a11y-accesskey
- a11y-autofocus
- a11y-misplaced-scope
- a11y-positive-tabindex
- a11y-invalid-attribute
- a11y-missing-attribute
- a11y-img-redundant-alt
- a11y-label-has-associated-control
- a11y-media-has-caption
- a11y-distracting-elements
- a11y-structure
- a11y-mouse-events-have-key-events
- a11y-missing-content
Most of the solutions on this page didn't work for me, but did give me the idea where to look to solve this:
