4.5 - Alt innhold er korrekt kodet

Alt innhold må kodes korrekt og leveres i en form som sikrer at det kan presenteres i ulike brukeragenter uten at informasjon og struktur går tapt. Nettsted og tjenester skal utformes slik at de følger vedtatte standarder.

Publisert: 04. jul 2017, Sist endret: 04. jul 2018

Dette innebærer at valideringskravet følger den standarden som er deklarert. Er HTML 5 deklarert, må nettsidene altså validere i henhold til HTML 5. Tjenesten må også fungere sammen med kompenserende teknologi og i ulike brukeragenter.

Hovedspråket skal deklareres i HTML-taggen, se veiledning for deklarering av språk.

TestpunkterPoeng (55)
CSS brukes for å skille mellom form og innhold.5
Semantisk HTML brukes for sikre samsvar mellom innhold og koding.20
Delvis - Semantisk HTML-koding er tatt i bruk, men ikke på en tilstrekkelig systematisk måte.10
Hovedspråket er deklarert i HTML-taggen.5
HTML-koden på 90 prosent av undersøkte sider på nettstedet validerer uten syntaksfeil.15
HTML-koden på 80 prosent av undersøkte sider på nettstedet har 10 eller færre syntaksfeil.7
HTML-koden på alle undersøkte sider i tjenesten validerer uten syntaksfeil.10

Slik tester du

Både nettsted og tjeneste testes for bruk av CSS, semantisk HTML, deklarering av språk og for validering av HTML-kode (syntaks). Bruk W3C Markup Validation Service for HTML-validering og sjekk den semantiske kodingen med støtte i verktøy som Structure-funksjonen i Web Accessibility Toolbar eller Outline-funksjonen i Web Devloper Toolbar.

Bruk av CSS for å skille form og innhold

Sjekk at CSS brukes for å skille form og innhold, og om tabeller brukes til layout. Gjør følgende tester på både nettsted og tjeneste:

  1. Skru av CSS med QuickJava i Firefox. Kontroller at all formatering blir tilbakestilt.
  2. Skru på tabellmarkering med Web Developer Toolbar (Outline – Outline Tables) eller Web Accessibility Toolbar (Tables - Table borders). Eventuelle tabeller vil nå være innrammet. Kontroller og vurder bruken av tabeller. Dersom tabeller aktivt er benyttet til layoutformål skal det ikke gis poeng for bruk av CSS.

Semantisk koding i tjenester

Testutvalget av skjemaelementer er avhengig av hvilke elementer som den aktuelle tjenesten har tatt i bruk. I og med at skjemaelementene i HTML brukes til å identifisere alt fra et enkelt input-felt, for eksempel et søkefelt, til kompliserte tjenester med flere og omfattende grupper med input-felt, gjør vi en skjønnsmessig vurdering av hvilke konkrete krav som skal gjøres gjeldende for den aktuelle løsningen. Generelt vil krav om bruk av «label» gjelde for de fleste input-felt, mens kravet om «fieldset» og «legend» gjelder for mer kompliserte nettskjema med grupper av input-felt med flere enn tre elementer. 

Følgende krav er eksempler på hvilke elementer som vil bli testet for hva, dersom de inngår i tjenesten:

  • Skjema: HTML-elementene “label”, “fieldset”  og “legend” er benyttet. Label-elementet brukes sammen med «for»-attributtet og ved bruk sammen med skjema (form)-elementet skal disse kobles korrekt sammen ved at attributtet «for» har samme verdi som skjema-elementets id-attributt. Dersom «legend» er tatt i bruk skal tekstinnholdet være beskrivende.
  • Knapper (buttons): Funksjonelle knapper er kodet med korrekte attributter og verdi. Dette kan for eksempel se slik ut: <input type=”submit” value=”Send inn”>.
  • Tekstelementer: Overskrifter er kodet riktig (h-tagg). Overskriftene skal, i tillegg til å være beskrivende, også ha rett bruk av overskriftsnivå for å strukturere teksten. I tillegg blir lister og brødtekst også testet for korrekt semantisk kode. Gjelder også informasjonssider tilknyttet tjenesten.

Semantisk koding på nettsteder

I likhet med testing av semantikk i digitale tjenester, vil vi også på nettsteder kunne teste de elementene som er mye brukt. I hovedsak vil vi teste overskrifter, brødtekst og lister.

Firefox – WDTB – Outline – Outline Custom Elements (skru også på «Show Elements Name When Outlining» i samme meny). Legg til disse 3 linjene (med eller uten teksten i parentes, det spiller ingen rolle, de bare forklarer hva de gjelder) i dialogboksen som kommer opp, og trykk OK):

  • Element 1: P,(tekstavsnitt)
  • Element 2: H1,H2,H3,H4,H5,H6,(overskrifter)
  • Element 3: OL,DL,UL,LI,DD,DT,(lister)

Test startsiden og tre sider på nivå 2. Kontroller at tekstavsnitt, overskrifter (se også at overskriftsnivåene er rett) og lister blir rammet inn. Alternativt kan Structure-funksjonen i Web Accessibility Toolbar benyttes som testverktøy.

Alternativet for "delvis" når det gjelder semantisk korrekt koding omhandler testsituasjoner der vi ser at semantisk koding er tatt i bruk, men at slik koding ikke i tilstrekkelig grad er systematisk gjennomført på alle testede elementer.

Språkdeklarering

IE – WAT – Doc Info – Show Lang Attributes. Kontroller at lang=”xx” ligg i HTML-taggen, for eksempel på denne måten <html lang=”no”>. Det er også godkjent at xml:lang=”xx” ligger i tillegg til lang=”xx”, men xml:lang="" alene er ikke godt nok.

Det er hovedspråket, altså det som er mest brukt på hver side, som skal deklareres. Sjekk både nettstedet og tjenesten.

HTML-validering

Vi sjekker omtrent 100 tilfeldige sider per nettsted mot W3C sin validator. Det finnes ulike verktøy på markedet som kan validere flere sider i en operasjon, eller du kan bruke W3C sin HTML-validator (en side om gangen).

Gi 15 poeng dersom minst 90 % av de undersøkte sidene validerer. Gi 7 poeng dersom minst 80 % av de undersøkte sidene har 10 eller færre feil.

I tjenesten kan du bruke W3C sin HTML-validator dersom tjenesten er tilgjengelig for alle. Dersom det finnes tilgangsbegrensninger (f.eks om tjenesten har innlogging), bør du bruke "Validate local HTML" i "Web developer toolbar" eller kopiere kildekoden og bruke W3C sin "Validate by direct input". Alle sider i tjenesten skal validere for å få poeng.

 

Deldette