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.

Full stack accessibility

164 views

Published on

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

Published in: Software
  • If you’re looking for a great essay service then you should check out ⇒ www.HelpWriting.net ⇐. A friend of mine asked them to write a whole dissertation for him and he said it turned out great! Afterwards I also ordered an essay from them and I was very happy with the work I got too.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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

×