[PRIMARY FEATURE] Website Accessibility Check

[GuyWhoCode]

User Story

As a developer, I want to ensure that our website can be accessible by anyone, including those with disabilities.

Technical Tasks

• Run through the A11y Project Accessibility Checklist here
• Based on assessment, improve websites to satisfy failed requirements

Acceptance Criteria

• Website implements all accessibility recommendations within reason
  • Alright to fail some issues if it's impossible to implement with React for some unknown reason

[KaylaMLe]

Discord Name: beetleferr

[KaylaMLe]

DONE:

• prefers-reduced-motion: reduce disables all transition animations
• the tab's title changes as you navigate through the page
• appropriate alt text added
• the logo in the navbar is no longer a button that does nothing
• keyboard focus decoration is visible around all interactive elements
• color contrast ratio is now at least 4.5 for body text and 3 for graphics and large text.
• added a skip to main content link
• added external link icons to the download links

ISSUES:

• There are color contrast issues in auto-generated docs page.
• an MUI (?) style overrode the coloring style I tried to apply to the title on the Documentation page, so I had to pass the title a style object instead.

TODO:
for screen reader compatibility:

• thoroughly keyboard navigation
• Refining landmark regions and heading consistency (would require a deeper reworking of the page's styling)