Making Your Wix Store Accessible for Everyone
Learning Objectives
By the end of this chapter, you'll be able to:
- Add proper alt text to your product images
- Structure headings to help screen reader users navigate your store
- Choose colour combinations that meet accessibility standards
- Create a more inclusive shopping experience for all customers
Introduction
Your Wix store should welcome every customer, including the 15% of the global population with disabilities. Making your store accessible isn't complicated, and it often improves the experience for all users. You'll focus on three key areas: image descriptions, heading organisation, and colour choices. These changes will help screen reader users, people with visual impairments, and anyone browsing in challenging conditions.
Lessons
Adding Alt Text to Product Images
Alt text describes your images for people using screen readers. Without it, they miss crucial product information.
Step 1: Click on any product image in your Wix editor
Step 2: Look for the settings panel on the left side of your screen
Step 3: Find the 'SEO' or 'Alt Text' section
Step 4: Type a clear description of what's shown in the image
Write alt text that describes the product's key features. For a red leather handbag, write "Red leather handbag with gold buckle and shoulder strap" rather than just "handbag" or "product image".
What to include:
- Product type and main features
- Colour, material, and size if visible
- Important details that affect purchasing decisions
What to skip:
- "Image of" or "Picture showing"
- Decorative words that don't add information
- Marketing language or opinions
Structuring Headings Properly
Headings create a roadmap for your page. Screen readers use them to jump between sections, so they need to follow a logical order.
Step 1: Use H1 for your main page title only
Step 2: Use H2 for major sections like "Product Details" or "Customer Reviews"
Step 3: Use H3 for subsections under those H2 headings
Step 4: Never skip heading levels (don't jump from H1 to H3)
In Wix, you'll find heading options in the text formatting toolbar. Most themes automatically style your headings, but you can customise their appearance while keeping the proper HTML structure.
Good heading structure example:
- H1: "Wireless Headphones Collection"
- H2: "Premium Over-Ear Models"
- H3: "Noise-Cancelling Features"
- H3: "Battery Life Comparison"
- H2: "Compact In-Ear Options"
This creates a clear hierarchy that makes sense when read as a list.
Choosing Accessible Colours
Poor colour contrast makes text hard to read for many people. The good news is that improving contrast often makes your store look more professional too.
Step 1: Pick your text and background colours
Step 2: Test them using a free contrast checker tool (search "colour contrast checker" online)
Step 3: Aim for a contrast ratio of at least 4.5:1 for normal text
Step 4: Use 3:1 for large text (18pt or larger)
Quick contrast tips:
- Dark text on light backgrounds usually works well
- Avoid using colour alone to convey important information
- Test your colours on different devices and in bright light
- Consider how your colours look to people with colour blindness
In Wix, you can adjust colours through the design panel. Many of the built-in colour schemes already meet accessibility standards, but it's worth checking if you've customised them.
Practice
Pick one product page from your store and work through these improvements:
- Alt text audit: Check three product images and rewrite their alt text using the guidelines above
- Heading check: Look at your page structure and fix any heading levels that skip or repeat unnecessarily
- Contrast test: Use an online tool to check the contrast between your text and background colours
Make these changes and ask someone to review the page. Can they understand what each product looks like from the alt text alone?
FAQs
Where do I add alt text in Wix?
Click on any image, then look for the SEO or Alt Text field in the settings panel that appears on the left side of your editor.
How long should alt text be?
Keep it under 125 characters when possible. Focus on the most important details that help someone understand what the image shows.
Can I check if my colours meet accessibility standards?
Yes, search for "WCAG colour contrast checker" online. These free tools tell you if your colour combinations pass accessibility guidelines.
Do I need alt text for decorative images?
Images that are purely decorative (like background patterns) can have empty alt text, but product images always need descriptions.
What if my brand colours don't meet contrast requirements?
You might need to use darker or lighter versions of your brand colours for text. Many brands have accessible colour variations in their style guides.
Jargon Buster
Alt text: Short descriptions of images that screen reading software reads aloud to users who can't see the images
Screen reader: Software that reads webpage content aloud, helping people with visual impairments navigate websites
Contrast ratio: A number that describes the difference between two colours, with higher numbers meaning more contrast and better readability
WCAG: Web Content Accessibility Guidelines – international standards that define how to make websites accessible to people with disabilities
Heading hierarchy: The system of organising content using H1, H2, H3 headings in logical order to create a clear page structure
Wrap-up
You've covered the three building blocks of an accessible Wix store: descriptive alt text, logical heading structure, and good colour contrast. These changes make your store usable for screen reader users and easier for everyone to navigate.
Start with your most important product pages and work through them systematically. The improvements you make will benefit all your customers, not just those with disabilities.
Ready to make your store stand out for all the right reasons?