Accessibility
Accessibility (a11y) means your store is usable by everyone, including people using screen readers, keyboard navigation, or motion-reduced settings.
What Citera ships
- Semantic HTML — proper landmarks (
<header>,<main>,<footer>,<nav>), heading hierarchy, and list markup - Skip-to-content link — keyboard users can skip past the header/nav directly to page content
- Full keyboard operation — menus, drawers, search panel, image lightbox all work with Tab, Enter, Esc, arrow keys
- Visible focus states — every interactive element shows a clear outline when focused via keyboard
prefers-reduced-motion— animations, autoplay, and smooth scroll back off automatically for shoppers who requested reduced motion- ARIA attributes — form fields have proper labels, buttons announce their state, dialogs trap focus while open
What’s your responsibility
- Color contrast. Citera lets you pick any color combination — some combinations fail WCAG contrast requirements. Test text-on-background pairs at webaim.org/resources/contrastchecker .
- Alt text on images. Every product image, hero image, and content image needs alt text describing the content. Set alt text in Shopify’s media editor.
- Descriptive link text. “Click here” is bad — use link text that describes the destination: “Read the ingredients guide”, “Shop the winter collection”.
- Heading hierarchy. Don’t skip heading levels (H1 → H3 skips H2). Use section headings meaningfully.
Test accessibility
Free tools:
- WAVE — a browser extension that shows a11y issues visually
- axe DevTools — a browser extension with detailed a11y checks
- Screen reader — Mac’s built-in VoiceOver (
Cmd+F5) or Windows Narrator. Navigate your store with only the keyboard and screen reader to see how it feels