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 Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

  6. What are images?

    View Slide

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

    View 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 Slide

  9. THE SCIENCE
    Text Alternatives

    View 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 Slide

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

    View Slide

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

    View 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 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 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 Slide

  16. Questions?

    View Slide

  17. THE ART
    Subjectivity

    View Slide

  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

    View Slide

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

    View Slide

  20. It’s About People

    View Slide

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

    View Slide

  22. Descriptive alt text for functional
    and informative images

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. Hide purely decorative imagery from
    screen readers

    View Slide

  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

    View Slide

  30. *Every must have
    an alt attribute

    View Slide

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

    View Slide

  32. Questions?

    View Slide

  33. THE ART
    Describing Images

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. Context Is Key

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  48. THE BUSINESS
    Roles & Responsibilities

    View Slide

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

    View Slide

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

    View Slide

  51. Collaboration

    View Slide

  52. Questions?

    View Slide