Ensure landmarks are unique - Status Messages

This accessibility report identifies a moderate-severity violation of WCAG 1.3.6 (Identify Purpose) where multiple informational message blocks utilize the same contentinfo landmark role without unique identifiers. When a page contains multiple landmarks of the same type, screen reader users cannot easily distinguish between them unless each is given a unique name via aria-label, aria-labelledby, or a title attribute. In this case, the .messages--info containers lack the necessary programmatic labeling to help users understand their specific purpose relative to other landmarks on the page. To resolve this, the Drupal message templates should be updated to provide unique labels for each message block—or more appropriately, the contentinfo role (reserved for the page footer) should be removed entirely in favor of ARIA live region roles like status or alert, which are better suited for system notifications.

Note: AI was used to create the scripts that created this scanner and the corresponding report.

In Messages section of Theming Tools. This is a pretty extreme example, but it isn't uncommon for a page to have multiple messages. How do we ensure that this can be done without introducing errors.

Pattern ID: DRU-338C31F8
Rule: axe-core - landmark-unique
Axe Rule URL: https://dequeuniversity.com/rules/axe/4.11/landmark-unique
Severity: Medium (axe impact: moderate)
WCAG SC: 1.3.6 - Identify Purpose (Level A)
Frequency: 2 of 452 pages (0%)
Selector: .messages--info
XPath: //[contains(@class,"messages--info")]
*Parent Context: N/A

Affected URLs (full list):

• https://drupal-core.ddev.site/message

Conditions:

• admin (dark desktop, dark mobile, light desktop, light mobile), claro (dark desktop, dark mobile, light desktop, light mobile)

HTML Snippet

<div class="messages__wrapper">
                      
      <div role="contentinfo" aria-labelledby="message-status-title" class="messages-list__item messages messages--status">
                  <div class="messages__header">
                          <h2 id="message-status-title" class="messages__title">
                Status message
              </h2>
                      </div>
                <div class="messages__content">
                      A status message
                  </div>
        <button type="button" class="button button--dismiss js-message-button-hide" title="Hide" data-once="gin-messages-dismiss">
          <span class="icon-close"></span>
          Hide
        </button>
      </div>
                                  
...
                                  
      <div role="contentinfo" aria-labelledby="message-warning-title" class="messages-list__item messages messages--warning">
                  <div class="messages__header">
                          <h2 id="message-warning-title" class="messages__title">
                Warning message
              </h2>
                      </div>
                <div class="messages__content">
                      A warning message
                  </div>
        <button type="button" class="button button--dismiss js-message-button-hide" title="Hide" data-once="gin-messages-dismiss">
          <span class="icon-close"></span>
          Hide
        </button>
      </div>

Description

Fix any of the following:
The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable

Steps to Reproduce

1. Go to https://drupal-core.ddev.site/message
2. Install the theming_tools and form_style modules
3. Use the matching context from Conditions: admin (dark desktop, dark mobile, light desktop, light mobile), claro (dark desktop, dark mobile, light desktop, light mobile)
4. Open browser DevTools and run axe.run() in the Console.
5. Confirm rule landmark-unique on selector .messages--info.

Expected Behaviour

Element and interaction meet the mapped WCAG success criterion.

Actual Behaviour

Fix any of the following:
The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable

Impact

users with disabilities

Suggested Fix

See axe documentation.

Additional References

• Deque Axe Rule: https://dequeuniversity.com/rules/axe/4.11/landmark-unique
• WCAG Understanding: https://www.w3.org/WAI/WCAG22/Understanding/136.html
• ACCESSIBILITY.md Trusted Sources: https://mgifford.github.io/ACCESSIBILITY.md/examples/TRUSTED_SOURCES.yaml
• WAI - Page structure and landmarks: https://www.w3.org/WAI/tutorials/page-structure/landmarks/
• Search related Drupal accessibility issues (rule + selector/template): https://www.drupal.org/project/issues/search?text=landmark-unique%20messages--info&projects=Drupal+core&assigned=&submitted=&project_issue_followers=&status%5B%5D=Open&issue_tags_op=%3D&issue_tags=Accessibility
• Purple AI mapped fix examples: https://github.com/GovTechSG/purple-ai/blob/main/results/landmark-unique.json

Testing Environment

• Browser: Chromium (via Playwright)
• OS: macOS
• Tool: axe-core via @axe-core/playwright
• Base URL: https://drupal-core.ddev.site

Tracking IDs

• Pattern ID: DRU-338C31F8
• Instance IDs: INS-72820C3E, INS-C1AF88AE