Universell utforming er ikkje glasuren på kaka, det er fundamentet som må vera til stades for å lukkast i webprosjektet. Diverre er det mange som fortsatt «putter på» universell utforming i slutten av eit prosjekt, og dermed trur at nettsida blir bra for alle. Vi må ha kompetanse og samarbeid på tvers av fagfelt for at ei nettside skal bli universelt utforma.

Universell utforming som premiss og føresetnad

Vi må ha kvalitet i alle ledd for at ei nettside skal vera universelt utforma. I prosjektet med å lage uu.difi.no hadde me gode føresetnader for å lukkast: Alle involverte i prosjektet hadde høg kompetanse på området, og universell utforming var ein føresetnad for prosjektet.

Tverrfagleg samarbeid

Prosjektet starta med at med at alle involverte møttest til ein workshop. Her var alle disiplinar representerte.  Sjølv om frontend si primære oppgåve var å kode HTML og CSS, var det viktig å vera med i heile prosessen for å få eigarskap til prosjektet og innblikk i kva Difi ønska at den nye nettstaden skulle innehalde.

Frontend-rolla i dette prosjektet var å levere HTML og CSS. Eg koda statiske HTML-malar som vart implementerte inn i Drupal av Difi sin IT-avdeling. Dette innlegget fokuserer på jobben gjort på frontend, men det var altså mange prosessar som skjedde før, under og etter frontend blei koda.

HTML og CSS

Då struktur, wireframes, innhald og design var på plass, starta jobben med koding. Det er nytta HTML 5 og CSS3 på nettsida. 

HTML er eit markeringspråk som merkar element i eit dokument. Dette kan vera overskrift, lenkje, article, section og så bortetter. Det er viktig at element blir merka korrekt, og det er dette ein kaller semantikk. Det kan samanliknast med eit tekstdokument i Word: for å få generert ei innhaldsliste må alle overskrifter merkast som overskrifter.

Strukturen på dokumentet er spesielt viktig for besøkande på nettstaden som ikkje ønskjer eller ikkje kan sjå design. Døme på dette kan vera ein søkjemotor eller ein blind brukar. 

Ein blind brukar kan navigere på ei nettside ved å hoppe frå element til element, eller bruke hurtigtastar for å liste opp til dømes alle lenkjer og eller alle overskrifter på ei side. Dersom overskrifter ikkje er merka korrekt, vil overskrifta ikkje kome opp i denne lista, og det kan dermed bli vansklegare å oppfatte og vanskelegare å navigere på nettsida. Figur 1 viser korleis overskrifter er bygd opp på ei side som listar opp artiklar på uu.difi.no.

viser struktur på overskrifter i kontekst

Figur 1: Viser struktur på overskrifter i kontekst

Tilsvarande viser figur 2 korleis ein blind brukar hadde sett strukturen dersom vedkommande navigerer ved å liste opp overskrifter. Ein ser då at struktur er viktig for å skjønne samanheng, men at også innhaldet i overskriftene må ha meiningsberande innhald.  

viser overskrifter tatt ut av kontekst

Figur 2: Viser overskrifter tatt ut av kontekst

 uu.difi.no har me brukt HTML5-element. Då standarden er relativt ny og enno ikkje presentert som ein ferdig standard frå WC3, er ikkje all HTML5 støtta i alle nettlesarar. HTML5 har difor vore brukt litt med varsemd, men nettstaden nyttar dei elementa som er mest vanlege og dermed også har god støtte i nettlesarane. Dette er <nav>, <footer>, <article>, <section>, <address>. 

Progressive enhancement

Progressive enhancement er ein strategi for implementering av design. Hovudtanken er at alle brukere skal få tilgang til all informasjon, men at ein godtek at design ser endå betre ut i nye nettlesere enn i eldre nettlesere. Dette er blitt ein populær teknikk.

Me beslutta å bruke CSS3 for å definere skuggar, graderingar og avrunda hjørner. Ein kunne ha koda dette med å bruke bilete, men dette ville krevje fleire spørjingar mot server, samt tyngre nettsider å laste ned for brukaren. 

Ein konsekvens ved bruk av CSS3 er at menyen i Firefox, Chrome, Opera, Safari og Internet Explorer 9 og 10 blir avrunda, medan menyelementa i Internet Explorer 7 og 8 blir firkanta. 

Dette vil ikkje gjere innhaldet på nettsida dårlegare på nokon måte, men brukaren får ei ”rundare” oppleving av nettsida i nyare nettlesere. 

viser meny i flere nettlesere

Figur 3: Viser meny i Firefox, Chrome, Opera, Safari, Internet Explorer 9 og 10

viser meny i to andre nettlesere

Figur 4: Viser meny i Internet Explorer 7 og 8

Responsive design og breakpoints

Difi ønska at nettsidene skulle fungere på alle flater. Dette innebar at vi måtte kode all CSS i relative storleikar slik at kolonner og innhald i disse vert redusert i takt med skjermstorleiken. I tillegg laga me breakpoints eller brekkpunkt til å definere designet på ein meir teneleg måte for mindre skjermstorleikar. Dette var til dømes for mobil der me såg at menyen i desktopdesign måtte endre visning.

desktopdesign av uu.difi.no

Figur 5: Desktopdesign av uu.difi.no

Figur 6: Mobildesign av uu.difi.no

mobildesign av uu.difi.no
 
 

Testing av eigen kode

Undervegs i kodinga er det viktig å teste slik at ein sikrar at ein er på rett veg. Som nemnt innleiingsvis, er ikkje kvalitet noko ein kan «legge på» til slutt, det krev merksemd gjennom heile prosessen, og testing av kode skjedde difor undervegs.  

Nokre nyttige verktøy som blei brukt for å teste semantikk, validering av HTML kode, kontrast og liknande:

I tillegg blei det gjort kvalitetssikring basert på eit system utvikla av Epinova, QA. Desse retningslinjene er laga for sikre kvalitet i eit webprosjekt, og skal alltid utførast før lansering av ei ny nettside.

Testing av kode av tredjepart

Etter at frontend-koden blei laga, gjekk ein tredjepart gjennom koden. Dette for å sikre kvalitet, men også for å få innspel på om ting kunne våre løyst på ein betre måte. Dette er ein nyttig teknikk som er med på å heve kvaliteten på koden, men gjev også mykje læring både til den som vert testa og den som testar. Etter innspel frå tredjepart vart koden vidare forbetra. 

Brukartesting

Sjølv om ein følgjer standardar, retningslinjer og konvensjonar, er ein ikkje sikra ei universelt utforma nettside før ein har testa løysinga på faktiske brukarar. Me gjorde difor testar på målgruppa til nettsida. Dette var redaktørar, utviklarar, og nokre av informantane hadde funksjonsnedsetting. På brukartesten fekk me mange gode innspel, og som førte til endringar som til dømes struktur og fontstorleikar. Etter nokre justeringar kunne me kjenne oss trygge på at løysinga var utforma bra. 

Dette innlegget tek føre seg den delen av arbeidet der frontender var mest involvert. Men som nemnt innleiingsvis er det viktig at alle disiplinar ser fordelen med universelt utforma nettsider, og har kompetansen som trengs. Meir om dette på Tilgjengelighetsdagen 24.oktober 2013.

Forfatter

Forfatterinformasjon
Aud-Marie Hauge
Aud-Marie Hauge jobbar i Epinova med å utvikle frontend-kode (HTML og CSS). Ho er ekspert på brukarvenlegheit og universell utforming.

4 Kommentarer

Skriv ny kommentar

* obligatorisk felt som du må fylle ut for å sende skjemaet.

Kommentarer

Hei, Aud Marie! Du skriver ikke så veldig mye (bortsett fra litt om struktur) som handler om tilgjengelighet. Sidene er fine. Det er en del ting jeg ville gjort annerledes også mht. struktur, men "smaken er som baken osv". Det jeg lurer på er om det er tilgjengelighetsutfordringer du vet om, men som dere ikke klarte å få til slik dere helst ønsket?

Hei Morten :)

Beklager sein tilbakemelding.

Dette innlegget handlar om korleis eg jobba med frontend i prosjektet, som blant anna universell utforming. Etter mi meining går kvalitet og universell utforming som hånd i hanske, så det er vanskeleg å skilje dette frå kvarandre. Responsive web design og progressive enhancement er to teknikker som kan fremme tilgjengelegheita på ei nettside, men det er ikkje gitt at nettsida er tilgjengeleg for alle sjølv om den er responsiv.

Dersom me hadde hatt meir tid, ville eg ha gjort nytte av WAI-ARIA i mykje større grad. Det er ein standard som kan tilføre ei nettside mykje. Delefunksjonaliteten som er brukt på siten er heller ikkje optimal, så den kunne eg tenkt meg å minimere.

Det kunne også våre moro å jobbe meir med å finne gode alternative løysingar som er brukarvenlege for alle og som andre kanskje kan adoptere til sine nettsider.

Litt spesielt at en "referanse side" som Difi har dårlige mobilløsninger (alle bilder strekke inn)

Hei, takk for ditt innspill. Dette er en feil som har skjedd her på bloggen, ellers på sidene skal det være i orden. Vi tar tak i feilen straks. Ta gjerne kontakt per e-post til uu@difi.no dersom du har flere innspill.