Web a11y - programming with empathy | Web a11y, czyli programowanie z empatią

Temat dostępności (a11y) zyskał ostatnio rozgłos wśród społeczności developerów i nie jest trudno zrozumieć, dlaczego... Według Światowej Organizacji Zdrowia na świecie żyje ponad miliard osób z niepełnosprawnościami. Te statystyki pozwalają nam zdać sobie sprawę, że przez nieumiejętne tworzenie aplikacji możemy nieumyślnie wykluczać gro osób blokując im dostęp do tworzonego przez nas oprogramowania. Chcemy jednak tworzyć produkty, które są naprawdę dla każdego - niezależnie od sposobu interakcji.

W tej prezentacji przejdziemy przez praktyczne przykłady pozwalające zadbać o dostępność aplikacji internetowych.

Dowiemy się jak dbać o poprawne działanie strony z czytnikami ekranu i innymi urządzeniami wejściowymi; do czego służą znaczniki ARIA i jak je wykorzystywać przy tworzeniu customowych komponentów. Przyjrzymy się stylom, które pomogą użytkownikom niedowidzącym łatwo i niezawodnie nawigować po stronach. Na koniec podpowiem co zrobić, aby wszystkie te zasady sprawnie zaimplementować w swojej codziennej pracy.

Transcript

1. Web a11y, czyli programowanie z empatią Dorota Owczarek | nexocode
4. 4.5 mln Polaków
5. co ósmy Polak jest osobą z niepełnosprawnością
7. niepełnosprawności stałe - osoba z jedną ręką
8. niepełnosprawności stałe niepełnosprawności czasowe - osoba z jedną ręką - osoba ze złamaną ręką
9. niepełnosprawności stałe niepełnosprawności czasowe niepełnosprawności sytuacyjne - osoba z jedną ręką - osoba ze złamaną ręką - rodzic z dzieckiem na ręce
10. Niepełnosprawność dotyka nas wszystkich
11. Dostępność jest dla wszystkich
12. Siła Internetu polega na jego uniwersalności. Dostęp dla każdego niezależnie od niepełnosprawności jest bardzo istotnym aspektem. Tim Berners-Lee
13. Osobom pełnosprawnym technologia ułatwia życie
14. Osobom z niepełnosprawnościami technologia umożliwia życie
15. Zdecydowana większość treści i usług internetowych jest niedostępna
16. a11y
17. a11y a c c e s s i b i l i t y 1 5 4 2 3 8 9 10 11 6 7
18. web a11y
19. Web a11y to żadna nowość…
20. WCAG 2.1 Link https://www.w3.org/WAI/standards-guidelines/wcag/
21. WCAG 2.1 web content accessibility guidelines
22. Możesz użyć gumki na stole kreślarskim lub młota na placu budowy. Frank Lloyd Wright
23. Focus
24. Focus określa na którym elemencie wywoływane są dane eventy klawiatury
25. Focus umożliwia poruszanie się po stronie
26. Osoby ze stałymi problemami motorycznymi
27. Osoby ze stałymi problemami motorycznymi
28. Osoby ze stałymi problemami motorycznymi Osoby, które czasowo lub sytuacyjnie nie mogą korzystać z myszki
29. Osoby ze stałymi problemami motorycznymi Osoby, które czasowo lub sytuacyjnie nie mogą korzystać z myszki Power Users
30. Wszystkie funkcjonalności strony są dostępne za pomocą klawiatury, chyba że dana funkcjonalność nie może zostać osiągnięta w żaden znany sposób za pomocą klawiatury Rekomendacja WCAG 2.1 Wytyczna 2.1.1.
31. REZERWACJA DLA GODZINA PRZYJAZDU Dorota Owczarek 16:00 - 18:00 DALEJ
32. REZERWACJA DLA GODZINA PRZYJAZDU Dorota Owczarek 16:00 - 18:00 DALEJ
33. REZERWACJA DLA GODZINA PRZYJAZDU Dorota Owczarek 16:00 - 18:00 DALEJ
34. REZERWACJA DLA GODZINA PRZYJAZDU Dorota Owczarek 16:00 - 18:00 DALEJ
35. NASTĘPNY ARTYKUŁ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam no Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
36. NASTĘPNY ARTYKUŁ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam no Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
37. tabindex=“-1” tabindex=“0” Wyklucz z tab order Dodaj do tab order
38. tabindex=“-1” tabindex=“0” tabindex > 0 Wyklucz z tab order Dodaj do tab order
39. tabindex=“-1” tabindex=“0” tabindex > 0 Wyklucz z tab order Dodaj do tab order
40. KUP TERAZ!
42. *:focus {outline:none}
43. *:focus {outline:none !important}
44. *:focus {outline:none}
45. Link https://github.com/WICG/focus-visible
46. *:focus-visible {outline: outline: 2px solid red;}
47. Semantyka
48. VoiceOver NVDA
49. Jak przeglądarka komunikuje się z czytnikiem ekranu?
52. DOM Accessibility Tree GUI
53. <html> <head> <title>What is your name?</title> </head> <body> <label for=”name”>First Name</label> <input id=”name” type=”text” name=”name” value=”dorota”> <div> <button>Back</button> <button>Next</button> </div> </body> </html> id=1 role=WebArea name=”What is your name?” id=2 role=Label name=”First Name” id=3 role=TextField labelledByIds=[2] value=”dorota” id=4 role=Group id=5 role=Button name=”Back” id=6 role=Button name=”Next” HTML Accessibility Tree
54. <label for=”mealOption”>Preferred meal option</label> <select name=”mealOption” id=”mealOption”> <option value=”0”>No preferences</option> <option value=”1”>Vegetarian</option> <option value=”2”>Vegan</option> <option value=”3”>Lactose-free</option> </select>
55. <label for=”mealOption”>Preferred meal option</label> <select name=”mealOption” id=”mealOption”> <option value=”0”>No preferences</option> <option value=”1”>Vegetarian</option> <option value=”2”>Vegan</option> <option value=”3”>Lactose-free</option> </select> Role: ”combobox” Name: ”Preferred meal option” State: ”collapsed” Value: ”Vegetarian”
56. <label for=”mealOption”>Preferred meal option</label> <select name=”mealOption” id=”mealOption”> <option value=”0”>No preferences</option> <option value=”1”>Vegetarian</option> <option value=”2”>Vegan</option> <option value=”3”>Lactose-free</option> </select> Role: ”combobox” Name: ”Preferred meal option” State: ”collapsed” Value: ”Vegetarian”
57. <div class=”button” tabindex=“0”> Buy now </div> BUY NOW
58. <div class=”button” tabindex=“0”> Buy now </div> BUY NOW Buy now, group
59. Nie utrudniaj sobie życia! Tam gdzie się da używaj dedykowanych elementów
61. Hierarchia nagłówków Sensownie opisane linki aria-laballedby= Wykorzystuj odpowiednie elementy jako landmarks <nav><header><footer><aside>
62. Hierarchia nagłówków Sensownie opisane linki aria-labelledby= Wykorzystuj odpowiednie elementy jako landmarks <nav><header><footer><aside>
63. Hierarchia nagłówków Sensownie opisane linki aria-labelledby= Wykorzystuj odpowiednie elementy jako landmarks <nav><header><footer><aside>
64. ARIA
65. ARIA - Accessible Rich Internet Applications
66. ARIA nie wpływa na zachowanie danego komponentu
67. ARIA pozwala wypełnić luki w drzewie dostępności
68. DOM Accessibility Tree ARIA
70. Link https://www.w3.org/TR/wai-aria/
71. Link https://www.w3.org/TR/wai-aria-practices/
79. Link https://www.w3.org/TR/wai-aria-practices/#slider
81. Link https://www.w3.org/TR/wai-aria-1.1/#slider
82. Style
83. KUP TERAZ! KUP TERAZ!
84. KUP TERAZ! KUP TERAZ! 6.29:1 2.08:1 AA AAA AA AAA
86. IMIĘ NAZWISKO NR TELEFONU DALEJ
87. IMIĘ NAZWISKO NR TELEFONU Dorota Owczarek 79823422 DALEJ
88. IMIĘ NAZWISKO NR TELEFONU Dorota Owczarek 79823422 DALEJ
89. IMIĘ NAZWISKO NR TELEFONU Dorota Owczarek 79823422 DALEJ Podany numer jest za krótki!
90. Płatność została pomyślnie zrealizowana
91. Płatność została pomyślnie zrealizowana
92. Jabłka Gruszki Banany Jabłka Gruszki Banany
93. Jabłka Gruszki Banany Jabłka Gruszki Banany Achromatopia Deuteranopia Protanopia Tritanopia Widzenie normalne - trichromatyczne
94. Jabłka Gruszki Banany
95. Nie przekazuj informacji samym kolorem!
96. Audyt
97. Link https://www.deque.com/axe/
98. Link https://developers.google.com/web/tools/lighthouse/
100. Web a11y to też prawo!
101. Web a11y to też prawo! WCAG 2.0 to standard obowiązujący w Polsce i EU dla stron realizujących zadania publiczne (czyli m.in. ministerstwa, urzędy miast i gmin, policję, szpitale i wiele innych instytucji)
104. Kiedy skupiamy się na dostępności, tworzymy lepsze rzeczy
105. Kiedy skupiamy się na dostępności, tworzymy lepsze rzeczy dla wszystkich.
107. Vinton Cerf
108. Dostępność jest dla wszystkich!
109. Niepełnosprawność to nie cecha człowieka, tylko efekt oddziaływania różnych cech człowieka ze środowiskiem.
110. Niepełnosprawność to nie cecha człowieka, tylko efekt oddziaływania różnych cech człowieka ze środowiskiem. Jeśli nie ma barier dostępności to nie ma niepełnosprawności.
111. Dziękuję! Dorota Owczarek | nexocode