Accessibility

Web accessibility is crucial because it ensures that websites and web applications can be used by everyone, regardless of their abilities or disabilities. It promotes inclusivity, complies with legal regulations, expands audience reach, improves user experience, and aligns with ethical and social responsibility standards. Besides that, it benefits mobile users and people with slow Internet connections.

Elevated theme meets the highest web accessibility standards outlined by the Web Content Accessibility Guidelines (WCAG) ↗. Our theme and Shopify support these guidelines, and we update them to meet evolving standards.

This article focuses on keeping your online store accessible while customizing its theme. It provides guidelines and resources for testing and learning more about accessibility.

⬇️  On this page:

Best web accessibility practices

Elevated was built with web accessibility in mind, and our Shopify theme incorporates everything needed to adhere to WCAG standards. However, here are some things to consider while adding your own content to the website:

• Clear and Descriptive Text

Provide clear and concise text for all elements, including headings, buttons, and links. Descriptive text helps users understand the purpose of each element.

• Color Contrast

Ensure sufficient color contrast between text and background to make content readable for users with visual impairments. As an example, out default Color Schemes are accessibility friendly. But we made our theme highly customizable so you can add your own color solutions. We recommend following WCAG guidelines for contrast ratios and utilize tools like WebAIM ↗ to test your color solutions.

Example 1: Using WebAIM, we tested colors from our default Color Scheme 3. As shown in the screenshot to the right, the contrast ratio passed WCAG standards.

Example 2: The colors used below didn't pass WCAG tests and should not be used, as per accessibility guidelines.

• Alt Text for Images

Include descriptive alt text for images to provide information for users who rely on screen readers. Avoid using images of text; instead, use actual text for important information. Refer to this technique ↗ when including alt text.

Example: When uploading your images, make sure to provide alt text in the highlighted space:

• Video Accessibility

Provide captions and transcripts for videos to ensure that users with hearing impairments can access the content. Use an accessible video player.

Ways to review your store for accessibility

Ensuring that your Shopify site is accessible is crucial for providing a positive user experience for all visitors, including those with disabilities. Here are some ways to check the accessibility of your Shopify site:

1. Review it yourself by:

   1. Following the Best Accessibility practices outlined above in this article.
   2. Using online accessibility testing tools:
• Google Lighthouse: It's an open-source, automated tool for improving the quality of web pages. It has an accessibility audit that can identify common issues.
• WAVE (Web Accessibility Evaluation Tool): This tool can identify many accessibility and Web Content Accessibility Guidelines (WCAG) errors.
• axe Accessibility Checker: This is a browser extension available for Chrome and Firefox. It can automatically scan your Shopify site for common accessibility issues.

2. Reach out to a professional agency specializing in accessibility.

One firm that specializes in Shopify work is Diff, but there's a great list of experts available on the A11y Project website ↗.

By combining automated testing tools, manual testing, and user feedback, you can create a more accessible shopping experience for all visitors to your Shopify site. Regularly checking and improving accessibility will not only benefit users with disabilities but also enhance the overall user experience for all customers.

Third-party apps and accessibility

While Shopify apps provide various functionalities and benefits, it is important to be aware that some apps may not fully comply with accessibility guidelines. This can potentially have an impact on the overall accessibility of your website. Therefore, when considering installing and utilizing apps on your Shopify store, it is crucial to keep accessibility guidelines in mind.

It is recommended that you carefully review the accessibility features and considerations of each app before making a decision. In case you have any concerns or questions regarding the accessibility of a specific app, it is advisable to reach out to the respective app developers for further clarification.