Web a11y, czyli programowanie z empatią Hackathon+

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
3. i18n
4. l10n
5. k8s
6. a11y
7. 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
8. web a11y
9. Web a11y to żadna nowość…
10. WCAG 2.1 Link https://www.w3.org/WAI/standards-guidelines/wcag/
11. WCAG 2.1 web content accessibility guidelines
12. Zdecydowana większość treści i usług internetowych jest niedostępna
13. Focus
14. Focus określa na którym elemencie wywoływane są dane eventy klawiatury
15. Focus umożliwia poruszanie się po stronie
16. Osoby ze stałymi problemami motorycznymi
17. Osoby ze stałymi problemami motorycznymi
18. Osoby ze stałymi problemami motorycznymi Osoby, które czasowo lub sytuacyjnie nie mogą korzystać z myszki
19. Osoby ze stałymi problemami motorycznymi Osoby, które czasowo lub sytuacyjnie nie mogą korzystać z myszki Power Users
20. 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.
21. REZERWACJA DLA GODZINA PRZYJAZDU Dorota Owczarek 16:00 - 18:00 DALEJ
22. REZERWACJA DLA GODZINA PRZYJAZDU Dorota Owczarek 16:00 - 18:00 DALEJ
23. REZERWACJA DLA GODZINA PRZYJAZDU Dorota Owczarek 16:00 - 18:00 DALEJ
24. REZERWACJA DLA GODZINA PRZYJAZDU Dorota Owczarek 16:00 - 18:00 DALEJ
25. 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
26. 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
27. tabindex=“-1” tabindex=“0” Wyklucz z tab order Dodaj do tab order
28. tabindex=“-1” tabindex=“0” tabindex > 0 Wyklucz z tab order Dodaj do tab order
29. tabindex=“-1” tabindex=“0” tabindex > 0 Wyklucz z tab order Dodaj do tab order
30. KUP TERAZ!
32. *:focus {outline:none}
33. *:focus {outline:none !important}
34. *:focus {outline:none}
35. Link https://github.com/WICG/focus-visible
36. *:focus-visible {outline: outline: 2px solid red;}
37. Semantyka
40. VoiceOver NVDA
41. Jak przeglądarka komunikuje się z czytnikiem ekranu?
42. DOM Accessibility Tree GUI
43. <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
44. <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>
45. <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”
46. <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”
47. <div class=”button” tabindex=“0”> Buy now </div> BUY NOW
48. <div class=”button” tabindex=“0”> Buy now </div> BUY NOW Buy now, group
49. Nie utrudniaj sobie życia! Tam gdzie się da używaj dedykowanych elementów
51. Hierarchia nagłówków Sensownie opisane linki aria-laballedby= Wykorzystuj odpowiednie elementy jako landmarks <nav><header><footer><aside>
52. Hierarchia nagłówków Sensownie opisane linki aria-labelledby= Wykorzystuj odpowiednie elementy jako landmarks <nav><header><footer><aside>
53. Hierarchia nagłówków Sensownie opisane linki aria-labelledby= Wykorzystuj odpowiednie elementy jako landmarks <nav><header><footer><aside>
54. ARIA
55. ARIA - Accessible Rich Internet Applications
56. ARIA nie wpływa na zachowanie danego komponentu
57. ARIA pozwala wypełnić luki w drzewie dostępności
58. DOM Accessibility Tree ARIA
60. Link https://www.w3.org/TR/wai-aria/
61. Link https://www.w3.org/TR/wai-aria-practices/
69. Link https://www.w3.org/TR/wai-aria-practices/#slider
71. Link https://www.w3.org/TR/wai-aria-1.1/#slider
72. Style
73. KUP TERAZ! KUP TERAZ!
74. KUP TERAZ! KUP TERAZ! 6.29:1 2.08:1 AA AAA AA AAA
76. IMIĘ NAZWISKO NR TELEFONU DALEJ
77. IMIĘ NAZWISKO NR TELEFONU Dorota Owczarek 79823422 DALEJ
78. IMIĘ NAZWISKO NR TELEFONU Dorota Owczarek 79823422 DALEJ
79. IMIĘ NAZWISKO NR TELEFONU Dorota Owczarek 79823422 DALEJ Podany numer jest za krótki!
80. Nie przekazuj informacji samym kolorem!
81. Audyt
82. Link https://www.deque.com/axe/
83. Link https://developers.google.com/web/tools/lighthouse/
85. Web a11y to też prawo!
86. 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)
89. Kiedy skupiamy się na dostępności, tworzymy lepsze rzeczy
90. Kiedy skupiamy się na dostępności, tworzymy lepsze rzeczy dla wszystkich.
92. Vinton Cerf
93. Dostępność jest dla wszystkich!
94. Niepełnosprawność to nie cecha człowieka, tylko efekt oddziaływania różnych cech człowieka ze środowiskiem.
95. 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.
96. Dziękuję! Dorota Owczarek