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

More Decks by Emily Lewis

Other Decks in Technology


  1. • Visual design • Contrast • Color • Motion •

    Animation • File formats or optimization This webinar is not about
  2. • 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
  3. WCAG Requirements Text Alternatives Areas of Subjectivity Functional, Informative &

    Decorative Images Describing Images Roles & Responsibilities Agenda
  4. 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
  5. • General, informative sentence • Provides accessible name for images

    • Can provide accessible name for controls that contain images • Screen readers announce Alt Text
  6. • Long/enhanced description • Visual text content • Different formats,

    structure • Accessible to everyone Extended Descriptions
  7. • 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
  8. 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?
  9. Descriptive alt text for functional and informative images Extended descriptions

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

    Available resources What’s Best for Your Images?
  11. Demo – Using NVDA to explore images on The Atlantic

    homepage Alt Text, In the Real World
  12. • Sole content of a control • Descriptive = Control

    purpose or destination WAI Functional Images: www.w3.org/WAI/tutorials/images/functional/ Functional Images
  13. • Contributes to understanding of content/page • Descriptive = Obvious,

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

    homepage Informative Images, In the Real World
  15. • 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
  16. • Front-load the most important information • General to specific

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

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

    Don’t add more than what’s in the image Be Neutral
  19. • No length limits, but … • Consider how screen

    readers process • Consider cognitive load, auditory fatigue Alt Text: Less Is More
  20. • Alt text just needs company/organization name • Don’t need

    to include “logo” • Don’t need to describe what logo looks like Logos
  21. • 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
  22. • 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
  23. • 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
  24. • 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
  25. Demo – Using NVDA to browse color choices when purchasing

    a candle on Anthropologie Ecommerce Alt Text, In the Real World
  26. • 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
  27. • Describe the visual impact • Describe the relationships of

    data The DAISY Consortium webinar series: daisy.org/webinar-series/ Extended Descriptions for Graphs and Charts
  28. • “Good” alt text is a skill; it’s microcopy •

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

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