Hopp til hovedinnhold

Tilgjengelighet testside

På denne siden vises en oversikt over alle fargekombinasjoner som er mulig via Anno sentralt nettsteds design, samt noen eksempler på øvrig fargebruk.

Grunnfarger og fargekombinasjoner

Her er det veldig mange farger, og uvisst hvor mange av dem som brukes aktivt. Uansett er alle kombinasjoner innenfor kontrastmessig.

Merk at om disse fargene brukes som bakgrunner i innholdsseksjoner kan man få utfordringer med tekst og lenkefarger. Dette er noe som evnt må utbedres hvis fargene er aktuelle å bruke til til slikt.

Farger brukt i andre sammenhenger

Brødtekst med lenke .  Ingen problemer her.

Annet

  • Artikkeltittel for stor på mobil. Presser ut skjermbildet ved lange ord.​

ANNO generelt

Dette er ting som bør justeres i sentralt ANNO stilsett og dermed vil bli gjeldende for alle nettstedene som baserer seg på dette stilsettet:

  • Høyrejustere meny (estetisk)
  • Tydeliggjøre lenker i navigasjonssti, footer og bannere med understreking  (1.4.1 / 2.4.4)
  • ​Unngå transparente knapper i bannere for å minimere sjanse for brudd på 1.4.3 (kontrast)  når media ligger bak
  • Unngå transparente menyer over bannere (på forsider) eller sikre lesbarhet i disse ved ulike tiltak (redaksjonelt eller designgrep)  (1.4.3)
  • Øke linjeavstand mellom lenker i lister (brukervennlighet for touchskjermer) samt litt mer avstand mellom tekstavsnitt og linjer i punktlister (1.4.12)
  • Enkelte logoer bør justeres ned noe i størrelse på mindre skjermer (1.4.10)
  • Vurdere en nedjustering av fontstørrelse ved bruk av store titler i bannere på mobil og/eller øke høyden litt på store bannere på mobil. Begge deler for å unngå at tekst blir borte  (1.4.10)
  • Justere farger på de få museene som har generelle kontrastproblemer ifbm med fargene (1.4.3)

Andre feil (teknisk)


Det finnes en del gjennomgående problemer på sidene som i all hovedsak bør komme i orden ifbm versjon 2023.01.00 av Museum24.  Eksempler på dette kan være

  • Manglende fokusmarkering ​ på lenker, knapper,  bannere og skjemafelter (2.4.7)
  • Ikke mulig å stoppe bevegelige bakgrunner (2.2.2)
  • Ikke god nok støtte for tastaturnavigasjon og skjermlesere (1.3.2 / 2.1.1 / 2.4.1 / 2.4.3 / 2.4.7 / 2.5.3 / 3.1.2 / 3.3.2 / 4.1.1 / 4.1.2)
  • Diverse kodefeil. I hovedsak knyttet til WAI-aria attributter som er brukt på feil måte på kort og enkelte andre steder i løsningen.  (4.1.1/2)  

Redaksjonelt

Her de mest typiske redaksjonelle oppgaver:
  • Jobbe med alternativt innhold på bilder (og andre media)  (1.1.1)​
  • Jobbe med overskriftsstrukturer på sidene spesielt sider som starter med en banner ** (1.3.1)
  • Sikre god nok kontrast mellom tekst/knapper i bannere når mediabakgrunn ligger bak  (1.4.3)
  • Begrense tekstmengde i bannere  (1.4.10)

** Gjelder fra m24-versjon: 2023.01.00

Noen utfordringer og råd ved bruk av bannere

  • ​Grunnfarge-skins har gjennomgående transparente knapper hos alle museer. Dette kan gi kontrastproblemer over mediabakgrunner dersom slike skins benyttes.  Dette kan løses/sikres ved å innføre heldekkende bakgrunn i knapper eller ved å velg et "skin" som allerede har heldekkende knapper. Det siste gjelder stort sett alle hvite og sorte skins.
  • Generelt krevende å lykkes med kontrast (1.4.3) ved bruk av bakgrunnsbilder, spesielt dersom disse er bevegelige (slideshow/video). Det er omtrent umulig å teste om man faktisk er innenfor kravene. 
  • Store titler gir størst sannsynlighet for å lykkes med kontrast over mediabakgrunner, men blir de for store og samtidig rommer mye tekst kan man møte på andre problemer ved f.eks skalering (1.4.10).
  • Bannere har i en del tilfeller litt for mye tekst/knapper. Det er fort gjort at summen av tittel, tekst og knapper i bannere kan bli krevende ved forstørring eller på små skjermer (1.4.10)

Noen råd:

  • Bruk egnede bakgrunnsbilder eller vurder andre visningsformer (tekst og bilde sidestilt, eller bilde ovenfor tekst)
  • Plasser tekst på egnet sted over bakgrunnen ved hjelp av verktøyene for å plassere teksten. 
  • Sett deg inn i hvordan filtrene i bannerne fungerer med tanke på å skape litt kontrast. 
  • Ikke ha for mye tekst i bannerne. De skal normalt bare skape veier videre til artikler.
  • Små bannere bør man tenke på som rene "knapper" som settes som klikkbare i sin helhet. Ofte er det tilstrekkelig med en tittel i slike bannere. (dropp knapp og tekst)
  • For "bokser" i vanlige artikler kan man bruke tekstmoduler som gjøres om til tekstboks og så påføres en farge/skin. Disse kan vokse fritt i høyden slik at man ikke mister info eller funsjonalitet.


Se flere råd

Bannere tåler ikke så mye tekst


Bannere skal fungere i et rutenett sammen med andre bannere og hver enkelt banner har derfor normalt sett ikke den egenskap at den kan vokse fritt i høyden for å ta høyde for større mengder tekst (tittel, tekst, knapper).  Hvor stort område det er til teksten i en banner vil avhenge av en rekke faktorer

  • Hvor stor banneren​ er
  • Hvilken layout : Bildeplassering i forhold til tekst
  • Hvor rutenettseksjonen er (denne smalner i takt med smalere skjermer eller nettleservinduer)
  • Hvor stor er skjermen 

Det er såpass mange faktorer involvert at det er vanskelig å lage en teknisk løsning som både sikrer at all tekst og funksjonalitet vises samtidig som banner/rutenett-systemet skal fungere.  Derfor er det viktig å primært bruke bannere for å skape enkle innganger til annet innhold og fatte seg i korthet, slik at sannsynligheten for at tekst/knapper blir borte når plassen blir mindre er minst mulig. Websider skal fungere ned til 260px bredde eller til 400% forstørring uten tap av informasjon eller funksjonalitet. 

Det finnes en banner-laytout (variable-høyde) som kan sikre at tekst ikke blir borte, men denne lar seg ikke bruke dersom man samtidig ønsker å bygge en pent rutenett av bannere. 

PS. Det jobbes med å gjøre bannere mer robuste slik at på små skjermer / kraftig forstørring. Men dette er endringer som kommer ifbm med utvikling av nytt grunnstilsett i Museum24.


Bruk av farger


Museene (og særlig Anno sentralt nettsted) har en del farger som kan brukes som bakgrunner i kort og bannere. Disse fargene fungerer stort sett greit (kontrastmessig) med noen veldig få unntak som er tatt for seg i det enkelte museums rapport.

Merk imidlertid at ikke alle fargene egner seg som bakgrunner i innholdsseksjoner både av estetiske årsaker, men også da det kan oppstå fargekombinasjoner som ikke fungerer godt. Det forekommer også noen tekniske problemer med at font-fargen som følger valgt farge-skin ikke blir gjeldende for all tekst i en seksjon, noe som f.eks kan gi sort tekst på mørk bakgrunn. Dette kan evnt forsøkes utbedres teknisk. Men her må man også se an hvilke farger/skins som egentlig skal/bør brukes for dette formålet. Dette er mer naturlig å se på i en redesign-prosess.

Longreads/introseksjoner


Ved bruk av introseksjoner / longreads anbefaler vi korte budskap (titler primært) som ligger over mediabakgrunnene for å unngå problemer med kontrast (1.4.3).  Man kan bruke enten bannere eller tekstmoduler, men bruke tittelfeltene primært.

Lengre tekster kan man legge i vanlige tekstmoduler i vanlige innholdsseksjoner.

Hvis man ønsker "brødtekst" over media kan man vurdere heldekkende eller semitransparente bakgrunner bak de tekstlige budskapene, men det vil da skjule litt for bildene.

Eksempler:

Her noen eksempler på utfordringer i praksis:

Lenker bør ikke stå for tett (utebedres i felles ANNO stilsett eller Museum24-grunnstilsett)

Her også med gradient og bevisst tekstplassering

Dette er en tekstboks

Den har en mer dynamiske høyde enn bannere, og er dermed bedre egnet når man har lengre tekster.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl diam, semper quis gravida at, tristique ac arcu. Vestibulum at massa sed nibh aliquet tristique. Donec et feugiat ipsum. Integer sem enim, malesuada vitae consequat non, lacinia et ligula. Etiam tincidunt lacus eu tristique placerat. Ut malesuada, nisl eget efficitur rutrum, urna ante suscipit mi, ac bibendum ligula velit eu lorem. Etiam pretium elit eget posuere iaculis. Aliquam malesuada mollis lectus eget aliquam. Etiam volutpat ligula ut ligula sodales ornare. Aliquam at eleifend ligula, sit amet gravida ligula. Sed ac vestibulum mauris, tincidunt vehicula urna.

Tekstmengde i bannere

Man må være oppmerksom på at det er begrenset hvor mye tekst + knapper man bør plassere inne i en banner.  Det er ikke sikkert man oppdager slike problemer før man ser sidene på f.eks mindre skjermer eller ved kraftig zoom.

Se noen eksempler og råd i det følgende:

Sjekk denne banneren her på mobil og du vil se at man ikke har like mye plass til overs som på større skjermer. Så man bør fatte seg i korthet også ved ganske store bannere. Unntaket er dersom man bruker "varable-høyde" layout.

Museum24:Portal - 2025.01.07
Grunnstilsett-versjon: 2