Updated over a week ago


Itโ€™s wrong to conclude that all disabilities are permanent. If your arm is broken, you have a temporary disability. If you are at the center of a loud crowd, you have a situational disability. In other words, disabilities depend on the context.

๐Ÿ“˜ โ€œDisability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a personโ€™s body and features of the society in which he or she lives.โ€ - World Health organization


The Persona Spectrum, by Microsoft Inclusive Toolkit.

Four Principles of Web Accessibility

The industry standard guidelines for web accessibility are categorized into four principles, also known as POUR (Perceivable, Operable, Understandable and Robust). Following these are highly recommended to have a store more inclusive for everyone.

Below is a summarized version of those principles. To read more about them, check the WAI (Web Accessibility Initiative) page.


Information and user interface components must be presentable to users in ways they can perceive.

Think about:

  • readable text

  • text alternatives for all media

  • content relationship

  • not relying on a single sense, like relying on colors; color contrast, etc

๐Ÿ“˜ Ask yourself!

Think about blind, deaf, low vision, color blind users. Are they able to perceive that component?


User interface components and navigation through the website must be operable.

Think about:

  • keyboard accessibility

  • providing users enough time to digest the content

  • no blinking and flashing stuff

  • predictable and comprehensible navigation

๐Ÿ“˜Ask yourself!

Think about all HID (Hardware interface design): keyboards, screen readers, touch screen devices.

Is there an action that a user cannot perform with one of those? Can your customer buy your product without using the mouse?


Information and the operation of user interface must be understandable.

Think about:

  • over-complicated language

  • providing the content language

  • not reinventing the wheel

  • for forms, helpful labels and validation messages, "required" and "optional" marks

๐Ÿ“˜ Ask yourself!

Think about all users. Is the content written in a clear way? Are interactions easy to understand?


The content should remain accessible, even though (assistive) technologies and user agents evolve.

Think about maximizing compatibility, responsivity, and respecting web standards.

๐Ÿ“˜ Ask yourself

Think about your code. Are you respecting best practices and web semantics? Is that really a div?

Accessibility Best Practices

Making your store accessible will benefit everyone. Below are some best practices that will benefit a lot of people.


  • Make sure buttons and links can be activated with ease.

  • Make sure all information is reachable in the scroll area.

  • Do not disable pinch to zoom.


  • Avoid skipping headings and ensure they are in order (from h1 to h6).

  • h1 should be used only once per page.

<h1>Shogun Black logo t-shirt</h1>

<div>Some carousel content</div>

<h2>T-shirt facts</h2>

<h3>Related products</h3>


  • Use the alt attribute (with text describing the image).

  • For the alt text, make sure to use proper grammar and punctuation, and always finish a phrase with a period; this will make the screen reader pause briefly before reading the next element in the page.

  • For decorative images, use empty alt="".

<!-- Don't do this โŒ -->

<!-- Or this โŒ -->

<!-- Do this โœ… -->
alt="A black t-shirt with a black Shogun logo on it. The t-shirt is on a red surface."

<!-- Or this, if image is decorative โœ… -->


  • Add title attribute (describing the transition) if there is no content but an image on it.

  • Make sure links have focus state.

<a href="/" title="Navigate to the homepage" aria-label="Home" ><SomeIcon /></a>


  • Ensure all inputs are linked with a label, if you don't want that label to be visible, apply visually hidden CSS to it.

<!-- Don't do this โŒ -->
<input type="text" placeholder="Name" />

<!-- Do this โœ… -->
<label htmlFor="name">Name</label>
<input id="name" type="text" placeholder="Name" />

<!-- Or this โœ… -->
<input type="text" placeholder="Name" />

Button/Link Icons

  • Add a visually hidden text that only a screen reader can read. Read more here.


  • Announce changes to screen readers every time a user adds to cart. Add the following to your cart button on the header:

aria-label={`Cart with ${cartCount} items.`}
<SomeCartIcon />

This will ensure that every time a new item is added to the cart, the screen reader user will be informed.


  • Make sure animations are subtle.

  • Consider disabling animations altogether for people that don't want to see them. Use prefers-reduced-motion for that.

/* Remove all animations and transitions for people that don't wanna see them */
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;

Accessibility Testing Tools

You can test your store using axe or Lighthouse.


  • It's important to perform real tests using proper tools (such as screen readers).

  • A score of 100% doesn't mean your store is accessible.

About Accessibility Overlays

While accessibility overlays seem to be an easy win, they are not the right answer for dealing with accessibility issues. These solutions can't make your store fully compliant with any existing accessibility standard, and they often cause more harm than benefits, like degrading page speed performance and privacy concerns for your customers.

Creating an accessible and inclusive store is not hard when the web standards and best practices are followed.

Did this answer your question?