1. Context Is Everything Meaningful Alternative Text
11/11/2018 1:53 PM
Context Is Everything Meaningful Alternative Text
Lainie Strange Web Accessibility Coordinator State of Missouri – ITSD
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

2. What We’ll Cover Today:
11/11/2018 1:53 PM
What We’ll Cover Today:
Images - Content and Function
Real-World Examples, Including How-To’s For Documents and Social Media
4 Key Takeaways in Determining Alternative Text
Q & A Time!
Real-World web examples
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

3. Alt=“descriptive text”
11/11/2018 1:53 PM
Alternative Text
The first principle in the web accessibility guidelines (WCAG 2.1)
But yet can be the most difficult to implement
It can still involve interpretation
Alt=“descriptive text”
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

4. Role of Alternative Text
11/11/2018 1:53 PM
Role of Alternative Text
Read by screen readers in place of the image, used by those with visual or certain cognitive issues
Displays in browser if image file is not loaded or when user chooses not to view images
Provides meaning and description to image by search engines
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

5. Alternative Text Function and Content
11/11/2018 1:53 PM
Alternative Text Function and Content
The first step, determining:
Function – is the image part of an action – a link, a button, etc.?
Content? This is what we’ll dive into…
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

6. Context is Everything - #1
11/11/2018 1:53 PM
Context is Everything - #1
Context – a photo gallery about guide dogs and handlers, in this case you would identify and not leave your alt text generic
Never start alt with photo of, image of
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

7. Context is Everything - #2
11/11/2018 1:53 PM
Context is Everything - #2
Context – again, you would not leave the alt text generic, but in this case, the focus is Keeper due to context
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

8. Context is Everything - #3
11/11/2018 1:53 PM
Context is Everything - #3
Context – a guide about guide dogs. The context is guide dog leading, so it briefly explains this action from the photo
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

9. 11/11/2018 1:53 PM
Alt Text - Charts
Either provide the data in text format directly below image or
Provide data as link to another page
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

10. Alt Text - Charts Provide data in text format Contrast
11/11/2018 1:53 PM
Alt Text - Charts
Provide data in text format
Contrast
Check that chart data has enough contrast (grayscale)
If not sufficient, use patterning and outlining
Grayscale Test
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

11. Alt Text - Logos Primary function is to link to the homepage
11/11/2018 1:53 PM
Alt Text - Logos
WebAIM
Primary function is to link to the homepage
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

12. 11/11/2018 1:53 PM
Alt Text - Logos
WebAIM
In this example, logo is not a repeated part of page template
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

13. Alt Text – Maps Creating your own: Provide a long description in text
11/11/2018 1:53 PM
Alt Text – Maps
Creating your own:
Provide a long description in text
Make the map screen reader accessible
Make the map keyboard accessible
Meet color contrast requirements
Use icons, shading or patterns in addition to color
Ensure users can increase text size
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

14. Alt Text – Google Maps Descriptive heading
11/11/2018 1:53 PM
Alt Text – Google Maps
Descriptive heading
Describe the purpose of the map
Iframe includes a title
Include a link to non-embedded map
Embedded map like Google Map:
Descriptive heading
Describe the purpose of the map
Iframe includes a title
Include a link to non-embedded map – many users jump over to the more accessible Google maps mobile app
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

15. Alt Text – ESRI Maps/StoryMaps
11/11/2018 1:53 PM
Alt Text – ESRI Maps/StoryMaps
Still accessibility issues, continuing to work to improve accessibility
Include tabular data version with map
Include heading and map description
Scanned the community forum, several conversation from ESRI staff who have built accessible map examples so it’s definitely on their radar.
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

16. Alt Text – Links This includes: Images that are links
11/11/2018 1:53 PM
Alt Text – Links
This includes:
Images that are links
Links containing images
Icons in links
Add more detail for this slide
Do not place hyperlinks ( etc.) in image alt text
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

17. Alt Text – Text Contained In An Image
11/11/2018 1:53 PM
Alt Text – Text Contained In An Image
Find a more meme-like example
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

18. Alt Text – Decorative Images
11/11/2018 1:53 PM
Alt Text – Decorative Images
In HTML, decorative images, it is often best to add it as a background image with CSS
Keep readability in mind when placing background images
In documents, set background images to alt=“”
Watermarks – stored as part of the header in MS Word
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

19. Alt Text – Lines or Horizontal Rules
11/11/2018 1:53 PM
Alt Text – Lines or Horizontal Rules
Use properly formatted heading to break up content
Only use lines or rules when necessary, using alt=“”
WebAIM
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

20. Alt Text – Signatures 11/11/2018 1:53 PM WebAIM
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

21. Alt Text – Infographics
11/11/2018 1:53 PM
Alt Text – Infographics
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

22. Alt Text – Multiple images conveying one message
11/11/2018 1:53 PM
Alt Text – Multiple images conveying one message
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

23. Alt Text – Image Buttons
11/11/2018 1:53 PM
Alt Text – Image Buttons
Text alternative conveys purpose/action
WebAIM
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

24. Alt Text – Figure and Figcaption
11/11/2018 1:53 PM
Alt Text – Figure and Figcaption
HTML5 introduces the figure element
Figure and figcaption allow semantic association between an image and its caption
Image must still have alt attribute
Photo sharing sites may have alt text limitations
Add short sample code
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

25. Alt Text – Documents Same rules apply here as they do for HTML content
11/11/2018 1:53 PM
Alt Text – Documents
Same rules apply here as they do for HTML content
Implementation may be different
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

26. Alt Text – Microsoft Word, PowerPoint, Excel
11/11/2018 1:53 PM
Alt Text – Microsoft Word, PowerPoint, Excel
Size and Properties icon
Fill in Description, not title
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

27. Alt Text – Adobe Acrobat
11/11/2018 1:53 PM
Alt Text – Adobe Acrobat
Tags panel
Find your images wrapped in Figure tags
Right-click properties to fill in alt text
You can also access alt text via the accessibility option
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

28. Alt Text – Facebook 11/11/2018 1:53 PM
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

29. Alt Text – Twitter Enable image descriptions
11/11/2018 1:53 PM
Alt Text – Twitter
Enable image descriptions – under settings and privacy – accessibility
Enable image descriptions
Add description option under image
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

30. Alt Text – Twitter Enable image descriptions
11/11/2018 1:53 PM
Alt Text – Twitter
Enable image descriptions – under settings and privacy – accessibility
Enable image descriptions
Add description option under image
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

31. Alt Text – Video Content
11/11/2018 1:53 PM
Alt Text – Video Content
Include audio descriptions for visual content that is not available through audio
An example could include visually describing a sun rising at the beginning of a video before the speaker begins
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

32. Alt Text – Other Social Media
11/11/2018 1:53 PM
Alt Text – Other Social Media
Don’t have alt text options
Instagram
Flickr
Snapchat
Take of advantage of description areas to convey alt text
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

33. Alternative Text Four Key Takeaways
11/11/2018 1:53 PM
Alternative Text Four Key Takeaways
Be accurate and equivalent in presenting the same content and function of the image.
Be succinct. The correct content and/or function of the image should be presented concise and to the point as appropriate. General rule: Keep around 125 characters or under
Give or take 125 character averages around 18 words.
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

34. Alternative Text Four Key Takeaways
11/11/2018 1:53 PM
Alternative Text Four Key Takeaways
NOT be redundant or provide the same information as text within the context of the image.
NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It’s usually apparent to the user that it is an image.
Not be redundant – this means not just repeat surrounding text but focus on image context.
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

35. Q & A Time! Resources Social Security Administration-Alt Text Guide
11/11/2018 1:53 PM
Q & A Time!
Resources
Social Security Administration-Alt Text Guide
WebAIM’s Alternative Text Resource page
Images Tutorial (w3c.org)
An alt text decision tree (w3.org)
Interactive Maps
Interactive Maps – Gian Wild
Flow Charts and Concept Maps
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

36. Thank you! Lainie Strange Lainie.strange@oa.mo.gov Twitter: @r_tstik
11/11/2018 1:53 PM
Thank you!
Lainie Strange
© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.