![Page 1: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/1.jpg)
A11y - from «waaat?» to a core part
of dev team's workflow
Anna Karoń
![Page 2: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/2.jpg)
HTMLCSS
Javascript
Progressive enhancement
Reactivity
Responsive design
Performance
Development tools
TestingAccessibility
PWAFrameworks
and more …
![Page 3: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/3.jpg)
waaat?
![Page 4: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/4.jpg)
Invisible exhibition
"interactive journey into the invisible world, where you can try out, how to cope in everyday situations without the help of sight – only by the sense of hearing, smell, balance…"*
* https://niewidzialna.pl/en
![Page 5: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/5.jpg)
Magento MeetUp Poznań 2017
Opportunity
![Page 6: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/6.jpg)
![Page 7: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/7.jpg)
![Page 8: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/8.jpg)
Mission
impossible
![Page 9: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/9.jpg)
• Medium company
• 30 - 60 projects
• 40 - 100 employees
• Different projects - new, maintained
• Different clients (country, business, budget…), different requirements
What to deal with
![Page 10: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/10.jpg)
Define goalsShort term & long term
• Implement a11y in the development workflow and care about it in daily work (main, long)
• Show what a11y is and why it matters (short)
• Share your knowledge (short / long?)
![Page 11: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/11.jpg)
Define your enemies
TIMEimplementation is a process
MONEY
![Page 12: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/12.jpg)
Web project workflow
Design / UX
Project Management
Request / Quote
Code
Quality Assurance
![Page 13: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/13.jpg)
Web project workflow
Clients
Project Managers
Designers / UX designers
Front-end Developers
Back-endDevelopers
Testers
1
23
4
![Page 14: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/14.jpg)
Talk about it
![Page 15: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/15.jpg)
• Regular learning
• Prepare & share learning resources
• Share basic knowledge in official source, prepare checklists
• Prepare & share tools
Working time
• Automatic tests integration in developer tools
• Use self-development time to learn and share knowledge
• Open source project to learn and practice
![Page 16: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/16.jpg)
A11y in clients project (1st)
• A11y audit
• Design refactor
• Globals & header refactor
• Each store view
• Old / legacy code maintained
• 360 h spent on full implementation
• WCAG 2.0 AA
![Page 17: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/17.jpg)
Organise meetings, presentation,workshops• GAAD 2018
• Presentation for designers (07-2018)
• Workshops for frontends (09-2018)
• Presentation for PM’s (03-2019)
• GAAD 2019 - user testing workshops
![Page 18: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/18.jpg)
Along the way
• A11y implementation is a process
• Step by step, small changes also count
• Remember about priorities
• Find "a11y friends"
• Team support, CEO support
• A11y is a company’s culture
• Be understanding
• Be supportive
• Be patient
• Be interesting
![Page 19: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/19.jpg)
Results in projects
Accessibility in our open source projects - Alpaca
Accessibility implementation in clients’ projects
Accessibility User Testing & Tester
WIP: Next open source Magento 2 frontend UI components & theme
Accessible designs
![Page 20: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/20.jpg)
Results in team
A11y in code review and features implementation
Team support
A11y culture in the company
![Page 21: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/21.jpg)
Additional effects
A11y audit template
Travels People
Harmony
![Page 22: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/22.jpg)
Summary
Talk. If you believe in what you’re talking about,
people will believe you
2.5 years of a11y work
and waiting for more!
![Page 23: A11y - from «waaat?» to a core part of dev team's workflow · •Alpaca components • Alpaca Theme • A11y user testing - Medium post • My adventure with a11y - Medium post](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe318b55098bf433701ade8/html5/thumbnails/23.jpg)
• Alpaca components
• Alpaca Theme
• A11y user testing - Medium post
• My adventure with a11y - Medium post
• A11y Workshops at Meet Magento PL 2018:repository, presentation, slides
• A11y in e-commerce, presentation at Meet Magento NYC 2018
• A11y audit template
• Axe-core testing tools
• Axe-core Chrome plugin
• Wave Chrome plugin
• ChromeVox
Links Tools