Region
Minor - WCAG LEVEL AAA
The issue at hand is the absence of landmark elements in your HTML structure. Landmark elements, such as <header>, <nav>, <main>, <aside>, and <footer>, provide semantic meaning to sections of your webpage. They help assistive technologies, like screen readers, to quickly understand and navigate the structure of your content. Without these landmarks, users who rely on screen readers may find it difficult to navigate your site efficiently, as they cannot easily skip to different sections of the page.
To fix this issue:
You should ensure that all significant sections of your webpage are wrapped in appropriate landmark elements.
For example, use
<header>for the top of the page or section headers,<nav>for navigation menus,<main>for the main content of the page,<aside>for sidebars or complementary content, and<footer>for the footer of the page.
Best practices:
Using only one
<main>element per page to clearly define the primary content area and ensuring that each landmark is used appropriately and not overused, which can dilute their effectiveness.Avoid nesting landmarks unnecessarily, as this can confuse the hierarchy and make navigation more complex for assistive technologies.
Common mistakes:
Using generic
<div>or<span>elements for significant sections of content, which do not convey any semantic meaning.Misusing landmark roles, such as using
<nav>for non-navigational content, which can mislead users who rely on these roles for navigation.