Design
Accessibility
What Vellora does for accessibility out of the box, and what you need to do as a merchant, from alt text to color contrast.
An accessible store works for everyone: people who use a keyboard or a screen reader, people with low vision or color blindness, and people who are sensitive to motion. Vellora handles the structure and behavior of the theme. The content you add, such as images, colors and text, is up to you.
What the theme provides
Keyboard and focus
- A Skip to content link is the first thing keyboard users reach, so they can jump past the header.
- Every link, button and form field shows a clear focus outline when reached with the keyboard.
- Dropdown and mega menus open with a button that tells screen readers whether the menu is open. Escape closes the menu and returns focus to its button.
- Drawers and pop-ups (menu, cart, search, quick view, email pop-up, size guide) use the browser's built-in dialog element. Focus moves into the panel when it opens, Escape closes it, the page behind can't be scrolled, and focus returns to the button that opened it.
- The before and after slider is a standard range control, so it works with arrow keys.
Screen readers
- Each page has one main heading: the product, collection, page or post title. On the home page, it's your store name, hidden visually but read by screen readers.
- Section headings keep a correct heading order. Heading size settings only change how a heading looks, not its level.
- Icon-only buttons, such as cart, search, close and slideshow arrows, have text labels.
- Carousels (the slideshow and the announcement bar) are announced as carousels, and slideshow slides are numbered, such as "2 of 4".
- Some sections have a setting just for screen reader users: Slideshow label in Slideshow, Tabs label in Collection tabs, Table description in Table and Video description in Video.
- Form errors and confirmations, in the newsletter, contact form and cart, are announced as they appear, and invalid fields are marked.
- The countdown timer is marked as a timer, without announcing every second.
- The second copy of scrolling text, which only exists to make the loop seamless, is hidden from screen readers.
Images
- Images use the alt text you set in Shopify admin.
- Product images fall back to the product title when they have no alt text.
- Purely decorative images, such as the second image that appears on hover, have empty alt text so screen readers skip them.
Motion
- Visitors who turn on Reduce motion in their device settings see no scroll reveals, sliding panels or autoplay. See Animations.
- Slideshows that rotate on their own, rotating announcements and scrolling text all have a pause button.
Touch and layout
- Icon buttons and quick add buttons are at least 44 by 44 px, so they're easy to tap.
- Text uses relative sizes and reflows on narrow screens, so it can be enlarged without breaking the layout.
- Every storefront string is translatable, and the page language is set for screen readers.
What you need to do
The theme can't check your content, so these are your responsibility.
Write alt text for meaningful images
Alt text describes an image for people who can't see it. Add it in Shopify admin:
- Product images: open the product, select an image and edit its alt text.
- Images in sections: go to Content → Files, select the image and edit its alt text.
Describe what matters in the image, in a short sentence: "Oak side table with a ceramic lamp", not "image1.jpg" or "table". Leave alt text empty for images that are purely decorative.
Keep colors readable
If you change a color scheme or the badge colors, check the contrast. Text needs a ratio of at least 4.5:1 against its background, and large text 3:1. Pay special attention to:
- The accent color, which is used for small text such as eyebrow labels.
- Button labels on solid buttons.
- Text over photos in Image banner, Slideshow and Hero collage. Raise the overlay opacity if needed.
The color schemes in all three presets meet these ratios. Colors and color schemes explains what to check.
Write clear links and buttons
Use labels that make sense on their own: "Shop the sale" or "Read our care guide", not "Click here" or "More". Screen reader users often move through a page by its links.
Add captions to video
If your videos have speech, add captions where the video is hosted, for example on YouTube or Vimeo. For videos without speech, such as the muted clips in Shoppable video, describe the product in the caption or text next to it.
Be careful with autoplay and pop-ups
- Keep Change slides automatically off in Slideshow unless the slides are short. If you turn it on, give each slide at least five seconds.
- Give the email pop-up a reasonable Delay, so shoppers can start browsing first.
Check apps and custom code
Apps, app blocks and Custom Liquid sections add their own markup. Test them with a keyboard after you add them.
Test your store
- Keyboard: put the mouse away and press Tab through the home page, a collection, a product and the cart. You should always see where focus is, and you should be able to open and close every menu and drawer.
- Zoom: zoom the browser to 200%. Text should reflow without overlapping.
- Automated checks: run Lighthouse in Chrome DevTools on your main pages. It flags missing alt text, low contrast and unlabeled controls.