Use of multiple <header> tags

[mkdir-washington-edu]

From the HighWire Press / McGraw-Hill Accessibility spreadsheet: https://hypothes-is.slack.com/archives/C8TPC8XMK/p1736535764817829

Highwire Press Reproduction

1. Navigate to the ""Annotation sidebar"" button and activate it.
2. Navigate to the ""Orphans"" tab.
3. Navigate to the mentioned heading text and inspect the code.
4. Observe there are multiple tags present.

HighWire Expected Result
Only one

tag should be used on the page.

HghWire Actual Result
The

tags is incorrectly defined multiple times on the page for ""DemoAccount"", ""coaltarfreeamerica"", ""DemoAccount"" and so on headings which resulted in a confusing experience for screen reader users. As a best practice page should only have only one tag.

Code Snippet:

<header>
(...)
<h3 class=""text-color-text font-bold"">DemoAccount</h3>(...)
</header>
(...)
<header>
(...)
<h3 class=""text-color-text font-bold"">coaltarfreeamerica</h3>
(...)
</header>

HighWire Rationale
Landmark roles are defined to help users navigate to different sections of a web page quickly. Different user agents provide users with means to navigate to web page landmarks. Landmark roles are defined based on their location on a web page. For example, a web page can have only 1 banner or main landmark.
When landmark roles are not defined correctly, it becomes very frustrating for assistive technology users, such as screen reader users to navigate to different sections of the page quickly. This also leads to a poor user experience for screen reader users and acts as frustration rather than assistance in navigation for them.

HighWire Recommendation
Remove the

element provided in the main content area.

Suggested Code:

<div>
(...)
<h3 class=""text-color-text font-bold"">DemoAccount</h3>
(...)
</div>
(...)
<div>
(...)
<h3 class=""text-color-text font-bold"">coaltarfreeamerica</h3>
(...)
</div>