Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Automating a11y checks
Search
Sobolev Nikita
September 25, 2019
Programming
0
110
Automating a11y checks
Sobolev Nikita
September 25, 2019
Tweet
Share
More Decks by Sobolev Nikita
See All by Sobolev Nikita
Михаил Гурбанов – Are you NATS? @ PythoNN
sobolevn
0
52
Дмитрий Бровкин – Почему исправление опечаток сложнее, чем кажется, и как мы с этим српавляемся @ PythoNN
sobolevn
0
32
Алексей Гончарук – Современный веб с темлейтами @ PythoNN
sobolevn
0
100
Алексей Голобурдин – Демистификация PostgreSQL-индексов @ PythoNN
sobolevn
0
130
PythoNN – Александр Гончаров
sobolevn
0
64
PythoNN – Андрей Пронин
sobolevn
0
120
PythoNN: Василий Рябов – "Парсинг бинарных данных с помощью ctypes, или пишем на питоне как на Си"
sobolevn
0
240
GitHub Planet - OpenSource
sobolevn
0
270
Polymorphism and Typeclasses
sobolevn
2
160
Other Decks in Programming
See All in Programming
GraphRAGの仕組みまるわかり
tosuri13
8
520
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
680
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
700
5つのアンチパターンから学ぶLT設計
narihara
1
150
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
300
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
590
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
Is Xcode slowly dying out in 2025?
uetyo
1
250
Porting a visionOS App to Android XR
akkeylab
0
190
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
400
Discover Metal 4
rei315
2
110
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Practical Orchestrator
shlominoach
188
11k
Facilitating Awesome Meetings
lara
54
6.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Statistics for Hackers
jakevdp
799
220k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Transcript
X Никита Соболев github.com/sobolevn
>_ X Автоматизируем проверку доступности 2
Доступность? 3
99.9% 4
99.99% 5
99.999% 6
Что проверяем? 7
Что проверяем? > Наш сервис – работает! 7
Что проверяем? > Наш сервис – работает! > Наш сервис
работает правильно 7
Что проверяем? > Наш сервис – работает! > Наш сервис
работает правильно > Наш сервис работает быстро 7
Что проверяем? > Наш сервис – работает! > Наш сервис
работает правильно > Наш сервис работает быстро > Наш сервис работает везде 7
SRE 8
9
9
9
10
Наш сервис работает для всех 11
>_ X Автоматически! 12
500 13
Тесты 14
Медленно 15
Мониторинг производительности 16
Неудобно 17
None
None
None
UX 21
>_ X Есть специфика 22
Мы живем в идеальном мире 23
Мы живем в идеальном мире 23
Мы живем в не идеальном мире 24
Многие не могут воспользоваться вашим сервисом по многим причинам! 25
Не все люди обладают (и хотят обладать) современной техникой 26
Пост Цифровой Мир 27
История про самокат 28
29
Нужно думать головой 30
Не все люди знают язык вашего сервиса 31
i18n / l10n 32
Что проверяем? 33
Что проверяем? > Должны быть возможность выбора языка 33
Что проверяем? > Должны быть возможность выбора языка > Онлайн
переводчики должны работать 33
Что проверяем? > Должны быть возможность выбора языка > Онлайн
переводчики должны работать > Письмо: слева направо / справа налево 33
Что проверяем? > Должны быть возможность выбора языка > Онлайн
переводчики должны работать > Письмо: слева направо / справа налево > Форматы чисел, дат, времени 33
https://github.com/ w3c/i18n-tests 34
Не везде быстрое интернет соединение 35
> Next billion users 36
https://github.com/ ai/size-limit 37
None
"Slow connection" mode 39
None
None
None
None
None
Некоторые люди выключают js 43
"Disabled JS" mode 44
Selenium: --disable-javascript 45
None
None
Есть люди с особыми потребностями 47
48
49
Можно сделать лучше 50
Можно сделать лучше > https://github.com/YozhikM/ stylelint-a11y 50
Можно сделать лучше > https://github.com/YozhikM/ stylelint-a11y > https://github.com/ierhyna/ stylelint-no-indistinguishable- colors
50
Можно сделать лучше > https://github.com/YozhikM/ stylelint-a11y > https://github.com/ierhyna/ stylelint-no-indistinguishable- colors
> https://github.com/kristerkari/ stylelint-high-performance- animation 50
Попробуйте заказать 51
Вы не сможете! 52
Вы не сможете! > Навигация не размечена aria и role
52
Вы не сможете! > Навигация не размечена aria и role
> Везде убраны outline 52
Вы не сможете! > Навигация не размечена aria и role
> Везде убраны outline > У картинок нет подписей 52
Вы не сможете! > Навигация не размечена aria и role
> Везде убраны outline > У картинок нет подписей > События без клавиатуры 52
Есть линтеры 53
Есть линтеры > https://github.com/maranran/ eslint-plugin-vue-a11y 53
Есть линтеры > https://github.com/maranran/ eslint-plugin-vue-a11y > https://www.npmjs.com/package/ eslint-plugin-jsx-a11y 53
Есть плагины для тестов 54
Есть плагины для тестов > https://github.com/nickcolley/ jest-axe 54
Есть плагины для тестов > https://github.com/nickcolley/ jest-axe > https://github.com/helen-dikareva/ axe-testcafe
54
Полноценные решения 55
Полноценные решения > https://github.com/webhintio/hint 55
None
None
Полноценные решения > https://github.com/webhintio/hint > https://github.com/pa11y/pa11y 57
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
Аудиты! 59
>_ X В завершении 60
Вы хотите, чтобы ваши сервисы работали всегда. 61
Так сделайте их доступными для всех! 62
https://github.com/ wemake-services/ wemake-vue-template 63
tlg.name/ opensource_findings 64
Вопросы? github.com/sobolevn sobolevn.me 65