Innholdsstruktur bør programmatisk forbedres

På flertallet sider har det blitt brukt HTML elementet article, noe som ikke er nødvendig eller hensiktsmessig i forhold til det som blir vist visuelt. En generell tommelfingerregel er at elementet article kun skal brukes når det gjelder spesifikke artikler og som er uavhengig av det andre innholdet på siden eller som er et utdrag fra en del av hovedinnholdet på nettsiden. Elementet article gir en semantisk struktur og kan være forvirrende for brukere som ikke ser grensesnittet dersom dette brukes på “feil” måte. Det er også forventet at en article element skal inneholde en overskrift og en tekst, slik som dere har gjort det på enkelte deler i innholdet. 

Tar vi en titt på hovedsiden kan enkelte områder bli bedre markert programmatisk for å gjøre en tydeligere innholdsstruktur. Per nå er det kun satt fem landemerker på siden med en main og fire artikler områder. For opplesende hjelpemidler blir dette opplest ulikt. I VoiceOver sier det artikkel, I Windows innebygde skjermleser sier det dokument, i NVDA blir ikke landemerket opplest.

Tar vi en titt på HTML elementene aside og section, som også er landemerker, blir de opplest av alle skjermleser og her anbefaler vi å bruke noen av de, sammen med article, for å gi en bedre struktur på siden.

Da kan det se slik ut, se illustrert eksempel nedenfor.

Her har vi både spesifisert de ulike delene på siden og vi har også gitt en tekstlig beskrivelse som gjør det enklere for brukere som ikke ser, til å komme til eventuelt ønsket innhold på siden.
På den måten sikrer vi også at lenketekstene får en programmatisk kobling til hele området.

En programmatisk kobling bør også gjøres på enkelte av deres lister, som for eksempel på siden Fosterhjemstjenester. På den måten skaper vi også en programmatisk relasjon mellom region og fylker.

• Fjern HTML elementet article på områder hvor det ikke er hensiktmessig. For eksempel på utvidbare knapper, lenkelister og lignende.

• Bruk section elementet for å markere opp ulike områder, som for eksempel hvor dere har en overskrift og lenkelister.

• Bruk aside elementet på områder som er komplementær informasjon, som for eksempel på Kontakt oss, finn ditt lokalkontor og informasjonsmøter.

• Fjern nav elementene over respektive liste i Fosterhjemstjenestene. Dette representerer ikke det som forventes å være en navigasjonsområde.

• Koble respektive overskrift med listenes ID verdi, se kodeeksempel nedenfor.

  <h2 class="bd-office-link-list__region-header" id="header-east">Øst</h2>
  <ul class="bl-link-list bl-link-list--pointer"><li><a href="/fosterhjem/kontorer/akershus/" aria-labelledby="header-east">