Accessibility icon

Creating Accessible Content

A variety of people may be accessing your site, so it is important to keep your content accessible. Some users, such as those with visual impairments, may be using screen readers when using your site. Those with hearing impairments may not be able to rely on auditory cues from content like videos. Here are a few steps you should take to maintain accessibility.

Use Meaningful Alt Text

When uploading an image to the media gallery, you will be prompted to write alt text for your image. Alt text should provide a concise description of the contents of the image. Alt text helps with a few things:

  1. Those with visual impairments can identify the content of the images.
  2. Search engines can better understand the content of your page.
  3. Users can still identify the content of the images even when images load improperly.
Interface to add alt text to an image on SiteFarm

Context-Based Alt Text 

In some cases, you might consider writing your alt text based on the context of the image on the page. For example, consider the image below. If the image was on a page about campus food offerings, the alt text might be "Student ordering a drink at UC Davis Coffee House". If the image was on a page about COVID-19 impacts on campus, the alt text might be "Masked employees and students at mostly empty UC Davis Coffee House".

Student ordering at Coffee House

Avoid Text on Images

Screen readers cannot read text edited onto an image, so you should use "actual" text where possible. If there is a place where you wanted to put text on an image, the simplest way to handle this is to put regular text next to the image. Depending on the function of the text, you might add a heading, caption, or a block of body text.

Example of inaccessible text on an image

Navigation

In some cases, you may want to bring attention to a link or set of links on your page. Do not use linked images with text for this purpose. Instead, SiteFarm offers several built-in blocks such as horizontal marketing highlights, marketing highlights, or focal links.

Marketing highlight horizontal
Marketing highlight
Focal link

Decorative Uses

Still, it is acceptable in some cases to use text on images for decorative purposes (as opposed to a functional purpose, like navigation). In such cases, you should add the image text as the alt text.

Decorative UC Davis text
Aggies script spirit mark

Provide Captions for Videos

For similar reasons as images of text, videos should have captions and/or audio, in addition to any text elements. If you have an audio-based or text-based video without captions, the information present in the video should also be available on the webpage.

Avoid Scanned Documents

It is common to see scanned documents posted on websites, especially of older texts such as pages from a book. Scanned documents are essentially images, and the text cannot be picked up by screen readers. When possible, obtain the original copy of the document that contains actual text.

Use Contrasting Colors

Make sure text and graphics have good contrast with the background to make sure content is easy to read. SiteFarm provides a list of accessible color combinations. While all the combinations listed on the document are acceptable, some are still better than others. The document indicates some color that can be "ANY" font or size, while others must be "19px BOLD or 24px". The color combinations that can be "ANY" font or size offer better contrast and are better options to use.

UC Davis color palette examples

SiteFarm Accessible Colors
For more information about accessibility, explore SiteFarm's articles under "Make your content Accessible".

Primary Category