1

Så gör du intranätet tillgängligt för alla Intranätverk, 31 mars 2015

Pia Flodquist

2

Upphovsrätt CC- BY Illustrationer @PiaFlodquist

= dela gärna men ange pictogram.se #webbriktlinjer

källa webbriktlinjer.se thenounproject.com

3

Agenda

»Varför?

»Vem?

»Vad?

»Hur?

4

Created by Irene Hoffman & Lazar Nikolic from the Noun Project

Varför?

5

VARFÖR?

Varför?

6

7

» Andel av Sveriges

befolkning med

någon typ av

funktionsnedsättning

Källa: Statistiska centralbyrån, Jordbruksverket

Vem?

8 Källor: Statistiska centralbyrån, Centrum för lättläst

?

25% 15%

100 % har behov ibland!

9

10

Vad? ALT-texter är viktiga, men de är inte ALLT!

11

Vad?

1. Möjlig att uppfatta

2. Hanterbar

3. Begriplig

4. Robust

Från WCAG

Principer för tillgänglighet

12

Möjlig att uppfatta med

hörseln eller känseln Koda för skärmläsare!

• Beskriv allt viktigt med text

• Label på inmatningsfält

• Korrekta H-taggar (rubriker)

• Ange språk med lang

• ARIA landmarks

• ARIA live

• Provlyssna!

Erbjud talsyntes?

Syntolka video?

13

Möjlig att uppfatta för den

som använder synen

Texta video! Transkribera tal! Teckentolka?

•Tillräcklig kontrast

•Teckenstorlek till 200%

• </blink>

14

»Använd färger med bra kontraster.

» Tips: Colour contrast analyser

(the paciellogroup)

15

Möjlig att uppfatta

16

Hanterbar

17

Hanterbar

18

• Placera inte länkar för tätt.

• Framhäv länkar grafiskt.

• Gör en länk av ikon + text.

• Förstora klickbara ytor.

Gör länkar, klickbara ytor och

menyer hanterbara

19

Begriplig

20

Tydliga rubriker och länkar

21

Begriplig rubriker och länkar

22

Begriplig struktur

• Innehåll -bra rubriker!

• Nyckelord.

• Viktigaste först.

• Verb.

• Rätt h-taggar.

23

"Det säger Stockholms läns landsting i

en ny rapport om vården. För att läsa

hela rapporten, klicka här."

Skriv istället:

"Det säger Stockholms läns landsting i

rapporten. "Kvalitetsindikatorer i Hälso-

och sjukvården” (pdf 1,5 Mb).

Begripliga länkar

24

Begripliga felmeddelanden

25

Robust

Responsiv

Robust

26

27

Hur?

Webbriktlinjer.se

28

Ställ krav vid beställningar:

• Uppfylla WCAG 2.0 AA

• Erfarenhet av webbriktlinjer.se

CC-BY Åke Walldius, Clas Thorén,

Användningsforum.se

29

Låt riktiga

användare testa!

Testa regelbundet!

30

– Validator.w3.org

– Colorbrewer - kartor

– Fangs (skärmläsartest)

– VoiceOver (skärmläsare)

– Resizer – olika upplösning

– Colour contrast analyser

– …

Använd verktyg

31

Hur?

• Bestäm

• Fördela ansvar

• Tilldela resurser

33

Pia Flodquist @PiaFlodquist

pia.flodquist@metamatrix.se

Metamatrix facebook.com/metamatrix.ab

@metamatrix

Slut