Penn State University Libraries - Accessibility Training

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

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

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

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

Checking for PDF Tags

Microsoft Office Tips

Creating Accessible Office Documents

Microsoft Word

Microsoft PowerPoint

Microsoft Excel

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

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

When copying Embed code from a site like YouTube (see above) to put the video on your CMS page, you will need to place Noembed code in the Source Edit.

For example:

<object height="213" width="360"><param name="movie" value="http://www.youtube.com/v/a001QlAWyVE?version=3&amp;hl=en_US&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed height="213" width="360" src="http://www.youtube.com/v/a001QlAWyVE?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"><noembed>Full movie -http://www.youtube.com/watch?feature=player_embedded&v=a001QlAWyVE</noembed></embed></object>

noembed has to open and close and have text inbetween.

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.