Headings and tab order

Open it#

Turn Nitpique on, open the side panel, choose Page, then Accessibility. Five cards sit at the top, each with what it found: Contrast, Touch targets, Headings, Tab order and the Full audit. Choose one to open it below.

Headings#

Screen reader users move through a page by its headings, so the outline is its table of contents. Every h1 to h6, and every element with role="heading", is listed in page order and indented by level. Hidden ones are left out, as a screen reader leaves them.

• Skips a level: a heading more than one level below the one before it, such as an h4 straight after an h2. Going back up is fine.
• Empty: a heading with no text.
• No h1: nothing names the page. A second h1 is marked, in grey, since it is allowed.

Landmarks#

Landmarks are the regions a screen reader can jump between: banner, navigation, main, complementary, contentinfo, search, and a region or form that has a name. They come from the elements (header, nav, main, aside, footer) or from role. A header or footer inside an article or section is not a landmark, so it is not listed.

• No main landmark, or More than one main.
• Needs a distinct name: two or more landmarks of one kind, such as two nav, without an aria-label that tells them apart.

Tab order#

Every element the Tab key stops on, in the order it visits them: links, buttons, form fields, and anything with a tabindex of 0 or more. Disabled, hidden and tabindex="-1" elements are not stops. A positive tabindex moves an element ahead of everything else, so Tab no longer follows the page; those are marked in red and listed first, as the browser visits them.

Switch on Show on page to draw the order over the page: each stop outlined, a numbered badge at its corner and a line from one to the next, so a jump across the page stands out. It goes away when you leave the view.

Focus you can see#

WCAG 2.4.7 asks that keyboard focus is visible. Each stop in the tab order says what shows when it has focus:

• Browser ring: no rule of the page touches its outline, so the browser draws its own focus ring.
• Outline: the page draws an outline of its own on focus.
• Style change: something else changes, such as a shadow, background, border or a ::before or ::after. Hover the word to see what.
• No focus shown: the outline is taken away (often outline: none) and nothing takes its place. These are marked in red, and the report gives a :focus-visible rule to start from.

Nothing is focused for real, so no page script runs and nothing scrolls. Nitpique reads each stop's style, then reads it again with the page's own :focus and :focus-visible rules applied to it, with transitions held off so a fade cannot hide the change, and puts everything back. The first 200 stops are checked. Rules in stylesheets from another site cannot be read, so a focus style that only they set is not seen.

Focus appearance#

WCAG 2.4.13 (AAA) asks more of the indicator: the pixels that change on focus must change by a contrast of at least 3:1, over an area at least as large as a 2 pixel line around the element. Each stop with an outline or a style change shows the contrast of its change, green when it meets both parts and amber when it is too faint or too thin; hover it for what was measured. The card says how many fall short, and the report lists them.

• An outline against what is behind the element, or the outline it replaces
• A box shadow against what is behind it, its spread as the thickness
• A background against the background it replaces
• A border against the border it replaces, its width as the thickness

The best of them counts. The browser's own ring, and a change only to the text colour or underline, are not measured.

Use it#

Hover a row to outline its element on the page; click it to select it. Refresh reads the page again. The Report menu under it copies or downloads the issues and the whole outline or order as Markdown.