Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Images: Alternative Content for Accessibility

Images: Alternative Content for Accessibility

Creating accessible images is both a science and an art. The science reveals when you need alternative text and the techniques to use. The art is crafting alt text that helps screen reader users connect and engage.

Learn the foundation of accessible images, including WCAG requirements, best practices and techniques for simple vs. complex images.

Emily Lewis

June 13, 2021
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  1. 2021 Accessibility Series • #AccessibilitySeries • @Knowbility Images: Alternative Content

    for Accessibility
  2. Anthony Vasquez • avasquez@knowbility.org Emily Lewis • emily@knowbility.org • www.linkedin.com/in/emilyplewis

    Connect With Us!
  3. • Visual design • Contrast • Color • Motion •

    Animation • File formats or optimization This webinar is not about
  4. • Deep dive into alternative content for images • Both

    user experience perspectives and development techniques • Screen reader demos and code examples • Time to ask questions What you can expect
  5. WCAG Requirements Text Alternatives Areas of Subjectivity Functional, Informative &

    Decorative Images Describing Images Roles & Responsibilities Agenda
  6. What are images?

  7. • Illustrations • Photographs • Icons • Charts • Graphs

    Non-text Content
  8. WCAG success criterion 1.1.1 Non-text content: www.w3.org/WAI/WCAG21/Understanding/non-text-content.html • Descriptive alt

    text for functional and informative images • Extended descriptions for more complex imagery • Hide purely decorative imagery from screen readers WCAG Requirements
  9. THE SCIENCE Text Alternatives

  10. • General, informative sentence • Provides accessible name for images

    • Can provide accessible name for controls that contain images • Screen readers announce Alt Text
  11. CodePen – Alt text for <img> and <svg>: codepen.io/emilyplewis/pen/abpKqGg?editors=1000 Alt

    Text, In Practice
  12. • Long/enhanced description • Visual text content • Different formats,

    structure • Accessible to everyone Extended Descriptions
  13. • Linked descriptions • Components such as an accordion or

    modal dialog • CodePen – Extended description with surrounding text: codepen.io/emilyplewis/pen/LYxrdPN?editors=1000 • CodePen – Extended description with <figcaption>: codepen.io/emilyplewis/pen/poRKaxO?editors=1000 Extended Descriptions, In Practice
  14. Data tables as text alternatives for bar graph: www.usclimatedata.com/climate/los-angeles/california/united- states/usca1339

    Extended Descriptions, In the Real World
  15. Alt text • “Simple” images • Relatively brief • Obvious,

    general visual information • Control purpose Extended descriptions • “Complex” images • Relatively long • Detailed visual information • Data, relationships Which Text Alternative to Use?
  16. Questions?

  17. THE ART Subjectivity

  18. Descriptive alt text for functional and informative images Extended descriptions

    for more complex imagery Hide purely decorative imagery from screen readers The Bare Minimum
  19. • Content goals • Business goals • Brand values •

    Available resources What’s Best for Your Images?
  20. It’s About People

  21. Demo – Using NVDA to explore images on The Atlantic

    homepage Alt Text, In the Real World
  22. Descriptive alt text for functional and informative images

  23. WAI An alt decision tree: www.w3.org/WAI/tutorials/images/decision-tree/ “Descriptive” Depends on the

    Image
  24. • Sole content of a control • Descriptive = Control

    purpose or destination WAI Functional Images: www.w3.org/WAI/tutorials/images/functional/ Functional Images
  25. CodePen – Button with <svg>: codepen.io/emilyplewis/pen/PoWaQvJ?editors=1000 Functional Images, In Practice

  26. • Contributes to understanding of content/page • Descriptive = Obvious,

    general visual information WAI Informative Images: www.w3.org/WAI/tutorials/images/informative/ Informative Images
  27. Demo – Using NVDA to examine promotional images on REI’s

    homepage Informative Images, In the Real World
  28. Hide purely decorative imagery from screen readers

  29. • Doesn’t add meaning to the content/page • Alt text

    would be redundant to real text WAI Decorative Images: www.w3.org/WAI/tutorials/images/decorative/ Decorative Images
  30. *Every <img> must have an alt attribute

  31. CodePen – Decorative <img> and <svg>: codepen.io/emilyplewis/pen/VwPdQom?editors=1000 Decorative Images, In

    Practice
  32. Questions?

  33. THE ART Describing Images

  34. • Front-load the most important information • General to specific

    • Simple, precise language Plain Language: www.plainlanguage.gov Be Informative & Clear
  35. • Proper spelling, grammar and punctuation • Write out acronyms

    • Write out symbols • No line breaks Be Accurate
  36. • Don’t interpret thoughts or feelings • Don’t instruct •

    Don’t add more than what’s in the image Be Neutral
  37. • Don’t repeat caption or surrounding text • Cut unnecessary

    phrases Reduce Redundancy
  38. • No length limits, but … • Consider how screen

    readers process • Consider cognitive load, auditory fatigue Alt Text: Less Is More
  39. Context Is Key

  40. • Alt text just needs company/organization name • Don’t need

    to include “logo” • Don’t need to describe what logo looks like Logos
  41. • Person’s name is usually sufficient for alt text •

    Don’t include identity information unless relevant to context • Depending on context, could be decorative Headshots
  42. • Aim to describe in alt text unless very complicated

    • ”At a glance” of main subject and actions • If needed, extended description can include: • Visible emotions • Location, conditions • Source, photographer Photography
  43. • Okay: AccessU attendees. • Good: Two attendees seated in

    the audience at AccessU. • Better: Two attendees seated side-by-side in the audience at AccessU. One is using a braille display, while the other is flipping through a text book. Photography Alt Text, In Practice
  44. • Product name for alt text when linked to detail

    page • On detail page, alt text depends on surrounding text • Images for styles/options should be descriptive Ecommerce Photos
  45. Demo – Using NVDA to browse color choices when purchasing

    a candle on Anthropologie Ecommerce Alt Text, In the Real World
  46. • Type of chart/graph • Type of data • What

    is meaningful Writing Alt Text for Data Visualization: medium.com/nightingale/writing-alt-text-for-data-visualization- 2a218ef43f81 Alt Text for Graphs and Charts
  47. • Describe the visual impact • Describe the relationships of

    data The DAISY Consortium webinar series: daisy.org/webinar-series/ Extended Descriptions for Graphs and Charts
  48. THE BUSINESS Roles & Responsibilities

  49. • “Good” alt text is a skill; it’s microcopy •

    Extended descriptions need expert input • Beyond WCAG requires a team effort Challenge Assumptions
  50. • Marketing, web designers • Content strategists • Copywriters, editors

    • Content authors • Quality assurance testers • Project managers, team leads Text Alternative Team
  51. Collaboration

  52. Questions?