Semantic HTML issues in header section #2967
Description
Increasing Access
Using proper semantic HTML allows screen readers to understand our content.
Feature enhancement details
I found two issues relating to the header section while running an accessibility check:
- We have a
<header>element inside another<header>element, and multiple<header>elements on mobile. We need to get this down to one. We can change incorrect ones to either a React Fragment or a<div>or potentially remove them from the tree entirely. - We have a
<span>as a direct child of a<ul>in the "login or signup" part of the nav bar. Probably we change the<span>or</span>to<li>or</li>. It would also be acceptable to have the entire "login or signup" as one list item, but making the "or" into its own list item is probably easier to implement.
We want to fix these HTML structures without changing the style.