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

    View full-size slide

  2. Anthony Vasquez
    [email protected]
    Emily Lewis
    [email protected]
    • www.linkedin.com/in/emilyplewis
    Connect With Us!

    View full-size slide

  3. • Visual design
    • Contrast
    • Color
    • Motion
    • Animation
    • File formats or optimization
    This webinar is not about

    View full-size slide

  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

    View full-size slide

  5. WCAG Requirements
    Text Alternatives
    Areas of Subjectivity
    Functional, Informative & Decorative Images
    Describing Images
    Roles & Responsibilities
    Agenda

    View full-size slide

  6. What are images?

    View full-size slide

  7. • Illustrations
    • Photographs
    • Icons
    • Charts
    • Graphs
    Non-text Content

    View full-size slide

  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

    View full-size slide

  9. THE SCIENCE
    Text Alternatives

    View full-size slide

  10. • General, informative sentence
    • Provides accessible name for images
    • Can provide accessible name for controls that contain images
    • Screen readers announce
    Alt Text

    View full-size slide

  11. CodePen – Alt text for and :
    codepen.io/emilyplewis/pen/abpKqGg?editors=1000
    Alt Text, In Practice

    View full-size slide

  12. • Long/enhanced description
    • Visual text content
    • Different formats, structure
    • Accessible to everyone
    Extended Descriptions

    View full-size slide

  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 :
    codepen.io/emilyplewis/pen/poRKaxO?editors=1000
    Extended Descriptions, In Practice

    View full-size slide

  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

    View full-size slide

  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?

    View full-size slide

  16. THE ART
    Subjectivity

    View full-size slide

  17. Descriptive alt text for functional and informative images
    Extended descriptions for more complex imagery
    Hide purely decorative imagery from screen readers
    The Bare Minimum

    View full-size slide

  18. • Content goals
    • Business goals
    • Brand values
    • Available resources
    What’s Best for Your Images?

    View full-size slide

  19. It’s About People

    View full-size slide

  20. Demo – Using NVDA to explore images on The Atlantic homepage
    Alt Text, In the Real World

    View full-size slide

  21. Descriptive alt text for functional
    and informative images

    View full-size slide

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

    View full-size slide

  23. • Sole content of a control
    • Descriptive = Control purpose or destination
    WAI Functional Images:
    www.w3.org/WAI/tutorials/images/functional/
    Functional Images

    View full-size slide

  24. CodePen – Button with :
    codepen.io/emilyplewis/pen/PoWaQvJ?editors=1000
    Functional Images, In Practice

    View full-size slide

  25. • Contributes to understanding of content/page
    • Descriptive = Obvious, general visual information
    WAI Informative Images:
    www.w3.org/WAI/tutorials/images/informative/
    Informative Images

    View full-size slide

  26. Demo – Using NVDA to examine promotional images on REI’s homepage
    Informative Images, In the Real World

    View full-size slide

  27. Hide purely decorative imagery from
    screen readers

    View full-size slide

  28. • 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

    View full-size slide

  29. *Every must have
    an alt attribute

    View full-size slide

  30. CodePen – Decorative and :
    codepen.io/emilyplewis/pen/VwPdQom?editors=1000
    Decorative Images, In Practice

    View full-size slide

  31. THE ART
    Describing Images

    View full-size slide

  32. • Front-load the most important information
    • General to specific
    • Simple, precise language
    Plain Language:
    www.plainlanguage.gov
    Be Informative & Clear

    View full-size slide

  33. • Proper spelling, grammar and punctuation
    • Write out acronyms
    • Write out symbols
    • No line breaks
    Be Accurate

    View full-size slide

  34. • Don’t interpret thoughts or feelings
    • Don’t instruct
    • Don’t add more than what’s in the image
    Be Neutral

    View full-size slide

  35. • Don’t repeat caption or surrounding text
    • Cut unnecessary phrases
    Reduce Redundancy

    View full-size slide

  36. • No length limits, but …
    • Consider how screen readers process
    • Consider cognitive load, auditory fatigue
    Alt Text: Less Is More

    View full-size slide

  37. Context Is Key

    View full-size slide

  38. • Alt text just needs company/organization name
    • Don’t need to include “logo”
    • Don’t need to describe what logo looks like
    Logos

    View full-size slide

  39. • 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

    View full-size slide

  40. • 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

    View full-size slide

  41. • 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

    View full-size slide

  42. • 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

    View full-size slide

  43. Demo – Using NVDA to browse color choices when purchasing a candle on
    Anthropologie
    Ecommerce Alt Text, In the Real World

    View full-size slide

  44. • 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

    View full-size slide

  45. • Describe the visual impact
    • Describe the relationships of data
    The DAISY Consortium webinar series:
    daisy.org/webinar-series/
    Extended Descriptions for Graphs and Charts

    View full-size slide

  46. THE BUSINESS
    Roles & Responsibilities

    View full-size slide

  47. • “Good” alt text is a skill; it’s microcopy
    • Extended descriptions need expert input
    • Beyond WCAG requires a team effort
    Challenge Assumptions

    View full-size slide

  48. • Marketing, web designers
    • Content strategists
    • Copywriters, editors
    • Content authors
    • Quality assurance testers
    • Project managers, team leads
    Text Alternative Team

    View full-size slide

  49. Collaboration

    View full-size slide