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
• I’ve written some stuff,
• Member of W3C,
• Building for the web
since 1993,
• Learn more at
AdrianRoselli.com,
• Avoid ...
WHERE DO I FIT?
WHERE DO I START?
Document it
• As the designer, you are making decisions.
• Document them.
• Do not let the developers improvise.
• CYA.
• ...
Design System
• Document all this for your custom widgets,
• Use this to build a pattern library,
• For many custom widget...
Pattern Library
1. Title as <h2> which is also the
link to the thing,
2. Image, but must appear below
<h2> in DOM,
3. Plai...
HOW DO I DO IT?
Non-Text Content
• When you include an image in a design, you do it for a reason.
• Just a design element?
• Support the n...
Non-Text Content
• Hero images,
• Background images,
• Icons,
• Video & audio,
• Animations,
• Charts,
• Screen shots,
• …
Non-Text Content
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
https://www.w3.org/WAI/tutorials/im...
Non-Text Content
Alt: A unicorn with a rainbow mane
and outstretched wings, clumsily
stumbling around a clearing with a
st...
Structure
• Identify:
• Headings,
• Lists,
• Data tables,
• Captions,
• Regions (banner, navigation, footer, main content)...
Structure
Banner
Navigation
Related
Search
Footer
Main content
Banner
Navigation
Related
Search
Footer
Main content
“Mobile” often means narrow screen
in RWD, as well as this context.
S...
Structure
Sequence and Order
• CSS techniques allow visual order to break from DOM order:
• Floats,
• Absolute positioning,
• Flexbo...
Sequence and Order
Typography
• Avoid justified text,
• Limit italics,
• Use larger text (lean on browser default),
• Use good contrast,
• Av...
Typography
• Leading / line height at least 1.5× font size (WCAG 2.1),
• Space after paragraphs at least 2× font size (WCA...
Typography
Color and Contrast
• Does your thing rely on color alone to convey meaning?
• Is there enough contrast?
• Are hyperlinks, ...
Color and Contrast
• WCAG 2.1 has broadened it,
• Typography,
• Icons and glyphs,
• Form elements, error messages,
placeho...
Hit Areas
• Make areas large enough to tap,
• Leave space between hit areas to avoid mis-taps/clicks,
• Fitts’ Law (time t...
Hit Areas
Hit Areas
Hit Areas
Hit Areas
Instructions
• Make sure hyperlinks have clear text,
• Do not rely on instructions that assume a user can see, hear, or
in...
Indicators
• Make sure you have focus styles,
• Do not rely on hover states for interaction,
• Your design should indicate...
WRAP-UP
References
• How to design for accessibility
https://www.bbc.co.uk/gel/guidelines/how-to-design-for-
accessibility
• Inclu...
The Role of Design
in Accessibility
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up
Próxima SlideShare
Cargando en…5
×

Role of Design in Accessibility — VilniusJS Meet-up

234 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
  • Sé el primero en comentar

Role of Design in Accessibility — VilniusJS 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 AdrianRoselli.com, • Avoid on Twitter @aardrian. About Adrian Roselli
  3. 3. WHERE DO I FIT?
  4. 4. WHERE DO I START?
  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 design system, pattern library.
  6. 6. Design System • Document all this for your custom widgets, • Use this to build a 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 http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/ https://www.w3.org/WAI/tutorials/images/decision-tree/ 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, • Use plain language.
  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 https://www.bbc.co.uk/gel/guidelines/how-to-design-for- accessibility • Inclusive Design Principles https://inclusivedesignprinciples.org/
  33. 33. The Role of Design in Accessibility

×