Recommended practice Priority: Minor
Two page areas sound the same to screen readers
The page has several areas of the same type, such as two menus or two sidebars, with no label that tells them apart. This is a recommended practice that goes beyond the WCAG 2.2 AA level the law relies on.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users jump between page areas (header, menu, main content, footer) like chapters. If the list shows "navigation" twice, they do not know which is the main shop menu and which is the account or footer menu, so they open the wrong one and go back.
Who is affected
- blind people using screen readers
- people with cognitive disabilities using reading tools
- people using browser extensions that list page areas
How to fix it
Give each repeated landmark a unique accessible name with aria-label or aria-labelledby, for example <nav aria-label="Main menu"> and <nav aria-label="Footer">. Do the same for repeated <aside>, <section> or <form> elements that act as landmarks. If an element is not really a separate area, remove its landmark role instead.
On Shopify
Usually the header menu, mobile drawer menu and footer menu are all <nav> without labels. Add aria-label to each <nav> in the header and footer section files of the theme.
On Shoptet (CZ)
Usually comes from the template's menus. Report it to Shoptet or a partner; if the duplicate area is in custom HTML you added, label it there yourself.
On PrestaShop
Usually the menu module, the footer link blocks and the account links each output an unlabelled <nav> or <section>. Add aria-label in the module template overrides in the theme.
On WooCommerce
Usually the theme's menus or widget areas (several sidebars, several nav menus). Add aria-label in the child theme's templates, or in the block editor's navigation block settings if your theme uses blocks.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule landmark-unique.
dequeuniversity.com, github.com, www.w3.org