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

13. 9

14. 9

15. 9

16. 10

17. Наш сервис работает для всех 11

18. >_ X Автоматически! 12

19. 500 13

20. Тесты 14

21. Медленно 15

22. Мониторинг производительности 16

23. Неудобно 17

24. None
25. None
26. None

27. UX 21

28. >_ X Есть специфика 22

29. Мы живем в идеальном мире 23

30. Мы живем в идеальном мире 23

31. Мы живем в не идеальном мире 24

32. Многие не могут воспользоваться вашим сервисом по многим причинам! 25

33. Не все люди обладают (и хотят обладать) современной техникой 26

34. Пост Цифровой Мир 27

35. История про самокат 28

36. 29

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

49. None

50. "Slow connection" mode 39

51. None
52. None
53. None
54. None
55. None

56. Некоторые люди выключают js 43

57. "Disabled JS" mode 44

58. Selenium: --disable-javascript 45

59. None
60. None

61. Есть люди с особыми потребностями 47

62. 48

63. 49

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

82. None
83. None

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