Accessible Web Page Creation

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. 

In addition to the resources below, the World Campus offers two courses about accessibility. OL 3000: Supporting Accessibility for Online Learners is a 2-3 hour, self-directed course that discusses how to best serve students with differing abilities. OL 2600: Course Authoring Accessibility Basics, is also a 2 - 4 hours, self-directed course that equips faculty with knowledge about accessible web practices and course design. Both of these courses can be found on World Campus Online Faculty Development web page.

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:
    NCAM's Effective Practices for Description of Science Content
    Poet Image Description
    Diagram Center Accessible Image Sample Book

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:

  • Accurate captions (avoid automatically generated captions)
  • A link to a transcript
  • 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.

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 is sufficient
  • are unique (don't use "click here" or "read more here")
  • are made of plain text instead of a URL address

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. 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: (http://equity.psu.edu/ods/dcl). For further information, please visit the Office for Disability Services website (http://equity.psu.edu/ods).

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 (http://equity.psu.edu/ods/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