Gå till slutet av bannern
Gå till början av bannern

Ikoner - 1177

Hoppa till slutet på meta-data
Gå till början av metadata

Du visar en gammal version av den här sidan. Visa nuvarande version.

Jämför med nuvarande Visa sidhistorik

« Föregående Version 7 Nästa »



Ikoner

Tjänster under 1177 Vårdguidens varumärke använder primärt varumärkesspecifika och egenritade ikoner i röd eller blå färgskala

Röda ikoner finns främst i ramverket i sajthuvud (navigation) eller i sajtfoten (stödlänkar).
Där ikonerna snarare ligger i anslutning till en funktion eller länk ska de vara blå.
Ikoner som inte är länkade, knutna till en funktion eller ett navigationselement är grå (undantag: förstoringsikon på bilder).

1177.se använder sig uteslutande av varumärkesspecifika och egenritade ikoner.


Övriga ikoner

Vissa övriga verktyg eller tjänster under varumärket 1177 kan behöva ytterligare ikoner för vissa funktioner. Här hänvisar vi till att använda Google Material designs ikonbibliotek. Ikonerna ska vara med ramlinje (ej fyllda).
Dessa ikoner används bara i de fall det inte är möjligt att använda varumärkesbrandade ikoner.

Länkade ikoner ska vara blå.
Ej länkade ikoner ska vara grå.

Exempel på tjänst som använder Google material designs ikoner är Vårdgivaringångarna.

 

Material

Ikoner

Här finns 1177 Vårdguidens varumärkesspecifika ikoner i svg och png. (Finns även i Sketchbiblioteket):

Övriga ikoner

Google Material designs ikonbibliotek

Exempel

Några exempel på hur vi använder ikoner med hjälp av Fontello eller som SVG filer inbäddade i CSS koden.

Do’s and Don’ts

  • Använd primärt varumärkesspecifika och egenritade ikoner.

  • Röda ikoner = för ramverket i sajthuvud (navigation) eller i sajtfoten (stödlänkar).

  • Blå ikoner = funktion eller länk

  • Grå ikoner =ej länkade, knutna till en funktion eller ett navigationselement

Tillgänglighet

Även för ikoner, som utgör en form av grafiskt element på sidan, gäller samma kriterier som för bilder generellt under WCAG 2.1 Nivå AA. Se riktlinjer under Tillgänglighet.

  • Alternativ text (ALT-text) när ikonen saknar kompletterande text.

  • Tillräcklig storlek för en klickbar yta (om ikonen är klickbar)

  • Tillräcklig kontrast mellan ikon och bakomliggande element

Research på komponenten

-

Relaterade resurser/komponenter

  • Sketchbiblioteket

Status

Status

FÄRDIG FÖR TEST / INVÄNTAR GRANSKNING

Publicerad

2020-01-18

Senast uppdaterad

2020-01-20

  • Inga etiketter