Accessibility
Art by Jada is designed to be accessible to everyone. This page documents the accessibility features built into the site and our commitment to inclusive design.
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-visibleoutlines on all interactive elements (keyboard-only focus, no mouse outlines) - Dark theme — The site uses a dark color scheme with
color-scheme: darkfor 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-invalidand 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 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.