Accessible Web Page Creation

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

The following sections provide some details about each of the critical accessibility items to be addressed in an online course.

Headings and Sub-headings

How to use Headings and Sub-headings

Headings provide an organizational outline of a web page and help users access material effectively and efficiently. They are helpful to users who want to scan a page for information or review a page to revisit a particular topic. Without proper headings, though, a screen reader won't differentiate between various topics on a page, so the correct coding of headings is imperative. Here are our standard guidelines:

  • Use heading tags (<h>) 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
  • 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. Since these items are visual, we must provide alternatives for the visually impaired in the form of an alt tag in the code. A screen reader will read the text inside the alt tag. An alt tag is not visible to a sighted user. The following pages will describe how to write good descriptions.

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.

How (Decorative Images): Leave a blank alt tag

A decorative image is an image that is non-essential to understanding the content and purpose of a page. There is a variety of opinions on what to do with decorative images; describe them or hide them from screen readers. If you decide to describe them, use simple image guidelines. If you decide to hide them, use a blank alt tag.

The code for a hidden decorative image is <img alt=" " src="image3.jpg">

Do not simply strip out the alt tag. This will result in the screen reader reading the url one character at a time!

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 for students who are visually impaired by creating a text 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: Include all relevant information in the text so that the content can be fully understood without the image. In this case, the alt tag text would simply 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. In this case, the alt tag text would be a short description followed by “Diagram is described thoroughly in caption below.”
  • 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 also 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 for writing a text description

Adding a text description to your course

Adding a text description to an image in your course requires the use of complicated code. Your Learning Designer is available to assist with this process.

Testing Alt Tags

It is important to test the effectiveness or your alt tags and text descriptions. The best way to do this is to turn off the images and read the page. Does the page make sense? Do you have all of the essential information? If so, you have most likely done a good job! Below is an example. What do you think?

Tables

Tables present sets of related information. An improperly coded table can be very confusing for screen reader users. Accessible tables:

  • Use a caption to display the table title
  • Use a summary to describe the type of information in the table
  • Use headings to identify rows and/or columns
  • Use the simplest table configuration possible. Complex tables may need to be split into several simple tables
  • Do not include merged cells

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.

A page with videos is accessible if it has the following three elements:

  • A sentence preceding the video that includes the length of the video and the title or topic so a student with visual impairments is able to determine if they have enough time to watch the video in one sitting.
  • Accurate captions (avoid automatically generated captions)
  • A link to a transcript
    Note: Adding a transcript to a video requires the use of complicated code. Your Learning Designer is available to assist with this process.

When creating a video it is important to think through what you are going to say and do long before you ever hit the record button. It is always best to start with a script and to include the following actions:

  • Read all of the text that appears in the video
  • Describe all of the images
  • Verbalize what you are doing. For example, say "When I bend this wire" rather than "when I do this"
  • Be aware of what you say. For example, rather than saying "click here," say "click on the start button"
  • Test your script. Make sure a student is able to understand the video without the visual cues

Links

Links are embedded in content and allow users to access outside resources. Many screen readers give users the option to read a list of links on the page, so the formatting of these links is important. Accessible links:

  • are not too short and not too long -- two to three words are sufficient
  • are unique (don't use "click here" or "read more here")
  • are made of plain text instead of a URL address

Note: Keep the entire URL when creating a bibliography in keeping with citation standards.

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.

Equations

Math equations must be accessible to everyone. In order for a screen reader to properly read math, it needs to be rendered on the webpage using MathML or LaTeX code rather than images.

Talk to your Learning Designer to decide the best way for you to add equations to your course.

Syllabus Statement

Include the official Example Disability Accommodation Statement on your syllabus. You will find the most current version on the University Faculty Senate Syllabus Requirements page.

Printable Accessibility Cheat Sheet

Additional Resources

The following Penn State resources provide additional details.

  • ACC 101: Accessible Course Design is a resource developed by the World Campus Accessibility Consultants and contains an excellent overview of accessibility and details about technical web accessibility. Some of the details about technology and code might not apply as the World Campus uses a different CMS but the vast majority of the material is immediately applicable to your course design.
  • Accessibiliity.psu.edu is a website that is maintained by the IT Accessibility Group and contains detailed information on everything from making accessible images, PowerPoints and Word documents, Math, and everything in between. 
  • World Campus Online Faculty Development offers two self-directed courses on Accessibility: OL 2600: Course Authoring Accessibility Basics and OL 3000: Supporting Accessibility for Online Learners.