communication...- links to webinar recordings - links to lynda.com tutorials • cornell resources...
TRANSCRIPT
COMMUNICATION
CCE SYSTEM CONFERENCE 2019Seeds of Change
Creating Accessible ImagesKatie Baildon and Paul Treadwell
CCE Accessibility TeamKatie BaildonCatina HymanEmily McFarlandHeather RussellPaul Treadwell
CCE Accessibility Team 2
Alt-Tag Walkthroughs
What is alt text
• Alternative text provides a textual alternative to non-text content in web pages. Alternative text serves several functions:
• It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
• It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
• It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.
Name of Presenter / Event or Location 4
Why alt text matters
• Accessible images are beneficial in many situations, such as:• People using screen readers: The text alternative can be read aloud or
rendered as Braille• People using speech input software: Users can put the focus onto a
button or linked image with a single voice command• People browsing speech-enabled websites: The text alternative can be
read aloud• Mobile web users: Images can be turned off, especially for data-roaming• Search engine optimization: Images become indexable by search engines
Name of Presenter / Event or Location 5
Not all images are created equal
• Some images need alt text, some do not.• Informative images must have alt text• Decorative images need null text alternative (alt=“”)• Images of text should be avoided when possible
• If needed, alt text should contain the same words as used in the image
• Need help deciding what an image needs?• Web Accessibility Initiative alt Decision Tree page
Name of Presenter / Event or Location 6
Microsoft Office images and visuals Use the Accessibility Checker (PowerPoint and Word) How to add alt text: • Add alt text to images• Add alt text to SmartArt graphics• Add alt text to shapes• Add alt text to chartsResources: • Accessibility.cce.cornell.edu > Create accessible Microsoft Office
documents
Katie Baildon & Paul Treadwell | CCE System Conference 2019 7
Facebook Help Center > How do I edit the alternative text for a photo? NOTE: You can only edit alt text on a computer or iOS device
1. Upload a new photo2. Edit existing photo
Katie Baildon & Paul Treadwell | CCE System Conference 2019 8
Name of Presenter / Event or Location 9
Instagram Help Center > How do I edit the alternative text for a photo on Instagram?NOTE: You can only add and edit alt text on a mobile device
1. Upload a new photo2. Edit existing photo
Name of Presenter / Event or Location 10
Name of Presenter / Event or Location 11
TwitterTwitter help center > How to set image descriptions
1. How to enable the composition of image descriptions from twitter.com
2. How to add image descriptions in Tweets from twitter.com
Name of Presenter / Event or Location 12
MoodleStaff Learning
accessibility.cce.cornell.edu
1. Upload new2. Edit existing
Katie Baildon & Paul Treadwell | CCE System Conference 2019 13
WordpressNew CCE blog
• Upload new• Edit existing
Katie Baildon & Paul Treadwell | CCE System Conference 2019 14
Recommended Resources
• Accessibility.cce.cornell.edu Create accessible Microsoft Office documentsCreate accessible social media profiles and posts
• Accessible U > Alt Text • WebAIM > Accessible Images
Katie Baildon & Paul Treadwell | CCE System Conference 2019 15
Webinar Series Captioning video, audio and PowerPoint – recording available Creating accessible Word documents – recording available Accessibility recommendations and compliance –recording availableWhy digital accessibility? – Recording coming soon Creating accessible images – this session. Recording coming soon
Accessible newsletters – April 24 11amPDFs and accessibility – May 22 11am
Registration and recordings at accessibility.cce.cornell.edu
CCE Accessibility Team 16
Contact us and general info• CCE Resources accessibility.cce.cornell.edu
- Accessibility Matters quick cards- Accessible word templates- Links to webinar recordings- Links to Lynda.com tutorials
• Cornell Resources (in particular, the Web Accessibility section) accessibility.cornell.edu
• Reach us at [email protected]
CCE Accessibility Team 17