Accessibility, what why and how?

Giving access to everyone is part of our job, we are creators so everyone should be able to use what we make, right?. Sadly this is not the case, the web is filled with unaccessible sites. Accessibility should not be disregarded or forgotten, it should be taken in account on every step of the way!

Transcript

1. bit.ly/a11y-what 1
2. Accessibility What, Why and How? By Marjorie Figueroa
3. Disabilities 3 @stephs1515
4. 4 @stephs1515
5. An illness, injury, or condition that makes it difficult for someone to do the things that other people do 5 @stephs1515
6. Impairments Activity limitations Participation Restriction 6 @stephs1515
7. Mismatch between a person’s abilities and their environment 7 @stephs1515
8. Inaccessible environments create disabilities 8 @stephs1515
9. ACCESSIBILITY 9
10. 10 WHAT
11. Ability to access 11
12. Eliminate or reduce barriers that hinder the rights of people with disabilities 12 @stephs1515
13. Being accessible is about making your website available for anyone no matter how they have to use it 13 @stephs1515
14. 14 @stephs1515 WHY
15. BECAUSE IS THE RIGHT THING TO DO 15 @stephs1515
16. The world we live in is in a state of constant change 16 @stephs1515
17. Photo from npr.org Photo by Miss Zhang on Unsplash 17
19. 19 @stephs1515
20. The web is part of our everyday life 20 @stephs1515
21. 59.653.607 21 @stephs1515
22. 97.8% of the analyzed websites contained errors 22 @stephs1515
23. We tend to mirror our experiences into the things that we create 23 @stephs1515
24. Each of us experiences live in a different way 24 @stephs1515
25. Accessibility is often forgotten or disregarded 25 @stephs1515
26. 26 @stephs1515 BUT HOW?
27. Go back to the basics 27 @stephs1515
28. Semantic & Structured HTML 28 @stephs1515
29. Use the right tag in the right place 29 @stephs1515
30. 30 @stephs1515 <button> <div>
31. 31 @stephs1515 Headings Order of elements Tab index
32. Alternative Text <img alt=”Brown dog reading” … /> @stephs1515 Photo by 2Photo Pots on Unsplash
33. 33 @stephs1515 Focus
34. 34 @stephs1515 Safari Chrome Firefox
35. 35 @stephs1515
36. Color & Contrast 36 @stephs1515
37. @stephs1515
38. 38 @stephs1515
39. 39 @stephs1515
40. 40 @stephs1515
41. 41 @stephs1515
42. 42 @stephs1515
43. 43 @stephs1515
44. Text 44 @stephs1515
45. 45 @stephs1515 Simple language Fonts & Icons Photo by micah boswell on Unsplash
46. Media 46 @stephs1515
47. 47 @stephs1515 Captions & Transcriptions Autoplay ads and videos Photo by Sven Scheuermeier on Unsplash
48. 48 @stephs1515 Test Test Test
49. Listen your website 49 @stephs1515
50. Forget about your mouse 50 @stephs1515
51. Automated testing is not enough 51 @stephs1515
52. Who benefits from accessibility? 52 @stephs1515
53. Everyone! Photo by Rob Curran on Unsplash @stephs1515
54. Small changes have a big impact 54 @stephs1515
55. 55 @stephs1515 Let’s get out of our boxes Photo by Erda Estremera on Unsplash
56. Marjorie Figueroa @stephs1515 Photo by Howard Riminton on Unsplash bit.ly/a11ylinks @stephs1515