Accessibility? Mir doch egal.

Wie eine barrierefreie Webanwendung gebaut wird, kann man im Internet an jeder Ecke lesen. Aber wie baut man eigentlich eine Webanwendung, die wirklich nicht barrierefrei ist? Worauf muss man achten, um möglichst viele Benutzer auszugrenzen?

Dieser Talk gibt Antworten auf das Thema Accessibility mal aus einem anderen Blickwinkel. Sarkasmus nicht ausgeschlossen.

Transcript

1. a ce si il ty mir doch egal a b - i c a // @a l // E // 2 .0 .2 1
2. W ll om en uh us . a b - i c a // @a l // E // 2 .0 .2 2
3. Warnung I d es m al w rd n ei we se ra ti ch V rl tz ng n rwäh t. a b - i c a // @a l // E // 2 .0 .2 3
4. ⚠ Warnung D es r al k nn efüh e er et en. a b - i c a // @a l // E // 2 .0 .2 4
5. PSA I d es m al w rd as a ss hl eßl ch ie ei li he or b nu zt. N tür ic s nd mm r ll G sc le ht r em in . a b - i c a // @a l // E // 2 .0 .2 5
6. W r in ch a b - i c a // @a l // E // 2 .0 .2 6
7. H , i h in arnd @a nd ss er e ai @a nd ss er.n t a b - i c a // @a l // E // 2 .0 .2 7
8. I h ra e ft fancy shirts a b - i c a // @a l // E // 2 .0 .2 8
9. I h ie e ie JS co unity a b - i c a // @a l // E // 2 .0 .2 9
10. B n m rg -T am er JSunconf a b - i c a // @a l // E // 2 .0 .2 1
11. I h in Whatever-fit-my-n ds-developer a b - i c a // @a l // E // 2 .0 .2 1
12. u d ch in seit dem 13.3. im HomeO ice a b - i c a // @a l // E // 2 .0 .2 1
13. W ru d es r al ? a b - i c a // @a l // E // 2 .0 .2 1
14. Oft höre ich... a b - i c a // @a l // E // 2 .0 .2 1
15. "M ss ie eb ei e cc ss bl s in?" a b - i c a // @a l // E // 2 .0 .2 1
16. "Nein" a b - i c a // @a l // E // 2 .0 .2 1
17. "E n lüc !" a b - i c a // @a l // E // 2 .0 .2 1
18. U . a b - i c a // @a l // E // 2 .0 .2 1
19. M l hr ic . a b - i c a // @a l // E // 2 .0 .2 1
20. Was so das? a b - i c a // @a l // E // 2 .0 .2 2
21. Darum d es r al . a b - i c a // @a l // E // 2 .0 .2 2
22. W ru d es r al ? P -A Für v E l n s “A b ” u i n r M w . a b - i c a // @a l // E // 2 .0 .2 2
23. W ru d es r al ? P -A Für v E l n s “A b ” u i n r M w . M c -A V M n n u b e W e a s , b l i B e T für u e B . a b - i c a // @a l // E // 2 .0 .2 2
24. D s as t ic t ir li h us mm n. a b - i c a // @a l // E // 2 .0 .2 2
25. M n ön te la t ei en... a b - i c a // @a l // E // 2 .0 .2 2
26. B rr er fr ih it? mir doch egal! a b - i c a // @a l // E // 2 .0 .2 2
27. aber... a b - i c a // @a l // E // 2 .0 .2 2
28. W s st ig nt ic d es s barrierefrei a b - i c a // @a l // E // 2 .0 .2 2
29. ? a b - i c a // @a l // E // 2 .0 .2 2
30. “C lo C nt as ” a b - i c a // @a l // E // 2 .0 .2 3
31. ”T st ts eu ru g” a b - i c a // @a l // E // 2 .0 .2 3
32. ”r ac -a e” a b - i c a // @a l // E // 2 .0 .2 3
33. ”e li t-p ug n-j x-a11y” a b - i c a // @a l // E // 2 .0 .2 3
34. “T b-I de n r -1 o er 0!" a b - i c a // @a l // E // 2 .0 .2 3
35. N in. n in. n in. Nein. a b - i c a // @a l // E // 2 .0 .2 3
36. also... a b - i c a // @a l // E // 2 .0 .2 3
37. B rr er fr i A e W i , h :// d .w i .o /w / B e _I t ”B e I t n W - A e, i o a N u än o i E än e t c Mög i u s än (b e ) g w kön . i N e B s I t s e n u s i G e e B s „I t“ i e W d W .” a b - i c a // @a l // E // 2 .0 .2 3
38. B rr er fr i D I t -A s z än für l M n. U än v - E h än /k S ög - m c B äc g - E än i Hör /T t - k v B äc g a b - i c a // @a l // E // 2 .0 .2 3
39. B rr er fr i T ;D 4 E än n e r t c , g e e kör h N 4 "B e " h ßt a , s I t u än d z än s a b - i c a // @a l // E // 2 .0 .2 3
40. W s st en n n o ch er an barrierefreien Internetseiten? a b - i c a // @a l // E // 2 .0 .2 4
41. Punkt #1 F ls he nn hm n a b - i c a // @a l // E // 2 .0 .2 4
42. F ls he nn hm n B is ie e us em ro ek al ta 4 “W w , w E ät i K e b n” 4 “B e i s t ” 4 “W k u B r ” 4 “E d län , i m a s ät ” a b - i c a // @a l // E // 2 .0 .2 4
43. F ls he nn hm n - B is ie e us em ro ek al ta “W r is en, w lc e nd erät d e un in en en tz n” ! W e i d g i : ”W kön u e ät , w t c A r a E ät e K e e ül “ — s B i öße, I t d , v e B . a b - i c a // @a l // E // 2 .0 .2 4
44. F ls he nn hm n - B is ie e us em ro ek al ta “W r is en, w lc e nd erät d e un in en en tz n” I a w h s ? 4 W min-width a i S e ? 4 B öt g ße D s (1 +) c T - G ? 4 W a G ät i M , T r, S e e T b ? a b - i c a // @a l // E // 2 .0 .2 4
45. F ls he nn hm n - B is ie e us em ro ek al ta “B rr er fr ih it st eu r” I a w h s ? 4 S s k e M s n t e U n 4 B e i s D e z r r e I n g n e c 4 S f üh P i F n o g e U - E e h r a b - i c a // @a l // E // 2 .0 .2 4
46. F ls he nn hm n - B is ie e us em ro ek al ta “W r en en ns re en tz ri ne ” E Üb n . K h j n, d .. 4 ...e B t äg 4 ...A e t i ? 4 ...e Hör ät t äg ? 4 ...f l i ? 4 ...s e r g e h ? a b - i c a // @a l // E // 2 .0 .2 4
47. F ls he nn hm n - B is ie e us em ro ek al ta “E d ue t än er, w r ac en as pät r” B e i n äg e u s a mög , e f g e F d-N i – s l g o A c D i b üc i . ! T -R o n I s r l c s h f üh p n f e a b - i c a // @a l // E // 2 .0 .2 4
48. Punkt #2 P an ng au wa d a b - i c a // @a l // E // 2 .0 .2 4
49. P an ng au wa d 4 K n n müs s äl g w 4 W e a e f /g S e f h 4 D i W üb S l n i a b - i c a // @a l // E // 2 .0 .2 4
50. P an ng au wa d K mp ne te - s hn tt müs en or fäl ig ep an w rd n 4 A t i id, for, label e role müs d r n k v t w 4 T r u e r f A u o E - H n n F -S ! t c n v e F n n z d i c a b - i c a // @a l // E // 2 .0 .2 5
51. P an ng au wa d W ed rv r- w nd ar ei b i u ei en/g ob n ch it en ra li h 4 S f : a k e , s l K t o e E l 4 S g : K n n e B g-B n b t L , e ül f h l e Z ! f f i E n i b e K n n r e d h - n h h a b - i c a // @a l // E // 2 .0 .2 5
52. P an ng au wa d D ta ll er es is en üb r te er le en e ot en ig B l 4 W I t - Mög i b e e <button>? 4 W läs c n A l i e T r s ? ! e “f n” H - E e i <select> e <input> s B e i m s e u a b - i c a // @a l // E // 2 .0 .2 5
53. P an ng au wa d D ta ll er es is en üb r te er le en e ot en ig 4 o r u e v e i s äl g n l E l f g ät 4 B e i r m s h s ät P b üc i ! a füh n u G üh o "M w ", o i S ät öße e i s o A f w . a b - i c a // @a l // E // 2 .0 .2 5
54. G da ke ex er me t a b - i c a // @a l // E // 2 .0 .2 5
55. G da ke ex er me t S el en ir ns in b rr er fr ie eb ei e or. a b - i c a // @a l // E // 2 .0 .2 5
56. G da ke ex er me t W e ch ieße w r ög ic st ie e en ch n us? a b - i c a // @a l // E // 2 .0 .2 5
57. L t's ui d al s a b - i c a // @a l // E // 2 .0 .2 5
58. W lc e rt n on in ch än un en ib e ? a b - i c a // @a l // E // 2 .0 .2 5
59. V su ll E ns hrän un en a b - i c a // @a l // E // 2 .0 .2 5
60. E ng sc rän te /k in eh er ög n H c für M n i e h än S ög 4 S s c e o i 2 % b a b 4 K t z n e F müs mög g ß s 4 S l B f o B n L 4 V l I t u ("t d ") 4 S s M v e , S e o u üt 4 G r o z d g ör E e a b - i c a // @a l // E // 2 .0 .2 6
61. B st ra ti es V su ll E ns hrän un en a b - i c a // @a l // E // 2 .0 .2 6
62. B st ra ti es V su ll E ns hrän un en a b - i c a // @a l // E // 2 .0 .2 6
63. W rs P ac ic s V su ll E ns hrän un en a b - i c a // @a l // E // 2 .0 .2 6
64. W rs P ac ic s: V su ll E ns hrän un en 4 S e c Mög i a i ße , s k s s H v e ! a s e e R : u <div>-E e r . 4 Z a v e , b l i n äs <meta>-A : <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum- scale=1, minimum-scale=1, width=device-width, height=device-height" />. → B e U -E e , e d i D l e r i , i Z - E f i [+/-]-B . e B z n u D i n m . a b - i c a // @a l // E // 2 .0 .2 6
65. W rs P ac ic s: V su ll E ns hrän un en 4 I t r n u v : 4 A L k v e : d d u g O e i l e D t (N i , I v h , H r , E än I ) 4 <h1> w S -H k w e n <h2> d u g e <span class="headline-2"> t n. 4 <article>, <aside> n <section> v e . 4 S l n L n äs b n: <a>click here</a>. a b - i c a // @a l // E // 2 .0 .2 6
66. W rs P ac ic s: V su ll E ns hrän un en 4 I t für T - n A v -D v e : title="..."-A t b n → z m i T a 4 N c k n s a n — u o e S e v e , s w role=status e i a -l =[a v |p ]` a b - i c a // @a l // E // 2 .0 .2 6
67. W rs P ac ic s: V su ll E ns hrän un en 4 A role i a är e e n c Mög i i t R üb e , b l : 4 i S e ü role="menu-item" 4 <button role="link"> n <a role="button">. ! T n o n n B s b r p d : B l c d [SPACE] n [Return] b ät , L u d [Return], d üc o [SPACE] s n B i e. a b - i c a // @a l // E // 2 .0 .2 6
68. M to is he ee nt äc ti un en a b - i c a // @a l // E // 2 .0 .2 6
69. M to is he B ei träc ti un en H c für M n i m c B äc g 4 G ße K äc für L n B 4 T r u 4 G ßzüg g e F r n E e e i a h A z d 4 G ör S r 4 w P e a t E e a b - i c a // @a l // E // 2 .0 .2 6
70. W rs P ac ic s M to is he ee nt äc ti un en a b - i c a // @a l // E // 2 .0 .2 7
71. W rs P ac ic s: M to is he ee nt äc ti un en 4 A e e u m "M O "-E e b t . → a F äc k g e → e c u für e v c M üs → I u e g üc g n M t s r 4 S äc , I t e n E f k mög g e , b . a X e P . 4 B d , a t E e v e , i e T u s ör . a b - i c a // @a l // E // 2 .0 .2 7
72. W rs P ac ic s: M to is he ee nt äc ti un en 4 I t v u , S -W m r → a e j E -S n i L -L g ? 4 S d-V e u T -b e E ät än , u B l * { touch-action: none; } → s t g e l T - I t a 4 S k d i , s I t g n a b - i c a // @a l // E // 2 .0 .2 7
73. W rs P ac ic s: M to is he ee nt äc ti un en 4 T r u u n e d e r , s u i [TAB] d i S n r w n ! N n e "M s" e e S -A - P -G ät w e e a h . a b - i c a // @a l // E // 2 .0 .2 7
74. E ns hrän un en ei Hör n/T ub ei a b - i c a // @a l // E // 2 .0 .2 7
75. E ns hrän un en ei Hör n/T ub ei H c für M n i b äc m Hör ög 4 A I t c T m v üg 4 k H r -G äu 4 K mög i n u e T s t (b . e K -V z ) a b - i c a // @a l // E // 2 .0 .2 7
76. W rs P ac ic s: E ns hrän un en ör er ög n/T ub ei a b - i c a // @a l // E // 2 .0 .2 7
77. W rs P ac ic s: E ns hrän un en ör er ög n/T ub ei 4 W e I t n l V e P b t 4 W s A V e P , n b i s t a e o n N räu 4 H r i , i a i s 4 S a E e A i z , b l V -b e z F u e T a a b - i c a // @a l // E // 2 .0 .2 7
78. K gn ti e ee nt äc ti un en a b - i c a // @a l // E // 2 .0 .2 7
79. K gn ti e ee nt äc ti un en H c für M n i k v B äc g 4 E e S 4 I t a s r 4 K e L u a S e W - A s 4 K , v än F e n a b - i c a // @a l // E // 2 .0 .2 7
80. W rs P ac ic s: K gn ti e ee nt äc ti un en a b - i c a // @a l // E // 2 .0 .2 8
81. W rs P ac ic s: K gn ti e ee nt äc ti un en 4 N Mög i , u B üc i m v Fül ör , N ät , A äh n e e F ör , l Sät b , w d h, n s , u äl äßi — e a s A n e — s i l n l e e S ! b i W i s s e - h :// s .w i .o a b - i c a // @a l // E // 2 .0 .2 8
82. W rs P ac ic s: K gn ti e ee nt äc ti un en 4 N A o e b d E e s 4 A o n d i e l e m : @media (prefers-reduced-motion) { /* ... */ } ! e r d n c A b F s , n s e c e l K t e l w . a b - i c a // @a l // E // 2 .0 .2 8
83. T ol a b - i c a // @a l // E // 2 .0 .2 8
84. T ol T ol kön en ns ab i el en, u se e rb it ic ti z m ch n. 4 P üf o K t 4 K e T e n T r t 4 A t T e B 4 S s H 4 V e o o e l F C -E a b - i c a // @a l // E // 2 .0 .2 8
85. T ol T ol kön en ns ab i el en, u se e rb it ic ti z m ch n. A n i . M e T n u d , m e S h a k , b l a V r o S - A e . B B e i s e e M M u . e s t n a e a M . a b - i c a // @a l // E // 2 .0 .2 8
86. Z sa me fa su g a b - i c a // @a l // E // 2 .0 .2 8
87. ! B rr er fr ih it st mit technischen Mi eln ausgedrückte E pa hi a b - i c a // @a l // E // 2 .0 .2 8
88. Z sa me fa su g W o c a c g ... 4 d a m c s a g n 4 b u P i a g s 4 d k i c j n, e P e d h a b - i c a // @a l // E // 2 .0 .2 8
89. Barrierefreiheit H lf u s ll n a b - i c a // @a l // E // 2 .0 .2 8
90. B rr er fr ih it il t ns ll n 1. B e i x b 2. U Z c w e I t a 3. M n u e r Hör u S s 4. K l r a , O p s 5. T s, H -A a u t i K mög i a b - i c a // @a l // E // 2 .0 .2 9
91. B rr er fr ih it il t ns ll n B l B e i x b E än - k v - m c - v A T är a b - i c a // @a l // E // 2 .0 .2 9
92. B rr er fr ih it il t ns ll n B l U Z c w e I t a E än - k v - m c A T är a b - i c a // @a l // E // 2 .0 .2 9
93. B rr er fr ih it il t ns ll n B l M n u e r Hör u S s E än - k v - m c A T är a b - i c a // @a l // E // 2 .0 .2 9
94. B rr er fr ih it il t ns ll n B l K l r a , O p s E än - v A T är a b - i c a // @a l // E // 2 .0 .2 9
95. B rr er fr ih it üt t ns ll n B l T s, H -A a u t i K mög i E än - Hör ög - g . k v A Mög w p n a b - i c a // @a l // E // 2 .0 .2 9
96. Fazit a b - i c a // @a l // E // 2 .0 .2 9
97. W r ol te B rr er fr ih it on nf ng n erüc si ht ge a b - i c a // @a l // E // 2 .0 .2 9
98. We schon nicht für andere, da doch wenigstens für uns selbst. O er em nd n, d n ir en en. a b - i c a // @a l // E // 2 .0 .2 9
99. B rr er fr ih it W nn ch n ic t ür nd re, d nn oc w ni st ns ür ns el st. D a d üb n . 4 S l S o e C r → A o → v e E än 4 K h t E n H c → Rüc b → m c E än 4 N räu i K ör → E än Hör ög 4 g P e → A /U r → k v E än a b - i c a // @a l // E // 2 .0 .2 9
100. a b - i c a // @a l // E // 2 .0 .2 1