Full stack accessibility
•Télécharger en tant que PPTX, PDF•
1 j'aime•231 vues
For AWS Community Day August 2019. How to improve accessibility across the full tech stack.
Recommandé
Contenu connexe
Tendances
Tendances (11)
Similaire à Full stack accessibility
Similaire à Full stack accessibility (20)
Dernier
Dernier (20)
Full stack accessibility
- 1. MELBOURNE
- 2. Full Stack Accessibility Rhiana Heath | 30/08/2019
- 3. Who’s job is A11y?
- 4. Copywriter
- 5. Copywriter • Clear heading structure • Easy to read language • Glossary for difficult words
- 6. Copywriter • Captions & Alt text for images • Unique page titles
- 7. Copywriter • Clear instructions • Useful errors • Help Text
- 8. Copywriter • Captions for videos • Text equivalent for other noises
- 9. UX Designer
- 10. UX Designer • Desktop • Consistent navigation • Predictable component patterns
- 11. UX Designer • Mobile • Consistent navigation • Predictable component patterns
- 12. UX Designer • User Testing • Variety of people • Completing various tasks
- 13. Visual Designer
- 14. Visual Designer • Colour Scheme • High colour contrast • Colour blind friendly
- 15. Visual Designer • Colour Scheme • Indicate information not just with colour
- 16. Visual Designer • Colour Scheme • Dark mode toggle
- 17. Visual Designer • Typography • Sans Serif: Titles • Serif: Paragraphs
- 19. Front End Developer • Responsive design! • All screen sizes • Up to 200% zoom
- 20. Front End Developer • Functions the same on: • Mouse hover • Keyboard focus
- 21. Front End Developer • Semantic HTML • HTML 5 elements • Clear structure
- 22. Front End Developer • Hidden text for screen readers • Roles • Aria-* • alt
- 23. Mobile Developer
- 24. Mobile Developer • Mobile accessibility controls • Voiceover • Custom font sizes
- 25. Mobile Developer • Touch gestures • Large touch targets • Able to scroll • Alternative way
- 26. Mobile Developer • Content doesn’t get lost • Landscape and portrait • On zoom
- 28. Back End Developer • Adds CMS fields e.g. • Unique page titles • Alt text for images
- 29. Back End Developer • A11y tools checks • Alt text • Valid HTML • Colour contrast
- 30. Back End Developer • Form validation • Required fields • Restrictions • Autofill fields
- 31. Back End Developer • Custom Commands • Voice • Keyboard & Mouse • Touch
- 32. Operations
- 33. Operations • High server availability • Multiple server locations • Fallback when offline
- 34. Operations • Performance optimisation • Reducing page weight • Synchronise Javascript
- 35. Operations • Mobile performance • Seperate images for small screens • Progressive loading
- 36. Quality Testers
- 37. Quality Testers Image caption 1 Image caption 2 Image caption 3 Image caption 4 Image caption 5 Image caption 6
- 38. Quality Testers • Test without a mouse • Keyboard only
- 39. Quality Testers • Test without a screen • Screen reader only
- 40. Thanks! Rhiana Heath | 30/08/2019