Sjekklista du treng for å sikre kvalitet på din nettstad
Gode retningslinjer er kritiske for å levere gode web-løysingar med høg kvalitet på både teknikk og brukskvalitet.
I Epinova har me utvikla separate retningslinjer for backend og frontend, som saman dannar grunnlaget for eit omfattende system for kvalitetssikring, eller QA (Quality Assurance).
Det er viktig at alle har eigarskap til retningslinjene, og å forhindre at det blir subjektive retningslinjer. Det kan vera mange måtar å definere kvalitet på, og det er derfor viktig at det er ein konsensus rundt retningslinjene. Derfor har alle frontendere i Epinova vore med på å lage retningslinjene.
Ingen mystikk
Retningslinjene skal ikkje vere mystiske, men noko alle kjenner til, og som ligg i bakhovudet medan ein jobber på eit prosjekt. Nokre av retningslinjene våre er henta frå W3C sine standarder, medan andre er laga av oss basert på erfaring, utdanning, kompetanse og sunn fornuft.
Me har hatt god erfaring med at alle frontend-utviklarane utfører QA, og ein utfører aldri QA på sin eigen kode. Me ser ei enorm læring av å vurdere andre sin kode.
Vurdering av eksterne prosjekt
I tillegg til å gjera QA av vår eigen kode, brukar me retningslinjene når me tek over prosjekt. Retningslinjene hjelp oss å bli kjent med andres kode på ein systematisk måte, og gjer det enklare å estimere vidare arbeide.
QA-system
For å gjera kvalitetssikringa av prosjekta så effektiv som mogeleg har me laga eit omfattende og eigenutvikla web-basert system for QA.
Hvert punkt i retningslinjene kan bli godkjente, underkjente, ikkje relevante (N/A) eller få spørsmålsteikn. Sistnemnte blir brukt dersom det er usikkerheit kring godkjenning av retningslinja.
Nokre av retningslinjene kan sjekkes med automatiserte verktøy laga av Epinova, medan andre retningslinjer testes ved bruk av gratisverktøy på web.
Nokre retningslinjer må sjekkes manuelt, som :focus-stil, kontraster og liknande.
Gjennomgang med utvikler
Når QA er gjennomført samles involverte i prosjektet for gjennomgang. Eventuelle feil og uavklarte ting blir gjennomgått, og deretter blir resultatet publisert, frå terningkast 1-6, der 6 er beste mogeleg resultat.
Epinova sine QA-retningslinjer for frontend-kvalitet
Retningslinjene for frontend består av fem kategoriar fordelt på 33 retningslinjer. Retningslinjene blir oppdaterte omlag 2 gonger i året for å få med nye standarder og normer, og evt fjerne retningslinjer som ikkje lenger er relevante.
Prosjekt
- QA skal gjøres før lansering.
- Prosjektet er dokumentert i vår interne wiki med skjermbilder av alle skisser, samt kontaktinformasjon.
- Alle filer som er inkludert i prosjektet er faktisk i bruk (bilder, JS, CSS).
- Grafisk leveranse inneholder artikkelmal med eksempel på alle innholdselementer redaktører legger inn. H2-4, bilder, punktliste, nummerert liste, tabell (m/caption og th), blockquote.
Kodekvalitet
- HTML og CSS validerer (som HTML5) for uinnlogget bruker. Unntag: CSS3-attributter og IE-filtre.
- Det er begrenset bruk av !important i stilarket. Mange forekomster kan vitne om dårlig struktur på klasser/containere.
- Klasse- og ID-navn skal ha meningsfulle navn.
- Bruk CSS-sprites og/eller embedding av grafiske elementer i stilarket.
- Stilarket skal ikke inneholde duplikate regler og ingen ubrukte klasse- eller ID-selektorer (i den grad det kan kontrolleres).
- Det er ikke lenket til uforholdsmessig store bilder som blir trykt sammen av nettleser.
Universell utforming / brukskvalitet
- Det finnes lang-attributt på HTML-elementet for aktivt språk.
- Skjulte snarveilenker fungerer med bruk av tabulatornavigasjon (synlig ved :focus). Disse peker på innholdscontainer og ikke tomme lenker.
- alt- og title-attributter er brukt til å gi tilleggsinformasjon til bilder og andre objekter.
- label-element har et for-attributt som matcher skjemakontrollen det tilhører, med mindre label omslutter input-feltet.
- Hovedfunksjonaliteten i løsningen fungerer uten javascript dersom det er spesifisert i kontrakt med kunde. Om det ikke fungerer, vurder en <noscript>-tag med alternativ.
- Lenker er tydeleg markerte (farge er ikke nok - underline er anbefalt). Gjelder spesielt tekst i innholdsfelter, ikke så gjeldende på navigasjon siden den som regel har en helt unik stil.
- Løsningen fungerer å navigere med tastatur (med :focus).
- Løsningen skal gå an å navigere og lese selv om man skrur av bilder i nettleseren.
- Det er vurdert om det er hensiktsmessig å sette tab-indeks.
- Input/textarea-felter skal ha :focus-stil.
- Tabeller er ikke brukt til layout (unntak: XForms i EPiServer).
- Siten skal tåle tekststørrelsesendring på opptil 200% uten å brekke eller at tekst forsvinner.
- Løsningen har god kontrast. WCAG 2.0 AA kontrast 4,5:1, WCAG AAA 7:1.
- Nettstedet ser bra ut i alle nettlesere. IE7+, Chrome, FireFox, Opera, Safari (også på Mac), tablets og mobil.
- Det finnes et eget print-stilark (eller egne printstiler) med fornuftig stiling av alle sidetyper.
- Vurdert om ARIA er relevant.
- Vurdert DIFI-kravene.
Semantikk
- Semantisk korrekt oppbygging. Eks. Overskrifter (h1 > h2 osv), legends i fieldsets, caption på tabeller.
- Lister skal være være lister (<ul>, <ol>, <li>, <dl>, <dt> og <dd> ). Også oppramsinger av ting kan ofte markeres som lister.
Redaktørvennlighet
- Editorstilark: hensiktmessige stiler i editoren, også i "bilde-editoren" dersom det finnes egen stiler for bilder.
- Webdelsoner er satt opp likt i visningsmodus og redigeringsmodus, slik at redaktøren lett forstår kvar webdelene havner.
- URL-navn er fornuftige på de største/viktigste sidene (eksempelvis blir det ofte lagt til "1" bak url-navn som er doble i test (f eks "/om-oss1/blabla"), og som deretter blir med til prod
Nyttige verktøy for å teste kvalitet
Oppsummering
Eit system for kvalitetssikring hjelp oss å kontrollere at både det tekniske og brukskvaliteten blir teken vare på.
Likevel handlar kvalitet i web-prosjekt om meir enn berre retningslinjer. For å lage verkeleg gode nettsider med høg kvalitet treng ein forankring i leiinga, flinke medarbeidere og kultur for kvalitet. Å lage eit sett med retningslinjer kan gjera det lettare å sikre kvalitet, men kvalitet kjem av kulturbygging og medarbeidere med yrkesstoltheit, som ser på håndverk som det viktigaste verkemiddelet.