Full stack accessibility
•Descargar como PPTX, PDF•
1 recomendación•231 vistas
For AWS Community Day August 2019. How to improve accessibility across the full tech stack.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (11)
Similar a Full stack accessibility
Similar a Full stack accessibility (20)
Último
Último (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