Accessible content

The university has a legal obligation to make sure people can access all the content we produce. This includes people with visual, hearing, cognitive or motor impairments, and those with learning difficulties.

Screen reader

People with visual disabilities often use a tool called a screen reader that reads text from websites out loud.

U.C. Berkeley's Web Accessibility team published a page that explains "What is a screen reader anyway?" and produced a video that shows how one is used.

Images

All images must have alternative text (i.e. alt text). People with vision disabilities use screen readers to listen to the content on web pages. Screen readers will read out the alt text of the image so the user can understand the visual content of the page.

Imagine you're reading out the content of the page over the phone. What would you say about the image to explain it to the listener?

Avoid images with text on them. Screen readers cannot pick up text from an image, and when images are sized down for phone screens, the text also becomes illegible for sighted users.

Primary image?

Also consider whether the image is primary, meaning seeing it is the only way to deliver specific content (e.g. event poster). If so, then try to also reproduce that same content below the image in addition to a descriptions the explains to "look below" for more details.

Otherwise if the image is secondary, provide enough of a description (i.e. word, phrase, sentence) to describe the image.

Videos

Videos must have closed captions. Whether you link to or embed a video, it must contain closed captions. We recommend using YouTube to host and embed your videos on the csumb.edu site.

You can upload a transcript of your video to YouTube and it will caption automatically.

FYI: We do not recommend relying upon the "automatic captioning" that comes with YouTube, especially for video recorded outside of a studio. Sound recorded in strong wind or without proper microphones make it difficult to pick up words or sentences.

Example of poor automatic captioning

Links

The text of the link should reflect the purpose or destination of the link.

Do not use generic phrases like "read more" or "click here" as linked text.

Learn more about writing good links.

Example

Before

Other locations offering influenza vaccines can be found here

After

Find other locations offering influenza vaccines.

Screen reader

Below is an example of what it might sound like to hear "click here" repeatedly from a screen reader. In this example, using VoiceOver in Mac OS X, it's possible to just view/hear the links on the page without the paragraph text that might provide further context.

example of VoiceOver on Mac OSX

Imagine hearing "click here" over and over but not knowing which link is which.

Headings

Users with disabilities often navigate web pages by skipping from heading to heading. When you use heading blocks correctly, they are tagged in a way that makes this possible. However, sometimes users will make regular text all caps and bold to mimic a heading. Because this text is not tagged the same way in the backend, these faux headings are not useful to people using assistive technology.

Always use the heading blocks to create headings.