Time picker

Relaterte komponenter

Varianter

Time picker finnes i tre varianter. Alle støtter de samme etikett-, hjelpetekst- og feilmeldingsfunksjonene.

Retningslinjer for bruk

Bruk time picker når

• brukeren skal oppgi et klokkeslett som en del av et skjema
• klokkeslettet har betydning for videre steg i prosessen
• du vil tilby både fritekstinput og visuell velger
• brukeren trenger å velge innenfor et begrenset tidsrom (med min/maks)

Unngå time picker når

• brukeren kun trenger å velge mellom noen få faste tidspunkter – da kan select eller radiobutton egne seg bedre
• klokkeslettet ikke er av betydning for oppgaven

Bruk label og hjelpetekst for å forklare forventningen

Label og hjelpetekst bør beskrive hva brukeren skal gjøre og hvilke begrensninger som gjelder, for eksempel tidsrom eller steglengde.

Gjør slik

Bruk en forklarende label og hjelpetekst som hjelper brukeren å fylle inn riktig tidspunkt

Unngå

Unngå uklare etiketter som «Tid» uten å forklare hva som forventes eller hvilke regler som gjelder

Universell utforming

Label skal alltid være synlig

Alle skjemaelementer må ha en synlig label. Den skal beskrive hva brukeren skal gjøre, for eksempel «Velg møtetidspunkt».

Dersom etiketten skjules visuelt, skal den likevel være tilgjengelig for skjermlesere.

Klokkeslett må kunne velges med tastatur

Time picker skal fungere uten mus. Brukeren skal kunne:

• Flytte mellom timer- og minutter-feltet med piltaster og Tab
• Endre verdi med piltastene opp/ned i hvert felt
• Åpne nedtrekksmenyen med klokke-knappen og navigere med piltaster
• Velge et klokkeslett med Enter
• Lukke nedtrekksmenyen med Esc

Skjermlesere kunngjør klokkeslett og label

Timer- og minutter-feltene har role="spinbutton" og aria-label som inkluderer komponentens etikett. Dette sikrer at skjermleseren kunngjør for eksempel «15, Timer, Møtetidspunkt» – tilsvarende opplesing som native <input type="time">.

Feil knyttes til feltet

Feilmeldinger må knyttes til inputfeltet med aria-describedby. Bruk komponentens errorMessage-prop og hasError-tilstand for å sikre at feilen leses opp korrekt.

Les mer om universell utforming av time picker:

Anatomi

<pkt-timepicker
  label="Møtetidspunkt"
  id="meeting-time"
  name="meeting-time"
  required
></pkt-timepicker>

<pkt-timepicker
  label="Arbeidstid"
  id="work-time"
  name="work-time"
  min="08:00"
  max="16:00"
  step="300"
></pkt-timepicker>

await window.customElements.whenDefined("pkt-timepicker");

Props