Universell utforming og Squarespace

Alle eksisterande nettsider skal vere universelt utforma innan 1. januar 2021. Det er eigaren av nettsida som er ansvarleg, ikkje leverandøren.

Eigaren kan kreve at nettsidene vert universelt utforma av leverandøren gjennom anbud og kontrakt, men eigar står til sjuande og sist ansvarleg. Nettsider må oppfylle 35 av 61 suksesskriteriene i standarden Retningslinjer for tilgjengelig webinnhold (WCAG) 2.0

Dersom ein tek i bruk nye Squarespace 7.1 er denne som utgangspunkt universelt utforma. For nettsider utvikla på Squarespace 7.0 vil ein ikkje kunne tilfredstille krav til universell utforming utan vidare, men vi i Gasta har HTML-bibliotek som vi legg inn på nettsider for at dei skal tilfredstille krava til universell utforming.

Under finn du dei 35 minimumskrava til universell utforming med våre kommentarar.

35 minimumskrav for universell utforming:

1.1.1 Ikke-tekstlig innhold (front end og innhold)

  • Alt ikke-tekstlig innhold som presenteres for brukeren, har et tekstalternativ som har samme formål, med unntak av situasjonene som er beskrevet her.

  • Gasta arbeid med innhald:

    • Foto: I Squarespace fungerer det slik at Alt-tekst på foto i Squarespace = bildetittel. Dersom du bruker Caption på foto, så blir det Alt-tekst.

    • Video: YouTube eller Vimeo styrer alt-tekst.


1.2.1 Bare lyd og bare video (innhold)

  • For forhåndsinnspilt innhold som bare er lyd eller video gjelder følgende retningslinjer, bortsett fra når lyden eller videoen utgjør et mediealternativ til tekst og er tydelig merket som det.

  • Gasta arbeid med innhald:

    • Video skal ha tekst. Dette er kunde sitt ansvar

    • For video utan tekst, legg vi inn tekst under Caption som beskriv innhaldet

1.2.2 Teksting (innhold)

  • Tilby teksting for video med lyd.

  • Det gis tilgang til teksting for alt forhåndsinnspilt lydinnhold i synkroniserte medier, bortsett fra når mediene fungerer som mediealternativer til tekst og er tydelig merket som det.

  • Gasta arbeid med innhald:

    • Dette ansvaret ligg hos kunde eller videoprodusent.

1.3.1 Informasjon og relasjoner (front end / back end)

  • Ting skal være kodet som det det ser ut som. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • Tabeller: Squarespace har ikkje innebygd tabellverktøy. Ved bruk av tabeller bruker vi Squarewebsites tables, som generer tabeller iht. WCAG 2.1

    • Menue-block kan også brukast til enklare tabellar, men denne tilfredstiller ikkje UU-krav.

    • Tekst, formattering: vi følgjer dette, ved bruk av H1, H2, H3

    • Utforming og presentasjon/Forstørring av tekst: side må ikkje kollapse opp til 200%. Dette fungerer godt i Squarespace med riktige innstillinger for responsiv design

    • Skjema: UU-stiller krav om beskrivende ledetekster, merking av obligatoriske felter og tydelege feilmeldinger

    • Alt dette er støtte i Squarespace sitt skjemaverktøy, men vi må fylle inn.


1.3.2 Meningsfylt rekkefølge (front end)

  • Presenter innhold i en meningsfull rekkefølge. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • Brukeren skal ha minst to metodar til å finne innhaldet på nettsida. Dette kan vere menynavigering, søk, alfabetisk liste og/eller nettstedskart.

    • I tillegg til menynavigering, skal vi alltid ha med søk på nettsidene

1.3.3 Sensoriske egenskaper (front end/ innhold)

  • Instruksjoner må ikke utelukkende være avhengige av form, størrelse, visuell plassering, orientering, eller lyd for å kunne bli forstått. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • På skjema, buttons og andre element skal det vere forklaring på kva som skjer. Eks viss vi har ein vertikal strek eller pil for å bla ned, må det stå Bla ned i tilknytning til elementet.


1.4.1 Bruk av farge (front end/ design / innhold)

  • 1.4.1a Lenka tekst skil seg frå anna tekst med meir enn berre farge.

  • 1.4.1b Informasjon i grafiske framstillingar skil seg ut med meir enn berre farge.

  • 1.4.1c Skjemaelement og feilmeldingar er merka med meir enn berre farge.

  • Kontrast mindre tekst: 4.5:1

  • Tittel tekst: 3:1

  • Sjekkast med WCAG Contrast checker


1.4.2 Styring av lyd (front end)

  • Gi brukeren mulighet til å stoppe eller pause lyd som starter automatisk. Les mer om dette punktet hos UU-tilsynet.

  • Arbeid med innhald:

    • Moglegheit til å styre lyd som startar automatisk. Videoar i Squarespace kan ikkje spelast av automatisk med lyd, krav er dermed tilfredstilt.

1.4.3 Kontrast (design / innhold)

1.4.4 Endring av tekststørrelse (frond end/ design)


1.4.5 Bilder av tekst (front end/ innhold)

2.1.1 Tastatur (front end/ back end)

  • All funksjonalitet skal kunne brukes kun ved hjelp av tastatur. Les mer om dette punktet hos UU-tilsynet.

  • Gasta har utvikla kodebibliotek:

    • Fokusmarkering: Mangler i Squarespace. Må skrive CSS. Alle lenker og skjemaelementer må ha CSS-markering (focus). Gasta har HTML-bibliotek.

    • Tab-basert navigasjon på nettside. Gasta har HTML-bibliotek.

    • Omlasting av siden. Squarespace funksjonalitet er ok.

  • Unngå tastaturfeller.

  • Gasta kommentar:

    • Fokus vert flytta med tab-tast. Squarespace har denne funksjonaliteten innebygd.


2.2.1 Justerbar hastighet (front end / back end)

  • Tidsbegrensninger skal kunne justeres av brukeren. Les mer om dette punktet hos UU-tilsynet.

  • Gasta kommentar:

    • Personar med funksjonsnedsettingar skal ha tilstrekkeleg tid til å lese innhald eller gjennomføre handlingar på nettstaden. Ikkje relevant på våre nettsider.

2.2.2 Pause, stopp, skjul (front end/ back end)

  • Gi brukeren mulighet til å stoppe, pause eller skjule innhold som automatisk endrer seg. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • Alle videoblokker har denne mulegheit for å stoppe, pause og skjule innhald.

    • GIF-filer eller SVG må vere muleg å stoppe/pause.

2.3.1 Terskelverdi på maksimalt tre glimt (front end/ innhold)

  • Innhold skal ikke blinke mer enn tre ganger per sekund. Les mer om dette punktet hos UU-tilsynet.

  • Gasta kommentar:

    • Dette gjeld animasjonar og CSS-effekter. Gasta har aldri utvikla slikt der innhald blinker meir enn tre ganger per sekund


2.4.1 Hoppe over blokker (front end)

2.4.2 Sidetitler (front end/ innhold)

2.4.3 Fokusrekkefølge (front end)

  • Gasta kommentar:

    • Viss du navigerer med tastatur må det vere logisk rekkefølge mellom elementa

    • Dette er standard i Squarespace.

2.4.4 Formål med lenke (i kontekst) (front end / innhold)

  • Alle lenkers mål og funksjon fremgår tydelig av lenketeksten. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • Ikkje bruke generiske lenketekster som Les mer og Klikk her.

    • Ikkje bra lenke: Klikk her for å lese mer om rapporten

    • Bedre: Universell utforming av IKT, rapport 2019


2.4.5 Flere måter (front end / design / back end)


2.4.6 Overskrifter og ledetekster (front end / innhold)


2.4.7 Synleg fokus (front end/ design)

  • Sørg for at alt innhold får synlwg fokus når du navigerer med tastatur. Les mer om dette punktet hos UU-tilsynet.

  • Gasta har utvikla kodebibliotek:

    • Fokusmarkering: Mangler i Squarespace. Må skrive CSS. Alle lenker og skjemaelementer må ha CSS-markering (focus). Gasta har HTML-bibliotek.

3.1.1 Språk på siden (front end)

  • Sørg for at språket til innholdet på alle websider er angitt i koden. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • Programvare som Google Translate eller Bablic bryt med 3.1.1

    • Må ha eigne nettsider. Blir definert som tag i HTML som Squarespace generer.

    • Må velge riktig språk i Squarespace - Settings - Region

3.1.2 Språk på deler av innhold (front end / innhold)

  • Sørg for at alle deler av innholdet som er på et annet språk enn resten av siden er markert i koden. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • Ikkje muleg som standard i Squarespace

    • Dersom ein har nettside med to språk, må vi definere språk med språktag i Page Header injection under Instillinger på sida.

3.2.1 Fokus (front end)

3.2.2 Inndata (front end)

  • Endring av verdien til et skjemafelt medfører ikke automatisk betydelige endringer i siden. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • I standard Squarespace-skjema er ikkje dette relevant.

    • I 3-partsverktøy som CognitoForms kan dette gjelde. Der må dette informeres under feltinfo i CognitoForms.

3.2.3 Konsekvent navigering (front end/ design)


3.2.4 Konsekvent identifikasjon (front end / design)

3.3.1 Identifikasjon av feil (front end/ design)

  • For feil som oppdages automatisk må du vise hvor feilen har oppstått og gi en tekstbeskrivelse av feilen. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • Feilmelding i standard Squarespace-skjema bør vises.

    • Feilmelding i standard Squarespace-skjema bør oversettes

3.3.2 Ledetekster eller instruksjoner (front end/ design)

3.3.3 Forslag ved feil (front end)

  • Dersom feil blir oppdaget automatisk, gi brukeren et forslag til hvordan feilen kan rettes. Les mer om dette punktet hos UU-tilsynet.

  • Gasta arbeid med innhald:

    • F.eks der felt er påkrevd og er tomt gir Squarespace standard feilmelding på engelsk.

    • Gasta har utvikla språkbibliotek og dette skal implementeres.

3.3.4 Forhindring av feil (juridiske feil, økonomiske feil, datafeil) (front end)

  • For sider som medfører juridiske forpliktelser må det være mulig å kunne angre, kontrollere eller bekrefte dataene som sendes inn. Les mer om dette punktet hos UU-tilsynet.

  • Gasta kommentar:

    • F.eks på sider der kunde bestiller produkt eller teneste.

    • I nettbutikk er dette ingen problem.

    • Nyttar ein Squarespace-skjema for bestilling er dette ikkje muleg.

    • CognitoForms skjema har støtte for kontoll og bekreftelse.

4.1.1 Parsing (oppdeling) (front end/ back end)

4.1.2 Navn, rolle, verdi (front end / back end)


Her er oversikt over ikke lovpålagte krav.

Vår testguide for universell utforming på nettsider:

  1. Tastaturnavigering

  2. Forstørring og responsivt design

  3. Farger og kontrast

  4. Overskrifter

  5. Lenker

  6. Bilder

  7. Skjema

  8. Søkefunksjonen

  9. Sidetitler

  10. Kodevalidering

(Les utfyllande info om testing av universell utforming her)

Vil du vite meir om Squarespace og universell utforming? Ta kontakt med Gasta