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.
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
h1toh6).h1should 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
altattribute (with text describing the image).For the
alttext, 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
titleattribute (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>
Forms
Ensure all
inputs are linked with alabel, 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-motionfor 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.