Salve accessibility

Salve is built to be usable with a keyboard, a screen reader, zoom and larger text. Many shoppers of health products are older or have low vision or limited dexterity, so these features matter. The theme gives you a strong starting point, but the accessibility of your store also depends on your content and settings.

Using Salve doesn't make your store accessible or compliant with any accessibility law. Test your own store, and get advice if you have legal obligations.

For how the theme measures up to WCAG 2.2 Level AA, criterion by criterion, read the accessibility conformance report.

Built-in features

Text size control

Shoppers can choose from three text sizes: default, large (112.5%) and larger (125%). The control appears in the announcement bar and in the mobile menu. The choice is remembered in the shopper's browser.

  • Turn it on or off in theme settings under Accessibility > Show text size control.
  • To show it in the announcement bar, keep Show text size control on in the Announcement bar section too.
  • Layouts are designed to work at the largest size and at 200% browser zoom.

Keyboard access and focus

  • A "Skip to content" link is the first item on every page.
  • Menus, filters, accordions, dialogs, the cart drawer, search suggestions and the product selector all work with a keyboard.
  • Dialogs and drawers keep focus inside while open, close with the Esc key and return focus to the button that opened them.
  • Every focused element has a visible outline. Its color is the Focus ring color in each color scheme.
  • Buttons, swatches, quantity controls and icon links are at least 44 by 44 pixels.

Reduced motion

  • When a visitor has turned on "reduce motion" on their device, Salve turns off animations and transitions.
  • Reduce motion for all visitors in theme settings does the same for everyone.
  • Reveal sections on scroll is off by default, and it never runs for visitors who prefer reduced motion.
  • Hero videos have a visible pause button and don't play automatically for visitors who prefer reduced motion.
  • Announcements and product rows never rotate on their own.

Color and contrast

  • The color schemes in all three presets were checked for WCAG 2.2 AA contrast.
  • Warnings use their own notice colors, so safety information never looks like a promotion.
  • Underline links in body text is on by default, so links don't rely on color alone.
  • Focus outlines and borders stay visible in Windows high contrast mode.

Structure and screen readers

  • Each page has one main heading. Sections have a Heading level setting so the outline stays logical.
  • Specification and comparison tables use proper row and column headers.
  • Cart updates, filter results, price changes and supply planner results are announced to screen readers.
  • Document links include the file format and size in their accessible name.
  • Form fields have visible labels, and errors are linked to the fields.

Works without JavaScript

Some shoppers use browsers or assistive technology with JavaScript turned off or blocked. Salve still lets them shop:

  • Menus, the mobile menu, search, filters and sorting, product options, add to cart and the cart page all work as normal links and forms.
  • Controls that need JavaScript, such as the text size buttons, quantity + and − buttons and share buttons, are hidden rather than shown and broken. Shoppers can still type a quantity.
  • Safety information is always shown in full.

Your responsibilities

Alt text

Alt text describes an image for people who can't see it.

  • Add alt text to every product image in the admin. Describe what the image shows, for example "Foam dressing, 10 x 10 cm, in its sterile pouch".
  • Many sections and blocks have an Alt text setting. Fill it in, or leave it empty only for purely decorative images.
  • Don't put important text in images. If you must, repeat the text on the page.

Label images

Supplement Facts and Drug Facts images are full of important text. A screen reader can't read text in an image.

  • Add the label text to the image's alt text in the admin.
  • Alt text has a length limit, so also enter the full ingredient and label information as text: in the health.ingredients metafield, the product description or a document.
  • For Drug Facts, you can also upload an accessible PDF as a Health document with the type Drug Facts.

Video

  • For YouTube and Vimeo videos, add captions on that platform.
  • Salve doesn't add caption tracks to videos hosted on Shopify. If a hosted video includes speech or important sounds, repeat that information as text near the video, for example in the step text of the How to use section.
  • Fill in the Description setting of the Video section. Screen readers use it.

Documents and content

  • Ask your manufacturers for accessible, tagged PDFs of instructions for use.
  • Use headings in rich text in order, and write link text that makes sense on its own, such as "Read the returns policy" instead of "Click here".
  • If you change colors, check contrast again. Text needs a contrast ratio of at least 4.5:1, and large text and interface parts at least 3:1.
  • Check that apps you add are accessible too.