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) 309-2350, Code: 14930# (please note this is a toll call)

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 email on Monday, and be posted on our webinars page www.ssbbartgroup.com/webinars

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

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

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

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

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

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

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

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>

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

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

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

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

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

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 + ;)

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

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