To ensure proper navigation and accessibility, it is best practice to use both HTML5 and ARIA landmarks to structure page content. All content should be contained within appropriate landmark elements to provide clear navigation regions. In HTML5, elements such as <header>, <nav>, <main>, and <footer> should be used. Their ARIA counterparts are role="banner", role="navigation", role="main", and role="contentinfo", respectively.

Reference Links

• https://dequeuniversity.com/rules/axe/4.10/landmark-one-main?application=AxeChrome
• https://dequeuniversity.com/rules/axe/4.10/region?application=AxeChrome

Impact: Moderate

Benefits:

• Enhances screen reader navigation, allowing users with visual impairments to move efficiently between sections.
• Improves keyboard accessibility, enabling users to jump between content regions without excessive tabbing.
• Boosts SEO and content discoverability, as search engines better understand the page structure.
• Ensures compliance with WCAG and accessibility laws, reducing legal risks and improving inclusivity.

Page Affected:

Getting Started

1. https://expressjs.com/en/starter/installing.html
2. https://expressjs.com/en/starter/hello-world.html
3. https://expressjs.com/en/starter/generator.html
4. https://expressjs.com/en/starter/basic-routing.html
5. https://expressjs.com/en/starter/static-files.html
6. https://expressjs.com/en/starter/examples.html
7. https://expressjs.com/en/starter/faq.html

Guide

1. https://expressjs.com/en/guide/routing.html
2. https://expressjs.com/en/guide/writing-middleware.html
3. https://expressjs.com/en/guide/using-middleware.html
4. https://expressjs.com/en/guide/overriding-express-api.html
5. https://expressjs.com/en/guide/using-template-engines.html
6. https://expressjs.com/en/guide/error-handling.html
7. https://expressjs.com/en/guide/debugging.html
8. https://expressjs.com/en/guide/behind-proxies.html
9. https://expressjs.com/en/guide/migrating-4.html
10. https://expressjs.com/en/guide/migrating-5.html
11. https://expressjs.com/en/guide/database-integration.html

API Reference
Advanced Topics
Resources
Support
Blog

Suggested Fix

• Include body content inside main html-5 element except header and footer

• 
• 

An Ideal page

<header role="banner">
   <p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
   <ul>
      <li>Put navigation here</li>
   </ul>
</nav>
<main role="main">
   <p>Put main content here.</p>
</main>
<footer role="contentinfo">
   <p>Put copyright, etc. here.</p>
</footer>

Testing Tool

Axe DevTools

Apply Fix Menu Wise

We can divide PR by Menu sequentially and create branch name with a standard format to keep consistency across branch name.

Suggested Branch Name Format

Format: defect-a11y-{ISSUE_NO}-{MENU}
Example: defect-a11y-1807-getting-started