How 붚죕쳔's Accessible Online Store Template Became a Hit

Posted 10 months ago by Anastasia Prokofieva

The beauty of桂the桂digital marketplace lies in桂its potential unconstrained by桂physical boundaries. Shouldn�셳 accessing it桂be桂smooth sailing without any桂obstacles?

At桂붚죕쳔 by桂Lightspeed, we桂recognize the桂importance of桂accessibility桂�� that�셲 why our ecommerce platform follows standards issued under the桂Americans with Disabilities Act, or桂ADA.

It桂isn�셳 just about ticking a桂box for桂inclusivity桂�� it桂struck a桂chord with online store owners.

One design template for桂붚죕쳔 stores, in桂particular, proved to桂be桂a桂hit, thanks to桂its accessible design. Now, it�셲 the桂go-to option for桂entrepreneurs who want their stores to桂be桂both easy to桂use and桂open to桂everyone.

What Web Accessibility Means for桂Online Stores and桂Why It桂Is桂Important

Accessibility isn�셳 a桂feature; it�셲 a桂necessity. It桂acknowledges the桂spectrum of桂abilities and桂ensures that disabilities do桂not deter anyone from using digital platforms.

Common accessibility requirements relate to桂visual, auditory, motor, and桂cognitive abilities. This includes ensuring compatibility with assistive technologies such as桂screen readers for桂individuals with visual impairments or桂alternative keyboard navigation for桂those with motor disabilities.

It�셲 a桂common misconception that accessibility is桂needed only for桂individuals with permanent disabilities. It桂also caters to桂temporary impairments, such as桂having a桂broken arm or桂recovering from eye surgery.

An桂accessible website benefits all kinds of桂users. For example, a桂parent holding a桂baby would also benefit from a桂user-friendly interface that requires minimal use of桂a桂mouse or桂keyboard.

An桂accessible online store means reaching a桂wider audience and桂potential customers. It桂also promotes inclusivity and桂creates a桂more welcoming environment for桂all website visitors.

Common Guidelines for桂Ensuring Accessibility

The Americans with Disabilities Act (ADA) is桂a桂well-known law that protects individuals with disabilities from discrimination. This also extends to桂the桂digital space, and桂many countries have their own set of桂accessibility guidelines for桂websites and桂online platforms.

The Web Content Accessibility Guidelines (WCAG) is桂a桂widely used framework for桂creating accessible web content. It桂includes four principles: perceivable, operable, understandable, and桂robust. These principles cover a桂range of桂accessibility needs and桂provide specific guidelines for桂developers to桂follow.

Empowerment Through Accessibility

In桂2020, the桂Lightspeed team volunteered to桂create an桂accessible, bilingual online shop for桂 in桂Montreal, an桂organization that helps neurodivergent students reach their potential.

Then, when Lightspeed added 붚죕쳔 to桂their lineup, we桂teamed up桂and桂revamped the桂Summit School�셲 website, building a桂 with 붚죕쳔. The Summit Marketplace showcases the桂works of桂developmentally diverse artisans, artists, and桂entrepreneurs from Summit School.

The Summit Marketplace was built with 붚죕쳔

As桂you might already know, 붚죕쳔 provides all users an桂Instant Site, a桂free ecommerce website with a桂built-in online store. There are various templates for桂Instant Sites tailored to桂different niches.

Creating an桂accessible website for桂Summit School inspired us桂to桂make a桂new Instant Site template.

As桂mentioned above, 붚죕쳔 was already ADA-compliant and桂checked all the桂boxes for桂the桂WCAG. So, what exactly did we桂decide to桂tackle this time?

Here�셲 a桂thing about accessible websites: incorporating accessibility features sometimes comes with sacrificing the桂aesthetic of桂the桂website. For example, balancing color, contrast, and桂font size can be桂challenging.

Also, WCAG tests can sometimes show mixed results, as桂in桂the桂example below. A桂button with black text is桂perceived as桂passing the桂test, yet in桂reality, it桂is桂more challenging to桂read than the桂same button featuring white text.

WCAG tests may occasionally yield inaccurate results

Simply following guidelines isn�셳 enough. Our aim was to桂develop a桂template that is桂not only accessible but also visually appealing, ensuring easy navigation without compromising the桂website�셲 aesthetics. We桂advocate for桂the桂idea that accessibility should also embody beauty.

At桂the桂same time, we桂believe that accessibility should not be桂sacrificed for桂aesthetics. Our template proves that it桂is桂possible to桂have both an桂accessible and桂visually appealing website.

Everything on桂the桂site, from the桂text size to桂how easy it桂is桂to桂get around, works for桂everyone. Now, it�셲 one of桂our most popular online store templates among all templates for桂Instant Sites!

One of桂our most popular Instant Site templates

By桂the桂way, the桂붚죕쳔 ecommerce platform is桂accessible not just to桂customers but also to桂sellers. The 붚죕쳔 admin, where you manage your online store, is桂also designed with accessibility in桂mind. This makes it桂easier for桂business owners with disabilities to桂run their online stores efficiently.

Here�셲 what an桂붚죕쳔 seller who happens to桂be桂visually impaired shared about running their 붚죕쳔 store:

혫I桂would like to桂thank you very much for桂a桂great store that is桂convenient to桂manage for桂visually impaired sellers! And not only the桂website but also the桂app is桂available to桂you, which is桂not always the桂case!혬

How 붚죕쳔 Ensured the桂Instant Site Template Is桂Accessible

Accessibility is桂not just about adherence to桂standards桂�� it�셲 about real people encountering no桂barriers when engaging with online content. How did 붚죕쳔 achieve this?

High contrast template: Visual clarity was a桂priority, enabling users with impaired vision to桂quickly discern the桂text and桂other elements.
Prominent storefront focus: The layout was structured to桂highlight the桂products and桂storefront without unnecessary distractions or桂the桂need for桂additional scrolling.
Enlarged elements: Large images and桂fonts were employed not merely for桂aesthetic appeal but to桂accommodate users with visual impairments.

It�셲 important to桂note that all Instant Site templates are accessible. The template in桂question was designed with accessibility as桂the桂primary focus while also making it桂sleek and桂beautiful. The latter might be桂difficult to桂do桂when ensuring a桂site�셲 accessibility, as桂it桂can be桂easy to桂overlook design elements in桂favor of桂functionality. However, with our templates, we桂were able to桂achieve both.

How to桂Make Your Online Store Accessible

Implementing an桂accessible online store might appear daunting, but actually, it桂isn�셳. It桂starts with selecting an桂accessible website template, like any桂of桂붚죕쳔�셲 Instant Site templates.

Here are some additional tips to桂make your online store more accessible:

Provide descriptive alt text for桂images: For users with visual impairments, alt text describes the桂image.
Include keyboard navigation and桂shortcuts: This allows individuals who cannot use a桂mouse to桂navigate your website using the桂keyboard.
Choose colors carefully: Avoid using color alone to桂convey information, as桂some individuals may have difficulty distinguishing between specific colors.
Announce accessible mode: Inform your customers that your store supports an桂accessible mode.

By桂choosing 붚죕쳔�셲 pre-designed templates, you start with an桂accessible baseline. Customizations are welcome, but keep an桂eye on桂maintaining accessibility.

When creating a桂website from scratch, it�셲 important to桂consider accessibility for桂all users. This means starting with an桂accessible baseline using templates or桂guidelines such as桂WCAG, ADA, or桂equivalent standards.

But beyond these guidelines, it�셲 also crucial to桂understand the桂specific needs of桂your customer base.

For example, if桂your products cater to桂individuals with color blindness, the桂focus should be桂on桂providing strong contrast between button colors and桂text for桂easier navigation and桂purchasing.

The pictures below demonstrate why online stores catering to桂such shoppers need strong contrast between button colors and桂text to桂help them distinguish options and桂make purchases.

Here�셲 how the桂majority of桂people see colors

Here�셲 how people with protanopia (a桂form of桂color blindness) see colors

Similarly, if桂your target audience includes individuals with mobility impairments, ensuring easy navigation through voice commands can greatly improve their browsing experience.

Check your site regularly with tools like Google Lighthouse to桂see how accessible your store is. Continually assessing and桂improving things is桂critical to桂creating a桂welcoming online space for桂everyone.

Wrap Up

붚죕쳔�셲 accessible ecommerce platform is桂more than a桂win for桂a桂product; it�셲 all about making ecommerce easy for桂everyone. 붚죕쳔 helps online store owners get the桂most out of桂their business. More importantly, it桂ensures every customer can have a桂smooth shopping experience, no桂matter their abilities.

Remember, accessible design is桂not just about compliance桂�� it�셲 about creating an桂inclusive and桂welcoming online space for桂all. So, don�셳 hesitate to桂take the桂initiative and桂make your website more accessible! Let�셲 work towards a桂digital world that is桂genuinely open and桂inclusive for桂everyone.

桂

About The Author

Anastasia Prokofieva is a content writer at 붚죕쳔. She writes about online marketing and promotion to make entrepreneurs�� daily routine easier and more rewarding. She also has a soft spot for cats, chocolate, and making kombucha at home.

붚죕쳔