♿Accessibility Best Practices

Web accessibility ensures your site is usable by everyone, including people using screen readers, keyboard navigation, or other assistive technologies.[1] While accessibility overlaps with SEO in many areas, Hugo runs 8 dedicated accessibility checks worth 12% of your main page score.

Landmark Regions

HTML5 landmarks (<main>, <nav>, <header>, <footer>) help screen readers navigate your page structure.[2] Hugo checks for two critical landmarks:

• Main landmark — <main> or role="main" marks the primary content area. Missing this is a warning.[2]
• Navigation landmark — <nav> or role="navigation" identifies navigation sections. Missing is an info notice.

Form Labels

Every form input should have an associated label.[3] Hugo checks all <input>, <select>, and <textarea> elements (excluding hidden, submit, button, and image types) for proper labeling through <label> elements, aria-label, or aria-labelledby attributes.

Heading Order

Screen readers use heading levels to build a page outline.[4] Skipping levels (e.g., H1 → H3) breaks this outline and confuses assistive technology users. Hugo checks that heading levels follow a sequential order without gaps.

Skip Navigation

Skip navigation links allow keyboard users to jump directly to the main content without tabbing through every navigation item.[5] Hugo detects skip links by looking for internal anchors (href starting with #) in the first few elements of the page.

Tab Index

Positive tabindex values (tabindex="1", tabindex="5") break the natural DOM tab order and create confusion for keyboard users. Hugo flags these as warnings — use tabindex="0" to add elements to the natural tab order, or tabindex="-1" to remove them.[5]