Download to read offline
Meet Magento Poland 2018 - a11y workshop
- 1.
- 2. #MM18PL#MM18PL https://github.com/SnowdogApps/a11y-aliens How we proceed… •Automatic testing • Keyboard testing • Screen reader testing
- 3. #MM18PL#MM18PL Automatic testing tools yarnglobal add lighthouse lighthouse http://localhost:8080/ --only-categories accessibility --view DevTools - accessibility tree aXe - Chrome plugins: aXe-Coconut, aXe Wave - Chrome plugin: Wave Evaluation Tool Lighthouse - in Chrome DevTools or node
- 4. #MM18PL#MM18PL • Lighthouse: 50%,6 errors • Wave: 5 errors, 6 alerts • aXe-Coconut: 14 errors • aXe: 13 errors
- 5. #MM18PL#MM18PL Checklists • WebAIM’s WCAG2 Checklist • A11y Project - Web Accessibility Checklist • A11y Audit Template
- 6. #MM18PL#MM18PL Screen readers 1. ChromeVox ChromeVoxClassic Keyboard Shortcuts Reference 2. VoiceOver - Cmd + F5 VoiceOver for OSX Keyboard Shortcuts ctrl cmd ctrl alt + +
- 7. #MM18PL#MM18PL Code & repair Checkrepaired code on: https://github.com/SnowdogApps/a11y-aliens/tree/mmpl18
- 8.
- 9.
- 10.
Editor's Notes
- #2 5-10min - introduction 15min - automatic tools in browser, testing 5-10min - template 15min - screen readers 10min - show code and check updated website
- #3 Among my private repos I found this Share in public on Snowdog Goal - to show the tools and to let you play with it How to proceed technically - who wants check on aliens repo, you can check also another websites with not installing this, everybody who has Chrome installed can participate.
- #5 Axe-Coconut: - wcagAAA (landmarks) - winner Wave: - Contrast - No Styles - Outline - Code - Scanning - not see: landmarks, hidden, zooming (viewport) Lighhouse: - Yes: zooming (viewport) - No: landmarks, heading order, empty or redundant links
- #7 Scan through heading & links VoiceOver – Crt+Alt + H and widonw with options