Step-by-step fix guides for Shopify & WordPress
Clear code changes and checking instructions for the top 25 accessibility rules. Written for store developers and agencies, with zero jargon.
Use only permitted ARIA attributes on HTML elements in Shopify
ARIA attributes must only be used on elements whose role supports them.
Prevent focusable elements inside aria-hidden containers in Shopify
Containers hidden with `aria-hidden="true"` must not contain links, buttons, or inputs that can receive keyboard focus.
Include all required ARIA attributes for custom widgets in Shopify
Elements using custom ARIA roles (e.g. `checkbox`, `combobox`, `slider`) must include all mandatory attributes.
Use valid WAI-ARIA role values in Shopify themes
The `role` attribute must contain a valid, non-deprecated WAI-ARIA role string.
Provide discernible accessible names for buttons in Shopify
Buttons containing only icons or empty labels leave screen reader users with no indication of their action.
Add a skip to content link in Shopify themes
Provide a skip link as the very first focusable element so keyboard users can bypass repetitive navigation.
Fix color contrast ratios for text in Shopify themes
Text and interactive controls must have at least 4.5:1 contrast against their background (3:1 for large text).
Ensure every page has a descriptive document title in Shopify
Every web page must have an informative `<title>` tag in the `<head>` explaining its specific purpose.
Ensure IDs referenced by ARIA attributes are unique in Shopify
IDs targeted by `aria-labelledby`, `aria-describedby`, or `aria-controls` must be unique across the entire DOM.
Resolve duplicate or multiple labels for form inputs in Shopify
Form inputs should be associated with exactly one primary label element to avoid conflicting instructions.
Add informative title attributes to iframes in Shopify
Every `<iframe>` embedding videos, maps, or widgets must include an accessible `title` attribute.
Add the lang attribute to the html element in Shopify
The root `<html>` element must declare the document's primary language using a valid `lang` attribute.
Use a valid BCP 47 language code on the html element in Shopify
The language code specified on `<html>` must be an authorized BCP 47 language tag.
Add descriptive alt text to images in Shopify
Every product and theme image needs meaningful alternative text so screen reader users know what is displayed.
Ensure input buttons have discernible text values in Shopify
Inputs with `type="button"`, `type="submit"`, or `type="reset"` must have a non-empty `value` attribute.
Add alt text to image submit buttons in Shopify
Inputs with `type="image"` function as submit buttons and require descriptive `alt` text.
Associate form inputs with accessible labels in Shopify
Form inputs must have a programmatic `<label>` element connected via `for` and `id` attributes.
Ensure all links have discernible accessible text in Shopify
Links must contain descriptive text so users know where following the link will lead.
Ensure ul and ol list containers only contain li elements in Shopify
`<ul>` and `<ol>` tags must contain only `<li>` elements, `<script>`, or `<template>` tags.
Wrap all li elements inside parent ul or ol containers in Shopify
Every `<li>` element must be directly contained within a parent `<ul>` or `<ol>`.
Enable zooming and scaling on mobile viewports in Shopify
Do not disable user zooming with `user-scalable=no` or `maximum-scale=1.0`.
Avoid nesting interactive controls within each other in Shopify
Do not nest buttons, links, or inputs inside other clickable buttons or links.
Provide accessible names for select dropdowns in Shopify
Every `<select>` element must have an associated `<label>` or `aria-label`.
Provide accessible text for SVG images with role img in Shopify
SVGs with `role="img"` must contain an accessible label or `<title>` element.
Ensure interactive touch targets meet minimum 24px size in Shopify
Interactive targets like buttons, links, and pagination swatches must measure at least 24×24px (WCAG 2.2 Level AA).
Use only permitted ARIA attributes on HTML elements in WordPress
ARIA attributes must only be used on elements whose role supports them.
Prevent focusable elements inside aria-hidden containers in WordPress
Containers hidden with `aria-hidden="true"` must not contain links, buttons, or inputs that can receive keyboard focus.
Include all required ARIA attributes for custom widgets in WordPress
Elements using custom ARIA roles (e.g. `checkbox`, `combobox`, `slider`) must include all mandatory attributes.
Use valid WAI-ARIA role values in WordPress themes
The `role` attribute must contain a valid, non-deprecated WAI-ARIA role string.
Provide discernible accessible names for buttons in WordPress
Buttons containing only icons or empty labels leave screen reader users with no indication of their action.
Add a skip to content link in WordPress themes
Provide a skip link as the very first focusable element so keyboard users can bypass repetitive navigation.
Fix color contrast ratios for text in WordPress themes
Text and interactive controls must have at least 4.5:1 contrast against their background (3:1 for large text).
Ensure every page has a descriptive document title in WordPress
Every web page must have an informative `<title>` tag in the `<head>` explaining its specific purpose.
Ensure IDs referenced by ARIA attributes are unique in WordPress
IDs targeted by `aria-labelledby`, `aria-describedby`, or `aria-controls` must be unique across the entire DOM.
Resolve duplicate or multiple labels for form inputs in WordPress
Form inputs should be associated with exactly one primary label element to avoid conflicting instructions.
Add informative title attributes to iframes in WordPress
Every `<iframe>` embedding videos, maps, or widgets must include an accessible `title` attribute.
Add the lang attribute to the html element in WordPress
The root `<html>` element must declare the document's primary language using a valid `lang` attribute.
Use a valid BCP 47 language code on the html element in WordPress
The language code specified on `<html>` must be an authorized BCP 47 language tag.
Add descriptive alt text to images in WordPress
Every product and theme image needs meaningful alternative text so screen reader users know what is displayed.
Ensure input buttons have discernible text values in WordPress
Inputs with `type="button"`, `type="submit"`, or `type="reset"` must have a non-empty `value` attribute.
Add alt text to image submit buttons in WordPress
Inputs with `type="image"` function as submit buttons and require descriptive `alt` text.
Associate form inputs with accessible labels in WordPress
Form inputs must have a programmatic `<label>` element connected via `for` and `id` attributes.
Ensure all links have discernible accessible text in WordPress
Links must contain descriptive text so users know where following the link will lead.
Ensure ul and ol list containers only contain li elements in WordPress
`<ul>` and `<ol>` tags must contain only `<li>` elements, `<script>`, or `<template>` tags.
Wrap all li elements inside parent ul or ol containers in WordPress
Every `<li>` element must be directly contained within a parent `<ul>` or `<ol>`.
Enable zooming and scaling on mobile viewports in WordPress
Do not disable user zooming with `user-scalable=no` or `maximum-scale=1.0`.
Avoid nesting interactive controls within each other in WordPress
Do not nest buttons, links, or inputs inside other clickable buttons or links.
Provide accessible names for select dropdowns in WordPress
Every `<select>` element must have an associated `<label>` or `aria-label`.
Provide accessible text for SVG images with role img in WordPress
SVGs with `role="img"` must contain an accessible label or `<title>` element.
Ensure interactive touch targets meet minimum 24px size in WordPress
Interactive targets like buttons, links, and pagination swatches must measure at least 24×24px (WCAG 2.2 Level AA).
Check your store for these 25 accessibility issues
Run a free, instant 30-second audit on any page. No installation or account required.