Skip to content
Pandus

Recommended practice Priority: Minor

Some content sits outside the page's main areas

Parts of the page are not inside landmarks such as header, navigation, main content or footer. This is a recommended practice beyond the WCAG 2.2 AA level.

This text was translated automatically and has not been reviewed by a native speaker yet.

Why it matters to your customers

Screen reader users often jump between page areas (header, menu, main content, footer) to find things quickly. Content outside these areas, such as a promo bar, cookie notice or newsletter block, can be missed or found only by reading the whole page line by line.

Who is affected

  • screen reader users
  • blind and partially sighted shoppers

How to fix it

Put all visible content inside landmark elements: <header>, <nav>, <main>, <aside> and <footer> (or their ARIA roles). Move stray blocks such as announcement bars, banners and newsletter forms into the right landmark, and make sure each page has exactly one <main>. Pop-ups and cookie banners can be marked up as a dialog or a labelled region.

On Shopify

The theme's layout/theme.liquid usually already has a header, <main> and footer; sections or app blocks injected outside them cause this. Move them into the right group or wrap them in a landmark in the Liquid code.

On Shoptet (CZ)

Decided by the template; HTML you add through Shoptet's custom code options can also land outside landmarks. Wrap your own code in a landmark element and ask Shoptet or a partner about the template.

On PrestaShop

Check the theme's layout .tpl files for blocks rendered outside header, main and footer, especially module hooks such as banners. Wrap them in a suitable landmark in the theme templates.

On WooCommerce

Often caused by page-builder sections or plugin output placed outside the theme's <main>. Adjust the child theme's header and footer templates, or use the builder's HTML tag setting for sections if it has one.

Standards

Not a WCAG success criterion: a recommended practice that makes the site easier to use.

Automated check: axe-core rule region. dequeuniversity.com, github.com, www.w3.org

All rules we check