ScottLogic
Sort out headings and nav
Feature Request
Description
Reflect the structure of the app with headers and navigation. Here's my suggestion for how our structure could be reflected with semantic markup:
<nav> our navigation (either just the level buttons, or all buttons in the header) </nav><h1> First Level </h1>(replace "Level 1" with "First/Second/Third Level" and add the banner to the Sandbox, too)<h2> ScottBrew System Access </h2>(only present in level 3 and Sandbox)<h2 className="visually-hidden"> Chatbot Window </h2>(I suggest keeping this visually hidden for less visual noise)<h2> Email Outbox </h2>
Screenshot of suggested wireframe with annotation
Additional context
- adding a
<nav>to our navigation allows users to jump quickly to the navigation - having the h1 at the beginning of our main content (as opposed to in the header), allows users to skip the navigation if desired
- h2 headings at the main sections of our app, allows users to jump to that section. Visually hidden headings can be used for this, but should be only used where necessary.
- using NVDA or Narrator, you can jump to the next heading by pressing H, and to the previous heading with shift + H
- using NVDA or Narrator, you can jump to the next landmark by pressing D, and to the previous heading with shift + D
Acceptance criteria
GIVEN a user navigates using headings on a screenreader WHEN they move through the headings THEN they hear:
- "First Level, heading level one"
- "Scottbrew System Access, heading level two"
- "Chatbot Window, heading level two"
- "Email Outbox, heading level two"
GIVEN a visual user is using the app WHEN they look at the app THEN they see the headers: First Level, Scottbrew System Access, Email Outbox, but not the Chatbot Window heading
GIVEN a screen reader user wants to navigate by landmarks WHEN move through the landmarks THEN they see hear: "navigation landmark" as the second landmark on the page (just after "banner landmark")
1 & 2 I think the overlay titles could still be an h1, since the overlay is like being on a new page. I have a hunch @chriswilty might have more insight into this?
Guess we all need to be in agreement about which content needs to be headered, and which level each header should be at before any implemention...
