[Other]: Accessibility considerations

[jer3m01]

📋 Explain your issue

A list of accessibility issues, to be updated if I find any others:

• The navigation toggle button (top left hamburger icon) doesn't have an accessible name.
  Solution: Set an aria-label and optionally a title.

• The theme selector same issue as above. Should be good with Use SolidBase #1092

• Tabs (such as the npm/yarn/pnpm tabs on quick start) don't have the appropriate roles or interactions.
  Solution: Remove the <nav> wrapper (only the main links of the website should be wrapped).
  Apply the correct role to the tabs wrapper and each tab button, in addition to providing proper ARIA attributes.
  Or replace with Kobalte.

• The main content of the website isn't properly managed for dynamic page changes.
  Solution: Set the aria-live attribute on the main content.

• The main buttons of the homepage (Get started & Join the community) behave as links.
  Solution: Replace them with a.
  (In most cases a link should never be hidden behind a button, this impacts even regular users)

• Eraser.io diagrams don't have an alt description.
  Solution: Add an alt attribute to each image (preferably descriptive, or general), or hide them entirely from screen readers.

• Info/Warning callouts have too high priority.
  Solution: Remove the role="alert" attribute.
  Only brief, important(, time sensitive) messages should appear inside of an alert.

• Possible contrast issues.
  Solution: check contrast for every site element for each theme.