Bruk av landemarker må forbedres
Landemerker lar hjelpemidler navigere og raskere finne innhold på siden. Overgripende beskriver også landemerker hovedstrukturen på siden for en brukere som ikke ser. Derfor er det viktig at man bruker landemerker riktig. Per nå finnes det ikke noen hovednavigasjon programmatisk markert på siden. Dette er noe som oftest er forventet skal finnes. Det samme gjelder dersom man har et oppsett av lenker som enten leder til ulike deler på samme side eller til andre steder på nettstedet eller eksternt, slik som nede i bunnteksten (engelsk: footere) på siden.
-
Nestle hovednavigasjonen på siden i et nav element. Bruk aria-label og gi tekstbeskrivelse som gjengir hovednavigasjon, se kodeeksempel nedenfor.
<header class="bd-header bl-p-t-4 bl-p-b-4 bl-p-x-3 hidden-print bd-header--closed bd-header--search-closed " data-swiftype-index="false"><nav class="bd-header__topbar" aria-label="hovednavigasjon" style="max-width:auto;margin:auto"> <---Innhold---> </nav> </header> -
Nestle lenkeliste i bunntekst i et nav element og også her bruk aria-label som beskriver lenkelisten, se kodeeksempel nedenfor.
<nav aria-label="lenkeliste, bunnmeny"><div class="bl-footer__links"> <ul> <li><a>...</a></li> </ul> </div> </nav> -
Marker alle søkeområder som et landemerke. Bruk aria-label for å skille de, se kodeeksempel nedenfor.
<div class="bl-search bl-search--closed" role="search" aria-label="Søk"> <div class="bd-search-service" role="search" aria-label="Søk etter nærmeste fosterhjemtjeneste"> <div class="bd-search-service" role="search" aria-label="Søk etter nærmeste lokalkontor">Alternativ kan du bruke aria-labelledby og koble respektive div elementet med role=“search til overskriftens ID på hvert søkeområde, se kodeeksempel nedenfor.
<h1 class="bd-service-search-office__search-office-box-header" id="heading-office">Finn ditt lokalkontor</h1> <div class="bd-search-service" role="search" aria-labelledby="heading-office">Da vil overskriften bli opplest sammen med landemerket.