Accessibility Considerations for the Spooky Portfolio

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky/llms.txt

Use this file to discover all available pages before exploring further.

​

Reduced motion

@media (prefers-reduced-motion: reduce) {
  .animate-flicker { animation: none; }
  .animate-float   { animation: none; }
}

import { useReducedMotion } from 'framer-motion';

const prefersReduced = useReducedMotion();

// Then conditionally apply animations:
const transitionProps = prefersReduced
  ? {}
  : { duration: 0.5, ease: 'easeInOut' };

​

Jump-scare spider

• Confirm the toggle button is keyboard-focusable and operable with the Enter and Space keys.
• Verify the button’s aria-label updates correctly — it should read "Disable jump scares" when active and "Enable jump scares" when inactive. This is already implemented in the source, but confirm it is preserved in your build.
• Consider defaulting scaresEnabled to false in JumpScareContext.js if your audience is likely to include users who are sensitive to sudden animations.

​

Custom cursor

• Test that all interactive elements (links, buttons, form inputs) are still visually distinguishable when the custom cursor is active. CandleCursor scales slightly on hover over clickable elements as a visual cue.
• Screen reader users are entirely unaffected by the cursor change — screen readers do not rely on cursor position.
• Keyboard-only users are also unaffected — the custom cursor only responds to mousemove events and has no impact on keyboard focus or tab order.
• On touch devices, CandleCursor returns null (no mousemove events are fired on touchscreens), so mobile visitors see the native touch indicator.

​

Keyboard navigation

1. All navigation links are reachable by pressing Tab from the top of the page.
2. The hamburger button opens the navigation drawer when activated with Enter or Space.
3. Once the drawer is open, focus moves into the drawer and all links are reachable by Tab.
4. The drawer close button (X) is keyboard-operable and closes the drawer.
5. When the drawer closes, focus returns to the hamburger button that opened it, rather than being lost or jumping to the top of the page.
6. There are no focus traps outside the open navigation drawer (i.e., focus should not get stuck inside a decoration component).

​

Color contrast

• Use ghost white (#F5F5F5) for all body and paragraph text — it provides strong contrast against charcoal.
• Reserve pumpkin orange for decorative purposes and large display text (headings, labels, icons), where the WCAG AA large-text threshold of 3:1 is easier to meet.
• Test specific color pairings with a tool such as the WebAIM Contrast Checker.

​

Decorative elements

• CobwebCorner SVG elements should have aria-hidden="true".
• GhostMascot should have aria-hidden="true" (or a descriptive aria-label if it is interactive).
• SwingingLantern should have aria-hidden="true".
• FlickeringLights overlay elements should have aria-hidden="true".

​

Image alt text

​

Accessibility checklist

• Test keyboard navigation throughout all pages
• Check that link and button focus states are clearly visible
• Verify the mobile layout at various screen widths
• Add descriptive alt text to all images
• Test the heading hierarchy (h1 → h2 → h3 with no skipped levels)
• Check color contrast ratios for all text/background combinations
• Test with the operating system’s reduced-motion preference enabled
• Verify all decorative elements have aria-hidden="true"