A practical field guide for shop owners

Check the path from product to checkout.

Use your storefront and familiar WordPress controls to review headings, keyboard access, focus, product choices, and forms. You do not need a screen reader, browser tools, plugins, or code inspection for these checks.

This checklist is guidance, not a compliance guarantee. Completing it does not prove that your shop meets accessibility laws or standards.

Page structure

Check that titles and sections tell a clear story.

Review one published product page and one product category page at normal zoom. The product or category name should be the main page title. Section titles such as “Description,” “Details,” or “Reviews” should describe the content below them; smaller topics should sit under the section they explain.

  1. On the storefront, note the product or category title, then read the other prominent headings from top to bottom. Check that each heading describes the section that follows and that related subsections stay together.
  2. In WordPress, open the matching product from Products → All Products. In the editor, select each heading block and check its heading level in the block toolbar. The main product or category title should be an H1, main content sections should be H2, and subsections within them should be H3. Use the next level only for content nested another step down. Keep sibling sections at the same level; do not choose a level just to change text size or skip levels.
  3. For a category title or heading supplied by your theme, review its template in Appearance → Editor → Templates if your theme offers that screen. If the theme does not expose the heading level, write down the page and ask the theme provider to confirm its title and section levels rather than guessing from font size.
  4. If the order or nesting is confusing, rename vague headings, move a subsection under the section it belongs to, or adjust its level in the editor. Preview the storefront and check the product and category pages again.
W3C WAI: use headings to show page structure

Keyboard navigation

Take one shopping trip without touching the mouse.

Reload the storefront and leave the mouse aside. Use Tab to move forward, Shift + Tab to move back, Enter to follow a link or activate a control, and Space for buttons or checkboxes where it is expected. Use arrow keys for choices such as radio buttons when the control calls for them.

  1. Start at the store header. Move through navigation and search, open a category, and open a product. Every link and control should be reachable and usable in a sensible order.
  2. On the product page, use the keyboard to choose size, color, or other options, change quantity, and activate Add to cart. If a cart drawer opens, move through its links and buttons. Close it with its visible close control or Escape when supported.
  3. Continue to the cart. Change a quantity or remove the item, then move to checkout. Go through the customer fields and available choices without using the mouse. Do not enter payment details or place a live order.
  4. Use Shift + Tab to move back through the path. You should be able to leave menus and drawers, return to the control that opened a drawer when it closes, and continue to another part of the page.

Pass: the full path and its actions work from the keyboard in a sensible order, and you can move back or leave each menu or drawer. Fail: a control is skipped, does nothing, traps you, or leaves you unsure where you are. Note the page, control, and key that failed. Ask the theme or extension provider responsible for that part of the shop to help, then repeat the path.

WooCommerce: keyboard checks for store owners

Visible focus

Keep the keyboard’s current position easy to see.

While following the keyboard path, pause on each link, button, product choice, quantity control, and form field. Watch the storefront as focus moves; no special tool is needed.

  • Pass: the focused item has a clear outline, border, highlight, or other visible change that stands out from its normal state. It remains easy to find over the page background and product imagery.
  • Fail: focus disappears, is covered, or is so faint that you cannot tell which item will respond to the next key. A change in text color alone may be too subtle to find.
  • If an indicator is missing or hard to see, note the page and control. Check your theme’s available focus or accessibility settings and choose a stronger visible outline if offered. If the theme or extension controls it, ask its provider to improve the focus style; then repeat the keyboard path on product, cart, and checkout pages.
W3C WAI: why keyboard focus needs a visible indicator

Product choices and forms

Make every choice and field clear before a shopper acts.

Review the choices on a product page, then the cart and checkout forms. You can follow these checks in the storefront and use a staging shop for safe error checks.

  1. Look for a persistent visible label beside or above every customer field, such as name, email, and address. A placeholder that disappears while typing is not enough. Any required format or instruction should appear before the shopper submits the field.
  2. Check product options such as size, color, and quantity. Their group and each option should have clear names, and the selected option should look different from unselected ones. If an option is required, the page should make that clear before the shopper tries to add the item.
  3. On a staging shop, leave a required choice or field empty, or use an obviously invalid format such as not-an-email. Continue only far enough to see the validation message; do not enter payment details or complete a live order. The message should explain what needs attention and how to fix it, and make the related field easy to find.
  4. Pass: labels and instructions remain visible, each choice is understandable, and an error names the field and next step in plain language. Fail: a label is missing, a placeholder is the only prompt, or an error is vague, hidden, or detached from the field. Update the field label or instructions in the product/editor or checkout settings; for extension-owned fields, ask the extension provider. Recheck the same step afterward.