Sr Only

Innhold som skal leses opp, men ikke vises. Klassen krymper elementet bort visuelt og lar det bli stående i dokumentet, så skjermlesere fortsatt finner det.

Slik tar du den i bruk

En rad med «Slett»-knapper gir mening for den som ser tabellen. Den som hører den, får fire like knapper. Tillegget i .fs-sr-only sier hvilken rad knappen hører til, uten å gjenta det for øyet.

Eksempel

Ren HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/sr-only/sr-only.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/button/button.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<button class="fs-button" data-variant="danger">
Slett<span class="fs-sr-only"> søknaden fra 4. mars</span>
</button>

TypeScript

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/sr-only.css"
import "@fristil/designsystem/button.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<button {...fs.button({ variant: "ghost" })} type="button">
  Slett
  <span {...fs.srOnly()}>søknad 2024/1187</span>
</button>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Har du elementet som en variabel, setter du dem på det med setAttributes. Det er veien uten JSX, enten du nettopp lagde elementet eller fant det i en side serveren sendte:

import { fs } from "@fristil/designsystem"

const tillegg = document.createElement("span")
tillegg.textContent = " søknaden fra 4. mars"

fs.setAttributes(tillegg, fs.srOnly())

Knappen leses opp som «Slett søknaden fra 4. mars», mens den står som «Slett» på skjermen.

Skjult ledetekst

Er ledeteksten åpenbar av oppsettet, kan den skjules visuelt. Den skal ikke fjernes.

Eksempel

Ren HTML

<label class="fs-label fs-sr-only" for="sok">Søk i saker</label>
<input class="fs-input" id="sok" type="search" placeholder="Søk i saker" />

placeholder er ingen erstatning for en ledetekst: den forsvinner idet brukeren skriver, og flere skjermlesere leser den ikke opp i det hele tatt.

Klasser du kan style

Klasse	Hva det er
.fs-sr-only	Elementet som skal høres, men ikke ses

Klassen har ingen variabler. Den har én oppgave, og verdiene i den er de som faktisk virker på tvers av nettlesere.

Tilgjengelighet

• Bruk den bare på tekst som gir mening lest alene. En forklaring som bare henger sammen med noe du ser, blir forvirrende når den leses opp i en lenkeliste.
• Skal innholdet bort for alle, bruk hidden. display: none og visibility: hidden fjerner elementet også for skjermlesere, og det er nettopp det denne klassen unngår.
• Et element med klassen kan fortsatt få fokus. Legger du en lenke der, hopper fokus til noe brukeren ikke ser. Skal den vises når den får fokus, må du sette stilene tilbake i :focus.