Accessibility

Non-text content, such as an image, requires you to provide alternate text. This text explains what an image is and what it is trying to convey. Alternative text is read by screen readers to ensure visitors with disabilities have the text alternative to read.

1. The alternative text must accurately represent the image.
2. Do not use the phrases “image of” or “graphic of” in the alternative text.
    

Image accessibility best practice

• If images have text within them, the alternative text should include the embedded text and a brief description of the image.
• Alternative text should be within 8 to 80 characters. If it is too long, use a complex image description.
• If the image is a link, both the image and the link require a description.
• Decorative images do not need alternative text. In the alternative text box add (alt=””).
• Complex images require additional text descriptions on the page.

Example of the alternative text box

Learn more on the Electronic Accessibility > Provide meaningful descriptions section on the UCOP website.

You can understand the need for transcripts and captions if you keep in mind how people may access content. Blind individuals often use screen readers, which is software that uses audio output to interpret and "read" the content, such as transcripts, out loud to the user. Hearing impaired individuals may depend on captions and transcripts so they can access audio by reading. Individuals with cognitive disabilities may rely on a mix of audio and captions.  Some situations require only transcripts. Others require captions. Note that to make captions you must first have a transcript.

• All videos must have captions. Please note that relying on machine learning to automatically generate the captions is not sufficient. We have all seen videos where the text does not match the audio. For many visitors this would mean that they are unable to understand some of the message. You must verify manually that the captions are correct.

Learn more on the Electronic Accessibility > Transcripts and captioning section on the UCOP website.

Complex images, such as graphs, charts, diagrams, illustrations, and maps, contain substantial information that cannot be conveyed in a short phrase or sentence. If you are planning on using complex images on the web platform, you must meet the WCAG 2.0 standard. These images require a two- or three-part text alternative:

1.  Alt Text: Identifies the image and indicates the location of the long description. This is a required field on the web platform for all images. You populate alt-text when uploading or editing an image in the media library but it is not visible on the page. 
    
2.  Image Caption: Provides a detailed textual representation of the essential information conveyed by the image. This is an optional field on the web platform. However, for complex images with important composition details, this becomes a required field to ensure accessibility for people with low vision, learning disabilities, or limited subject-matter experience.
    
3.  Long Description: If it's too long for a caption, additional information should live on the body of the page. View a sample chart on the Web Accessibility Initiative's page about complex images and then view the sample long description of the chart.
    

Complex images have a high bar to meet. Together, the alt-text, caption, and long descriptions work together to make information accessible.
 

Examples of Captions and Alt Text for Images

• The Modlin Lab's research page uses alt-text, image captions, and long descriptions that are visible in the expandable and collapsible accordions. Long descriptions don't have to use accordions and could live on the page as on-screen text. 

   

Clearly identify the language to be used for links. Accessing links and making sense of them is critical to disabled visitors. The content developer needs to control the language used for links and not leave it up to the technical implementation team.

It is important to remember that if you list out a full URL, a screen reader is going to read out each letter and number of the URL.

Best practices are:

• Use a description of the URL location.
• Make the text in the sentence the link.

Learn more on the Electronic Accessibility > Carefully select the language for links section on the UCOP website.
 

Adding accessibility tags to a PDF file makes it easier for screen readers and other assistive technologies to read and navigate a document that contains hyperlinks, bookmarks, alternate text, etc. PDF tags provide a hidden, structured representation of the PDF content that is presented to screen readers. It is vital that this is done properly otherwise anyone using this technology will get lost in the document.  

Learn more by visiting the following resources

• Electronic Accessibility > Create accessible PDFs by the UCOP.
• Create Accessible PDFs by Microsoft.
• Create and verify PFD accessibility by Adobe.

Making online surveys accessible can be tricky. Readers may have disabilities that, depending on how you’ve designed the survey, may make it hard for them to access or complete it.

Tips on the Electronic Accessibility > Guidelines for accessible surveys and forms section on the UCOP website can help you create surveys that everyone can participate in. Respondents will appreciate a survey that’s easy-to-understand and easy-to-navigate.

To make sure a website is accessible (1) have well-trained web developers create it, (2) evaluate it with software tools, and (3) have end users test it.

• Functional Accessibility Evaluator 2.0 (free): This tool from the University of Illinois - Urbana-Champaign allows the user to enter a URL and get a quick accessibility evaluation of that one page. Users can opt to create a free account to evaluate multiple pages at a time and generate and save reports. FAE 2.0 tests HTML5 and ARIA techniques or HTML 4.
• SortSite (commercial): Generates site-wide reports for accessibility, broken links, device compatibility, SEO, privacy, usability, and validation.
• WAVE (free): This toolbar provides a mechanism for running WAVE reports directly within Firefox and Chrome. WAVE is a free online tool from WebAIM.

Learn more on the Electronic Accessibility > Testing Tools section on the UCOP website.

It is a good idea to use a screen reader tool so you can see what the experience would be like for a person who uses adaptive technology. While there are many powerful screen readers available at a cost, you can start by using your operating system's built-in screen reader. This screen reader is not as full-featured as other programs but it is a good start.   

Windows Users

Windows has a built-in screen reader on most versions since Windows 7.  

You can enable this by going to Settings  > Ease of Access > Narrator, and then turn on the toggle under Use Narrator.

• Once the screen reader is enabled on your computer, it will narrate everything on the display to guide the person.
• You will now be able to have your site read out loud and you will know what the user's experience will be like. 
  

To learn more

• Start or stop Narrator
• Complete guide to Narrator
   

To learn more about screen readers visit the American Foundation for the Blind's site. 

Apple Users

To use the built-in screen reader application in macOS follow the steps below. 

You can enable the screen reader by selecting: System Preferences > Accessibility > under Vision you will find VoiceOver Utility.

• Once the screen reader is enabled on your computer, it will narrate everything on the display to guide the person.
• You will now be able to have your site read out loud and you will know what the user's experience will be like. 

 Learn more on Apple's VoiceOver Guide.

To learn more about screen readers visit the American Foundation for the Blind's site. 

WCAG 2.0 refers to Web Content Accessibility Guidelines, which are published by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). The Web Content Accessibility Guidelines (WCAG) 2.0 provide recommendations for making web content more accessible.

By following these guidelines, you will make content more accessible to a wide range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. In addition, these guidelines will often make your website content more usable to everyone in general.

Learn more on the Electronic Accessibility > WCAG 2.0 standard section onthe UCOP website.