Top Banner
1 Digital accessibility and intranets Intranätverk, 20 May 2015 Pia Flodquist
32
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Digital accessibility and intranets

1

Digital accessibility and intranets Intranätverk, 20 May 2015

Pia Flodquist

Page 2: Digital accessibility and intranets

2

Copyright CC- BY Illustrations @PiaFlodquist

= please share but set pictogram.se #webbriktlinjer

source webbriktlinjer.se thenounproject.com

Page 3: Digital accessibility and intranets

3

Agenda

»Why?

»Who?

»What?

»How?

Page 4: Digital accessibility and intranets

4

Created by Irene Hoffman & Lazar Nikolic from the Noun Project

Why?

Page 5: Digital accessibility and intranets

5

WHY?

Why?

Page 6: Digital accessibility and intranets

6

Page 7: Digital accessibility and intranets

7

» Proportion of

Sweden's population

with some type of

disability.

Source: Statistiska centralbyrån, Jordbruksverket

Who?

Page 8: Digital accessibility and intranets

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

?

25% 15%

We all have special needs!

Page 9: Digital accessibility and intranets

9

Page 10: Digital accessibility and intranets

10

What? Alt-tags are important, but there is a lot more!

Page 11: Digital accessibility and intranets

11

What?

1. Perceivible

2. Operable

3. Understandable

4. Robust

WCAG

4 principles for accessibilty

Page 12: Digital accessibility and intranets

12

Possible to perceive for those

who use their ears or fingers Code for screen readers!

• Describe everything important

with text

• Label on input fields

• Correct H-tags (headings)

• Set language with lang-tags

• ARIA landmarks

• ARIA live

• Try a screen reader!

Offer speech synthesis?

Simultaneous signing video?

Page 13: Digital accessibility and intranets

13

Possible to perceive for

those who use their eyes

Texta video! Transkribera tal! Teckentolka?

• Contrast (background &

text)

• Resize text 200%

• Do not </blink>

Page 14: Digital accessibility and intranets

14

»Use colors with good contrast.

» Tool: Colour contrast analyser

(the paciellogroup)

Page 15: Digital accessibility and intranets

15

Possible to perceive

Page 16: Digital accessibility and intranets

16

Operable

Page 17: Digital accessibility and intranets

17

Operable

Page 18: Digital accessibility and intranets

18

• Do not place links too close.

• Highlight links graphically.

• Make one link (icon + text).

• Enlarge clickable areas.

Links, clickable areas and

navigation has to be operable

Page 19: Digital accessibility and intranets

19

Understandable

Page 20: Digital accessibility and intranets

20

Tydliga rubriker och länkar

Page 21: Digital accessibility and intranets

21

Understandable -

headings and links

Page 22: Digital accessibility and intranets

22

Understandable structur

• Content – distinct

headings!

• Keywords.

• The most important

content first.

• Verb.

• Correct use of h-tags.

Page 23: Digital accessibility and intranets

23

“… says Stockholm County Council in a

new report on health care. To read the

full report, click here.“

Write instead:

“… says Stockholm County Council in the

report." Quality indicators of health

care“ (pdf 1.5 MB)

Understandable links

Page 24: Digital accessibility and intranets

24

Understandable feedback

Page 25: Digital accessibility and intranets

25

Robust

Responsive

Robust

Page 26: Digital accessibility and intranets

26

Page 27: Digital accessibility and intranets

27

How?

Guidelines - Webbriktlinjer.se

Page 28: Digital accessibility and intranets

28

Demand for procurement:

• WCAG 2.0 AA

• Experience of accessibility

guidelines – webbriktlinjer.se

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

Användningsforum.se

Page 29: Digital accessibility and intranets

29

Usability testing

with real users!

Test regularly!

Page 30: Digital accessibility and intranets

30

– Validator.w3.org

– Colorbrewer - maps

– Fangs (screen reader test)

– VoiceOver (screen readers)

– Resizer – see different

resolution

– Colour Contrast analysis

Use tools

Page 31: Digital accessibility and intranets

31

How?

• Determine

• Partition the

responsibility

• Assign resources

Page 32: Digital accessibility and intranets

33

Pia Flodquist @PiaFlodquist

[email protected]

Metamatrix facebook.com/metamatrix.ab

@metamatrix

The End