Tilgjengelighetserklæring for nhn.bsdigital.no

Logoen “Norsk helsenett” mangler tekstalternativ.
Aria-labelledby bruker en ID som ikke finnes i dokumentet, og dermed blir det en teknisk feil fordi den ikke har et element som beskriver den.

Aria-labelledby har en id-referanse som blir brukt to ganger: "block-customer-login-heading" og "block-new-customer-heading".

Aria-labelledby har ikke riktig id-referanse: "svea-checkout-cart-heading"

Konsekvensen av dette bruddet vil være at brukere med skjermlesere vil få en redusert brukeropplevelse som kan være vanskelig eller umulig å navigere gjennom. Konsekvensen kan også være at seksjoner som har misvisende label kan forvirre brukere med tanke på hvilket innhold som ligger under disse seksjonene.

Listesiden produkter:

Form-elements er ikke gruppert.
Element-id er ikke unik.
Form control label mangler tekst.
"Aria-labelledby" has incorrect (ID) reference.
No top-level heading on the page.
Content not included in landmarks: Brødsmulesti, meny, konto og close.
Navigasjonen har i tillegg en aria-role som ikke har påkrevde underelementer.

Produktside:

Content not included in landmarks: brødsmulesti, meny, konto og close.
aria-describedby="ui-id-1" gir ikke brukeren ekstra informasjon om elementet.
aria-describedby="modal-content-20" gir ikke brukeren ekstra informasjon om elementet.

Logg inn-siden:

Siden må ha en overskrift slik som f.eks. "Logg inn".
Element ID is not unique ser ut til å gjelde flere steder i skjemaet.
"Aria-labelledby" has incorrect (ID) reference flere steder.
Content not included in landmarks: <noscript>

Handlekurvsiden:

Ingen hovedoverskrift på siden.
Content not included in landmarks: Meny, konto, close, <noscript>

Kassesiden

Input field has no description: postnr.
Form elements are not grouped.
Element ID is not unique: <h4>
HTML is used to format content: Gjelder opplisting av produktene i kassen.
"Aria-labelledby" has incorrect (ID) reference: svea-checkout-cart-heading

Konsekvens er at brukere som benytter skjermlesere ikke vil kunne navigere seg like enkelt gjennom grensesnittet fordi koden er feilaktig laget og innhold ligger utenfor landmarks. Mangel på h1 gjør at siden ikke har en beskrivende tittel, som er viktig både for navigasjon og gjenfinning av innhold.

HTML-dokumentet er ikke utformet i henhold til hvordan layout parses; fordi dokumentet er lagt opp på en slik måte at brukeren leser fra venstre mot høyre, mens kilderekkefølgen er helt annerledes. Dette sees også i hvordan man tabber gjennom dokumentet.

Logg inn-siden:

Riktig rekkefølge, men den hopper over "Husk meg".

Konsekvens er at brukere ikke får presentert innhold i samme rekkefølge som innholdet er kodet. Dette gjør at det er vanskelig å orientere seg på nettsiden under tabbing og muligens under opplesing av skjermleser.

Søppelikonet må ha en beskrivende tekst ved siden av slik som "fjern" eller at overskriften til tabellraden endres fra "handlinger" til en mer beskrivende overskrift slik som "Fjern?".

Dette gjør det lettere for brukerne å forstå hva konsekvensen er av å trykke på ikonet.

Logg inn-siden:

Inndataformål er slått helt av i innloggingsskjemaet med autocomplete="off".

Kassesiden:

Postnummerfelt er ikke kodet med inndataformål. Flere felter i betalingsløsningen er ikke kodet med inndataformål eller har inndataformål slått helt av.

Konsekvens av manglende inndataformål er at brukere som benytter seg av autoutfylling av skjemaer ikke kan bruke dette. Det øker kognitiv last for disse brukerene og kan medføre at de får vanskeligheter med å fylle ut skjemaet, spesielt for grupper med kognitive og motoriske vansker.

Knappene "legg i handlekurven" og "logg inn", og lenkene "Glemt passord" og "Opprett en konto" møter ikke kontrastkravet. Knappene på handlekurvsiden møter heller ikke kravet.
Sirkel med antall varer i handlekurven møter ikke kontrastkravet. 

Det blir vanskelig for brukere med nedsatt funksjonsevne å se innholdet.

Listeside produkter:

Visningsvalgene og filteret på venstreside forsvinner. I tillegg så legger dropdown'en for "Mest populære" seg over teksten "Helsenorges nettbutikk...".

Handlekurvsiden: Innholdet i sammendraget går ut over boksen sin bredde.

Det blir vanskelig for brukerne å se innholdet.

Listeside produkter:

Teksten per produkt i listen som omhandler pris er bredere enn rammen rundt hvert produkt.

Minihandlekurven: Her kommer knappene "Fortsett å handle" og "Gå til handlekurv" under boksen som inneholder handlekurven.

Tekstene "Subtotal" og "pris" legger seg oppå hverandre. Teksten "Beskrivelse" er ikke så sterkt knyttet til innholdet lengre, altså selve beskrivelsen. Det samme gjelder subtotal og prisen. Subtotalprisen er fremhevet med større tekst, men bortsett fra det så er det ikke så tydelig hvilken pris som er subtotalen.

Det gjør det vanskelig for brukerne å lese og forstå innholdet.

Handlekurvsiden:

Kontrasten til skillelinjene brukt på handlekurvsiden er på 2:1 og møter ikke kravet.
Kontrasten på bakgrunnen til til sammendraget er på 1:1 og møter ikke kravet.

Logg inn-siden:

Kontrasten til inputfeltene til innloggingsskjemaet er på 1:1 og møter ikke kravet.

Produktsiden:

Kontrasten på bakgrunnsfargen til detaljene for hvert produkt er på 1:1 og møter ikke kravet.
Kontrasten på rammen rundt produktet er på 2:1 og møter ikke kravet.
Kontrasten til skillelinjen mellom menyen og innholdet er på 1:1 og møter ikke kravet.
Kontrasten til søkefeltet mot den grønne bakgrunnen er på 1:1 og møter ikke kravet. 

Listeside produkter:

Kontrasten på rammen rundt hvert produkt er på 2:1 og møter ikke kravet.

Dette gjør det vanskelig for brukere med nedsatt funksjonsevne å se innholdet.

Listeside produkter:

Det er mulig å endre alle tekstattributter som man skal, men dette medfører at tekst "klippes bort" og at enkelte labels ikke kan presenteres i sin helhet. Dette kommer også an på hvilke produkter som vises, men ettersom deler av tekst og innhold i brukergrensesnittet kuttes så møter ikke dette kravet.

Konsekvens blir at brukeren ikke får tilgang til all teksten som er på siden, og dermed må "gjette seg frem" til hva som var tenkt at skulle stått. I og med at teksten er klippet delvis bort vil dette ha en konsekvens for brukere med dysleksi og andre kognitive problmer.

Overstyrt styling for å gi en outline slik at vi kan se på navigasjon. Det er ikke mulig å åpne panelet for brukerkonto med tastatur alene da man må bruke museklikk for å åpne panelet. Det er ikke mulig å åpne/lukke menyen i mobilformat med tastatur alene da både "hamburgerknappen" og lukkeknappen i menyen ikke er fokuserbare og markert som knapper i koden.

Logg inn:

Når ikke "Husk meg" med tastatur alene fordi checkboxen er gjemt unna på feil måte.

Konsekvenser

Det gjør at det ikke er mulig for brukerne å bruke all funksjonalitet kun ved bruk av tastatur.

Det gjør det vanskelig for de som tabber gjennom innholdet og huke av for "husk meg".

Det skal ikke være noe tidsavbrudd i nettbutikken så lenge brukeren er aktiv. En inaktiv bruker vil bli logget ut etter 1 time. Brukeren kan ikke overstyre dette.

Brukeren kan ikke avbryte at hen blir utlogget hvis hen er inaktiv i 1 time.

 Sidens <title> element er tomt.

Produktsiden

Det er ikke alle produktsidene som har en beskrivende nok tittel slik at man kan velge riktig produkt. F.eks. Produktsidene for brosjyerer har bare deler av tittelen til produktet i title, og en samvalgsbrosjyre har en title som sier at den er samisk når det står at den er nynorsk.

Det kan gjøre det vanskelig for brukerne å velge riktig produkt.

Logg inn

Den har en nyttig "title", men det burde også være en synlig tittel på siden.

Logoen til NHN i header er lenket opp, men har ingen alternativ tekst som kan leses som lenketekst. Skjermleser har ikke noe innhold å presentere til brukeren om formålet med lenken.

Forside:

Første overskrift på siden er H4, hopper over H1, H2 og H3.

A form control has more than one label associated with it. Gjelder for navigering mellom sider med resultater og dropdown med antall brosjyrer for bestilling.

Produktside:

A form control has more than one label associated with it. Gjelder dropdown-menyer for Produktnavn og navigere mellom sider med resultater.

Innholdet får ikke synlig fokus ved å bruke Tab for å navigere på siden.

Det blir vanskelig for brukerne å skjønne hvor de er på siden.

Siden mangler lang="..." attributt for <html> elementet.

I sammendraget står det "Extra fee" og det er ikke markert i koden. Men i parentes bak dette ordet så står det oversatt til norsk. Det er ikke tilstrekkelig, ettersom det ikke programmatisk er markert at språket er forskjellig. Selv om dette kanskje gir mening for enkelte brukere vil enkelte skjermlesere fortsatt lese opp på galt språk.

Innholdet blir lest opp på feil språk for de med skjermleser.

Inputfeltet for antall av et produkt er utformet forskjellig. Inputfeltet i handlekurven er et enkelt inputfelt, mens det på siden for kassen er et inputfelt med mulighet for å justere antallet opp og ned ved hjelp av + og - i tillegg til å skrive inn tallet selv. Dette må bli løst på en konsistent måte.

Fikk feilmelding i form av en modal når jeg endret antallet til 1 000 000. På kassesiden så er den samme feilmeldingen vist som en rød varselboks over innholdet i kassen. Dette må bli løst på en konsistent måte.

Inputfeltet for antall i kassen retter seg tilbake til det antallet du hadde hvis du prøver å velge et antall som ikke er av de forhåndsdefinerte antallene. Dette skjer ikke på handlekurvsiden hvor inputfeltet tilltater å skrive inn akkurat det antallet du vil ha. Dette må bli løst på en konsistent måte.

Inputfeltet for postnummer har ledeteksten inni inputfeltet, mens inputfeltene på innloggingssiden har ledetekstene over inputfeltet. Inputfeltene har også ulikt grafisk uttrykk.

Det blir kognitivt belastende for brukerne å måtte lære seg flere komponenter i grensesnittet for å utføre den samme oppgaven.

Handlekurvsiden:

Hvis man endrer på antall utenom de forhåndsdefinerte antallene som man kan velge på produktsiden i handlekurven så får man ingen feilmelding, men det får man når man går til kassen. Handlekurven burde ha de samme feilmeldingene som kassen har og med markering av inputfeltet som viser hvor feilen skjedde. Fikk feilmelding i form av en modal når jeg endret antallet til 1 000 000, men fikk ingen markering av inputfeltet.

Ved for lavt antall av et produkt så får man et varsel i toppen om at antallet ikke er tillatt, men det markeres ikke hvor feilen gjelder som er inputfeltet for antall. Så blir det veldig misvisende å ha et inputfelt som lar deg legge til det antallet du vil når du egentlig bare kan velge blant noen forhåndsdefinerte mengder slik som "20, 100 og 500". Her skulle det ha vært en dropdown med bestemte valg slik som på produktsiden.

Løsningen blir vanskelig å bruke når man ikke får feilmeldingen med en gang. Grensesnittet gjør det vanskelig for brukerne å forstå hvilket antall som er lov å legge i handlekurven når man på produktsiden må velge mellom et spesifikke antall, mens du på i handlekurven og på kassesiden tilsynelatende kan velge det antallet du vil. 

Produktside:

Det vises ikke ledetekst over dropdown hvor man velger antall produkter.

Det gjør det vanskeligere for brukere å forstå hva de skal gjøre i denne dropdown og de som bruker skjermleser får ikke lest opp hva dropdownen gjelder.

Kassesiden:

Denne feilmeldingen vises når man endrer til et eget valgt antall av et produkt: "Entered Qty not allowed". Her burde feilmeldingen informere om hvilke antall man kan velge blant. Men det beste er selvfølgelig å endre inputfeltet for antall til en dropdown med forhåndsdefinerte valg for antall slik at vi unngår at brukeren velger feil antall.

Dette kan gjøre det vanskelig for brukerne å skjønne hvilket antall som er tillatt å velge per produkt.

Listeside produkter:

Finnes mange kodefeil på siden. Feil bruk av elementer, dupliserte IDer, ugyldige attributter.

Produktside:

Validerer ikke som gyldig HTML. Dupliserte ID-attributter, samt feil i en select-boks.

Handlekurvside:

Siden har flere store kodefeil, blant annet bruk av ugyldige HTML-attributter, elementer som ikke er lukket som de skal, og bruk av duplikate ID-verdier.

Kassesiden:

Siden har flere store kodefeil; bruk av ugyldige attributter, ulukkede HTML-tags, duplikate IDer, feil bruk av attributter i skjemafelter, feil bruk av aria-labelledby.

Konsekvensen her er at nettlesere og skjermlesere kan tolke og tegne opp nettsiden på gal måte fordi koden ikke er god nok. Dette kan medføre at innhold blir galt lest opp, eller at deler av siden ikke tegnes opp riktig og dermed ikke kan brukes.

Listeside produkter:

Logo har ikke et tekstalternativ som kan forstås. Modusvelger i filter har ikke et navn som kan forstås programmatisk (dropdown over produkter).

Produktside:

Interaktive elementer er nøstet inni hverandre i Detaljer. Select-boks for antall har ikke et navn som kan oppfattes av skjermleser.

Handlekurvside:

Overskriften "Tillegg" har en aria-role som "heading", men mangler attributtet aria-level som er påkrevd.

Kassesiden:

iframe har ikke et tilgjengelig navn for skjermlesere. E-mailfelt har ikke label. Logo har ikke et tekstalternativ.

Konsekvens er at brukere ikke vil kunne forstå hva logoen skal brukes til eller hvor linken går. Mangel på tekstalternativ for modusvelger vil føre til at brukere ikke forstår hva komponenten skal brukes til eller hva som skjer ved aktivering.

Andre konsekvenser er at nettlesere og skjermlesere kan tolke og tegne opp nettsiden på gal måte fordi koden ikke er god nok. Nøsting av interaktive elementer kan være utforståelig for skjemlesere. Mangel på navn for selectboks gjør at brukere må gjette seg frem til hvilken informasjon som skal fylles ut. Manglende aria-level gjør at headingen kan fremstå som uforståelig for enkelte skjermlesere.

Manglende label for e-mailfelt gjør at brukere må gjette seg frem til hvilken informasjon som skal fylles ut. Manglende tilgjengelig navn på iframe kan gjøre at brukere ikke forstår hvilket grensesnitt som har blitt iframet inn, og dette kan føre til mistforståelser.

Handlekurvsiden:

Ved feil antall i inputfeltet for antall så vises det en feilmelding under inputfeltet som ikke er kodet med ARIA-attributtet="alert". I tillegg så kunne jeg gå videre til kassen uten å få noe videre varsel om at jeg måtte rette opp i antallet på produktet i handlekurven. Når jeg kom til kassesiden så var antallet justert til det riktige antallet uten at jeg ble informert.

Kassesiden:

Feilmeldingen som kommer ved feil antall på et produkt i handlekurven er ikke kodet med ARIA-attributtet="alert".

Dette gjør det vanskelig for brukerne å bestille riktig antall av et produkt.