Tilgjengelighetserklæring for Praksisinformasjon

I Praksisinformasjon brukes horisontale delere. For skjermleserbrukere blir denne lest opp, noe som skaper unødvendig opplesning. 

Legge til en aria-hidden="true" på elementet, slik at den ikke blir opplest.

Det er eksempler på at
- overskrifter ikke er korrekt kodet som overskrifter.
- enkelte overskrifter ligger på samme nivå programmatisk, men som visuelt tyder på en hierarkisk rekkefølge.
- tabeller er i hovedsak kodet riktig med th og td elementer (noen mangler th element), men mangler riktig attribut for å spesifisere hvilken retning overskriften har. 
- avkrysningsbokser er i enkelte tilfeller kodet inne i tabeller
- tabelloverskrifter som beskriver innholdet i tabellen mangler (må komme rett over tabellen).   

Gjør det vanskeligere for skjermleserbrukere å navigere seg på sidene, siden de ikke får brukt hurtigkommandoer til å navigere til forskjellige overskrifter.

Det er videre flere feilmeldinger som ikke er knyttet til inputfeltet, noe som fører til at skjermleserbrukere ikke får umiddelbart informasjon om dette. 

- Forsikre at overskriftet er kodet programmatisk med h-tag, og sørge for at overskrifter havner i riktige nivåer. 

- alle kolonnoverskrifter må kodes med th-elementet. I tillegg må det ha attributet scope som enter peker på rad (="row") eller kolonne (="col").

- En tabell som visuelt ikke ser ut som en tabell, bør ikke kodes som en tabell. 

- Ha tabelloverskrift direkte over tabellene. Her må overskriftene være kodet i en h-tag, eller <caption>

- Sørg for å ha WAI-ARIA attributtet aria-describedby på inputfeltet og koble det sammen med id på elementet hvor feilmeldingen ligger.

Det benyttes lenker som kun skiller seg ut med farger, noe som gjør det vanskelige for svaksynte brukere å skille mellom lenketekst og vanlig brødtekst.

For å skille denne lenken fra vanlig brødtekst kan man blant annet legge en understrek under lenken, eller et ikon.

Det er enkelte informasjonsknapper som utvider informasjon når mus eller tastatur får fokus på den.

Med skjermleser vil den ikke lese opp innholdet i boksen, noe som gjør at de ikke får tilgang til samme informasjon. 

• For ikke komplekst innhold kan Canvas gjøres enkelt tilgjengelig. For kompleks innhold med interaktivitet, er Canvas sjeldent anbefalt. Dette på grunn av at det er ekstremt utfordrende å få det til å fungere bra. Her anbefales det heller å bruke SVG, som på en enklere måte kan legge til interaktivitet tilegjengelig med Javascript. 
• For å kode "tooltip" riktig, følg våres anbefalinger i U210 og Ally-2560. 

Enkelte statusmeldinger dukker kun opp i få sekunder. Dette er noe som påvirker brukere som har kognitive vansker og synsvansker. I og med disse forsvinner raskt, blir det vanskelig for mange brukere å forstå hva statusmeldingen formidlet.

Sørg for at det ikke er tidsbegrensning for statusmeldinger.

Det benyttes en varselmelding inne i en av tjenesten, markert som rødt inne i en rød sirkel, som også vises fram på portalframsiden. Siden informasjonen utgjør kun i farger, kan dette skape vanskeligheter for brukere å forstå hva denne informasjonen utgir. For ikke-seende brukere er det ikke like tydelig.

• Endre til en hjelpetekst som spesifiserer at antall varslinger, eller noe form for tegn som hjelper brukeren til å forstå at det indikseres som varsling. 
• For skjermleserbrukere kan man for eksempel legge til en sr-only på varselmeldingen.

I Praksisinformasjon er obligatoriske felter markert med en asterisk *. Det er ikke garantert at alle brukere forstår hva det betyr og det blir dessuten kun opplest som "stjerne" for de som bruker skjermleser.

For skjermleser formidler man at feltet er obligatorisk ved å bruke aria-required="true". For å unngå at tegnet blir lest opp som stjerne kan man velge å gjøre elementet osynlig for skjermleser ved å bruke aria-hidden="true" og som nevnt, formidle at feltet er obligatorisk ved å bruke aria-required="true". 

Søkefunksjoner:

Det er søkefunksjoner i grensesnittet, og når man skriver inn bokstaver vil søkeforslag vises. For brukere som ikke ser og er avhengig av skjermleser for å ta del av informasjon, blir ikke de varslet om at søkeforslag vises under søkefeltet. Visuelt kan vi også se hvor mange søketreff som gjengis, noe som også bør formidles til skjermleserbrukere. 

Knapper:

Noen knapper i tjenesten er kodet som div, og forteller dermed ikke skjermleserbrukere at dette er en knapp. Det er viktig at knapper er kodet som knapper, slik at skjermleserbrukere vet at de kan utføre en handling ved å trykke på objektet. 

Videre er det enkelte knapper som mangler WAI-ARIA attributtet aria-expanded som forteller skjermleserbrukere at det er en knapp som utfører ekpendering og viser til mer eller mindre informasjon. 

Søkefunksjoner:

• Sørg for å legge til en role="combobox" på div-elementet som er nestet rundt søkeforslagene. 
• Sørg også for at søkeresultatene er listet som lister, sammen med role=listbox" og role="option". Nedenfor lenker vi til en side som man kan ta inspirasjon fra.
  https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html 

Knapper:

• I og med brukere kan utføre en handling ved å trykke på denne knappen, bør disse knappene kodes som knapper. Dette bør helst  gjøres ved å bruke <button>-elementet, men dere kan også bruke role="button" for å formidle til skjermleser at det er en knapp. Bruk aria-label for å gi beskrivelse. 
   
• Sørg for å ha en aria-expanded="true" på knappen når den er utvidet, eller en aria-expanded="false" på knapper når den er minimert. Dette gjør det enkelt for skjermleserbrukere å forstå når et nytt område dukker opp.

- statusmelding vises etter man har gjort en handling. Dette er statusmeldinger som ikke blir gjengitt automatisk for skjermleserbrukere, noe som er viktig for at de skal forstå om de har utført en handling riktig eller feil.

- Statusmeldingen vises også i noen få sekunder, noe som kan være utfordrende for brukere med kognitive vansker som ikke umiddelbart legger merke til denne statusmeldingen.

Ettersom statusmeldingene dukker opp dynamisk, kan man bruke WAI-ARIA attributtet aria-live="polite" sammen med aria-atomic="true" på div-elementet. Et annet alternativ er å flytte fokus manuelt til teksten som sier statusmeldingen.