Accessibility

Overview

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](https://www.microsoft.com/design/inclusive/).The Persona Spectrum, by [Microsoft Inclusive Toolkit](https://www.microsoft.com/design/inclusive/).

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.

Perceivable

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?

Operable

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?

Understandable

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?

Robust

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.

Mobile

  • 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.

Headings

  • Avoid skipping headings and ensure they are in order (from h1 to h6).
  • h1 should be used only once per page.
<section>
  <h1>Shogun Black logo t-shirt</h1>

  <div>Some carousel content</div>

  <h2>T-shirt facts</h2>

  <h3>Related products</h3>
</section>

Images

  • 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 ❌ -->
<img
  src="https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/"
/>

<!-- Or this ❌ -->
<img
  src="https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/"
  alt="t-shirt"
/>

<!-- Do this ✅ -->
<img
  src="https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/"
  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 ✅ -->
<img
  src="https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/"
  alt=""
/>

Link

  • Add title attribute (describing the transition) if there is no content but an image on it.
  • Make sure links have focus state.
  • A button is not a link.
<a href="/" title="Navigate to the homepage" aria-label="Home" ><SomeIcon /></a>

Forms

  • 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 ✅ -->
<label>
  Name
  <input type="text" placeholder="Name" />
</label>

Button/Link Icons

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

Cart

  • Announce changes to screen readers every time a user adds to cart. Add the following to your cart button on the header:
<button
  aria-label={`Cart with ${cartCount} items.`}
  aria-live="assertive"
>
  <SomeCartIcon />
</button>

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

Animation

  • 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.

📘

IMPORTANT

  • 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 page help you?