More robust accessibility checks

[geoffrich]

Is your feature request related to a problem? Please describe.
Svelte's current accessibility checks, while useful, are limited. They only perform a static analysis of single components in isolation. For example, here are some significant a11y issues that Svelte currently can't detect:

• low color contrast
• heading levels, e.g. no <h1> or skipping from <h2> to <h4>
• proper HTML structure, e.g. <li> must be a direct child of <ul> or <ol>
• issues with dynamically rendered content via the {@html} directive
• document only contains one <main> element

These are all tricky issues to detect with the current compiler-centric checks, since they depend on how components are used or rendered into the final application. It would be difficult or even impossible to detect looking at a single component. For example, if a component contains an <h3>, how would you know that in all cases where the component is used, it comes after an <h2> or another <h3>? How do you know what color the text and background will eventually be so you can verify that the contrast is sufficient? These issues would be much easier to detect at runtime, when the app has been rendered.

Describe the solution you'd like
SvelteKit should integrate runtime accessibility checks into the default template. These would analyze the page in the browser and report any a11y issues to the console when running in dev mode. Ideally, it could continually monitor and re-run checks when the page changes, e.g. when navigating to a new page or opening a menu. These checks could be configurable by the user, but enabled by default.

If possible, we should take advantage of existing tooling like Deque's axe so that we don't have to re-implement these checks. Building a framework is complicated enough without having to implement and maintain dozens of a11y checks.

See also packages like axe-core/react and agnostic-axe, which detect UI changes and re-run a11y checks on the new state of the UI.

Describe alternatives you've considered
There could be a way to run these checks at build time -- in the recent Svelte Summit Q&A, Rich Harris mentioned the possibility of programmatically navigating the application and reporting a11y errors.

SvelteKit could also do nothing here, and rely on users to check these a11y issues on their own.

How important is this feature to you?
Lacking this feature won't block me or anyone else from using SvelteKit. If people want to, they can already run these extended a11y checks through other methods. However, I think having this feature would show that Svelte cares about a11y and help educate more developers about a11y.

Additional context
I see this as a natural extension of sveltejs/svelte#374.

We can help educate developers about a11y and make a strong statement about the kind of web we want to be a part of — I think we should.

[Myrmod]

I really like the idea to add more a11y to svelte. Especially because the kind of errors you mentioned are easy to spot automatically and the law is becoming more and more strict in this regard.

Axe as you mentioned is a great tool which I've used in automated frontend tests. I just got agnostic-axe to work in svelte-kit with this snippet in my __layout-svelte file:

if (import.meta.env.DEV) {
    onMount(() => {
      import('https://unpkg.com/agnostic-axe@3').then(({ AxeObserver, logViolations }) => {
        const MyAxeObserver = new AxeObserver(logViolations)
        MyAxeObserver.observe(document)
      })
    })
  }

It's not much to write, so I'm not sure if it's really nessecary to add this. The library itselfis not as frequently updated as axe-core. So I'd suggest do add axe-core directly.

Another way would be to "create" a vite plugin for this:

vite: [
  {
         name: 'vite-plugin-agnostic-axe',
         transformIndexHtml(html, ctx) {
            if (ctx.server?.config.mode !== 'development') return html

            const snippet = `
               <script>
                  import('https://unpkg.com/agnostic-axe@3').then(
                     ({ AxeObserver, logViolations }) => {
                        const MyAxeObserver = new AxeObserver(logViolations)
                        MyAxeObserver.observe(document)
                     }
                  )
               </script>
            `
            html = html.replace('</body>', snippet + '</body>')
            console.info('added agnostic-axe');

            return html
         }
      }
]

Maybe we could add something like this directly to the config? As mentioned earlier agnostic-axe doesnt use the latest axe-core version. I asked them to update it either way. Depending on their answer I might write/update this plugin myself.

[tomatrow]

I forked agnostic-axe and updated it to newer versions of the bundler and axe-core, while removing the requestidlecallback polyfill, tests, and standalone version.

It can be installed with npm i -D git+https://github.com/tomatrow/agnostic-axe.git.

Very similar to @Myrmod's comment, this is what I have in my __layout.

if (import.meta.env.DEV)
    onMount(() =>
        import("agnostic-axe").then(({ AxeObserver, logViolations }) =>
            new AxeObserver(logViolations).observe(document)
        )
    )