Skip to content
Penn State University Libraries

CMS Training Information

CMS Accessibility Training

Libraries’ Web Accessibility Statement

The University Libraries are committed to meeting the ethical and legal obligations that the University has under The Americans with Disabilities Act of 1990 and the Rehabilitation Act of 1973, as amended. In order to meet these standards, Penn State University Libraries has adopted that Web pages and Web sites must meet compliance with section 508 of the Rehabilitation Act Amendments of 1998, the Web-based intranet and Internet information and applications (1194.22). The policy applies to the Libraries' public Web and intranet, both existing and new pages, as well as any pages or sites in development that are available for "public" use.

™Detailed information can be found at the United States Access Board

Penn State Policy and Accessibility Guidelines

 

If you have any questions on Accessibility at the University Libraries please email UL-ACCESSIBILITY@LISTS.PSU.EDU

 

Using Alt-Tags for Images

Please enter your alt text.

 

ALT Tags are invisible descriptions of images which are read aloud to blind users on a screen reader. Adding ALT tags allows authors to include images, but still provide the content in an alternative text based format. If no ALT tags are provided, then a screen reader would only be able to say "IMAGE" or perhaps provide a file name.

In the CMS, an ALT-Tag is used in the Text and Image Component.  After loading an image into the component, open the Advanced Images Properties tab and Alt Text is the first field available.  Enter the Alt-Tag here.  If no image is used, you will need to add a blank in the al text field.

When providing an ALT-Tag, give as much information as possible about the image and the information provided.  A good rule is to describe the image as you would to someone in a conversation over the phone.

When creating an Alt-Tag do NOT use words like "image" or "picture" in the description as they are deemed as text alternatives and shouldn't be included.

Finally, if using a Get-It button or More Information icon on your Course Page or Research Guide, please make sure to add Alt-Tags as well.

For best practices on ALT-Tags, please visit the PSU Accessibility page below:

http://accessibility.psu.edu/images

 

 

Top

Headings

Headings allow screen-reader and assistive technology users to skim the structure of a page and navigate to or skip over sections.

Use headings for:

  • Structure of page content
  • Section and sub-sections of an article
  • Navigation menus
  • Breadcrumbs
  • Any other consistent sections that users may want to find or skip

There are a few simple rules to follow when using headings:

  1. Only one h2 tag is allowed per page.  (In the CMS, this is the department name in the blue bar at the top of the page.)
  2. Every page should have an h1 Heading (This is automatically added by the CMS).
  3. Headings must be properly nested.

Headings must be propely nested

Nesting refers to the structure of the heading elements.  For example, in the CMS, the Department name is a h2 heading (which there should be one) The Title component uses h3 then the subsections use h4, h5 and h6. Also, heading levels must not be skipped

For more information on heading and accessibility, please visit the PSU Accessibility page below:

http://accessibility.psu.edu/headings

 

 

Top

Adjacent Links

Example of Adjacent Links
Text component and separate text image component link to same resource

Many kinds of links have both a text and iconic link adjacent to each other. Often the text and the icon link are rendered in separate links, in part to create a slight visual separation from each other. Visually they appear to be the same link, but they are experienced by many people as two identical links and this can be confusing.

 

To edit this in the CMS open up the Source Edit and change your html to fit these guidelines:

Combined into single text component;
<p style="text-align: center;">
<a href="/content/psul/researchguides/psuspecial.html">
<h4 style="text-align: center;">University History</h4>
<img height="125" src="/content/dam/psul/up/speccolls/images/psua.jpg" />
</a></p>

 

More information on Adjacent links

 

 

Top

Making Assets Accessible

In the DAM, a single asset should only reside ONCE.  Also, if the asset is currently not being used, it should be deactivated.

PDFs

PDFs are not inherently accessible. HTML is, in most cases, the most accessible option for users with assistive technology. HTML pages should always be the first choice for conveying information, and where possible all PDFs should be converted to HTML pages.

If a PDF is desired for printing, the exact same information should be made available on an HTML with the option to download the PDF for printing.

Converting Documents to PDF

Quick Checks for PDF Accessibility

Making Documents accessible in Acrobat Pro XI

Accessible PDF How-To's

Lynda.com Creating Accessible PDFs

 

Microsoft Office Tips

Creating Accessible Office Documents

Microsoft Word

Microsoft PowerPoint

Microsoft Excel

 

 

Top

Making Tables Accessible

Example of a table in the CMS that is more accessible

The example above is a good example of a table that is accessible.  This table is a simple table where there is a maximum of one header row and one header column.  If a table in the CMS has no headers, this table is NOT accessible. 

Titles for Tables

In addition, a table should have a Title(Caption).  In the example above, the title Caption Citing Books is used to describe to the user what the data means.

Complex Tables

Th and Scope Tags

Use of the TH and SCOPE tags combined with the CAPTION and SUMMARY tags will provide sufficient information for screen readers to process simple tables The TH tag is used to designate certain cells as row and column headers.  Visually, the TH tag changes the text formatting to bold face and center in most browsers.

The SCOPE attribute in the TH tag is used to further define whether the header is a row ( <th scope="col"> ) or a column ( <th scope="row"> ). Designating the SCOPE changes the order in which a screen reader reads the cells. Otherwise, screen reader users would hear the table read in the default left-to-right, top to bottom. This code is sufficient for most screen readers to process simple tables (one header row and one header column), but additional tags are needed for more complex tables. See below for details.

Sample of Accessible Table with HTML Markup

 

Other Resources

WebAIM (Web Accessibility in Mind) offers information on Creating Accessible Tables

For more information on accessibility and tables please visit PSU Accessibility page below:

http://accessibility.psu.edu/tables

 

 

Top

Captioning Videos

 

Current Videos in the CMS will be sent away to be captioned or transcribed.  But when creating new videos, whether you are using Jing or Adobe Captivate or another program to capture video files, Penn State Policy states audio captions must be provided. 

Penn State Policy on Video Captions

 

YouTube provides one of the easiest ways to caption a video. You will need to have a Gmail or YouTube Account. Then follow these instructions to upload your video

How to Caption a YouTube Video

Captioning a YouTube Video

Penn State Accessibility Multimedia Tools

Multimedia Tools (Audio/Video/Animation)

Movie Captioner

Using Movie Captioner to Create Captions

 

Top

Adding Videos to the CMS

Please enter your alt text.

When copying Embed code from a site like YouTube (see above) to put the video on your CMS page, you will need to use the Widget component and place a Title to make the video accessible.

For example:

What YouTube provides:

<iframe width="640" height="360" src="//www.youtube.com/embed/ZAYRj2VTFOs" frameborder="0" allowfullscreen></iframe>

What you need to add:

<iframe title="Evaluating Sources" width="640" height="360" src="//www.youtube.com/embed/ZAYRj2VTFOs" frameborder="0" allowfullscreen></iframe>

Top

Other things to Consider

Best Practices

 

  1. Use Back to the Top links after each section in longer documents to reduce the need to scroll up.
  2. Avoid links opening in a new window.  New Windows are disorienting users of both screen readers and visual browsers (because the Back button becomes disabled).  Note: If links do open in a new window, include a textual indication (e.g. External Resources (New Window)) so screen readers are aware of the new window.
  3. Write links that make sense out of context. Use descriptive link text detailing the destination, not just "click here," or other similiar phrases.  Link Text Examples.
  4. Best Practices for Color Issues and Accessibility.
  5. Best Practices for Font Sizes and Accessibility.
  6. If a page or media is not linked, it should not be activated in the CMS.
  7. Widgets on Pages (Library Help, AIM, Facebook) will all become components in Version 5.5 of the CQ.
  8. Create relative links when possible to other CMS pages by browsing to them.   If you browse in the CMS to create a relative link,  the link will be updated instead of broken if that page is renamed or moved. Absolute links (when you directly copy the URL) can lead to broken links if the page is moved or disabled.
  9. Make sure you are using the new Get It! Button available for library pages.

 

Top

Accessibility Training Resources

 

WAVE Toolbar for Firefox

WAVE is a web-based tool to help evaluate web content and make it more accessible. 

Learn more about the WAVE toolbar for Firefox

Download the WAVE Toolbar

Top