Welcome, Mortals is a theatrical theme with a custom cursor, a spider-scare interaction, decorative text treatments, and high-contrast accent colors. These design choices add personality, but they also require deliberate accessibility testing before you publish a personalized version. Run through the checklist below to confirm your customized site is usable across different devices, input methods, and visitor preferences.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/welcome-mortals/llms.txt
Use this file to discover all available pages before exploring further.
Accessibility checklist
Work through each item before publishing your customized version. Some items are quick confirmations; others require you to test the site under specific conditions.Keyboard navigation
Tab through every page using only the keyboard. Every link, button, and interactive element must be reachable in a logical order. No element should become unreachable due to a layout change introduced during customization.Link focus states
Confirm that focus indicators are visible on all interactive elements. When tabbing through the page, the currently focused link or button should display a clearly visible outline. Do not remove or suppress focus outlines inassets/main.css without replacing them with an equally visible alternative.
Mobile-width behavior
Resize the browser to a narrow viewport or test on a physical mobile device. Confirm that text remains readable, navigation links are tappable, and no content is clipped or overflows horizontally. Decorative elements in Welcome, Mortals can amplify spacing differences at small screen widths — see the browser compatibility section below for more detail.Image alternative text
Every<img> element in your customized HTML should include a descriptive alt attribute. Purely decorative images that add no information should use an empty alt="" so screen readers skip them. Project screenshots, profile photos, and any image conveying content require meaningful alt text.
Heading order
Check that heading levels flow in order from<h1> down through <h2>, <h3>, and so on without skipping levels. A well-ordered heading structure allows screen-reader users to navigate between sections efficiently.
Reduced-motion preferences
Test the site with the operating system’s reduced-motion preference enabled. On macOS, go to System Settings → Accessibility → Display and enable Reduce Motion. On Windows, go to Settings → Accessibility → Visual Effects and turn off Animation effects. On iOS, go to Settings → Accessibility → Motion and enable Reduce Motion. Confirm that animated elements either pause, slow significantly, or use a static fallback when this preference is active.Color contrast
Orange (#FF7518) and lime green (#7CFC00) are accent colors used for headings and emphasis details — not for long sections of body text. Sustained reading of small orange or lime text against a dark purple background is visually demanding. Keep body copy in Parchment (#F4F1E8) or White (#FFFFFF) against the Haunted Purple (#2A1B3D) background for comfortable contrast across paragraphs.
If you adjust colors during customization, verify that your new combinations meet WCAG contrast requirements. A minimum ratio of 4.5:1 is recommended for normal-sized body text.
Readability of decorative text
Decorative text elements — themed headings, horror-host copy, spooky labels — should use font sizes and weights large enough to remain legible. Decorative styling should not be applied to the primary content of the page in a way that sacrifices readability.The SpiderScare component
Thecomponents/SpiderScare.js component is the spider-surprise interaction central to the Welcome, Mortals experience. It is a decorative element and must remain one.
When testing the spider interaction:
- Confirm that tabbing through the page while the spider is visible does not get stuck behind the overlay
- Confirm that the interaction respects the reduced-motion media query and either suppresses the animation or uses a gentler alternative when the visitor has reduced-motion enabled
- Confirm that the interaction element carries no
roleoraria-label that would cause a screen reader to announce it as meaningful content — it should be transparent to assistive technology
A visible reduced-motion toggle for visitors who prefer a calmer experience is listed as a possible future enhancement. See Possible Future Enhancements for the full list.
Browser compatibility
Welcome, Mortals is built for current versions of the following browsers:Google Chrome
Test in the current stable release. Chrome is the most common browser for web development previewing and the reference environment for this theme.
Mozilla Firefox
Test in the current stable release. Firefox applies slightly different default spacing and font rendering in some contexts.
Apple Safari
Test in the current release on macOS and iOS. Safari handles certain CSS properties and animation timing differently from Chromium-based browsers.
Microsoft Edge
Test in the current stable release. Edge is Chromium-based and generally behaves consistently with Chrome, but test independently to confirm.
Desktop and mobile testing
Test your final personalized version on both desktop and mobile screen sizes before publishing. The Welcome, Mortals theme includes decorative elements — themed borders, spider imagery, the custom cursor treatment, and styled section dividers — that can amplify spacing differences when the viewport changes. A layout that looks correct at full desktop width may compress, overlap, or clip unexpectedly at mobile widths if content was added without checking the mobile view. The custom cursor defined incomponents/CustomCursor.js is a mouse-pointer effect. It has no visible equivalent on touch screens, where the standard touch target behavior takes over. This is expected and does not require a fix, but confirm that all tap targets on mobile are large enough to select comfortably without the themed cursor present.