Making Your Online Store Accessible

Accessibility means designing your online store so that everyone, including customers with visual, auditory, motor, or cognitive disabilities, can browse, understand, and complete a purchase without barriers. Making your store more accessible also helps you reach a wider customer base and reduces legal risk, since regulations such as the Americans with Disabilities Act (ADA) in the United States and the European Accessibility Act (EAA) in the European Economic Area increasingly require online businesses to meet accessibility standards. 

This guide explains how to write effective image descriptions, structure your headings, add video captions, choose accessible colors, and label your forms clearly.

Understanding Accessibility Standards for Online Stores

Most accessibility requirements around the world are based on the Web Content Accessibility Guidelines (WCAG), an internationally recognized standard for making digital content usable by people with disabilities. WCAG covers areas such as how content is described, how pages are structured, and how visitors interact with forms, links, and media.

Many technical aspects of accessibility, such as page structure and keyboard navigation, are handled by SHOPLINE themes and components. The sections below outline what you, as a merchant, can do to make the content in your store more accessible.

Adding Alt Text to Your Product Images and Banners

Screen readers rely on alt text, a short written description, to describe images to customers who cannot see them. 

To add effective alt text, open the image you want to describe in your product page, banner, or section image settings, then enter a concise description in the Alt text field. Where you add alt text depends on the type of image:

• Product image: Go to Products, select the product, click the Cover image, then add or update the ALT attributes.
• Banner or Section image: Go to Settings > File library, click the selected image, then add or update the ALT attributes.

When writing alt text, follow these best practices:

• Add a concise description of what the image shows and why it matters, rather than labeling it "image" or "photo."
  • For a product photo, describe the product itself, e.g., "Navy blue cotton crewneck sweater, folded on a wooden table."
  • For a banner or promotional image, describe the message it conveys, e.g., "Summer sale banner: 30% off all swimwear."
• Leave the alt text field empty only for purely decorative images that add no information, such as background textures.
• If the image itself is a clickable link, such as a banner linking to a collection, write the alt text to describe the destination or action rather than the image, e.g., "Shop the summer collection" instead of "Beach photo with sunglasses."

Writing Clear Link and Button Text

Customers using screen readers often navigate a page by jumping between links and buttons, sometimes without reading the surrounding text. Writing clear, descriptive link and button text helps customers understand where a link leads or what action a button performs.

When writing link and button text, follow these best practices:

• Replace vague text like "Click here" or "Read more" with text that describes the destination or action, e.g., View Shipping Policy or Add to Cart.
• Keep link text unique per destination — if two links go to different files, don’t label them identically. Use Download PDF and Download Word Version instead of two identical "Download" links.
• Let customers know when a link opens a new tab or downloads a file, e.g., "Download our size guide (PDF, 2MB)."
• Don’t rely on color alone to distinguish links from surrounding text. Add an underline or another visual cue, such as a style change when a customer hovers over the link.

Structuring Your Page Headings Correctly

Screen readers use heading levels, similar to a table of contents, to help customers navigate a page and understand its structure. Using heading levels correctly also improves the overall organization and readability of your content.

To keep your headings accessible when arranging Sections in the Theme Editor, follow these best practices:

• Use only one main heading (Heading 1) per page, this should reflect the page’s core topic, such as the product name or collection title.
• Keep headings in order without skipping levels. For example, don’t follow a Heading 2 directly with a Heading 4.
• Use heading styles to reflect structure, not just visual size. Don’t apply a large heading style purely for emphasis on text that isn’t actually a section title.

Configuring Accessible Image Carousels

Image carousels and slideshows can create accessibility challenges when they move on their own. To keep carousels accessible, we recommend setting them to not autoplay by default.

Adding Captions to Your Videos

Captions help customers who are deaf or hard of hearing understand video content. They also improve the viewing experience for customers watching videos with the sound turned off.

When adding videos to your store, follow these best practices:

• Add captions or subtitles to any video you upload to your store, especially product demos or brand videos.
• Provide a text transcript for audio-only content, such as podcasts or voiceovers.
• Avoid videos that autoplay with sound, since this can be disorienting for customers using screen readers.

Choosing Accessible Color Combinations

Sufficient contrast between text and its background makes your store easier to read for customers with low vision or color blindness. 

When customizing your theme’s colors, follow these best practices:

• Aim for a contrast ratio of at least 4.5:1 between body text and its background.
• For large text (18pt and above, or 14pt bold and above) and icons, aim for a contrast ratio of at least 3:1.
• Avoid relying on color alone to convey information, such as marking a required form field only in red. Pair color with text or an icon.
  • Example: Low-contrast text and buttons are hard to read against their background.
    
  • Example: Higher-contrast text and buttons are easier to read against their background.
    

Choosing an Accessible Text Alignment

Justified text, aligned evenly on both the left and right edges, creates uneven spacing between letters and words, which can make reading more difficult for customers with dyslexia or low vision. 

When formatting text in your store, follow these best practices:

• Use left-aligned text instead of justified text in your product descriptions, banners, and other page content.
• If a section or custom content block offers an alignment setting, choose left alignment rather than justified.
  • Example: Justified text creates uneven word spacing.
    
  • Example: Left-aligned text keeps word spacing even and consistent.
    

Labeling Your Form Fields Clearly

If your store uses forms, such as newsletter sign-ups, contact forms, or custom checkout fields, clear labels help every customer understand what to enter. 

To label your forms accessibly, follow these best practices:

• Give every field a visible, persistent label. Don’t rely on placeholder text alone, since it disappears once the customer starts typing.
• Mark required fields clearly, both visually (e.g., an asterisk with a legend) and in the field’s label text (e.g., "Email (required)").
• Write clear, specific error messages that tell the customer what went wrong and how to fix it, rather than a generic "Invalid input.