Altinn / Altinn/app-frontend-react

tabindex="-1" set on main content makes screen readers read the entire page

Open
#3,622 0 comments 0 reactions 0 assignees View on GitHub
kind/bug org/ssb status/triage
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description of the bug

When main content is given tabindex="-1", screen readers treat the entire region as a focus target in browse mode. This causes all content in that area to be read on every page/step (e.g., when moving through a multi-step form).

### Steps To Reproduce

Steps To Reproduce
Open the form (example: “Godstransport med norske lastebiler (RA-0485)”).
Navigate to page 2 or later.
Turn on a screen reader (e.g., VoiceOver on macOS, Safari/Chrome).
Notice that the entire main content is read, not just the heading.
Inspect the DOM: the main (or main container) has tabindex="-1".
Repro rate: High (consistent whenever tabindex="-1" is applied to the main container).

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by opening the “Godstransport med norske lastebiler (RA-0485)” form, navigating to page 2 or later, and inspecting the main or main container for tabindex="-1". Test with VoiceOver in Safari or Chrome and trace where that attribute is applied. Done means the screen reader reads the relevant heading rather than the entire main content on each page or step.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.