O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

A beautiful design can also be accessible

174 visualizações

Publicada em

A practical guide for web designers

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

A beautiful design can also be accessible

  1. 1. Ottawa - Toronto October 2020 A practical guide for web designers A beautiful design can also be accessible @TouficSbeiti
  2. 2. Today’s agenda is a summary of answers I provided my clients in the last years • Multimedia content such as video and audio files • Images • Use of color • Web page content and layout • Animated content
  3. 3. In Canada One in seven Canadians aged 15 years or older (3.8 million) reported a disability
  4. 4. Around the world
  5. 5. Audio and video files • Accessible multimedia player • Close captions • Transcript
  6. 6. 7
  7. 7. Practical tools for web content accessibility testing 8
  8. 8. Use of color • Sufficient contrast between text and its background • Color is not used as the only visual means of conveying information
  9. 9. 4.5:1 for normal size text 3:1 for large text (18 point text or 14 point bold text)
  10. 10. No: 35% No: 35% Yes: 65% Yes: 65%
  11. 11. Photos and Images Choosing appropriate text alternatives Imagine that you’re reading the web page aloud over the phone Length More than a short sentence is needed? Consider text version Superfluous information Avoid words like “image”, “icon”, “picture” Consistent use of icons use the same icon as visual aid for same function
  12. 12. Webpage layout • Title is unique and descriptive • Headings are identified and ordered correctly • Content order is clear and logic • Clear and unique text link • Keyboard focus indicator is visible • Consistent navigation order
  13. 13. Page title is unique and descriptive • Screen reader • Search – results page
  14. 14. Headings are identified and ordered correctly • Divide content • Screen reader • SEO • Respect the hierarchy • Don’t use headings for styling only
  15. 15. Content order is clear and logic 1 2 3 4 1 3 2 4
  16. 16. Clear and unique link text
  17. 17. Keyboard focus indicator is visible
  18. 18. Consistent navigation order
  19. 19. Animated content Yes You Can … but
  20. 20. Mechanism to pause, stop, or hide moving, blinking or scrolling information that starts automatically and lasts more than five seconds
  21. 21. Mechanism to pause, stop, or hide auto- updating information that starts automatically and is presented in parallel with other content
  22. 22. Nothing flashes more than 3 times in one second period
  23. 23. • Photosensitive Epilepsy Analysis Tool (PEAT) • Identify content that may induce seizures in people with photosensitive seizure disorders
  24. 24. #a11yTO for my slides Merci beaucoup!

×