Enkelte lister er ikke satt programmatisk riktig

På siden Prosessen for å bli fosterhjem presenteres en nummerert liste. I koden er dette ikke gjengitt som en liste uten presenteres som en artikkel, som i sin tur har en overskrift med en knapp som utvider et område med tekst. Som nevnt i, anbefaler vi å ikke bruke article elementet i slike tilfeller. Det er helt riktig at elementet skal være en knapp siden den utfør en handling. Knappen er kodet riktig med aria-expanded som gjengir til skjermleser når nytt område er ekspandert eller minimert. Hva det ikke gjengir er at det er en liste med 8 steg, noe som det bør gjøre for at brukere som ikke ser, skal få samme informasjon.

Noe vi også anbefaler er å programmatisk sette opp som lister for innhold eller informasjon som presenteres som en liste visuelt. For eksempel på siden Hvordan det er å være fosterhjem der man har mulighet til å lese om andre sine erfaringer. Hvor mange historier vi kan ta del av, kan vi se visuelt, emn for noen som ikke ser, er det beste praksis å også gjengi dette programmatisk slik at også skjermleser gjengir det totale antallet.

For førstnevnte eksempel anbefaler vi to ting. 

• Å sette opp hele listen med ol elementet og at hver knapp blir nestet i et listelement. Ol elementet står for ordered list på engelsk og skal kun brukes dersom det foreligger en spesifikk rekkefølge i en liste, slik som i dette tilfelle.

• Dersom brukeren navigerer med TAB-tast må vi også sikre at tallet blir opplest i tilknytning til teksten. Dette kan gjøres ved å bruke et span element som kun er synlig for skjermleser, se kodeeksempel nedenfor.

  <span class="sr-only"> 1.</span>
  

• For det andre ovennevnte eksempel anbefaler vi å:

  • Makere hele området som en liste hvor hvert bilde og lenketekst blir satt i et listeelement.

  • Gjør en programmatisk koblig mellom hovedlistelementet (ul) og overskriften, se kodeksempel nedenfor.

    <h2 class="bl-size-2 bl-m-y-5" id="heading-others-experiences">Les om andre sine erfaringer</h2>
    <ul aria-labelledby="heading-others-experiences">
    <li>
    <--Bilder og lenketekst-->
    </li>
    ...
    </ul>