Headers: Styling and WCAG

Altinn / altinn-studio

Next generation open source Altinn platform and applications.

https://docs.altinn.studio

BSD 3-Clause "New" or "Revised" License

115 stars 70 forks source link

Headers: Styling and WCAG #8396

Open Febakke opened 3 years ago

Febakke commented 3 years ago

Description

As an app-developer I want my application to be WCAG compatible and the visual representation that you expect with the Header tag. This issue was raised because the default value is h4. Headers can not jump over a header level in descending order. Tilsynet

We have changed the default header value to <h2> so that you have to make a choice to break the WCAG requirements, but it is still one of the easiest ways to break WCAG as an app developer. We should give them some kind of warning or information in that context to minimize the risk of creating an app that break WCAG requirements.

Specification tasks

[x] Write and update guidelines for the header component
[x] Decide what the default value should be
[ ] Check if headers have the same styling in production and in Figma
[ ] Design error/warning message when app-developer break the WCAG requirements

ivarne commented 3 years ago

Consider having <h2 as the default header (or make header size required with an error message if it is missing).

ivarne commented 3 years ago

@lorang92 Please reopen, more work is required on this one.

lorang92 commented 3 years ago

@ivarne closed by accident. Reopened.

ivarne commented 3 years ago

yea, I know. Github can be rather agressive when you partially fix an issue.

Febakke commented 2 years ago

@mrosvik Kjøre en siste test på om det er riktige tekstressurser i Figma og i appene. Om det er det kan vi lukke denne.

ivarne commented 2 years ago

Må ikke denne fikses med å gi (feil)melding til apputviklere hvis de lager et skjema som ikke følger wcag krav om at overskriftsnivå h1-h5 skal være et sammenhengende tre som egner seg som innholdsfortegnelse over siden? Hva har det med Figma å gjøre?

Febakke commented 2 years ago

Jeg så et åpent punkt som gikk på å se på om det er en forskjell på header størrelser vi bruker i vår offentlige Figma fil som de som er i produksjon.

@ivarne Absolutt noe vi burde ha på plass i Studio, dette issuet er jo ganske vagt hvis det er det som skal produseres her. Det er for så vidt ikke noe som skal gjøre på front-end heller. Jeg flytter det dermed tilbake til Studio repoet og legger til litt mer utfyllende informasjon.