Full stack accessibility
Download as PPTX, PDF1 like238 views
The document discusses the roles and responsibilities of different team members in ensuring accessibility (A11y) across a full stack development process. It outlines how copywriters, UX designers, visual designers, front-end developers, mobile developers, back-end developers, operations, and quality testers each contribute to accessibility. Responsibilities include things like adding alt text for images, using semantic HTML, ensuring responsive design, optimizing for screen readers and mobility, adding accessibility settings and features, and testing across various assistive technologies and disabilities. The overall message is that accessibility is a shared responsibility requiring collaboration across the development team.
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