PowerPoint-Prsentation

Simple techniques to make your site more Moritz GiemannTecDay 17.11.2016 @ 1&1

1

Accessible!

7

https://commons.wikimedia.org/wiki/File:1-19-Martin-Luther-King-ftr.jpg

2

7

https://commons.wikimedia.org/wiki/File:1-19-Martin-Luther-King-ftr.jpg

Life's most persistent and urgent question is,

Martin Luther King'What are you doing for others?'

3

8

4

9

https://flic.kr/p/4xtq5o

5

10

6

11@MoritzGiessmann

Frontend @ 3C Developmentmoritz-giessmann.de

12

8

9

14

?

10

15A11Y == Accessibility

15A11Y == Accessibility11

16

Barrierefrei?

16

Barrierefrei?

17

Accessible?

18Zugnglich!

Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging. W3C Web Accessibility Initiativehttp://www.w3.org/WAI/intro/accessibility.php 19

http://www.who.int/mediacentre/factsheets/fs352/en/index.htmlEiner von sieben Menschen hat eine Behinderung20

http://www.who.int/mediacentre/factsheets/fs352/en/index.htmlEiner von sieben Menschen hat eine Behinderung20

http://www.who.int/mediacentre/factsheets/fs352/en/index.htmlEiner von sieben Menschen hat eine Behinderung15%20

21A11Y ist fr Menschen mit Behinderungen?

22A11Y ist fr ALLE**Es ist nur eine Frage der Zeit, wann es fr uns wichtig wird.

23A11Y == Usability

24

Barrieren?

25

AkustischMotorischKognitivVisuell

Barrieren

25

26

Akustisch

27

27

https://www.youtube.com/watch?v=2v79hFGGcGo

28

29

Motorisch

https://en.wikipedia.org/wiki/Boxer%27s_fracture#/media/File:Neck_Fracture_of_the_Fourth_Metacarpal_Bone.png

30

Maushttp://www.integramouse.com/startseite/

31

32

Kognitiv

33

http://www.nachrichtenleicht.de/streit-ueber-schokolade.2046.de.html?dram:article_id=355252

34

35

36

Visuell

37

37

38

38

39

39

40

40

41

42

https://flic.kr/p/8VCm2w

42

43

https://flic.kr/p/r2zzf5

43

44

44

45Nur das Wichtigstewird in diesem Vortrag besprochen

Sehr wichtige Sache46

47

AkustischMotorischKognitivVisuell

Barrieren

47

48

AkustischMotorischKognitivVisuell

Barrieren

48

49

1243WahrnehmbarBedienbarVerstndlichRobust

49

1Wahrnehmbar50

Semantisches HTML51

Screenreader navigieren via Semantik52

http://ajaxian.com/wp-content/images/periodic_table.png

53

???http://ajaxian.com/wp-content/images/periodic_table.png

54

Standardmig fokussierbareElemente!54

55Interaktionselement

Delete Mail

55Interaktionselement

Delete Mail

56Interaktionselement

Delete Mail

Content verstecken57

58Screenreader lesen nichts vor was mit display:none; versteckt wurde!

59display:none; ?

.is-insivible {display:none;}

59display:none; ?

.is-insivible {display:none;}

60Screenreader Element

.is-invisible {position: absolute;left: -9999px;}

Alternativen frNicht-Text-Content61

Welchen Zweck erfllt das Bild?

Was beinhaltet das Bild?

Fehlt ohne das Bild eine wichtige Aussage?62Fragen!

Textgrafik

63

Foto, Grafik, etc.

64

http://web.de/magazine/unterhaltung/stars/heino-18418494

Back to mail list

65

Funktionsgrafik

Schmuckgrafik, Tracking Pixel etc.

Farben67

68

68

68

69Farbe !== alleiniges Unterscheidungsmerkmal

70

1243WahrnehmbarBedienbarVerstndlichRobust

75

71

http://9gag.com/gag/aGwwgQ7

2Bedienbar72

Alle Formularfelderbrauchen !73

74

74

Formulare ohne knnen vom Screenreader-Nutzer nicht verstanden werden75

76Name

!Alle Formularfelderbrauchen !

77

Name

Alle Formularfelderbrauchen !

Pinch to Zoom78

https://www.raywenderlich.com/50398/opengl-es-transformations-gestures

85

80Zoom verbieten?

81Zoom zulassen!