Understanding HTML landmarks and how to apply them

1. Landmark: <header>

   • Accessibility Role: banner
   • Description: Marks the most important part of the website and is usually the first landmark encountered by users. It is used to group content elements from the website header.
   • Example: Use the <header> element to group content elements such as the website title, logo, and navigation menu. It can be used as a selector to apply CSS styles without the need for classes or elements.

2. Landmark: <nav>

   • Accessibility Role: navigation
   • Description: Contains blocks of links that allow users to navigate through different parts of the website. It is commonly used for the website header navigation menu, table of contents, or breadcrumbs.
   • Example: Use the <nav> element to wrap the list of links used for website navigation. Provide an accessible name to give context to screen reader users.

3. Landmark: <form>

   • Accessibility Role: search
   • Description: Stores a group of form elements used for searching or filtering content on a website. Its implicit ARIA role is search.
   • Example: Wrap form elements inside a <form> element to create a search or filter functionality. Add the role="search" attribute to improve compatibility with older browsers.

4. Landmark: <aside>

   • Accessibility Role: complementary
   • Description: Adds a section with related but non-primary content. It complements the surrounding content and provides additional information.
   • Example: Use the <aside> element to include information that is related to the main content but is not the main focus. Ensure proper distinction and context if multiple <aside> elements are used.

5. Alternative Option 1: Place the information inside the <main> element.

   • Description: If the content would normally be included in the <aside> element but needs to be within the <main> region, it can be placed directly inside the <main> element.

6. Alternative Option 2: Use an accessible div as a landmark.

   • Accessibility Role: region
   • Description: Wrap the content that would normally be included in the <aside> element inside a <div> element with the role="region" attribute to provide an accessible landmark.

Please note that the provided information assumes the usage of HTML5 and ARIA roles. It's important to test the accessibility of your website using screen readers and other assistive technologies to ensure proper interpretation and usability.