Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

The Role of Design in Accessibility — a11yTO Meet-up

940 visualizaciones

Publicado el
Designers can have an outsized impact on the accessibility of a project, being the ones who produce the visuals that are often critical for understanding and sign-off. Adrian will talk about the ways designers contribute to the overall accessibility of a site or application. We'll look at typography, structure, documentation, colour, contrast and more. Each of these has a corresponding WCAG SC to help provide guidance.

Publicado en: Internet
  • What men secretly want? he will be addicted to you forever, click here 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

The Role of Design in Accessibility — a11yTO Meet-up

  1. 1. The Role of Design in Accessibility
  2. 2. • I’ve written some stuff, • Member of W3C, • Building for the web since 1993, • Learn more at, • Avoid on Twitter @aardrian. About Adrian Roselli
  3. 3. WHERE DO I FIT?
  5. 5. Document it • As the designer, you are making decisions. • Document them. • Do not let the developers improvise. • CYA. • Eventually you will get a pattern library.
  6. 6. Pattern Library • Document all this for your custom widgets, • Use this to build a larger pattern library, • For many custom widgets: WAI-ARIA Authoring Practices 1.1, • It is not perfect, but gets you started, • Be wary of application-specific patterns. • For truly custom widgets you have never seen before, consider simplifying to an existing pattern.
  7. 7. Pattern Library 1. Title as <h2> which is also the link to the thing, 2. Image, but must appear below <h2> in DOM, 3. Plain text, 4. Share link.
  8. 8. HOW DO I DO IT?
  9. 9. Non-Text Content • When you include an image in a design, you do it for a reason. • Just a design element? • Support the narrative? • Stand-alone content? • You must account for its absence.
  10. 10. Non-Text Content • Hero images, • Background images, • Icons, • Video & audio, • Animations, • Charts, • Screen shots, • …
  11. 11. Non-Text Content 1. What role does image play? 2. Does it present new info? 3. What type of info? Informative Yes alt="" or <a href="foo"><img alt="">Link</a> alt="" or Use CSS alt="descriptive identification" or alt="short label" + caption PurelyDecorative Sensory No alt="label for link" alt=“short alternative" or alt="short label" + caption alt="short label + location of long alternative" or long text alternative on same or linked page Long/Complex Short/Simple
  12. 12. Non-Text Content Alt: A unicorn with a rainbow mane and outstretched wings, clumsily stumbling around a clearing with a startled expression on its face.
  13. 13. Structure • Identify: • Headings, • Lists, • Data tables, • Captions, • Regions (banner, navigation, footer, main content). • This allows a developer to map them to correct element.
  14. 14. Structure Banner Navigation Related Search Footer Main content
  15. 15. Banner Navigation Related Search Footer Main content “Mobile” often means narrow screen in RWD, as well as this context. Structure
  16. 16. Structure
  17. 17. Sequence and Order • CSS techniques allow visual order to break from DOM order: • Floats, • Absolute positioning, • Flexbox, • Grid. • WCAG 1.3.2 and 2.4.3 describe meaningful sequence and tab order matching visual flow.
  18. 18. Sequence and Order
  19. 19. Typography • Avoid justified text, • Limit italics, • Use larger text (lean on browser default), • Use good contrast, • Avoid all-caps, • Avoid very long lines, • Use clear, concise writing.
  20. 20. Typography • Leading / line height at least 1.5× font size (WCAG 2.1), • Space after paragraphs at least 2× font size (WCAG 2.1), • Letter spacing / tracking at least 0.12× font size (WCAG 2.1), • Word spacing at least 0.16× font size (WCAG 2.1).
  21. 21. Typography
  22. 22. Color and Contrast • Does your thing rely on color alone to convey meaning? • Is there enough contrast? • Are hyperlinks, menus, etc. still visible? • WCAG 2.0: • 4.5:1 for normal text • 3:1 for large text (14+pt & bold, or 18+pt) • WCAG 2.1: • 3:1 for UI components, graphical objects
  23. 23. Color and Contrast • WCAG 2.1 has broadened it, • Typography, • Icons and glyphs, • Form elements, error messages, placeholders, • Hover, focus, selected states.
  24. 24. Hit Areas • Make areas large enough to tap, • Leave space between hit areas to avoid mis-taps/clicks, • Fitts’ Law (time to target as function of size of target), • Apple: 44pt × 44pt, • Microsoft: 48px × 48px (spaced 2mm apart), • Android: 48dp × 48dp (spaced 8dp apart), • BBC: 7mm × 7mm (inside an exclusion zone of at least 7mm × 7mm) • WCAG 2.1 Success Criterion 2.5.5 Target Size (AAA).
  25. 25. Hit Areas
  26. 26. Hit Areas
  27. 27. Hit Areas
  28. 28. Hit Areas
  29. 29. Instructions • Make sure hyperlinks have clear text, • Do not rely on instructions that assume a user can see, hear, or interact in a specific way, • Provide clear form labels, • Ensure errors are clear and direct the user to correct them.
  30. 30. Indicators • Make sure you have focus styles, • Do not rely on hover states for interaction, • Your design should indicate standard, select, hover, and focus states, • Remember that contrast requirements apply to all these, • Make sure errors, warnings, alerts do not get confused with regular content.
  31. 31. WRAP-UP
  32. 32. References • How to design for accessibility accessibility • Inclusive Design Principles
  33. 33. The Role of Design in Accessibility