Accessibility Best Practices

Disability icon with wheelchair

Web accessibility means making your site work for people with disabilities. Our campus hosts a number of individuals who use screen readers or other assistive technologies to help them access your pages. UCSC has committed to creating an accessible web presence, and we need you to do your part.

There are many simple things you can do to improve your site's accessibility.  http://its.ucsc.edu/web/training/accessibility.html

For more information about accessibility, visit the ADA site.

We can screen your web site for web accessibility at any time. Here is more information.

UC Office of the President is a good resource for UC's policies, procedures and best practices for making your web sites accessible.

Image Alt Tags

Image alt tags are an important aspect of accessibility.  Please provide alt tags for every image.   A good alt tag is short and descriptive.  (Do not include phrases such as "This is a picture of....")  (More about image management)

Tables

  1. When to Use Tables: Tables should be used for tabular data, not for layout purposes where possible.   (More about tables) 

  2. Table Summary Tags:  The WCMS will prompt you to give a summary tag for each table you use.  This summary should be a short description of the table's content.  

  3. Table Column or Row Headers: Tables with tabular data should have column or row headers.  (Instructions for creating table headers)

Headings  <h1>, <h2>, etc.

When using headings, try to put them in a logical order.  The department name at the top of each page is a Heading 1.  If you have subheadings on your page, you should use Heading 2 first and then Heading 3, etc. for more deeply nested headings.

Use the formatting drop down menu in the WYSIWYG editor to format headers.

iFrames

iFrames are a common way to embed things like Google Calendars, YouTube Videos, Google Maps, Google Docs, etc.  All iFrames should include a title "attribute."  This means that in the embed code, it should include title="your title".  Example:  

Making Links

Clickable links should not say "here" or "click". The link on a page should be descriptive. (e.g. "view the WCMS classroom schedule" instead of "click here to see the classroom schedule")

If you use the "Target" window and select New Window, please indicate so. (e.g. "(this link will open a new window)" That way those that use screen readers know that they will go to a new window.

Making PDFs Accessible

Before placing any PDFs on your site, it's a good idea to think about whether or not the information in the PDF NEEDS to be in PDF format. PDFs take some work to make them accessible for people using assistive technology but the best way to display information on a web page is to put it in ON the web page as HTML. 

IF you decide the content needs to stay in PDF format, you'll need to make it accessible. Here are some helpful tools:

PDF Accessibility via WebAIM

PDF Techniques from WCAG 2.0

Meeting Accessibility Standards from Adobe

Making Videos Accessible

All videos on your web site need to be captioned. At a minimum provide the text to be used for captioning, or better, provide an already captioned video. Captioning ensures that deaf or hearing impaired individuals can use the video.

YouTube has a lot of videos and information about how to caption your videos.