Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automating a11y checks

Automating a11y checks

8c3a2ebf7c2b84f8390d99c7bf8c8a48?s=128

Sobolev Nikita

September 25, 2019
Tweet

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