Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Images for Everyone - ImageCon 2018

316 views

Published on

We developers and designers are obsessed with getting our images “just right” before we display them to our users. We perfect their art direction, selecting images that set the right mood or convey the right information. We fine-tune their performance characteristics and ensure that we serve the right image for a multitude of devices. But what about users who can’t see our finely-tuned images or distinguish between the colors in our beautiful infographics? How do we ensure that our images are accessible so that everyone can experience your site to the fullest ?

In this session, we’ll learn about the different types of visual, auditory, cognitive, and motor impairments that affect how users interact with images and other media, and we’ll cover practical techniques for ensuring that your images are accessible to everyone, regardless of how they experience the web.

Published in: Engineering
  • Login to see the comments

Images for Everyone - ImageCon 2018

  1. 1. Images for Everyone Katie Sylor-Miller
 Staff Software Engineer, Etsy
  2. 2. Etsy is a global marketplace where people around the world connect, both online and offline, to make, sell and buy unique goods.
  3. 3. Photo by Callie Morgan on Unsplash Art direction
  4. 4. Photo by rawpixel.com on Unsplash Multi-device Performance
  5. 5. Photo by Piotr Wilk on Unsplash We’re biased by our experience
  6. 6. What about people who experience the web differently than we do?
  7. 7. “Websites, tools, and technologies are designed and developed so that people with disabilities can use them.” ACCESSIBILITY (a11y) - W3C Web Accessibility Initiative
  8. 8. IMAGES FOR EVERYONE Why? Who? How?
  9. 9. IMAGES FOR EVERYONE Why? Who? How?
  10. 10. Empathy Exercise Glasses by PontiacDryGoods on Etsy
  11. 11. 57 M 19% AMERICANS WITH A DISABILITY UNITED STATES CENSUS REPORT, JULY 2012
  12. 12. 2016 2060 46 M 15% AMERICANS OVER 65 JANUARY 2016 POPULATION REFERENCE BUREAU REPORT 98 M 24% 46 M 15% AMERICANS OVER 65 POPULATION REFERENCE BUREAU REPORT, JANUARY 2016 98 M 24%
  13. 13. THE AMERICANS WITH DISABILITIES ACT (ADA) “No individual shall be discriminated against on the basis of disability in the full and equal enjoyment of the goods, services, facilities, privileges, advantages, or accommodations of any place of public accommodation” - ADA Sec. 12182 (a)
  14. 14. Accessibility Universal Design
  15. 15. Improving the experience for people with disabilities improves the experience for everyone
  16. 16. IMAGES FOR EVERYONE Why?
 Who? How?
  17. 17. Visual Auditory Motor Cognitive Vestibular disorders & seizures TYPES OF IMPAIRMENTS
  18. 18. Visual Auditory TYPES OF IMPAIRMENTS
  19. 19. Vision loss • Not just totally blind person using a screen reader! • Spectrum of many types from partial to full vision loss. • Refractive errors • Glaucoma • Cataracts • Macular degeneration • Diabetic retinopathy
  20. 20. simulator.seenow.org
  21. 21. Assistive technology (AT) • Screen readers: • JAWS, NVDA, VoiceOver, Talkback
  22. 22. Assistive technology (AT) • Screen readers: • JAWS, NVDA, VoiceOver, Talkback • Screen magnifiers - ZoomText • Dictation/speech recognition - Dragon NaturallySpeaking • Braille displays (but not all blind people read braille)
  23. 23. Visual Auditory TYPES OF IMPAIRMENTS
  24. 24. Hearing loss • Again, a wide spectrum from Hard of Hearing (mild to moderate hearing loss) to deaf (profound hearing loss). • Not all people with hearing loss speak sign language
  25. 25. Assistive technology • Captioning and transcription • Captioned telephone service (CTS) • Video relay service image via infoguides.rit.edu
  26. 26. IMAGES FOR EVERYONE Why?
 Who? How?
  27. 27. ACCESSIBILITY TECHNIQUES Standards & Guidelines Markup Images Color Video
  28. 28. ACCESSIBILITY TECHNIQUES Standards & Guidelines Markup Images Color Video
  29. 29. Standards & Guidelines • Section 508 • Government agencies and contractors, educational institutions - 1998 • Web Content Accessibility Guidelines (WCAG 2.0) • Developed by the W3C Web Accessibility Initiative (WAI) - 2008 • Three levels of compliance - A, AA, AAA
  30. 30. Provide alternative ways to access the information in visual and auditory content.
  31. 31. ACCESSIBILITY TECHNIQUES Standards & Guidelines Markup Images Color Video
  32. 32. Semantic HTML
  33. 33. ARIA • WAI-ARIA (Accessible Rich Internet Applications) - Provides additional accessibility semantics to assistive technology • Roles • States • Properties
  34. 34. .screenreader-only { border: 0;     clip: rect(0 0 0 0);     height: 1px;     margin: -1px;     overflow: hidden;     padding: 0;     position: absolute;     width: 1px; } Screenreader-only utility class
  35. 35. ACCESSIBILITY TECHNIQUES Standards & Guidelines Markup Images Color Video
  36. 36. Every <img/> must have an alt attribute, even if it’s empty!
  37. 37. <img src=“https://img.etsystatic.com/il/5bca0f/868794171/il_340x270.868794171_42wp.jpg?version=0" />
  38. 38. Every <img/> must have an alt attribute, even if it’s empty!
  39. 39. Decorative Functional Informative WHAT IS THE PURPOSE OF THIS IMAGE?
  40. 40. Decorative Functional Informative WHAT IS THE PURPOSE OF THIS IMAGE?
  41. 41. Decorative images • Provide no additional information to the page and function purely as visual decoration. • Background, spacer, and header/hero images are usually decorative. • Always hide from screen readers
  42. 42. // images use empty alt text w/no space 
 <img src=“pretty-bg.jpg” alt=“”/> // CSS background-image
 .hero {
 background-image: url(pretty-bg.jpg);
 } // svgs use aria-hidden
 <svg aria-hidden=“true”>...</svg> Hide decorative images & svgs
  43. 43. Decorative Functional Informative WHAT IS THE PURPOSE OF THIS IMAGE?
  44. 44. Functional images • Images that initiate an action. • If it’s inside a <button>, <a>, or other interactive element, it’s probably functional. • Always include text that describes the action, not the image itself
  45. 45. <button>
 <img src=“magnifying-glass.png” alt=“” /> Search
 </button> <button>
 <svg aria-hidden=“true”>…</svg> Search
 </button> Functional image with accompanying text Search
  46. 46. <a href=“/“>
 <img src=“logo.png” alt=“Etsy home” />
 </a> <a href=“/“ aria-label=“Etsy home”>
 <svg aria-hidden=“true”>...</svg>
 </a> <a href=“/“>
 <svg aria-hidden=“true”>…</svg>
 <span class=“screenreader-only”>Etsy home</span>
 </a> Functional image without accompanying text
  47. 47. .icon { font-family: ‘My Icon Font’; } .icon-right::after { content: '▻'; // unicode ▻ } <a href=“/”>Go home<i class=“icon icon-right”></i></a> SR says: “Link, Go home, WHITE RIGHT-POINTING POINTER” … About those icon fonts Go home
  48. 48. .icon { font-family: ‘My Icon Font’; } .icon-right::after { content: '▻'; // unicode ▻ } <a href=“/”>Go home
 <i class=“icon icon-right” aria-hidden=“true”></i>
 </a> … About those icon fonts Go home
  49. 49. Decorative Functional Informative WHAT IS THE PURPOSE OF THIS IMAGE?
  50. 50. Informative images • Images that provide information that is important for a user to understand the content of the page. • If an image’s information is also provided in the surrounding text content, then it is decorative. • Always provide a text alternative for informative images to screen readers. • Also benefits users on slow connections/with disabled images, and has SEO benefits.
  51. 51. Example informative images
  52. 52. // Simple descriptions in alt attribute
 <img alt=“Tweet-length description of the image content” /> // Complex descriptions add longdesc
 <img alt=“Short description” longdesc=“#long-desc” />
 ...
 <div id=“long-desc” class=“screenreader-only”>Long description goes in here</div>
 <img alt=“Short description” longdesc=“my-long-desc.html” /> Providing a text alternative
  53. 53. // title and desc elements <svg role=“img” aria-labelledby=“unique-title unique-desc”>
 <title id=“unique-title”>A short title</title>
 <desc id=“unique-desc”>A longer description</desc>
 </svg> 
 // aria-describedby
 <svg role=“img” aria-describedby=“description”>…</svg>
 <div id=“#description” class=“screenreader-only”>A longer description</div> SVG long descriptions !
  54. 54. <figure>
 <img src=“cat.jpg” alt=“My cat Ike” />
 <figcaption>
 Ike sitting on my keyboard while I’m trying to work.
 </figcaption>
 </figure> Use the <figure> element
  55. 55. // You can provide descriptive text inside of complex SVGs
 // See https://css-tricks.com/accessible-svgs/ // Hide SVG and provide tabular data
 <svg aria-hidden=“true”>..</svg>
 <table class=“screenreader-only”>
 [tabular data representation of the chart above]
 </table> SVG charts and graphs
  56. 56. Help! How do I write a good image description?
  57. 57. DON’T Use “image of”, “picture of”, “graphic of” or “icon” - this is redundant. Describe what the image is conveying: content, functionality, purpose. DO
  58. 58. DON’T Keyword-stuff Keep alt text short. DO
  59. 59. DON’T Embed text in images. Use CSS to position text over images only if the visual contrast is high enough DO
  60. 60. ACCESSIBILITY TECHNIQUES Standards & Guidelines Markup Images Color Video
  61. 61. Color blindness • Deficiency in one or more cones that detect Red, Blue and Green light. • Red/Green is most common, then Blue/Yellow. Complete color blindness is rare. • Color blindness affects 8% of men, 0.5% of women
  62. 62. @JakeWouldSee
  63. 63. DON’T Use color alone to convey information. Use text or another visual indicator to supplement color differences. DO
  64. 64. ACCESSIBILITY TECHNIQUES Standards & Guidelines Markup Images Color Video
  65. 65. Captions Transcripts Audio Descriptions VIDEOS
  66. 66. Captions Transcripts Audio Descriptions VIDEOS
  67. 67. Closed captions • Text representing the audio portion (spoken dialog and background noises) of a video appears overlaid onscreen.
  68. 68. How to add captions • Consider hiring an interpreter and/or transcriptionist for live events. • Pay for a professional or DIY with tools on amara.org or youtube.com • But don’t rely solely on YouTube auto captioning! Always have a human review.
  69. 69. // track element element
 <video width=“640” height=“480” controls>
 <source src=“my-video.mp4” type=“video/mp4” />
 <track default src=“my-captions.vtt” kind=“captions”
 srclang=“en”>
 </video> HTML5 video captions
  70. 70. WEBVTT
 
 1
 00:00:00.00 - -> 00:00:05.00 align:middle line:90%
 Text to display
 can be on multiple lines
 
 2
 00:00:05.00 - -> 00:00:08.031 align:left line:50%
 - More text
 [ non-verbal cues or sound effects ] VTT caption format
  71. 71. Captions Transcripts Audio Descriptions VIDEOS
  72. 72. Transcripts • Same word-for-word content as captions with additional information: • speaker or character names, descriptions of action, transcribed text, and visual information. • Can be embedded in the page or link out to it separately. • No set format for transcripts (except for YouTube).
  73. 73. >> KATIE: Hi, my name is Katie and I love unicorns >> MARTIN: What a surprise! I also love unicorns! [KATIE and MARTIN High-five] >> KATIE: Let’s celebrate by breaking out into song! [music plays] YouTube transcript format
  74. 74. Captions Transcripts Audio Descriptions VIDEOS
  75. 75. Audio Descriptions • A narrator describes visual information during natural breaks in the audio track.
  76. 76. Audio Descriptions • A narrator describes visual information during natural breaks in the audio track. • If all of the visual content is present in the video, you don’t need descriptions. • Not available in HTML5 video or YouTube, so include it as a separate video. • Final Cut Pro can export an audio track that is recognized by QuickTime on Macs and iOS
  77. 77. Captions, transcripts and descriptions benefit everyone
  78. 78. IMAGES FOR EVERYONE Why?
 Who? How? What next?
  79. 79. Test your site • Chrome dev tools Lighthouse audits • aXe - open source browser extension, command-line interface and CI test integration 
 https://www.axe-core.org/ • Koa11y - open source desktop app 
 http://open-indy.github.io/Koa11y/
  80. 80. Start with semantic HTML
  81. 81. Give every <img/> an alt attribute
  82. 82. Add captions, transcriptions, and audio descriptions to your videos
  83. 83. Let’s care as much about accessibility as we do about performance.
  84. 84. Learn more • “Accessibility for Everyone” book by Laura Kalbag • @A11yBay - Bay Area Accessibility and Inclusive Design Meetup • CSUN Assistive Technology Conference • A11y Slack - https://web-a11y.herokuapp.com/
  85. 85. sylormiller.com/ic-a11y @ksylor Thank you! 98

×