Creating Accessible Materials

Take a moment to watch a few videos about what it takes to design accessible instructional materials and who it helps.

• Video 1: What is Web Accessibility in 60 seconds (1:46 min)

  • Transcript for Video 1

• Video 2: Why Accessibility Matters (3:35 min)

  • Transcript for Video 2

• Video 3: Screen Reader Demo (3:49 min)

  • Transcript for Video 3

When a screen reader navigates a website (see video 3 above), it lists all the linked text on the page for the user. This makes links that say "click here" meaningless to someone using a screen reader.

Instead, create meaningful links by linking text that succinctly describes the destination and context for the link.

Examples: Link to this section

• Learn more about San Francisco Unified School District
• Read about SFUSD’s Vision 2025
• SFUSD’s Vision 2025 highlights our 10 Big Shifts.
• Learn more about the problems with "Click here" links by watching a video with a demo of a screen reader.

When using video for instruction, it's important to make sure all learners can use it in the same way. One key characteristic of an accessible video is closed captions. If you upload a video to YouTube, you can add your own captions. YouTube also automatically generates captions for videos when they are uploaded, but it's done by a computer and isn't always accurate. When you search for videos on YouTube or Google, you can filter the results by videos that have closed captions and should watch the video with the captions on to make sure they are accurate. Learn more about captioning and videos.

It's also useful to create a transcript for your videos for visually impaired users. If YouTube has automatically generated captions for a video, it also generates a transcript from those captions, even if they are inaccurate. Learn more about creating transcripts for videos.

Heading styles are another way screen readers navigate digital resources. The screen reader will read out different headings and the user can decide if they want to explore what comes under that heading. This is different than the numbered font sizes, which are meaningless to a screen reader.

When applicable, designate your titles, subtitles, and content as such, much like as if you were creating an outline. Learn more about using heading styles.

Helpful tips: Link to this section

• When using Google Docs, use the heading styles next to the font in the tool bar. Once the text is designated as "heading 3" level material, you can edit the font, size, and color without removing the "heading 3" designation. Learn more about heading styles in Docs.
• In Slides, use the pre-made slide layouts as much as possible. In these layouts, the title box has been designated as a "title" for screen readers. You can also go into the master slide view and add new layouts to build what you need. Learn more about the master slide view from GCF Global.

Screen readers cannot process or describe images, but images can have alternative text, or alt text, that can be read to the user.

When describing an image for alt text, it should be a short description of all the relevant information communicated visually by the image. This means that the same image might have different alt text in different situations, depending on what should be communicated by the image. For charts and graphs, it may be useful to describe the information communicated by the graphic in text on the page, rather than try to put it all as alt text. Learn more about alt text.

Alt text should be added to all images in any materials you create, from Docs to Slides to Drawings to Sites, with the exception of images that only serve a decorative purpose. To add alt text, click on the image to select it by itself. Then right click and choose "Alt text" from the menu that pops up. The only exception to this is in Sites, where once you have the image selected alone, click on the icon with the three vertical dots in the toolbar and then choose "Add alt text".