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.

Transcript

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

   View Slide

2. Anthony Vasquez
   • avasquez@knowbility.org
   Emily Lewis
   • emily@knowbility.org
   • 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