Løsningsforslag per krav 1.3.2 Meningsfylt rekkefølge

Hva er kravet?

1.3.2 Meningsfylt rekkefølge.

Hva bør jeg teste?

Her er en oppsummering av våre testregler og hva som er forventet resultat av testingen.

Løsningsforslag for 1.3.2 Meningsfylt rekkefølge

Ved å legge de ulike elementene i riktig rekkefølge i koden og å følge kodestandarder kommer disse til å bevare meningsfylt rekkefølge også med stilark skrudd av. Nettsider kan bestå av ulike grupper av elementer som må legges i rett rekkefølge. En slik gruppe kan for eksempel være en meny, eller et bilde.

Grupper av innhold med meningsfylt innhold

En nettside kan for eksempel bestå av en meny med mange lenker til ulike deler av nettstedet. Siden kan også inneholde andre elementer som bilder med tilhørende bildebeskrivelser, og ulike artikler. CSS blir brukt for å posisjonere elementene på siden. I dette tilfellet kan man velge hvordan de ulike gruppene skal plasseres i forhold til hverandre, for dette påvirker ikke meningsinnholdet på siden. Derimot er det viktig å passe på at leserekkefølgen til elementene i de ulike gruppene er den samme, eller på en annen måte presenterer det samme meningsinnholdet. Det betyr at menyen er én meningsfylt rekkefølge som må ivaretas, bilder med alt-tekst og bildebeskrivelser en annen, og teksten i artiklene en tredje.

Eksempel:

En nettside fra en museumsutstilling inneholder en navigasjonslinje som inneholder flere lenker. Siden inneholder også et bilde av et av bildene fra utstillingen, en overskrift til bildet og en detaljert beskrivelse av bildet. Lenkene i navigasjonslinjen danner en meningsfull sekvens. Overskriften, bildet og teksten i beskrivelsen danner også en meningsfull sekvens. CSS brukes til å plassere elementene på siden.

HTML

<h1>Min museumsside</h1>
<ul id="nav">
<li><a href="#">Lenke 1</a></li>
...
<li><a href="#">Lenke 10</a></li>
</ul>
<div id="beskrivelse">
<h2>Mona Lisa</h2>
<p>
<img src="img.png"
alt="Mona Lisa">
</p>
<p>...detaljert beskrivelse av bildet...</p>
</div>

CSS

ul#nav {
float: left;
width: 9em;
list-style-type: none;
margin: 0;
padding: 0.5em;
color: #fff;
background-color: #063;
}
ul#nav a {
display: block;
width: 100%;
text-decoration: none;
color: #fff;
background-color: #063;
}
div#description {
margin-left: 11em;
}