Penn Content Provider Tip Sheet 04122019

Web Accessibility Content Provider Tip Sheet University Communications, University of Pennsylvania

Table of Contents • Web Accessibility Overview • The Web Accessibility Guidelines • Different Kinds of Web Users • Observing the Different Users • Helpful Web Accessibility Tools • How to Apply the Web Accessibility Guidelines

o Text o Images o Video o Podcasts o PDFs

Web Accessibility Overview The Web Content Accessibility Guidelines (WCAG 2.0) are a set of recommendations for making webpages more accessible—primarily for people with disabilities and user agents (software) but also for all users of mobile devices. Applying WCAG techniques makes technology easier to use and inclusive for everyone. Under certain circumstances, adhering to WCAG 2.0 guidelines has become legally required under the Americans with Disability Act (ADA) and Section 508 of the Rehabilitation Act. Both ensure that all people have equal access to goods, services and communication. Section 508 is specific to Information Communication Technology for federal government agencies and services. Source: https://www.w3.org/WAI/standards-guidelines/wcag/ WCAG 2.0 Levels A and AA General Guidelines: One of the key objectives of the guidelines is to ensure that content is directly accessible to as many people as possible, and capable of being re-presented in different forms to match different peoples’ sensory, physical, and cognitive abilities.

Penn Content Provider Tip Sheet 04122019

12 guidelines for making web content accessible: 1. Text Alternatives (for non-text content) 2. Time-based Media (live, pre-recorded, synchronized) 3. Adaptable (presentable in different ways) 4. Distinguishable (background/foreground) 5. Keyboard accessible 6. Enough time (to read and use content) 7. Seizures (avoid flashing lights) 8. Navigable (know where you are) 9. Readable (understandable) 10. Predictable (operate in predictable ways) 11. Input assistance (with obvious error indicators) 12. Compatible (with assistive software)

Different Kinds of Users Keep different user needs in mind when creating content. Below are some of the different challenges that some users face and solutions to help them overcome the challenges:

• Autism Spectrum—use simple colors and language, bullet lists, and clean layouts • Screen reader users—use alternative text, linear layout, structured code, use keyboards • Low Vision—use color contrast, linear layout, utilize shapes • Physical or Motor Disabilities—large clickable targets, space between form fields • Deaf or hard of hearing—use simple language, add transcripts and subtitles, use

structure with sub-headings and image • Dyslexia—use simple language and supportive images, consistent layout, provide

alternative formats, allow user to change contrast Observing User Experience It is helpful to observe how different users consume web content. Some users employ assistive technologies to peruse the web. Below are links to examples found on YouTube:

• Screen Reader Demo for Digital Accessibility UCSF (length 4:44 / Go to 2:00) - https://www.youtube.com/watch?v=dEbl5jvLKGQ

• Screen Reader Demo SLCC Universal Access (length 3:49 / Go to 0:30) - https://www.youtube.com/watch?v=q_ATY9gimOM

• Using a Screen Reader - The DOITCenter (length 7:45 / Go to 1:30) - https://www.youtube.com/watch?v=7Rs3YpsnfoI

Penn Content Provider Tip Sheet 04122019

• Blind Inspirationcast (length 13:15 / Go to 6:30) - https://www.youtube.com/watch?v=2PMuBQ7LyOw

Helpful Web Accessibility Tools

• Use WebAim—Enter URL into checker tool; Go to https://wave.webaim.org/ • Download Wave plugin browser extension; Go to https://webaim.org/ • World Wide Web Consortium—for a list of Evaluation Tools; go to

https://www.w3.org/WAI/ER/tools/

Process for Accessible Text Web Pages - 04232019

Tips for Creating Accessible Web Pages Provide document structure to organize content.

• Use headings in place of bold face. Headings assist with skimming the content on the page. Start with Heading 1 (one Heading 1 per page), then use Heading 2, followed by Heading 3, then Heading 4 (up to Heading 6.)

• Use lists to break up a “wall of text.” • Include structural elements like anchors to help visitors find their place readily, e.g., “Back to

Top.”

Provide descriptive links. Do not label links with “Click here” or “More.” Instead use language that informs the visitor what will happen when they use the link, e.g. “Go to Admissions” or “Download (PDF).”

Images should be labeled using identifiable words with hyphens. When labeling images, use hyphens between words so that they are readable by screen readers. Use upper and lowercase lettering, e.g., use Faculty-Awards.jpg not FacultyAwards.jpg and avoid using only numbers if possible.

For images, provide alternative text (“alt tag”) by writing a simple description. Include images that improve understanding of the page content. If images are decorative only, leave the “alt tag” field empty (use quotation marks, “ ” if writing html).

Select colors carefully.

• Use colors that are not too bright for cognitively impaired or sensitive users • Provide text when using color for emphasis, e.g. “Alert! Registration Deadline” (red font) for

colorblind users and screen readers

Prepare downloadable files and label the links.

• Make Microsoft Word documents accessible before posting or saving as PDF • Make PDF files accessible using Adobe Acrobat Pro • On the web page where the file is hosted, add a label (PDF) or (DOC) after the link, e.g.

Download Report (PDF)

Unique Titles.

In html, use unique page titles for each page.

Process for Alt Tags – 04122019

Adding Images to Accessible Web Pages Select images that add value or additional content and include alternative text (alt tags) so images can be read by screen readers. Use decorative images only if needed. When Writing Alt Tags, Context is Everything First, determine the purpose of the image: Is it content, a functional link, or decorative? Then follow these guidelines: DO: Correct Way to Write Alt Tags

• Do write alt tags that describe the image and emotions conveyed. The alt tag, caption, and title work together so visually challenged visitors using a screen reader can understand the message the image provides

• Do use spaces between words (not hyphens or underscores) • Do write out text that is embedded in the image, e.g. name of organization in logo

DON’T: Incorrect Way to Write Alt Tags

• Don’t be redundant; Don’t copy/paste the title, the caption, or use the same alt tag for all images on a page

• Don’t use acronyms and abbreviations unless they are required; spell them out • Don’t write alt tags for decorative images that do not add relative content to a page;

Leave the alternative text field empty • Don’t write “logo” or ”graphic” for descriptions of logos and graphics; write only the

words that are embedded in the logo or graphic. If graphics are purely decorative, leave the alt tag field empty

Process for Alt Tags – 04122019

Example: Incorrect Way to Write Alt Tags The example shows an alt tag for an image from PennToday. The alt tag is MOE1 and does not describe the image or add meaningful content. A better alt tag would be “audience clapping hands”

Process for Accessible Video – 04122019

Process for Adding Video to Accessible Web Pages OVERVIEW

1. Obtain a high definition version of a video. 2. Upload to a hosting account, where you can add closed captions, the Penn logo, and a custom

thumbnail. 3. Use Rev.com to order transcripts; $1/minute. 4. Check the transcripts against the audio for accuracy. 5. If the Rev document is going to be used and converted into PDF to post near the video, remove

Rev logo and footer. VIDEO HOSTING PLATFORMS Videos are uploaded to platforms like YouTube or Vimeo. Videos embedded in web pages use code generated by the hosting platform. There is a benefit to using both Vimeo and YouTube for hosting videos: Use YouTube for the advantage of having it available for Google search (Google owns it). Use Vimeo’s code for embedding. CLOSED CAPTIONS AND TRANSCRIPTS Penn orders caption files, both the .scc and .srt. The .scc file is what gets uploaded into YouTube and Vimeo, but Facebook uses the .srt. Penn also orders the transcript file at the same time, which is a .txt file. The transcript file must be checked for accuracy and reformatted to remove any branding of the transcript service. Check that the speakers’ names are attributed to the text. The transcript can then be made into a downloadable document or web page and linked with the embedded video. Video without spoken words, such as a slideshow or a demo, should post a transcript with a description of the actions and text. When ordering captions, you can receive them in a variety of formats without paying any extra. (Below is a screen capture of Rev’s dropdown menu of options with the ones Penn uses selected.) The way caption files work is that they have a timecode baked into them, timing perfectly with the audio track. When you upload the videos to Vimeo and YouTube, there is a tab that allows you to upload closed caption files (the .scc file) and then the viewer just has to turn them on when they go to the video. The only way that caption files would always be visible when a video plays is if they are baked into the video file when it is edited and exported. We don’t recommend this.

Process for Accessible Video – 04122019

Process for Accessible Podcasts - 04122019

Process for Providing Accessible Podcasts

Four Steps for Accessible Podcasts: 1. Record the podcast. 2. Use hosting service for the podcast. 3. Get transcription of the audio. 4. Create a word document of the transcription that is accessible. 5. Post the transcription online.

1. Record the podcast: Access to the text transcript can be mentioned in the opening or

closing audio, e.g., “The text version of the podcast will be available.” After recording, convert the audio file. A Wave file converts to a compressed MP3 file. (If the file is being shared, upload it to a file sharing site, such as Penn Box.)

2. Use hosting service for the podcast: The MP3 file needs to be uploaded to a hosting service, such as Libsyn (Liberated Syndication) at https://www.libsyn.com. The service can affect accessibility. Look for one that allows “show notes.” The hosting service will connect and distribute to podcast providers, e.g. Libsyn distributes it to iTunes, Google Play, SoundCloud, Spotify

3. Transcription of the audio: A transcription file of the audio must be provided to the users. Use a transcription service, like Rev.com at https://www.rev.com. The service will send back a document with the transcribed text. Before using as-is, check several areas: The text matches the audio, typos, accurate spelling of personal names, and the name of the speaker appears next to the paragraph. Sometimes the paragraphs are labeled Speaker 1 and Speaker 2 but it is best for comprehension to use personalized labels.

4. Provide the transcript: Provide the transcript by creating a web page using the transcript or making a downloadable document of the transcript. Format the transcript document to remove unwanted branding, add personal labeling, and add a title. It is best to make it accessible when it is a word document before converting it to PDF by using the Word Document accessibility tools for Headings. If you make the document a PDF, be sure it is accessible by utilizing the OCR tools in Adobe Acrobat Pro.

5. Post the transcription online. When posting the transcript document, add a label to the link so the user is aware that it is downloadable. Instead of “Click here” use “Download transcript” and add PDF labeling, e.g., Download transcript (PDF).

Process for Accessible PDFs - 04122019

PDF Accessibility

Basic Terminology: PDF: Format or type of document that stands for Portable Document Format.

PDF Files PDF files are converted files that were created in many kinds of software programs. The accessibility of a PDF depends upon the accessibility of the original document. If starting with a word document, it is best to use the accessibility tools built into the software to make them accessible. Headings give pages structure and allow easier scanning. For instance, add headings by selecting styles located in the tool bar, starting with Heading 1 for the first heading and Heading 2 for the subheading. The next subheading uses Heading 3, etc. Alternative text can be added to images so the user will have a description of what is in the image that they may not be able to see or comprehend: Insert image > click on Review > click on Check Accessibility > opens a sidebar > click on Alt Text and fill in a description of the image. If starting with a PDF document, the document can become accessible by using Adobe Acrobat Pro and using the Accessibility Tools. The text can be converted to “OCR” (optical character recognition), which can be read by screen readers. Go to Tools > Enhance Text > Recognize Text. Alternative text can be added to images. For more information about making PDFs accessible, go to the web accessibility website Webaim.org, at https://webaim.org/techniques/acrobat/.