Endringer i Studentweb versjon 3.3.21

I denne Studentweb-versjonen er det hovedsakelig arbeidet med å få applikasjonen mer universelt utformet i henhold til EUs webdirektiv og WCAG-2.1.

Endringene kan oppsummeres med at store deler av Studentweb er blitt bedre tilpasset mobiltelefoner samt at den visuelle og logiske strukturen på de enkelte sidene er mer samstemt, noe som vil bedre bruk av skjermleser (Screen Reader/SR). Navigering med tastatur er også bedret. Arbeidet med å bedre UU for Studentweb er omfattende og er ikke avsluttet.

Institusjonene oppfordres til å teste lesbarhet med lange lokale tekster, f.eks. rettigheter/plikter, eksamensinfo.

 

Sider som er endret/forbedret i denne versjonen:

  • Påloggingssiden
  • Forside
  • Feilsidene
  • Session timeout
  • Resultater
  • Opplysninger til Lånekassen
  • Begrunnelse og klager
    • Be om begrunnelse på sensur
    • Klage på sensur
    • Klage på formell feil ved eksamen
  • Bestillinger
    • Rediger bestilling/Bestilling av <type>
    • Søknader
    • Registrer ny søknad
  • Utdanningsplan
  • Rettigheter og plikter

Under følger utførlig beskrivelse av endringene:

Felles endringer

  • nå flyttes fokus til toppen når bruker trykker på “Til toppen” og ikke bare visuelt til toppen

  • oppgradert til FUN (Felles uttrykk på nett) versjon 2.2.11  hvor bl.a. feil i nynorsktekster er rettet, popup som vokser ut av skjermen pga valg fra bruker som kan gjør at den blir større vertikalt

  • en rekke input-felt har fått autocomplete med en spesifikk verdi (ref. 1.3.5 i WCAG 2.1)

    • Hvilke typer av skjemaelementer/inndataformål som skal bestemmes programmeringsmessig, følger av kapittel 7 i WCAG 2.1 (engelsk). Det gjelder blant annet navn, brukernavn, passord, nytt passord, fødselsdag, landskode for telefonnummer med mer.

  • rullegardinmenyer for liten skjermstørrelse

    • hardkodet bredde (350px) er endret til at den hardkodet bredden blir satt til maks bredden istedenfor pga RWD (ref. 1.4.10 i WCAG 2.1)

    • ser nå begynnelsen av teksten til elementer i rullegardinmeny som tidligere forsvant ut av viewporten

  • radioknapper (komponent selectOneRadio)

    • ligger i en layout tabell (brudd på 1.3.1 i WCAG 2.0) og støy for SR derfor lagt på role=presentation på table-elementet slik at det ikke blir lest opp at det er en tabell i tillegg til radioknapper

    • en rekke radioknapper har fått nytt design (fra FUN) og følgende gjelder for de:

      • er flyttet til venstre dersom den var helt til høyre

      • for noen av radioknappene ble fokus flyttet til toppen eller bunnen når bruker gjorde et valg med tastatur (ref. 2.4.3 i WCAG 2.0) men beholder nå fokus (slik at bruker enkelt kan veksle mellom valgene med tastatur)

  • overskrifter som visuelt ser ut som overskrifter skal være kodet som det (ref. 1.3.1 i WCAG 2.0). Derfor er alle panelene som hadde en visuell overskrift med sort bakgrunn nå kodet som enten et heading-element eller et <caption>-element (overskrift til en tabell). Eksempler på dette er tabeller på resultatsiden, panelene for søk etter emne, visninig av valgbare emner, o.l.

  • i stegprosessen for semesterregistrering er navnet på steget lagt til som en overskrift dersom innholdet til steget ikke ligger i en tabs.

  • Lenketekst “vis beskrivelse” beskriver ikke formålet (ref. 2.4.4) og lenketeksten brukes flere steder etter et emnenavn (slik som for emnesøk, emneprioritering og emne i Utdanningsplan og aktive emner). Teksten er fjernet og istedenfor er emnenavn gjort om til en lenke og ev. utvidet med en beskrivelse (f.eks. “Dette er valgfag”) satt i parentes,

  • flere tekster og popup-er har fått en maks bredde for å øke lesbarheten

  • flere tekster er lagt i et <p>-element (bl.a. fordi en skjermleser kan hoppe fra <p>-element til <p>-element)

Påloggingssiden

  • innloggingsalternativet med fødselsnr. og pin har fått FS-logo

Forsiden

  • sidetittel på forsiden er utvidet med teksten “Forsiden” slik at det blir mer beskrivende (2.4.2 i WCAG 2.0) og som også samsvarer bedre med alt-teksten til logoen og hovedoverskriften (kun synlig for SR)

  • overskrifter som visuelt ser ut som overskrifter skal være kodet som det (ref. 1.3.1 i WCAG 2.0). Følgende visuelle overskrifter er nå kodet som overskrifter (h<nivå>-elementet eller role=heading og aria-level=<nivå>):

    • Kommende hendinger (<antall>)

    • Meldinger (<antall>)

  • nye overskrifter som kun synlig for SR

    • “Forsiden”

    • “Semesterregistrering”

  • den grønne registreringsknappen har brudd på kontrastkravet (ref. 1.4.3 i WCAG 2.0) og grønnfargen er endret til samme grønnfarge som FUN har på grønne knapper

  • varselmeldinger inneholder lenketeksten “Vil du gjøre noe med dette, følg denne lenken.” som ikke beskriver formålet (ref. 2.4.4). Teksten “ følg denne lenken“ er endret til “gå til siden <navn på siden>”. Videre så har lenken fått et attributtet aria-describedby som refererer til teksten før. Det betyr at når lenken får fokus blir den teksten lest opp etter lenketeksten av en skjermleser når den er i fokus/forms modus.

Feilsidene

  • fjernet layout br-elementer

  • endret lenketekst “Index side” til “Gå til forsiden”

  • feilrapport-skjemafeltet har fått en ledetekst (ref. 4.1.2 i WCAG 2.0)

  • hvis feilrapport-skjemafeltet er tomt og bruker trykker send, vises en feilmelding og markering av hvor feilen er (ref. 3.3.1 og 3.3.3 i WCAG 2.0), se vedlegg feilsiden-feilmelding.PNG

  • når bruker har trykket på send-knappen vises en tilbakemelding og feilrapport-skjemafeltet forsvinner,

Session timeout

  • teksten “Du har vært inaktiv for lenge“ ble lest opp av SR uansett om bruker var inaktiv eller ikke pga feil koding

  • ny tekst om totalt antall minutter før utlogging kun synlig for SR slik at SR-bruker for en tilsvarende informasjon som nedtellingen av tid før utlogging fordi nedtellingen ikke er tilgjengelig for SR (som er korrekt).

  • Velg nytt tidsavbrudd

    • har endret format på alternativene for nytt tidsavbrudd slik at det både visuelt og for SR blir enklere å oppfatte tidene. (F.eks. gammel verdi “0:30:00” er endret til “30 minutter”.)

    • kodet som en gruppe/fieldset

    • nytt design på radioknappene fra FUN

    • får ikke lengre spørsmål om du vil forlate nettstedet

    • fikset ugyldig HTML-kode

Siden Resultater

  • tekst har fått en maks og anbefalt lengde for å øke lesbarheten

  • radioknapper

    • nytt design på radioknappene fra FUN

    • ny plassering på venstre side og ikke helt til høyre som tidligere

    • skjules nå dersom ingen tabeller

    • lagt i en gruppe/fieldset med ledetekst “Hvilke resultater vil du se?“ (ref. 1.3.1 i WCAG 2.0) Kom gjerne med forslag til annen tekst.

    • teksten “Det finnes delresultater som er bestått. For å se disse, trykk på 'Alle resultater'“ er lagt i et p-element og flyttet under radioknappene istedenfor under tabellen Resultater som tidligere

    • når bruker bytter visning ble fokus flyttet til toppen av siden slik at de som bruker tastaturnavigering og SR må starte på toppen for å komme tilbake der de var mens nå flyttes fokuset til den radioknappen du har valgt (ref. 2.4.3 i WCAG 2.0)

  • tabellene (“Resultater”, “Deler der samlet resultat ikke er beregnet” og “Eksterne resultater”)

    • har kun visuelle overskrifter. Overskrifter er nå kodet som et caption-element som er en overskrift/tittel til en tabell (ref. 1.3.1 i WCAG 2.0). (SR har snarveier til tabeller og i oversikten over snarveier vises navnet på hver av tabellene slik at det blir enklere å navigere til ønsket tabell.)

    • ikon til knappen for statistikk har fått en alternativ-tekst (ref. 1.1.1 i WCAG 2.0) og dermed har knappen fått en ledetekst/accessible name (ref. 4.1.2 i WCAG 2.0)

    • knappen for statistikk og knappen “Ta emne på nytt” får nå fokus tilbake når popup-en lukkes istedenfor at fokus havner nederst på siden slik at de som bruker tastaturnavigering og SR slipper å navigere seg tilbake der de var (ref. 2.4.3 i WCAG 2.0)

    • for små skjermstørrelser ble knappen “Ta emne på nytt“ skjult men er nå synlig siden jobbet med å gjøre innhold i popup-en responsiv (ref. 1.4.10 i WCAG 2.1) derfor ingen grunn lengre til å skjule den vil jeg tro

    • reglene som brukes for å tilpasse tabellene for mindre skjermstørrelser er endret slik at de ivaretar den semantiske strukturen til tabellen slik at de som bruker SR fortsatt får lest tabellen korrekt opp

    • dersom det finnes et delresultat vises ikke verdiene for kolonnene Semester og Emne men har endret slik at det blir tilgjengelig for SR

    • Teksten “Totalt: <ant>“ er flyttet ut av tabellen og lagt i et p-element fordi det ikke var kodet riktig og komponenten (dataTable til JSF2) legger begrensninger på å gjøre det mulig. Visuelt ser det ut som før, og har utvidet teksten med “studiepoeng”.

  • tekster som har å gjøre med vurderingsdeler (“Godkjent”, “OBL”, “S1” osv) oppfyller nå kontrastkravet (ref. 1.4.3 i WCAG 2.0)

  • teksten “Oppnådde kvalifikasjoner” var kodet som en overskrift med nivå 3 (h3) som er endret til en paragraf (p-element) hvor teksten er utvidet med “er følgende”. De to listene som inneholder kvalifikasjoner er slått sammen til en (siden listene ikke lengre har hver sin overskrift). Grunnen til at h3-element er fjernet er fordi det finnes ingen andre overskrifter som betyr at alt innholdet etter h3 hører under den slik som tekst om begrunnelse og klaging og resultattabeller. Grunnen til å slå sammen de to listene er dersom det er elementer i hver liste så får SR lest opp to ganger noe slikt som “list with 1 items” og “out of list“ som blir ekstra støy å få lest opp to ganger når det ikke formidles hva forskjellen på de to listene er.

Siden Opplysninger til Lånekassen

  • hvis ingen opplysninger så vises nå en tekst om det istedenfor en tom side med kun overskrift

  • gjort tabellen responsiv (ref. 1.4.10 i WCAG 2.1)

  • slått sammen kolonnene emne og emnenavn slik at det blir konsistent med tilsvarende tabeller (resultater og kommende hendinger) og “kompleksiteten” blir mindre

Siden Begrunnelse og klager

  • info om nytt og opprinnelig resultat, ferdigbehandlet, vedtak osv ligger nå i en beskrivende liste (dl-element) (ref. 1.3.1 i WCAG 2.0) som også gjør at disse dataene for SR blir lest opp som par (f.eks. ferdigbehandlet ja) og at all infoen ikke blir lest opp som en lang setning (f.eks. ferdigbehandlet ja vedtak uendret sensur nytt resultat C)

  • popup “Trekk klage”

    • har fått en mindre og en maks bredd for å øke lesbarheten

    • dersom bruker trykker på avbryt for knappen “Trekk klage” fokus tilbake og ikke blir flyttet til toppen av siden (ref. 2.4.3 i WCAG 2.0)

Siden Be om begrunnelse på sensur

  • info om emne, vurderingsording, kandidatnr og opprinnelig begrunnelse ligger nå i en beskrivende liste (dl-element) (ref. 1.3.1 i WCAG 2.0)

  • gjort tekst om til paragraf (p-element)

  • sidetittelen har fått en tekst tilsvarende overskriften på siden (ref. krav 2.4.2 i WCAG 2.0)

Siden Klage på sensur

  • avkrysningsboksene er nå knyttet korrekt sammen med ledetekstene slik at de ikke mangler accessible name (ref. 4.1.2 i WCAG 2.0) som betyr at SR får nå lest opp hva det betyr å krysse av

  • nytt design på avkrysningsboks fra FUN med større klikkflate og tydeligere farger

  • gjort tekst om til paragraf (p-element)

  • info om emne, vurderingsording, kandidatnr og opprinnelig begrunnelse ligger nå i en beskrivende liste (dl-element) (ref. 1.3.1 i WCAG 2.0)

  • sidetittelen har fått en tekst tilsvarende overskriften på siden (ref. krav 2.4.2 i WCAG 2.0)

Siden Klage på formell feil ved eksamen

  • jobbet RWD (ref. 1.4.10 i WCAG 2.1)

  • textarea

    • manglet accessible name (ref. 4.1.2 i WCAG 2.0) som betydde at SR får ikke lest opp hva som skal skrive i skjemaelementet

    • manglet identifisering av skjemaet ved feil (ref. 3.3.1 i WCAG 2.0)

  • nytt design på avkrysningsboks fra FUN med større klikkflate og tydeligere farger

  • info om emne, vurderingsording og kandidatnr ligger nå i en beskrivende liste (dl-element) (ref. 1.3.1 i WCAG 2.0)

  • sidetittelen har fått en tekst tilsvarende overskriften på siden (ref. krav 2.4.2 i WCAG 2.0)

Siden Bestillinger

  • fjernet layout br-element (ref. 1.3.1 i WCAG 2.0)

  • fjernet duplikater av id-er (ref. 4.1.1 i WCAG 2.0)

  • visning av valg fra en bestilling er lagt i et dl-element og feil bruk av label er erstattet med dt-element (ref. 1.3.1 i WCAG 2.0)

  • karakterutskrift på papir

    • valgte vurderinger/emner er lagt i en liste istedenfor i en tabell pga responsivt design og enklere å lese for SR

    • Teksten “Ikke send karakterutskrift før sensur foreligger i følgende emner“ er endret til :

      • Jeg ønsker å vente med å få sendt karakterutskrift til resultat er tilgjengelig for følgende emner:

      • Eg ønsker å vente med å få sendt karakterutskrift til resultat er tilgjengeleg for fylgjande emne:

      • I would like to wait for the transcript to be sent until the results are available in the following courses:

    •  

Siden Rediger bestilling/Bestilling av <type>

  • fjernet layout br-element (ref. 1.3.1 i WCAG 2.0)

  • radioknapper og avkrysningsbokser har fått nytt FUN design

  • grupperinger er nå kodet med fieldset-element hvor overskrift(h3) er erstattet med legend-element (ref. 1.3.1 i WCAG 2.0)

  • rullegardinmenyer for målform og utdanningsplan, og avkrysningsbokser for emner manglet accessible name (ref. 4.1.2 i WCAG 2.0) som nå har fått hvert sitt label-element

  • målform

    • rullegardinmenyen er endret til radioknapper fordi det er kun to verdier (beste praksis) samt at JSF 2/select2 rullegardinmeny kanskje ikke fungerer så bra for SR

    • dersom det finnes språk å velge mellom vises målform kun når norsk er valgt

  • overskriften Varsling (h3) er fjernet fordi overflødig og passer heller ikke inn i overskriftshierarkiet

  • selv om det bare finnes en adresse vises den som radioknapp med disabled istedenfor bare tekst

  • vurderinger/emner er lagt i en liste istedenfor i en tabell pga responsivt design og enklere å lese for SR

Siden Søknader

  • søknad

    • info om studieprogram, kull, levert, status og dato ferdigbehandlet ligger nå i en beskrivende liste (dl-element) (ref. 1.3.1 i WCAG 2.0)

  • jobbet med å få innholdet mer responsiv (ref. 1.4.10 i WCAC 2.1)

  • knappen “Vis hele søknaden“ vises nå kun dersom det finnes innhold å vise

Siden Registrer ny søknad

  • steg 1 Søknad

    • alle spørsmål ble for SR lest opp 2 ganger pga feil koding av legend-elementet til fieldset-elementet sammen med label hvor begge elementer inneholdt spørsmålet. Har fjernet label (fordi det ikke hører hjemme her) og gjort legend synlig for alle siden det var skjult med css.

    • avkrysningsbokser er gruppert med en label som er feil bruk av elementet og har istedenfor gruppert med fieldset-element (ref. 1.3.1 i WCAG 2.0) hvor legende-element har verdien (spørsmålet) som label hadde slik at det for SR blir lest opp at det er en gruppe med tilhørende spørsmålet.

Utdanningsplan

  • radioknapper for vis/skjul tidligere semester er lagt i et fieldset med legend "Skjul tidligere semester" (ref. 1.3.1 i WCAG 2.0) og verdiene er endret til ja og nei

  • prioriteringer er lagt i et ol-element (ref. 1.3.1 i WCAG 2.0) og ikke bare div-er som tidligere (som ikke har en semantisk betydning)

  • doktorgrad

    • overskrifts hierarkiet er forbedret

    • info om graden er lagt i dl-element (dvs en liste av grupper med term og beskrivelse, og fjernet label som er feil bruk på slike grupperinger og er erstattet label med dt-elementet istedenfor). Grupperingen “Studieretning: <studieretningsnavn>” ligger nå først i listen tilsvarende som for studieknappen som bruker kom i fra.

    • tabellen Tidskontor har fått en caption (tabelloverskrift) (og fjernet en scroll-funksjon for tabellen som ikke er i bruk lengre)

Rettigheter og plikter

  • fjernet tekstvariabel som ikke er i bruk

  • fjernet scroll-funksjon og maks høyde (fra saken STWJS-1589) fra popup-en som også finnes i stegprosessen (som ikke er ønskelig) om skyldes at det er samme komponent som brukes. FUN skal nå ta seg av å legge på scroll-funksjon i en popup om nødvendig.

  • fjernet maks bredden på teksten til avkrysningsboksen

  • fjernet layout br-elementer fordi det har en semantiske betydningen (som betyr at noen SR leser opp ordet blank)

  • lenken “Les innhold” har fått attributtet aria-describedby som refererer til teksten over (ref. 2.4.4 i WCAG 2.0)

  • feilmelding

    • endret teksten slik at den identifiserer tydeligere hvilket skjemafelt det er snakke om

    • utvidet til en statusbeskjed (ref. 4.1.3 i WCAG 2.1)

  • varseltrekant som vises når det er feil er flyttet til ledeteksten til avkrysningsboksen

 

 

Publisert 16. juni 2020 10:21 - Sist endret 16. juni 2020 10:21