Accessibility

Keyboard Navigation

• ? — Open keyboard shortcut reference
• Ctrl+K (or ⌘+K on Mac) — Focus gallery search
• ← → ↑ ↓ — Navigate gallery items and lightbox
• Home / End — Jump to first or last gallery item
• Space — Toggle zoom in lightbox
• Escape — Close lightbox, modals, and overlays
• Tab / Shift+Tab — Move between interactive elements (focus is trapped in modals)

Screen Reader Support

• Semantic HTML landmarks (header, main, nav, footer)
• Skip-to-content link for bypassing navigation
• Live regions announce gallery filter counts, form errors, lightbox position, and zoom state
• All images include descriptive alt text with artwork title and category
• Form fields linked to error messages via aria-describedby
• Interactive elements have clear labels and roles
• Lightbox counter and navigation state announced on change

Visual Accessibility

• Color contrast — All text meets WCAG 2.1 AA contrast requirements (4.5:1 minimum)
• Reduced motion — Respects prefers-reduced-motion: animations are disabled, hero carousel shows a static image
• High contrast — Supports forced-colors: active (Windows High Contrast Mode) with appropriate fallbacks
• Increased contrast — Enhanced styles for prefers-contrast: more
• Focus indicators — Visible :focus-visible outlines on all interactive elements (keyboard-only focus, no mouse outlines)
• Dark theme — The site uses a dark color scheme with color-scheme: dark for system UI consistency

Touch and Mobile

• Minimum 44px touch targets on all interactive elements (WCAG 2.5.5)
• Swipe navigation in lightbox
• Responsive layouts tested at 1200px, 768px, 600px, 480px, and 360px breakpoints
• Gallery item overlays always visible on touch devices (no hover dependency)

Forms

• Required fields marked with asterisk and screen-reader-only “(required)” text
• Inline validation on blur with aria-invalid and linked error messages
• Character count on message fields
• Form draft auto-saved to session storage with restoration notice
• Submit button indicates loading state via aria-busy
• Error and success messages scrolled into view and focused

Images and Media

• All artwork images have descriptive alt text including title and category
• Blur placeholders shown during image loading to prevent layout shifts
• Error states with retry option when images fail to load
• Decorative images marked with alt=""

Print

• Print stylesheet hides navigation, lightbox, filters, and interactive controls
• Gradient text rendered as solid black for print legibility
• Images constrained to page width with page break avoidance

Feedback

If you encounter any accessibility barriers or have suggestions for improvement, please contact me. Your feedback helps make this site better for everyone.