Axe accessibility issues on Svelte docs

[geoffrich]

Describe the bug
When running the axe accessibility checker on the docs, it identifies multiple accessibility issues:

• ARIA hidden element must not contain focusable elements (91 count). This seems to mostly be on the permalinks next to each heading. Is there a reason we don't want the permalinks accessible to screen readers? I generally think of the W3C specs as having well-thought-through accessibility and they do not hide permalinks from assistive tech.

<a href="#aria-hidden" aria-label="Permalink for aria-hidden (state)" title="Permalink for aria-hidden (state)" property="url">
  <span property="title" content="aria-hidden (state)">§</span>
</a>

• ARIA attributes must conform to valid values (5 count). This is on a few permalinks that have aria-hidden="" instead of aria-hidden="true".
• Links must have discernible text (5 count). Also on permalinks.
• Ensure that scrollable region has keyboard access (74 count). This violation is on the code blocks.
• Heading levels should only increase by one (1 count). There are some h5 elements on the page after an h3. These should likely be h4 instead.
• Aside must not be contained in another landmark (1 count). The table of contents is in an aside element, which should not be placed within main. We might not need aside at all -- this element could just be a labeled ul.
• Page must contain a level-one heading (1 count). There is no h1 element.
• Elements must have sufficient color contrast (2018 count). The color contrast ratios on certain text are below 4.5. The biggest offender seems to be the syntax highlighting.

To Reproduce

1. Install the axe Chrome extension (also available for other browsers)
2. Go to https://svelte.dev/docs
3. Go to the Axe tab in dev tools and run the analysis

Expected behavior
There should be 0 Axe violations.

Severity
These issues make navigating the docs when using a screen reader more difficult. The Svelte tutorial calls out how it helps you write accessible markup -- we should set a good example by holding the docs to a high accessibility standard.

Additional context
I know this is quite a few issues in one 😅. We could split this into multiple issues if desired. However, some are closely related (e.g. everything to do with the permalinks) and some are small fixes.

[geoffrich]

I'd love to work on a PR for this, if that's okay.

[antony]

@geoffrich Feel free - the better accessible the docs are, the... better

[geoffrich]

With the syntax highlighting PR merged, the color contrast violation count is down to 228 from 2018.

[geoffrich]

Most of the remaining color contrast violations are on links. I opened a corresponding issue in site-kit since that's where the styles are coming from. Not sure who would be involved in choosing or updating a core theme color like that.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[geoffrich]

I'll go ahead and close this since svelte.dev will be migrating to SvelteKit soon. If still relevant, I'll re-create the issue in the sites repo.