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
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?