Accessibility (WCAG) issues we check — and how to fix them
1 in 4 adults has a disability. Inaccessible sites face ADA lawsuits — and lose customers. We run WCAG 2.1 AA checks across your catalog pages and tell you exactly what to fix.
63 catalogued Accessibility (WCAG) issues, each with step-by-step, platform-specific fixes.
Filter:
- Aria allowed attrModerate effortRemove or replace any ARIA attributes that are not permitted on an element's assigned role so that assistive technologies can correctly interpret the element.
- Aria allowed roleModerate effortRemove or replace the invalid `role="presentation"` (or other disallowed ARIA role) on HTML elements where that role is not permitted, so assistive technologies can correctly interpret your page.
- Aria command nameModerate effortAdd a discernible, screen-reader-accessible name to every button, link, and menuitem that uses an ARIA command role so assistive technology can announce what it does.
- Aria dialog nameModerate effortAdd a descriptive accessible name to every dialog and alertdialog element using aria-label or aria-labelledby so screen-reader users know what the dialog is about.
- Aria hidden focusModerate effortRemove `aria-hidden="true"` from any element that contains focusable children (links, buttons, inputs), or remove the focusable elements from inside the hidden container.
- Aria input field nameModerate effortAdd a meaningful accessible name (label) to every ARIA input field so screen readers can identify and announce it to users.
- Aria meter nameModerate effortAdd a descriptive accessible name (via aria-label, aria-labelledby, or a visible <label>) to every element that uses role="meter" so screen readers can announce what the meter represents.
- Aria progressbar nameQuick winAdd a descriptive accessible name to every progress bar element so screen readers can announce what it represents.
- Aria prohibited attrModerate effortRemove or replace ARIA attributes that are explicitly prohibited on an element's assigned role, ensuring every ARIA attribute used is valid for its context.
- Aria required attrModerate effortAdd the required `aria-level` attribute (and any other missing required ARIA attributes) to every element that uses an ARIA role which mandates them.
- Aria required childrenModerate effortEnsure every ARIA parent role contains only its required, permitted child roles — and remove focusable elements (e.g. tabindex on img or a) that are not allowed inside that ARIA context.
- Aria required parentModerate effortWrap every ARIA child role (such as `tab`, `option`, `listitem`, `row`, etc.) in the correct required ARIA parent container role (such as `tablist`, `listbox`, `list`, `rowgroup`, or `grid`) so assistive technologies can correctly interpret the widget's structure.
- Aria rolesModerate effortAudit every element that has a `role` attribute and replace any invalid, misspelled, or non-existent ARIA role value with a valid WAI-ARIA role from the official specification.
- Aria toggle field nameModerate effortGive every toggle control (checkbox, switch, or ARIA toggle button) a descriptive accessible name so screen readers can announce what it does.
- Aria tooltip nameModerate effortAdd a visible, descriptive text label to every element that has role="tooltip" so screen readers can announce its purpose.
- Aria valid attrModerate effortFind every misspelled or non-existent ARIA attribute name in your HTML (e.g. `aria-labeledby` instead of `aria-labelledby`) and correct each one to a valid ARIA attribute name.
- Aria valid attr valueModerate effortAudit every ARIA attribute on your pages and correct any that point to a non-existent element ID, use a disallowed value, or reference an empty/misspelled target so that assistive technologies can correctly interpret your page.
- Autocomplete validModerate effortAdd a valid, correctly matched `autocomplete` attribute to every personal-data form field so browsers and assistive technologies can autofill them reliably.
- Avoid inline spacingModerate effortRemove hard-coded text-spacing CSS properties from inline `style` attributes so users can override them with their own stylesheets.
- Button nameModerate effortAdd a visible or programmatically accessible name to every button so screen readers can announce what it does.
- Color contrastModerate effortIncrease the contrast ratio between your text color and its background color to at least 4.5:1 so all users — including those with low vision — can read your content.
- Definition listModerate effortFix all `<dl>` (definition list) elements so they contain only valid `<dt>` and `<dd>` child elements, in the correct order, with no stray tags or text directly inside the list wrapper.
- DlitemQuick winWrap every `<dt>` (term) and `<dd>` (description) element inside a parent `<dl>` element so screen readers can correctly announce the list structure.
- Document titleQuick winAdd a unique, descriptive <title> element to every page so browsers, screen readers, and search engines can identify it.
- Empty headingModerate effortFind every empty heading tag on your store and add meaningful, visible text to it — or remove the tag entirely if it serves no structural purpose.
- Empty table headerModerate effortAdd descriptive text to every table header cell (`<th>`) so that screen readers can announce what each column or row represents.
- Frame titleQuick winAdd a descriptive `title` attribute to every `<iframe>` element on your store so screen readers can identify the frame's content.
- Heading orderModerate effortFix heading tags so they follow a logical, sequential order (H1 → H2 → H3…) without skipping levels anywhere on the page.
- Html has langQuick winAdd a valid `lang` attribute to the `<html>` element so browsers and assistive technologies know what language your page is written in.
- Html lang validQuick winSet a valid BCP 47 language code on the `lang` attribute of your page's `<html>` element (e.g., `lang="en"`) so browsers, screen readers, and search engines correctly identify the page language.
- Image altModerate effortAdd a descriptive `alt` attribute to every `<img>` element on your store so screen readers and search engines can understand what each image shows.
- Image redundant altModerate effortRemove or empty the alt attribute on images whose caption or surrounding text already describes them, so screen readers don't announce the same information twice.
- Input button nameQuick winAdd a descriptive label to every input button so screen readers can announce what the button does.
- LabelModerate effortAdd a visible or programmatic label to every form input so assistive technologies can identify its purpose.
- Label title onlyModerate effortAdd a visible, persistent label to every form field so it is never labeled only by a tooltip (title) or hidden description (aria-describedby).
- Landmark banner is top levelModerate effortEnsure your site's banner landmark (<header> or role="banner") sits at the top level of the page, not nested inside another landmark region.
- Landmark complementary is top levelModerate effortMove any `<aside>` element (or element with `role="complementary"`) so it is a direct child of `<body>`, not nested inside another landmark region like `<main>`, `<header>`, `<footer>`, or `<nav>`.
- Landmark contentinfo is top levelModerate effortMove your footer element (or any element with role="contentinfo") to the top level of the page so it is not nested inside another landmark region.
- Landmark main is top levelModerate effortMove the `<main>` element (or `role="main"`) so it is a direct child of `<body>` and not nested inside any other landmark element such as `<header>`, `<nav>`, `<aside>`, or `<footer>`.
- Landmark no duplicate bannerModerate effortEnsure your page has only one banner landmark (a single `<header>` element or `role="banner"`) so assistive technologies can navigate your site correctly.
- Landmark no duplicate contentinfoModerate effortRemove duplicate `<footer>` elements or `role="contentinfo"` landmarks so your page has exactly one, site-wide footer region.
- Landmark no duplicate mainModerate effortEnsure each page contains exactly one `<main>` landmark element (or one element with `role="main"`) so screen-reader users can navigate directly to the page's primary content.
- Landmark one mainQuick winAdd a single `<main>` landmark element (or `role="main"`) to every page so that screen-reader users and assistive technologies can skip directly to the primary content.
- Landmark uniqueModerate effortAdd a unique aria-label (or aria-labelledby) to every repeated landmark role so assistive technologies can distinguish between them.
- Link in text blockModerate effortMake inline links visually distinguishable from surrounding body text by ensuring at least 3:1 color contrast between the link color and the non-link text color, or by adding a non-color visual cue (such as underline) to every link.
- Link nameModerate effortAdd a descriptive, screen-reader-accessible label to every link on your store so assistive technologies can announce where each link leads.
- ListModerate effortFix all HTML list elements so that `<ul>` and `<ol>` contain only valid `<li>` children, and `<li>` elements appear only inside a proper list container, ensuring correct semantic list structure throughout your store.
- ListitemQuick winWrap every `<li>` element in a proper `<ul>` or `<ol>` parent so screen readers and browsers can correctly identify and announce list structure.
- Meta refreshQuick winRemove or disable any `<meta http-equiv="refresh">` tag that automatically redirects or reloads the page in under 20 hours.
- Meta viewportQuick winRemove `user-scalable=no` (and any `maximum-scale` value below 5) from your site's `<meta name="viewport">` tag so visitors can pinch-to-zoom on mobile devices.
- Meta viewport largeQuick winRemove or raise the `maximum-scale` value in your site's `<meta name="viewport">` tag so mobile users can pinch-to-zoom freely.
- Nested interactiveModerate effortRemove or restructure focusable elements nested inside interactive controls so that no interactive element contains another focusable child.
- Object altQuick winAdd a descriptive text alternative to every `<object>` element so screen readers can convey its content to users who cannot see it.
- Page has heading oneModerate effortAdd a single, descriptive `<h1>` heading to every page so screen readers and search engines can identify the page's main topic.
- Presentation role conflictModerate effortRemove conflicting ARIA attributes and tabindex from elements that are marked as presentational (role="presentation" or role="none"), so screen readers consistently ignore them.
- RegionModerate effortWrap all visible page content inside HTML landmark elements (such as `<main>`, `<nav>`, `<header>`, `<footer>`, or ARIA `role` attributes) so screen-reader users can navigate your store efficiently.
- Role img altQuick winAdd an accessible text label (aria-label) to every element that has role="img" so screen readers can announce what the image conveys.
- Scrollable region focusableQuick winMake every scrollable region on your store reachable and operable by keyboard by adding tabindex="0" (or placing focusable content inside it) so users who cannot use a mouse can scroll it.
- Select nameModerate effortAdd a descriptive, programmatically associated label to every `<select>` dropdown element on the site so assistive technologies can announce its purpose to users.
- Skip linkQuick winAdd a valid, matching target ID to every skip-navigation link so keyboard and assistive-technology users can bypass repeated header content and jump directly to the main content area.
- Svg img altModerate effortAdd a meaningful text alternative to every SVG image so screen readers can describe it to visually impaired shoppers.
- TabindexModerate effortRemove all positive tabindex values (tabindex="1" or higher) from your store's HTML elements, replacing them with tabindex="0" or relying on natural document order to control keyboard focus.
- Valid langModerate effortAdd a valid BCP 47 language code to every `lang` attribute on your pages so assistive technologies can read content in the correct language.