Accessibility How Tos

Under Revision. In meantime see: Accessibility Essentials You Can Use Today


A mandatory accessibility training was delivered and recorded on May 9, 2013. Please view the full recording here. You can refer back to this page to review the content of the slides as needed.

Accessibility is the practice of making websites usable by people of all abilities or disabilities which include a wide variety of visual, auditory, physical, speech and cognitive abilities. 

In addition to the resources below, the World Campus offers a 2-3 hour self-directed course on Accessibility. Look for OL1800: Accessibility on The Certificate for Online Teaching web page.

Headings and Sub-headings

Headings are used to organize information into logical pieces. Without proper headings, a screen reader doesn’t differentiate between various topics on a page.
A screen readers uses headings to scan and navigate to specific parts of a page, just like a sighted user.

How to use Headings and Sub-headings

  • Use the heading tags (<h> tags) rather than simple formatting
  • Headings are classified into levels beginning with h1
  • h1 is used for page titles
  • h2 is used for navigation
  • h3 denotes a top level content heading
  • h4 denotes a sub-heading
  • It is not recommended that you use h5 or below
  • Do not skip heading levels
  • Heading text should be unique and descriptive

Images, Maps, and Charts

Images, maps and charts are often used to visually represent key pieces of information. Any image used should have a specific purpose and support the course objectives. Since these items are visual, we must provide alternatives for the visually impaired.

How (Simple Images): Create an alt tag

An alt tag is used to provide a description that can be read using a screen reader. The alt tag is not visible to sighted users. An alt tag should:

  • Concisely describe the image in less than 140 characters (like a tweet)
  • Convey the content and purpose of the image
  • Not be a duplicate of the caption
  • Not begin with "image of," "graph of," etc.
  • Not be used for a purely decorative image. Purely decorative images should have blank alt tags with one space between the quotes (alt=" ")

How (Complex Images): Create a text version

Complex images include images, graphs, charts, maps, etc. that can not be described in less than 140 characters. When you use complex images, you need to describe all of the relevant information to students who are visually impaired by creating a long description. You do not need to include extraneous information but only the important information to understand the principle or learning objective of the image. 

  • Ideal: Describe the pertinent information in the main text of the page.
    The best option is to include all relevant information in the text so that the content can be fully understood without the image. In this case the alt tag would just be a short description followed by “Diagram is described thoroughly in the text above.”
  • Ideal: Describe the pertinent information in the caption of the image.
  • Alternative: Use the toggler module to include a text description of the image.
    If you can not sufficiently describe the image in 140 characters, or describe it in the text, you will need to create a separate document describing the image. You will still need to include an ALT tag that refers students to the text description. See section on Transcripts for details on the best way to present the text version.
  • Note: Recreate all images of tables and lists in html.
  • Resources:
    NCAM's Effective Practices for Description of Science Content
    Poet Image Description
    Diagram Center Accessible Image Sample Book


Tables are often used to organize and present a set of related information. An improperly coded table can be very confusing for people using a screen reader.

How to create accessible tables

  • Use headers to identify row and/or column headers.
  • Use a “caption” to display the table title.
  • Use a “summary” to describe the type of information in the table, and its structure.
  • Use the simplest table configuration possible. If necessary, split complex tables into several simple tables.
  • Avoid using merged cells.
  • Never use tables for formatting. Your Learning Designer can suggest other options for formatting.

Video, Audio & Narrated Screen Captures

Videos, audio, and narrated screen captures are used to deliver or augment learning in a course, but students with visual and auditory disabilities might not be able to access all of the information presented in these media forms. All videos need to be captioned and have transcripts and all audio need transcripts. It is best practice to include the length of the video in the text before the video so a blind student is able to determine if they have enough time to complete the video in one sitting.


Links are used to send students to internal or external webpages/resources. Many screen readers give users the option to read a list of links on the page, so the format of these links is very important.

How to create accessible links

  • When using links in your course, use a descriptive statement about where you are sending the student. Use this statement as the hyperlink.
  • Do not use “click here” or the URL as a hyperlink.
  • Longer phrases make it easier for students with limited motor control to click the link.

Use of Color

Many students are color blind and unable to perceive the use of color on a webpage.

How to make content accessible to color blind students

Provide alternatives to color discriminators for charts, graphs and images and do not use colored text. Some viable alternatives include labels, symbols, varying line shapes, and textures. You can get a sense of what an image or a webpage would look like to students with various types of colorblindness by using the Coblis Color Blindness Simulator.


Math equations must be accessible to everyone. They are particularly tricky for screen reader users.

How to make accessible equations

If you use a lot of equations, use MathML. Your Learning Designer will make sure you have access to a MathML editor. Once you have access, use the Directions for Creating Accessible Equations using MathML.

If you only use a few equations then the best option is to use images with detailed alt tags

Syllabus Statement

Penn State welcomes students with disabilities into the University's educational programs. Every Penn State campus has an office for students with disabilities. The Office for Disability Services (ODS) website provides contact information for every Penn State campus: ( For further information, please visit the Office for Disability Services website (

In order to receive consideration for reasonable accommodations, you must contact the appropriate disability services office at the campus where you are officially enrolled, participate in an intake interview, and provide documentation based on the documentation guidelines ( If the documentation supports your request for reasonable accommodations, your campus’s disability services office will provide you with an accommodation letter. Please share this letter with your instructors and discuss the accommodations with them as early in your courses as possible. You must follow this process for every semester that you request accommodations.

Printable Accessibility Cheat Sheet