Skip to main content

Header Issues

Most header issues can be fixed automatically. In the Accessibility report panel, click the Fix with Edlio AI button next to flagged issues. See Fix Automatically with Edlio AI for details.

To add Edlio AI to your account, click Fix automatically with Edlio AI on your Accessibility Report and then Contact us to start using Edlio AI today!, or simply email [email protected].

Content should be well-organized and formatted using appropriate headers to improve readability and accessibility. This structure not only organizes the information effectively but also aids individuals using screen reading by providing a clear flow of information.

Below you'll find common errors related to heading and guidance on how to correct them.

Header skips levels

When using headers, it's important to maintain a logical structure to provide a clear outline of the page. Screen reader users often navigate through a webpage via headers, and skipping levels can suggest that content is being hidden from them. Headers should not be used purely for styling purposes; instead, utilize font size or bolding for visual enhancements.

Here are some best practices for headers:

  • Use clear, descriptive titles.

  • Include one H1 header per page to define the main topic.

  • Use H2 headers for major sections of the page.

  • Employ H3 headers for subsections within the H2 sections.

  • H4 headers should be used for further breakdowns within H3 subsections.

The page title is too short

If your page title is only one word long, it may not provide enough information. Consider using a more descriptive title to clearly convey the content of your page. For instance, instead of a generic title like "Schedule," you could specify "Class Schedule" or "Bell Schedule" to clarify the nature of the schedule featured on the page.

Multiple H1 headers

The title of your news story or page is already a Header 1 (H1). Adding H1 will create multiple H1 headers which is confusing for screen readers.

Empty headers

Screen readers use headers to navigate through content. Empty headers disrupt the navigation, making it harder for users to understand the page structure and find the information they need.

Related

Did this answer your question?