1. Accessibility Basics Series: Non-Text Elements
Presented by:
Erica Zelmanowicz
Training Specialist
This webinar is scheduled to begin at 2pm EDT / 11am PDT
Audio is provided through the webinar platform via your computer’s speakers, or there is an optional conference line: (805) , Code: 14930# (please note this is a toll call)

2. Webinar Features
Real-time Captioning – Captions are provided in the captioning pod (upper right). In the event we experience any issues with the pod, we will ensure that the recording of today’s session is closed captioned.
Questions – Q&A time will be provided at the end of the presentation. Please submit questions via the Q&A pod.
Today’s Session is Being Recorded – Link to slides, recording, and transcript will go out via on Monday, and be posted on our webinars page

3. Users who are blind cannot see images and rely on an image description
Overview
Introduction
Users who are blind cannot see images and rely on an image description
Users who have low vision rely on text equivalents of images when magnified images become pixilated, when contrast is insufficient, or when the image is too small
Users navigating with voice recognition software activate image links using text equivalents
User Impact
Users who are blind
Users who are visually impaired
Alternative text provides a textual alternative to non-text content in web pages. We’ll be discussing alternative text for images specifically, though the principles can be applied to media or other non-text web content.
Alternative text serves several functions – it is read by screen readers in place of the image to provide contextual information to users who are blind or users with low vision and if the image file is not loaded, it is displayed in place of the image
The key here is that computers and screen readers cannot analyze the image and determine the meaning. Text representing the context and function of the image must be provided. 3

4. Provide informative alternative text for images
Requirements
Provide informative alternative text for images
Ensure complex images are provided with detailed descriptions that are available without assistive technology
Ensure text is used instead of images of text when technology allows or unless the image is essential 4

5. Alternative Text - Overview
Provide informative alternative text for images
All images must provide text equivalent
E.g. alt text for images and image buttons
On-screen equivalent
Decorative images must be identified as such
Text equivalent must convey same purpose when image is not present
CSS background images
Not possible to assign alternative text
Background images disappear in high contrast mode
Alternative text can be presented in several ways: Through the use of the alt attribute in the img tag or through text surrounding the image (to give the image context).
Decorative images are images that do not convey meaning. They should be given a null alt attribute (or alt=“”) to ensure that screen readers do not render the image, as the image does not provide context to the page
Background Images:
It is not possible to provide alternative text through the alt attribute for background images. It is best to use inline images instead of background images when the images convey meaning. If it is not possible to use inline images, ensure that a textual alternative is provided for the background images within the page content such as through off-screen text. 5

6. Alternative Text - Example
Non-compliant Example
<img src=“4stars.jpg” alt=“stars" />
Compliant Example
<img src=“4stars.jpg” alt=“4 out of 5 stars" />
Non-compliant Decorative Example
<img src=“spacer.gif” />
Compliant Decorative Example
<img src=“spacer.gif” alt=“” /> 6

7. Alternative Text – Example (cont.)
Compliant Button Example
<input type="image" alt=“save” />
Compliant CSS Background Example
Download the Non-Text Elements Transcript (PDF) or
Download the Non-Text Elements Transcript
(“PDF” text positioned off screen with CSS)
Compliant Photo Example
<img alt="Nurse checking patient cast" src="nurse_bandage.jpg" />
Note: The level of detail required in the alt text is based on the purpose of the image
CSS background image example – links with PDF image as part of the link - position PDF text on screen as part of the link or position it off screen using CSS as part of the link

8. Alternative Text – Implementation Techniques
Determine what type of image is used
Provide alternative text
Conveys meaning or functionality
An alt attribute should be a concise and meaningful replacement for the image
Describe action or purpose and not image itself
Decorative or redundant
Use null alt attribute (alt=“”)
Complex images such as charts and Infographics
Provide detailed text equivalent
Images Test to tell humans and computer apart (CAPTCHA)
Provide alternative method
Background images including before and after pseudo classes
On-screen text
Off-screen text
Appropriate alternative text depends heavily on the image's context. 8

9. Complex Images - Overview
Ensure complex images are provided with detailed description
Complex images include:
schematics
infographics
plans
diagrams
charts
graphs
Alternatives should be:
informative
visible
When an equivalent alternative for a complex image, such as a chart, graph, or map cannot be limited to a concise alt attribute and is not presented within the context of the page (such as in an adjacent data table), then the alternative should be provided elsewhere. Typically we will see this done by providing a link to a separate page with a longer description of the complex image. The alternative text for that image should still describe the general meaning of the image itself. 9

10. Complex Images - Examples
Compliant Example–Map
<img src=“school_map.gif” alt=“School Map” /> <a href=“school_map.html”> School map description </a>
Compliant Example–Graph
<img alt=“Service Delivery
Sites graph” src=“/data-statistics/deliverysites.gif” />...
<p>The service delivery graph shows each site with number of deliveries per quarter. Site A–Q1: 23, ... </p>

11. Complex Images – Implementation Techniques
The alt attribute should not be used for long descriptions
Provide a short alt text as a label
Provide a longer textual description
Textual description can be:
on the page
on another page via link
a data table and text summary
provide detail to the level necessary to convey the meaning
The longdesc attribute only provides the long description to some screen readers. Sighted users will not be aware of that long description.
Longdesc is not currently part of HTML5 as well.
If you must use a longdesc then it is recommended that a standard link to the long description page also be present.
Figure and figcaption allow a semantic association between an image and the image's caption. The figcaption should be presented as the alternative text for the image within the figure.
<figure> <img src="acme.jpg"> <figcaption>Acme Corporation</figcaption> </figure> 11

12. Images of Text - Overview
Avoid the use of images of text
Applies to images where main purpose is to display text
Does not apply to a photo that happens to include text
Some users require a particular visual presentation of text–this cannot be adjusted for images of text
This allows users to adjust the font family, font size, or color of text
Exceptions
Unless technology does not support the same visual presentation
Text that is part of a logo or brand name can remain images 12

13. Images of Text - Example
Non-Compliant Example
<img type=“image” name=“submitbutton” alt=“submit” src=“submit.png”>
Compliant Example
<button class=“submit”>Submit</button>
(Style with CSS) 13

14. Images of Text – Implementation Techniques
Solutions
Convert images of text to text and style using CSS or
Provide dynamically rendered images that are updated based on user preferences for font family, size, and color
Exceptions
Logotypes (text that is part of a logo or brand name)
Original letters
When a particular font family or technology must be used but is not widely distributed, or for other essential reasons
Note: Provide alternative text for the exception images in line with the relevant best practices for images. 14

15. Images of Text - Exceptions
Original Documents
Photograph that happens to have text in it, but the main purpose is to show the surrounding content
Logo 15

16. Questions? Please type questions in the Q&A pod.
If unable to access the Q&A pod, you may use the Chat pod (Keyboard: Ctrl + ;)

17. Thank You Contact Us Follow Us Erica Zelmanowicz Kim Phillips
Kim Phillips
Follow Us
@SSBBARTGroup
linkedin.com/company /SSB-BART-Group
facebook.com /SSBBARTGroup
SSBBARTGroup.com/blog

18. Comprehensive accessibility curricula Up-to-date knowledge
SSB University
Comprehensive accessibility curricula
Up-to-date knowledge
Wide range of multimedia courses
Extensive online training materials
User tracking and management
Try SSB University for Free!
April 15 - May 15
2 courses available
Info/Register: info.ssbbartgroup.com/SSB-U-Free-Trial.html
Courses in free trial:
Accessibility Concepts 2.0
This overview course is great for anyone in your organization, from executives to customer service representatives. After completing this course, they will be able to:
Explain business drivers for accessibility
Recognize the various disability types and how inaccessible IT impacts each user group
Understand Assistive Technologies commonly used by people with disabilities
Describe accessibility standards, laws, and regulations
Accessibility QA for the Web
This course, which is perfect for your QA team, looks at techniques for testing and evaluating accessible web content. After completing this course, they will be able to:
Define accessibility for the web
Describe different types of web content and their impact on users with disabilities
Recognize common international standards for web accessibility
Explain the testing and evaluation techniques for web accessibility