Automating a11y checks

Transcript

1. X Никита Соболев github.com/sobolevn
2. >_ X Автоматизируем проверку доступности 2
3. Доступность? 3
4. 99.9% 4
5. 99.99% 5
6. 99.999% 6
7. Что проверяем? 7
8. Что проверяем? > Наш сервис – работает! 7
9. Что проверяем? > Наш сервис – работает! > Наш сервис работает правильно 7
10. Что проверяем? > Наш сервис – работает! > Наш сервис работает правильно > Наш сервис работает быстро 7
11. Что проверяем? > Наш сервис – работает! > Наш сервис работает правильно > Наш сервис работает быстро > Наш сервис работает везде 7
12. SRE 8
17. Наш сервис работает для всех 11
18. >_ X Автоматически! 12
19. 500 13
20. Тесты 14
21. Медленно 15
22. Мониторинг производительности 16
23. Неудобно 17
27. UX 21
28. >_ X Есть специфика 22
29. Мы живем в идеальном мире 23
30. Мы живем в идеальном мире 23
31. Мы живем в не идеальном мире 24
32. Многие не могут воспользоваться вашим сервисом по многим причинам! 25
33. Не все люди обладают (и хотят обладать) современной техникой 26
34. Пост Цифровой Мир 27
35. История про самокат 28
37. Нужно думать головой 30
38. Не все люди знают язык вашего сервиса 31
39. i18n / l10n 32
40. Что проверяем? 33
41. Что проверяем? > Должны быть возможность выбора языка 33
42. Что проверяем? > Должны быть возможность выбора языка > Онлайн переводчики должны работать 33
43. Что проверяем? > Должны быть возможность выбора языка > Онлайн переводчики должны работать > Письмо: слева направо / справа налево 33
44. Что проверяем? > Должны быть возможность выбора языка > Онлайн переводчики должны работать > Письмо: слева направо / справа налево > Форматы чисел, дат, времени 33
45. https://github.com/ w3c/i18n-tests 34
46. Не везде быстрое интернет соединение 35
47. > Next billion users 36
48. https://github.com/ ai/size-limit 37
50. "Slow connection" mode 39
56. Некоторые люди выключают js 43
57. "Disabled JS" mode 44
58. Selenium: --disable-javascript 45
61. Есть люди с особыми потребностями 47
64. Можно сделать лучше 50
65. Можно сделать лучше > https://github.com/YozhikM/ stylelint-a11y 50
66. Можно сделать лучше > https://github.com/YozhikM/ stylelint-a11y > https://github.com/ierhyna/ stylelint-no-indistinguishable- colors 50
67. Можно сделать лучше > https://github.com/YozhikM/ stylelint-a11y > https://github.com/ierhyna/ stylelint-no-indistinguishable- colors > https://github.com/kristerkari/ stylelint-high-performance- animation 50
68. Попробуйте заказать 51
69. Вы не сможете! 52
70. Вы не сможете! > Навигация не размечена aria и role 52
71. Вы не сможете! > Навигация не размечена aria и role > Везде убраны outline 52
72. Вы не сможете! > Навигация не размечена aria и role > Везде убраны outline > У картинок нет подписей 52
73. Вы не сможете! > Навигация не размечена aria и role > Везде убраны outline > У картинок нет подписей > События без клавиатуры 52
74. Есть линтеры 53
75. Есть линтеры > https://github.com/maranran/ eslint-plugin-vue-a11y 53
76. Есть линтеры > https://github.com/maranran/ eslint-plugin-vue-a11y > https://www.npmjs.com/package/ eslint-plugin-jsx-a11y 53
77. Есть плагины для тестов 54
78. Есть плагины для тестов > https://github.com/nickcolley/ jest-axe 54
79. Есть плагины для тестов > https://github.com/nickcolley/ jest-axe > https://github.com/helen-dikareva/ axe-testcafe 54
80. Полноценные решения 55
81. Полноценные решения > https://github.com/webhintio/hint 55
84. Полноценные решения > https://github.com/webhintio/hint > https://github.com/pa11y/pa11y 57
85. pa11y('http://example.com/', { actions: [ 'set field #username to exampleUser', 'set field #password to password1234', 'click element #submit', 'wait for path to be /myaccount', ] }) 58
86. Аудиты! 59
87. >_ X В завершении 60
88. Вы хотите, чтобы ваши сервисы работали всегда. 61
89. Так сделайте их доступными для всех! 62
90. https://github.com/ wemake-services/ wemake-vue-template 63
91. tlg.name/ opensource_findings 64
92. Вопросы? github.com/sobolevn sobolevn.me 65