Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MELBOURNE
Full Stack
Accessibility
Rhiana Heath | 30/08/2019
Who’s job is A11y?
Copywriter
Copywriter
• Clear heading structure
• Easy to read language
• Glossary for difficult words
Copywriter
• Captions & Alt text for images
• Unique page titles
Copywriter
• Clear instructions
• Useful errors
• Help Text
Copywriter
• Captions for videos
• Text equivalent for other noises
UX Designer
UX Designer
• Desktop
• Consistent navigation
• Predictable component patterns
UX Designer
• Mobile
• Consistent navigation
• Predictable component patterns
UX Designer
• User Testing
• Variety of people
• Completing various tasks
Visual Designer
Visual Designer
• Colour Scheme
• High colour contrast
• Colour blind friendly
Visual Designer
• Colour Scheme
• Indicate information not just with
colour
Visual Designer
• Colour Scheme
• Dark mode toggle
Visual Designer
• Typography
• Sans Serif: Titles
• Serif: Paragraphs
Front End Developer
Front End Developer
• Responsive design!
• All screen sizes
• Up to 200% zoom
Front End Developer
• Functions the same on:
• Mouse hover
• Keyboard focus
Front End Developer
• Semantic HTML
• HTML 5 elements
• Clear structure
Front End Developer
• Hidden text for screen readers
• Roles
• Aria-*
• alt
Mobile Developer
Mobile Developer
• Mobile accessibility controls
• Voiceover
• Custom font sizes
Mobile Developer
• Touch gestures
• Large touch targets
• Able to scroll
• Alternative way
Mobile Developer
• Content doesn’t get lost
• Landscape and portrait
• On zoom
Back End Developer
Back End Developer
• Adds CMS fields e.g.
• Unique page titles
• Alt text for images
Back End Developer
• A11y tools checks
• Alt text
• Valid HTML
• Colour contrast
Back End Developer
• Form validation
• Required fields
• Restrictions
• Autofill fields
Back End Developer
• Custom Commands
• Voice
• Keyboard & Mouse
• Touch
Operations
Operations
• High server availability
• Multiple server locations
• Fallback when offline
Operations
• Performance optimisation
• Reducing page weight
• Synchronise Javascript
Operations
• Mobile performance
• Seperate images for small
screens
• Progressive loading
Quality Testers
Quality Testers
Image caption 1 Image caption 2 Image caption 3
Image caption 4 Image caption 5 Image caption 6
Quality Testers
• Test without a mouse
• Keyboard only
Quality Testers
• Test without a screen
• Screen reader only
Thanks!
Rhiana Heath | 30/08/2019
Upcoming SlideShare
Loading in …5
×

Full stack accessibility

107 views

Published on

For AWS Community Day August 2019.
How to improve accessibility across the full tech stack.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Full stack accessibility

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

×