Web Accessibility

Accessibility

Web Accessibility

Web Accessibility is the practice of designing and building a website so all users, regardless of any disability or impairment, may easily access the content.  Many users may not be able to see images, read certain colors of text, or even use a mouse a navigate a page. 

Fortunately, the Web Services team has taken care of most of these issues for our users.  However, as a content creator, you will have some control over of the design of your site.  With that in mind, please keep these common accessibility best practices in mind.

 
Color Contrast

Some users may have difficulty reading light-colored text over a light background.  In general, make sure your text has a strong light to dark contrast with its background. As a note, text or content that is purely decorative in nature does not need to meet contrast requirements as outlined in WCAG Accessibility standards.

Examples of text and user interface elements with accessible contrast

Good Contrast

Good Contrast

 

Examples of bad contrast

Bad Contrast

Bad Contrast

Bad Contrast

Bad Contrast

 

Alt Text and Images

Alt Text (Alternative Text)  is a short description you add to images for sight-impaired users who may be using a screen reader to read your content.  Any time you upload an image to your site, you will be required to add an Alt Text description.

Best Practices

  • Alt Text should be kept short yet descriptive
  • Avoid using the words “Picture of” or “Image of” in your description.  Most screen readers will already communicate this.
  • Alt Text is not needed for purely decorative images that are not meant to convey content or any specific meaning.  In this case, use empty quotes “ ”.
  • If longer a longer description is needed, in the case of a complex graph or flyer for an upcoming event, consider including the information in a paragraph near the image or a link to a longer description of the content.  Contact Web Services at web@uccs.edu for assistance in implementing.

Example of Adding Alt Text to an Image Upload

 

Example of How Alt Text Looks as HTML

Videos and GIFs

Videos

Videos are a great and quick way to relay content to your user.  However, at times, they can cause accessibility problems for our end users.  

Follow these guidelines to ensure all users may access your video and multimedia content.  

  • Use captions in your video that capture all of the scripted content.  Captions should also include background noises, people speaking off-camera and be in sync with the audio
  • Consider including a transcript that is linked or posted near the video.
  • If content is heavy on visual information, make sure to include an audio description that is linked or posted near the video.
 

GIFs

While animated gifs are popular on the internet, they can cause problems for users who might be prone to photosensitive epilepsy and seizures.  

It is best practice to avoid uploading content that flashes, flickers or rapidly changes color.

Web Accessibility standards state:

- the content does not flash more than 3 times a second

- stay away from rapid color changes and red flashes in particular

Have Questions?