Important information
This page is not available in English.
Styre fokus i ensideapplikasjoner (SPA)
De fleste løsninger i Skatteetaten som bruker komponentene i designsystemet vil dynamisk endre eller oppdatere innholdet på siden – en såkalt ensideapplikasjon. Denne artikkelen gir praktiske råd om hvordan du styrer fokus i slike applikasjoner for å sikre god brukeropplevelse og tilgjengelighet.
Hovedregler
- Alle sider skal ha en unik og beskrivende tittel.
- Husk å sette fokus på riktig sted når brukeren navigerer mellom sider.
- Håndter fokus når brukeren legger til, sletter eller redigerer innhold.
Hva er en ensideappliksjon?
En ensideapplikasjon (også kalt Single Page Application eller SPA) er en webapplikasjon som samhandler med brukeren ved å oppdatere siden dynamisk, i stedet for å laste helt nye sider fra en server. De fleste løsninger i Skatteetaten som bruker designsystemets komponenter, faller inn under denne kategorien. Riktig styring av fokus er viktig for brukervennlighet og tilgjengelighet, enten det gjelder navigasjon mellom sider eller situasjoner hvor brukeren legger til, redigerer eller sletter innhold. Korrekt styring av fokus bidrar til en god flyt for tastaturbrukere og sikrer at skjermleserbrukere får riktig og relevant informasjon når applikasjonen endrer seg.
Tittelen på siden
Designere bør sikre at hver side i ensideapplikasjonen har en unik og beskrivende tittel. Denne tittelen skal også brukes i <title>-elementet i HTML. Vi anbefaler maks 3 ledd i tittelen med denne formen: Sidetittel – Systemtittel – Skatteetaten.
Gjør slik:
Aksjeoppgaven 2023 – Min Aksjeoppgave – Skatteetaten
Når du har flere undernivåer, for eksempel flere undersider til Aksjeoppgaven 2023, kan <title> se slik ut: Gevinst og tap ved salg av aksjer – Min Aksjeoppgave – Skatteetaten.
Navigasjon mellom sider
Når en bruker navigerer mellom sider i en ensideapplikasjon, oppstår det ikke en full sideinnlasting. Det er derfor utviklerens ansvar å sørge for at fokus settes på riktig sted.
Gjør slik:
- Sett fokus på <main> med tabindex="-1" for å gjøre det fokuserbart.
- Oppdater <title> i <head> for å gjenspeile sidens innhold.
- Bruk skjult tekst med id og aria-live for å sikre at skjermlesere leser sidetittelen.
- Bruk aria-labelledby på <main> for å peke til denne teksten og navngi hovedinnholdet.
- Hvis toppinnhold i <main> gjentas på flere sider, sett fokus til første nye innhold, vanligvis en overskrift.
Fokus når du legger til, sletter eller redigerer innhold
Når innhold legges til, slettes eller redigeres for eksempel i tabeller, bør fokus settes der det gir mest mening for brukeren.
Gjør slik:
- Legge til innhold: Sett fokus til toppen av det nye innholdet, for eksempel første nye tekst.
- Slette innhold: Sett fokus til innholdet over det som ble slettet, for eksempel en rediger-knapp i en tabellrad eller en overskrift.
Hvis alle radene i en tabell slettes, så bør fokus settes til et logisk element over tabellen.- Redigere innhold: Sett fokus til første element i redigeringsområdet, for eksempel en overskrift eller første felt.
Merk: Redigerbar tabell fra designsystemet setter fokus til et visuelt skjult tekstelement.