Bilder och ikoner
Använd bilder och ikoner endast om det finns ett tydligt användarbehov.
Logotyper
KB har två olika logotyper, dels en kombinerad logotyp med symbol och text och dels en logotyp enbart i text.
Logotyperna används bland annat i sidhuvudet och bör då länka till tjänstens startsida. Om logotypen används för navigation som i sidhuvudet så bör det framgå i alt-texten (alt="Kungliga bibliotekets webbplats"). Läs mer i avsnittet Sidhuvud.
Om logotypen används i annat syfte, kan alt-texten ange att det är en logotyp (alt="Kungliga bibliotekets logotyp" eller så kan alt-attributet vara tomt (alt=" ").
Ge logotypen klassen .logotype så att dimensioner och andra attribut hanteras korrekt. Det finns även hjälpklasser som .logo-small och .logo-large som kan användas i kombination med logotype-klassen.
Logotyper bör, precis som andra bilder, alltid ha attributet alt. Detta underlättar för användare som använder skärmläsare. Om man vill att skärmläsare inte ska ta hänsyn till logotypen så behöver alt-attributet finnas men vara tomt (alt=" "). Title-attributet ska då inte finnas eller vara tomt. Mer information om detta finns på W3C:s webbplats.
För tjänster med unikt uttryck, ange logotypen i Cabin (?). (Det här behöver undersökas).
Kombinerad logotyp
Den kombinerade logotypen består av en symbol och Kungliga biblioteket skrivet i text runt om symbolen. Logotypen finns i svart och vitt. Denna ska alltid användas i sidhuvudet för KB:s tjänster.
Ladda ner logotyp
.logo-small
.logo-large
<img src="./assets/kb_logo_black.svg" class="logotype [modifier class]" alt="Kungliga bibliotekets logotyp" />
<img src="./assets/kb_logo_white.svg" class="bg-black logotype [modifier class]" alt="Kungliga bibliotekets logotyp" />Textlogotyp
Textlogotypen består av Kungliga biblioteket utskrivet i text. Logotypen finns i svart och vitt.
Ladda ner logotyp:
.logotype-text-white .logotype-text-black
<img src="./assets/kb_text_black.svg" class="logotype " alt="Kungliga biblioteket" />
<img src="./assets/kb_text_white.svg" class="bg-happy-magenta logotype " alt="Kungliga biblioteket" />Logotyp som klass
I vissa fall kan man vilja sätta bilden som bakgrund på ett element. Då kan du använda dessa klasser.
För att positionera bakrunden kan man använda sig av background-position.
.logotype-black
.logotype-white
.logotype-grey
.logotype-text-black
.logotype-text-white
<div class="pattern-box bg-gray-dark logotype [modifier class]" alt="Kungliga bibliotekets logotyp"></div>Ikoner
Ikoner behöver vara enkla, tydliga och bör kompletteras med text.
Vi använder Font Awesome som är ett open source bibliotek för ikoner.
För fler exempel på hur man kan använda Font Awesome, se deras egna exempel.
För exempel på tillgänglighetsanpassning, se sidan om accessability.
<i class="fa fa-star" aria-hidden="true"></i>Bilder
Tänk på att använda passande proportioner för bilder. För att ge bilder en ram, ange klassen .image-frame
Använd alltid alt-attributet för bilder. Denna bör innehålla en beskrivande text om bilden. Texten bör vara kort och innehålla viktiga nyckelord. Om bilden används som länk bör alt-texten beskriva vart länken leder istället för bilden i sig. Alt-texten visas som alternativ istället för bilden om denna av olika anledningar inte kan visas. De är även centrala för sökmotorer. Alt-texter underlättar för användare som använder skärmläsare.
Title-attributet kan användas för att ge användaren ytterligare information om bilden. Texten kan vara en längre beskrivning eller en uppmaning för att få användaren att agera. Texten visas när man hovrar över bilden.
Om man vill att skärmläsare inte ska ta hänsyn till bilden så behöver följande gälla:
- alt-attributet används men är tomt (alt=" ").
- title-attributet används inte eller är tomt (title=" ").
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Devil_codex_Gigas.jpg" alt="Uppslag ur Codex Gigas där en av sidorna visar djävulen" class="image-frame" />Favicon
Favicon är en ikon som används för att representera hela webbsidan och visas till vänster i adressfältet, samt i bokmärken.
Använd KBs logotyp?
Exempel: (bild)
Beta-flaggor
Visa tjänstens status tydligt i sidhuvudet. Dessa flaggor används för att signalera att tjänsten är i Beta.
Dessa flaggor är enbart tillfälliga och kommer ses över, nya varianter kommer!
Ladda ner:
<div class="logo-box bg-happy-blue">
Variant 1<br/>
<img src="./assets/beta_1.png" />
</div>
<div class="logo-box bg-happy-blue">
Variant 2<br/>
<img src="./assets/beta_2.png" />
</div>
<div class="logo-box bg-happy-blue">
Variant 3<br/>
<img src="./assets/beta_3.png" />
</div>