Skip to content
StoreA11y

WooCommerce · 1.3.1 Info and Relationships (Level A)

List items outside a list on WooCommerce

Some <li> elements are not inside a <ul> or <ol>. An orphaned list item loses its position information entirely — the screen reader cannot say "item 3 of 8" because there is no list to count.

Which WCAG criterion this fails

  • Does not meet 1.3.1 Info and Relationships (Level A)

How to fix it on WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. Take a copy of the theme before editing.

  1. Wrap the orphaned <li> elements in a <ul> (unordered) or <ol> (ordered, where sequence matters such as checkout steps).
  2. Check the Liquid loop that generates them — often the opening <ul> sits inside the {% for %} block, so it is emitted once per item or not at all.
  3. If the elements are not really a list, change them from <li> to <div> instead of wrapping them.

Where this usually lives

Custom loop templates and widget output in your child theme

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<!-- Wrong: <ul> inside the loop -->
{% for link in linklists.footer.links %}
  <ul><li><a href="{{ link.url }}">{{ link.title }}</a></li></ul>
{% endfor %}

<!-- Right: <ul> outside the loop -->
<ul>
  {% for link in linklists.footer.links %}
    <li><a href="{{ link.url }}">{{ link.title }}</a></li>
  {% endfor %}
</ul>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: listitem (axe-core).