Free tool
HTML accessibility checker
Paste HTML from a product description, blog post, theme section or email template. The checker finds missing alt text, unlabeled form fields, unnamed buttons and links and other problems in the code, and says how to fix each one.
Results
Your HTML stays in your browser
The checker reads your HTML with your browser's own HTML parser, inside this page. Nothing is uploaded or saved, and scripts or images in the HTML don't run or load.
Who it's for
- Store owners: product and collection descriptions are HTML. In Shopify, select Show HTML in the description editor to copy it.
- Writers and editors: blog posts and pages from any content management system.
- Developers: a theme section, a component or a template before it ships.
- Email marketers: the HTML of a newsletter or email template.
What the checker looks for
Every check below runs on the HTML you paste. You can also use this list to review HTML by hand. Errors fail a WCAG success criterion as written; warnings need a person to look at them in context.
- Error: Every image has an alt attribute: a short description, or alt="" if it's only decoration. (Fails WCAG 1.1.1 Non-text Content (Level A))
- Warning: Alt text describes the image, not its file name, and doesn't start with "image of". (Check against WCAG 1.1.1 Non-text Content (Level A))
- Error: Every <svg role="img"> has a <title> or an aria-label. (Fails WCAG 1.1.1 Non-text Content (Level A))
- Error: Every <input type="image"> has alt text that says what the button does. (Fails WCAG 1.1.1 Non-text Content (Level A) and WCAG 4.1.2 Name, Role, Value (Level A))
- Error: Every link has text, or an image with alt text, that says where it goes. (Fails WCAG 2.4.4 Link Purpose (In Context) (Level A) and WCAG 4.1.2 Name, Role, Value (Level A))
- Warning: Link text makes sense on its own: no "click here" or "read more" without context. (Check against WCAG 2.4.4 Link Purpose (In Context) (Level A))
- Warning: Links that open a new tab or window say so. (Advice, from WCAG 3.2.5 Change on Request (Level AAA))
- Error: Every button has text or a label that says what it does, including icon-only buttons. (Fails WCAG 4.1.2 Name, Role, Value (Level A))
- Error: Every form field has a label: a <label> element, or aria-label when a visible label won't fit. (Fails WCAG 1.3.1 Info and Relationships (Level A) and WCAG 4.1.2 Name, Role, Value (Level A))
- Warning: No form field relies on placeholder text as its only label. (Check against WCAG 3.3.2 Labels or Instructions (Level A))
- Warning: Every heading has text. (Best practice, related to WCAG 2.4.6 Headings and Labels (Level AA))
- Warning: Headings go down one level at a time: h2, then h3, without skipping to h4. (Best practice, related to WCAG 1.3.1 Info and Relationships (Level A))
- Warning: Data tables, such as size charts, use <th> header cells for their rows or columns. (Check against WCAG 1.3.1 Info and Relationships (Level A))
- Error: Every <iframe> (videos, maps, widgets) has a title that describes it. (Fails WCAG 4.1.2 Name, Role, Value (Level A))
- Warning: Videos with speech or meaningful sound have captions. (Check against WCAG 1.2.2 Captions (Prerecorded) (Level A))
- Warning: Media doesn't play sound by itself, and moving video can be paused. (Check against WCAG 1.4.2 Audio Control (Level A) and WCAG 2.2.2 Pause, Stop, Hide (Level A))
- Error: Nothing uses <marquee> or <blink>. (Fails WCAG 2.2.2 Pause, Stop, Hide (Level A))
- Error: The viewport meta tag doesn't stop people from zooming in. (Fails WCAG 1.4.4 Resize Text (Level AA))
- Error: A whole page sets its language, such as <html lang="en">. (Fails WCAG 3.1.1 Language of Page (Level A))
- Warning: No element has a tabindex above 0. (Check against WCAG 2.4.3 Focus Order (Level A))
- Error: Nothing inside aria-hidden="true" can be reached with the Tab key. (Fails WCAG 4.1.2 Name, Role, Value (Level A))
- Warning: aria-labelledby and aria-describedby point at ids that exist. (Check against WCAG 1.3.1 Info and Relationships (Level A) and WCAG 4.1.2 Name, Role, Value (Level A))
- Warning: Every id is used once. (Best practice, related to WCAG 4.1.2 Name, Role, Value (Level A))
What it can't check
The checker sees only the code, so it can't test anything that depends on how the page looks or behaves:
- Color contrast. Check text and background colors with the color contrast checker.
- Keyboard access, focus order and visible focus. Test them yourself with the Tab key: our keyboard accessibility guide shows how.
- Layout, zoom and reflow, and anything CSS hides, moves or adds.
- Menus, pop-ups, sliders and other content that JavaScript builds or changes.
- Whether alt text and link text are accurate and useful. Our guide to writing alt text explains what good alt text says.
To check a page as it renders in a browser, use the website accessibility checker, which runs Google Lighthouse's accessibility checks on any public web address.
Running a Shopify store? Our Shopify accessibility checklist covers the theme settings, colors, pop-ups and apps to check beyond the HTML.
Frequently asked questions
Is my HTML uploaded anywhere?
No. Your browser reads the HTML inside this page and the results are built there too. Nothing is sent to us or anyone else, and scripts and images in the HTML don't run or load.
Does a clean result mean my content is accessible?
No. The checker finds problems that show in the code, such as an image with no alt attribute. It can't judge whether alt text is accurate, whether colors have enough contrast, or how the page works with a keyboard. Use it as a first pass, then test the page itself.
What's the difference between an error and a warning?
An error means the code fails a WCAG success criterion as written, such as a button with no name. A warning means something may be a problem, or a best practice isn't followed. Check each warning in context.
How do I get the HTML of a Shopify product description?
In your Shopify admin, open the product, then select the Show HTML button in the description editor's toolbar. Copy everything in the box and paste it here.
Can I check a whole web page?
Yes. Paste the page's source (View Page Source in your browser) and the checker also tests page-level rules such as the page language. Content that JavaScript adds after the page loads won't be in the source, so use the website accessibility checker for the page as it renders.