Open
Description
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")