Sjekkliste for web standard

Popular web design and developlment pages & tutorials translated into Norwegian

Norwegian translation of Russ Weakley's article “Web Standards Checklist”. Please note: this page is a Norwegian translation of Russ Weakley's article Web Standards Checklist, located here: Web Standards Checklist. Vennligst bemerk: denne siden er en norsk oversettelse av Russ Weakley sin artikkel Web Standards Checklist, beliggende her: Web Standards Checklist

Web standard - mer enn bare nettsteder uten tabeller

Begrepet web standarder kan bety forskjellige ting for forskjellige personer. For noen er det nettsider uten tabeller, for andre er det "å bruke gyldig kode". Men web standarder inneholder mye mer enn dette. Et nettsted laget etter web standarder bør faktisk følge standarder (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG osv.) og følge beste praksis (gyldig kode, tilgjengelig kode, semantisk riktig kode, bruker-vennlig nettadresser osv.).

Med andre ord, et nettsted bygget etter web standarder bør ideelt sett være tynn, ren, CSS-basert, tilgjengelig, brukervennlig og søkemotor vennlig.

Om denne sjekklisten

Dette er ikke en uber-sjekkliste. Det er sannsynligvis mange elementer som kunne blitt lagt til. Enda viktigere bør den ikke oppfattes som en liste av elementer som må håndteres på hvert nettsted som du jobber på. Det er bare en veiledning som kan benyttes:

Sjekklisten

  1. Kvaliteten av koden
    1. Bruker nettstedet riktig Doctype?
    2. Bruker nettstedet et Character set?
    3. Bruker nettstedet gyldig (X)HTML?
    4. Bruker nettsteder gyldig CSS?
    5. Bruker nettstedet CSS hacks?
    6. Bruker nettstedet class eller id unødvendig?
    7. Er koden velstrukturert?
    8. Har nettstedet lenker som ikke fungerer?
    9. an fremfører nettstedet når det gjelder nedlasting/størrelsen på sidene?
    10. Har nettstedet JavaScript error?
  2. Mengden separasjon mellom innholdet og presentasjonen
    1. Bruker nettstedet CSS for aller aspekter av presentasjon (fonts, colour, padding, borders osv.)?
    2. Er alle decorative bilder i CSS koden, eller er de fremlagt i (X)HTML?
  3. Tilgjengelighet for brukere
    1. Er "alt" attributten brukt for alle bildene i innholdet?
    2. Bruker nettstedet relative mål istedenfor absolutt mål til tekst størrelsen?
    3. Er det deler av framføringen som ikke fungerer om man øker størrelsen på fontene?
    4. Bruker nettsteder synlige metoder å hoppe forbi menyene?
    5. Bruker nettsiden form som er tilgjengelige for alle?
    6. Bruker nettsiden table som er tilgjengelige for alle?
    7. Er farge lysheten/kontrasten stor nok?
    8. Brukes bare farger for å skille viktig informasjon?
    9. Er det forsinket reaksjonsevne for drop-down menyer (for brukere med reduserte motorikk)?
    10. Er alle lenker beskrivende (for blinde brukere)?
  4. Enhet tilgjengelighet
    1. Fungerer siden på en akseptable måte tvers moderne og eldre nettlesere?
    2. Er innholdet tilgjengelig med CSS avslått eller om CSS ikke er støttet?
    3. Er innholdet tilgjengelig om bilder er avslått eller ikke er støttet?
    4. Fungerer nettsteder i tekst-baserte nettleser som Lynx?
    5. Fungerer printet versjoner av nettstedet?
    6. Fungerer nettstedet bra i hånd heldte enheter?
    7. Inkluderer nettstedet detaljert metadata?
    8. Fungerer nettstedet bra i en mengde størrelser på nettleseren?
  5. Grunnleggende Brukervennlighet
    1. Er det klar visuell hierarki?
    2. Er nivåene på titler lett å skille?
    3. Er navigasjonen lett å forstå?
    4. Er navigasjonen konsekvent?
    5. Inneholder nettstedet konsekvent og aktuell tekst?
    6. Har nettsteder en site til sitemap og kontakt? Er sidene lette å finne?
    7. For større nettsteder, er det en måte å søke?
    8. Er det en lenke til hjemmesiden på hver side av nettstedet?
    9. Er lenker understreket?
    10. Er det lett å identifisere besøkte lenker?
  6. Site management
    1. Har nettsteder meningsfulle og nyttige 404 feilsider som fungerer fra hele siden?
    2. Bruker nettstedet brukervennlige URL?
    3. Fungerer URLene dine uten "www"?
    4. Har nettsteder en favicon?

1. Kvaliteten av koden

1.1 Bruker nettstedet riktig DOCTYPE?

En DOCTYPE (forkortelse for "dokumenttypen erklæringen") informerer validatorer hvilken versjon av (X) HTML du bruker, og må vises på toppen av hver nettside. Doctyper er en viktig del av kompatibel nettsider: din kode og CSS validerer ikke uten dem.

Fiks nettstedet ditt med riktig DOCTYPE

Mer:

1.2 Bruker nettstedet et Character set?

Hvis en bruker agent (for eksempel en nettleser) ikke er i stand til å gjenkjenne tegnkodingen som blir brukt i et web-dokument, kan brukeren bli presentert med uleselig tekst. Dette er spesielt viktig for dem som opprettholder og utvikler et nettsted på flere språk, men å erklære tegnkodingen av dokumentet er viktig for alle som produserer XHTML / HTML og CSS.

Tutorial: Tegnsett og kodinger i XHTML, HTML og CSS

Mer:

1.3 Bruker nettstedet gyldig (X) HTML?

Gyldig kode fungerer raskere og bedre enn kode med feil. Nettlesere blir stadig mer kompatibel med standarder, og det blir mer å mer nødvendig å skrive gyldig HTML kode som er basert på standard.

Hva er gyldig kode

Mer:

1.4 Bruker nettstedet gyldig CSS?

Du må sørge for at det ikke er noen feil i enten HTML eller CSS koden, siden feil i den ene kan resultere i et dokument som ser svært feil ut.

Hjelp! CSS koden min fungerer ikke!

Mer:

1.5 Bruker nettstedet CSS hacks?

I utgangspunktet kommer hacks ned til personlig valg, hvor mye kunnskap du har av løsningene og hva du prøver å å oppnå.

Standard Hacks?

Mer:

1.6 Bruker nettsteder klasser eller IDer unødvendig?

Jeg har lagt merke til at utviklere å lære nye ferdigheter ofte ende opp med god CSS men dårlig XHTML. Nærmere bestemt i HTML-koden har en tendens til å være full av unødvendige divs og IDer. Dette resulterer i nokså meningsløst HTML og oppsvulmet stilark.

Kode taktikk

1.7 Er koden korrekt strukturert?

Semantisk korrekt kode bruker HTML-elementer for deres formål. Vel strukturert HTML har semantiske betydning for en rekke brukeragenter (nettlesere uten stilark, tekst-nettlesere, PDA, søkemotorer osv.)

Semantisk korrekt kode

Mer:

1.8 Har nettstedet lenker som ikke fungerer?

Lenker som ikke fungerer kan frustrere brukerne og potensielt drive bort kunder. Lenker som ikke fungerer kan også holde søkemotorer fra å indeksere nettstedet riktig.

Mer:

1.9 Hvordan utfører nettstedet med tanke på hastighet / sidestørrelse?

Ikke tving meg til å vente... Det er meldingen brukere gir oss i undersøkelser om og om igjen. Selv bredbånd brukere kan lide fra nettsteder som laster sakte.

Gjør nettsiden din raskere: Nettside Optimalisering

1.10 Har nettstedet JavaScript feil?

I Internet Explorer til Windows kan du slå på et feilsøkingsprogram som vil vise seg i et nytt vindu, og fortelle deg om det er javascript feil på nettstedet. Dette er tilgjengelig under "Internet Options" i kategorien Advanced. Skru av Disable script debugging.

2. Skill mellom innhold og presentasjon

2.1 Bruker nettsted CSS til alle aspekter av presentasjonen (fonter, farger, marginer, kanter osv)?

Bruk stilark til å styre layout og presentasjon

Web Content Accessibility Guidelines 1.0 - Sjekkpunkt 3.3

2.2 Er alle dekorative bilder i CSS, eller er de synlige i (X) HTML koen?

Målet for webutviklere er å fjerne all presentasjon fra HTML-koden, å forlate den ren og semantisk korrekt.

Hvorfor bruke CSS for å skille innhold fra presentasjon?

3. Tilgjengelighet for brukerne

3.1 Blir "alt" attributten brukt for alle beskrivende bilder?

Legg til tekst som beskriver alt som ikke er tekst

Web Content Accessibility Guidelines - Sjekkpunkt 1.1

3.2 Bruker nettsteder relative enheter istedenfor absolutte enheter for tekststørrelse?

Bruk relative og ikke absolutte enheter som verdiene til tekststørrelse i CSS

Web Content Accessibility Guidelines - Sjekkpunkt 3.4

Mer:

3.3 Holder nettstedet sammen om skriftstørrelsen økes?

Prøv denne enkle testen. Se på nettstedet i en nettleser som støtter enkel forstørrelse av skriftstørrelse. Prøv nå å øke skriftstørrelsen. Og igjen. Og igjen... Se på nettstedet ditt. Holder sideoppsettet fortsatt sammen? Det er farlig for utviklere å anta at alle surfer med standard fontstørrelser.

3.4 Har nettstedet en enkel måte å hoppe forbi menyer?

En metode skal gis som tillater brukere å hoppe forbi repeterende menyer.

Section 508

Plasser lenker som er like i grupper, identifiser gruppen (for brukeragenter) og inntil brukeragenter gjør det, gi en måte å omgå gruppen

Web Content Accessibility Guidelines - Sjekkpunkt 13.6

...brukere som er blinde er ikke de eneste som syns for mange lenker i et navigasjonsområde er uleilig. Huske at en med svekket motoriske evner med dårlig tilpasset teknologi kan bli sittende med TAB tasten for å bla gjennom hindringen.

Hold dem synlige!

3.5 Bruker nettstedet tilgjengelige skjemaer?

Skjemaer er ikke så enkle å bruke for personer med funksjonshemninger. Å navigere rundt en side med skriftlig innhold er en ting, å hoppe mellom felt og legge inn informasjon er en annen

Tilgjengelige skjemaer

Mer:

3.6 Bruker nettstedet tilgjengelige tabeller?

For datatabeller, identifiser rad og kolonneoverskrifter... For datatabellene som har to eller flere logiske nivåer av rader eller kolonneoverskrifter, bruk kode for å knytte dataen med overskriftene.

Web Content Accessiblity Guidelines - Sjekkpunkt 5.1

Mer:

3.7 Er det tilstrekkelig farge lysstyrke/kontrast?

Sørg for at forgrunn og bakgrunn fargekombinasjonene gir tilstrekkelig kontrast når sett av noen med vansker med å skille farger

Web Content Accessibilty Guidelines - Sjekkpunkt 2.2

Mer:

3.8 Brukes bare farger til å skille kritisk informasjon?

Sørg for at all informasjon som formidles med farger, for eksempel fra sammenhengen eller kode er også tilgjengelig uten farge

Web Content Accessibilty Guidelines - Sjekkpunkt 2.1

Det er hovedsakelig tre typer fargemangel; Deuteranope (en form for rød / grønn farge underskudd), Protanope (en annen form for rød / grønn farge underskudd) og Tritanope (blå / gul underskudd - veldig sjelden).

Mer:

3.9 Er det forsinket reaksjonsevne for rullegardinmenyer?

Brukere med reduserte motoriske ferdigheter kan ha vanskeligheter med drop-down menyer dersom respons tiden er for rask.

3.10 Er alle koblingene beskrivende?

Lenke teksten skal være meningsfylt nok til å høres fornuftig ut om lest ut av kontekst - enten på egen hånd eller som del av en sekvens med lenker. Lenketeksten bør også være konsis.

Web Content Accessibility Guidelines 1.0 - Sjekkpunkt 13.1

4. Tilgjengelighet for enheter

4.1 Fungerer nettstedet akseptabelt på moderne og eldre nettlesere?

Før du begynner å lage et CSS-basert nettsted, bør du bestemme hvilke nettlesere som skall støttes og til hvilket nivå du ønsker å støtte dem.

Boks med farger - en metode for å bygge full CSS fremstillinger

4.2 Er innholdet tilgjengelig dersom CSS er avslått eller ikke støttes?

Det er noen som besøker nettstedet ditt med en nettleser som ikke støtter CSS eller en nettleser med CSS avslått. Om innholdet er strukturert bra, vil ikke dette være et problem.

4.3 Er innholdet tilgjengelig dersom bilder er avslått eller ikke støttes?

Noen surfer med bilder slått av - særlig folk på svært langsomme tilkoblinger. Innhold bør fortsatt være tilgjengelig for disse menneskene.

4.4 Fungerer nettstedet i tekst-baserte nettlesere som Lynx?

Dette er som en kombinasjon av bilder og CSS avslått. En tekst-basert nettleser vil stole på strukturert innhold for å gi mening.

Mer:

4.5 Fungerer nettstedet bra på trykk?

Du kan ta hvilken som helst (X) HTML-dokument og slett stil til det kun for utskrift, uten å berøre koden.

Skal du skrive ut

Mer:

4.6 Fungerer nettstedet bra i håndholdte enheter?

Dette er en vanskelig å forholde seg til før håndholdte enheter støtter deres riktige medietype. Enkelte utforminger fungerer bedre i dagens håndholdte enheter. Hvor viktig det er å støtte håndholdte enheter vil avhenge av målgruppene til nettstedet det er snakk om.

4.7 Inneholder nettstedet detaljert metadata?

Metadata er maskinforståelig informasjon på nettet

W3C - Metadata og Ressurs Beskrivelser

Metadata er strukturert informasjon som er laget spesielt for å beskrive en annen ressurs. Med andre ord, er metadata 'data om data'.

4.8 Fungerer nettstedet bra i en rekke størrelser (på vinduet til nettleseren)?

Det er en vanlig antakelse blant utviklere at skjermstørrelser øker gjennomsnittlig. Enkelte utviklere antar at den gjennomsnittlige størrelsen er nå 1024px bredt. Men hva med brukere med mindre skjermer og brukere med håndholdte enheter? Er de en del av målgruppen, og er de vanskeligstilte?

5. Basic Brukervennlighet

5.1 Er det en klar visuell hierarki?

Organiser og prioritere innholdet på en side ved hjelp av størrelse, framspring og innhold relasjonen

Opprett en Clear Visual Hierarki

5.2 Er nivåene på titler lett å skille?

Bruk tittel elementer (h1, h2, osv.) for å formidle dokumentstrukturen og bruk dem i henhold til spesifikasjonen

Web Content Accessibility Guidelines 1.0 - Checkpoint 3.5

5.3 Er nettstedet sin navigasjon lett å forstå?

Navigasjonssystemet skal gi de besøkende en anelse om hvilken siden de er på og hvor de kan fortsette.

Design Tutorial - Navigasjon

5.4 Er nettstedet navigasjon konsekvent?

Hvis hver side på nettstedet har en gjennomført stil på presentasjonen, vil besøkende finne det lettere å navigere mellom sidene og finne informasjon

Juicy studios - Navigasjon

5.5 Bruker nettstedet konsekvent og aktuell språk?

Bruk av klart og enkelt språk fremmer effektiv kommunikasjon. En som prøver å være så artikuler som mulig kan være så vanskelig å lese som dårlig grammatikk, spesielt om språket som brukes er ikke besøkerens hovedspråk.

Klart språk

5.6 Har nettstedet har en sitemap og kontakt side? Er de enkle å finne?

De fleste sitemap mislykkes å formidle flere nivåer av nettstedets informasjonsarkitektur. I brukervennlighetstester overser ofte brukere sitemap eller kan de ikke finne den. Kompleksitet er også et problem: en sitemap bør være et kart, og ikke selv vanskelig å navigere.

Sitemap Brukervennlighet

5.7 For store nettsted, finnes en måte å søke?

Mens dette er ikke nødvendig på mindre nettsteder, og noen mennesker bruker dem aldri, en måte å søke gir brukerne navigeringsvalg.

5.8 Finnes det en lenke til hjemmesiden på hver side av nettstedet?

Noen brukere liker å gå tilbake til hjemmesiden etter å ha navigert til innhold innenfor nettstedet. Hjemmesiden blir en hjemmebase for disse brukerne, som tillater dem å gruppere før de utforsker nytt innhold.

5.9 Er lenker understreket?

Bruk farge og understrek for å maksimere klikkbarheten av lenker. Brukere skal ikke måtte gjette eller muse-over hele siden for å finne ut hvor de kan klikke.

Retningslinjer for å visualisere Lenker

5.10 Er besøkte lenker synlig markert?

Det viktigste av å vite hvilke sider de allerede har besøkt frigjør brukere fra å besøke sidene om og om igjen.

Endre fargen på besøkte lenker

6. Administrering av et nettsted

6.1 Har nettstedet har en meningsfull og nyttig 404 feilside som fungerer fra hele nettstedet?

Du har bedt om en side - enten ved å skrive inn en URL direkte i adresselinjen eller ved å klikke på en utdatert lenke, og du har funnet deg selv i midten av internett-ingenting. Et bruker-vennlig nettsted gir deg en hjelpende hånd, mens mange andre vil rett og slett ikke gjør noe, avhengig av nettleserens innebygde evne til å forklare hva problemet er.

Den perfekte 404 siden

6.2 Har nettstedet brukervennlige webadresser?

De fleste søkemotorer (med noen få unntak - nemlig Google) vil ikke indeksere sider som har et spørsmålstegn eller andre tegn (som spørsmålstegn eller erlik) i adressen ... Hva er vitsen med en nettside hvis ingen kan finne den?

Søkemotorvennlige nettadresser

En av de verste elementene på internettet fra brukerens ståsted er adresser. Men hvis de er korte, logiske og selv-korrigerende, kan adressene bli brukbare

Hvordan lage nettadresser brukervennlige

Mer:

6.3 Fungerer nettstedet uten "www"?

Selv om dette ikke er kritisk, og i noen tilfeller er det ikke engang mulig, er det alltid godt å gi folk valget mellom begge alternativene. Hvis en bruker skriver domenenavnet uten www og ikke får nettstedet, kan dette ulempe både brukeren og deg.

6.4 Har nettstedet et Favicon (favorittikon)?

En Favorittikon er et multi-oppløsning bilde som finnes på nesten alle profesjonelt utviklet nettsteder. Favorittikonen lar en fremme sitt nettsted, og å skape et mer tilpasset utseendet innenfor nettleseren til besøkeren

Favicon.com

Favicons er definitivt ikke kritisk. Men hvis de ikke er til stede, kan de forårsake 404 feil i loggene dine (områdestatistikken). Nettlesere som IE vil be dem fra serveren når et område er bokmerkede. Hvis et favorittikon ikke er tilgjengelig, en 404-feil kan bli generert. Derfor har et favorittikon kunne kutte ned på favorittikon bestemt 404-feil. Det samme gjelder for en robots.txt-fil.

Mer om denne listen

Denne sjekklisten ble først beskrevet i en grov form på Web Standards Mail listen i mai 2004. Den ble presentert for Sydney Web Standards Group på 5. august 2004. Den er også tilgjengelig som en nedlastbar pdf fil for utviklere.