Altinn / Altinn/app-frontend-react

Semantic structure on our text components

Open
#1,428 4 comments 0 reactions 0 assignees View on GitHub
area/accessibility kind/user-story squad/utforming status/draft status/for-consideration
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description

In our solution we use `` and `

` to structure our texts. UUtilsynet suggest using correct semantic tags `

.` This is helpful for screen readers, because they can navigate to different tags.

[Article from UUTilsynet](https://www.uutilsynet.no/veiledning/tekst-og-struktur/226)

- [ ] What is the correct semantics tags we should use.
- [ ] Technical input on why it is set up the way it is and what out options are
- [ ] Give the user the option for setting up spacing between paragraphs without using empty tags or `
`
- [ ] Do not solve this using multiple `

`tags [Source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p#accessibility_concerns)

### Additional Information
When testing with VoiceOver (Chrome). Will announce `
` as empty group. Another reason to maybe look into how to avvoid this

_No response_

### Tasks

_No response_

### Acceptance Criterias

_No response_

Contributor guide

Open the contributing guide

Research direction

No files, tests, or entry points are named. Start by locating the text components that render span, div, and br elements, then read the linked UUtilsynet and MDN guidance. Done should include an agreed semantic structure, an accessible spacing approach that avoids empty tags and repeated p elements, and documented technical rationale.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.