Accessibility

Accessibility describes the degree to which a person can access products, services, devices or environments. Accessibility is not only morally and ethically right, it is also a Federal mandate. For our purposes, accessibility will focus on the ease by which all students, regardless of ability, can access course materials and the steps that can be taken to make this happen.


Web Accessibility Guidelines

Use the resources, links and tips on this page to help determine if your online course materials are accessible to all students. 

If you have questions about adherence to the guidelines or best practices addressed in the handbook, please do not hesitate to contact ATC instructional designers for further assistance or guidance.

Click to expand the menu items below for tips on various topics related to accessible course design.


Course Content Tips

Below is a short list of best practices that you can implement in your course to remove potential barriers for students with disabilities.

  1. Provide Alternative Text descriptions (ALT Text) for images.

  2. Use descriptive text for links that will make sense out of context.

  3. Use proper structure when creating your documents.

  4. Limit the use of color text.  Watch this archived presentation to learn more about why you should not use colored text.

  5. Do not use ALL CAPS, or underlined text.

  6. Provide logical, consistent navigation and course structure.

  7. Provide closed captions and / or transcripts.

The links below lead to pages with more detailed information on various topics.


Alternative Text (ALT Text)

Providing alternative text (ALT Text) is one of the easiest accommodations to provide, but unfortunately, it is either missing or inadequate on most pages. Alternative text is used to provide a textual alternative to images, media, applets, and any other non-text content. The focus here will be on images, graphs, charts, and a briefly on videos.

ALT Text Basics

Alt text provides:

  • Information read by screen readers to provide both description and context for visual or cognitive disabilities.
  • Information for browsers that don't support the image display or when the user has images turned off.
  • Semantic meaning and description that can be read by search engines.

Screen readers and search engines cannot analyze images, graphs, etc. to determine content and function. This is the information that the alternative text must provide and can be done in two ways:

  • Within the Alt attribute of the image tag, graph, etc.
  • Within the text that surrounds the image, graph, etc.

The description should be clear, but succinct. If it cannot be succinct, then another linked page from longdesc attribute (long description) is used.

Context

It is important to consider the context of the page when writing the Alt text. For example, the same photo of Pensacola Beach would have two different Alt attributes depending on whether it was used on a tourist web site, or with an article on the BP oil spill.

  • Every image must have an Alt attribute. If the image is truly decorative it may be given an empty or null Alt attribute (e.g., Alt="").
  • Be accurate and equivalent. Remember to represent both content and function if need be.
  • Be succinct. Typically a few words suffice, but a short sentence or two may be necessary for clarity.
  • DO NOT be redundant. If the same information is available in the surrounding text, then the null attribute is sufficient. However, it is best to err on the side of more information rather than less.
  • DO NOT use phrases such as "image of...:, "graphic of...". Convey the information. It is not necessary to indicate that the information is from an image or graphic.

Charts

Charts, graphs and maps use visuals to convey complex images to users. But since they are images, these media provide serious accessibility issues to colorblind users and users of screen readers.

  • If the data in a chart, graph or map is important to the page content, you mustprovide a text description of the image, or a data table replicating the chart data.
  • Supplement color-coded charts with texture, different line styles, or distinct shades of color. Charts should be readable in black and white (grey scale).
  • Don't convert data tables into images, use the data table itself.

Closed Captions and Transcripts

Captions

Closed captions are simply a text version of the spoken word. They are most often associated with the deaf, but many individuals can benefit from captions. They also provide support for ESL students, or students in a noisy environment.

Captions do not have to be verbatim, but they must:

  • Be synchronized to the audio
  • Be equivalent to the spoken word
  • Be readily accessible

A best practice is to include your lecture in the Notes area of your narrated PowerPoint slides. This becomes your caption when converted through Adobe Presenter.

Audio Descriptions

Audio descriptions are a type of caption that provides additional information about the activity on the screen. Often in movies or videos, what is happening on the screen is at least if not more important as what is being spoken. Audio descriptions provide this information for the visually impaired.

Transcripts

Transcripts provide a textual version of the content that can be accessed by anyone. They also allow the content of your multimedia to be searchable. Transcripts do not have to be verbatim accounts of the spoken word in a video. They often contain additional descriptions, explanations, or comments that may be beneficial. Transcripts allow deaf/blind users to get content through the use of refreshable Braille and other devices.

Best Practices:

  • Whenever possible, use videos that already include closed captioning.
  • Request transcripts from commercially produced shows or news casts.
  • Include your own speaker notes for narrated PowerPoints or provide them in addition to your podcasts.
  • If you must use a video or audio file that isn't captioned, contact the Student Disability Resource Center (SDRC) as soon as possible to arrange for transcription services.

 

Colored Text

Colored Text

The use of colored text may create a barrier for people with vision problems as well as for those with cognitive disabilities.

  • On average, 25% of your students cannot distinguish reds, greens, or blues.
  • Students with dyslexia, ADHD, or cognitive impairments find multiple colors distracting or confusing.
  • Most students who use screen readers (JAWS) turn off theannounce color feature as it interferes with the flow of the text.
    • e.g., JAWS: "Color: red. Please return to this page when you have finished the readings."

This does not mean you have to turn all images to black and white or remove all color. It does mean that color cannot be theonly way to convey important information. It should also be used judiciously.

Color Blindness

Color blindness is actually a color vision deficit where missing pigments in the cones of the eye cause difficulty in distinguishing certain colors. Most color deficiency is red-green or blue-yellow. Very few people are unable to see any color. Color deficiencies can be hazardous, and for that reason people with vision deficits are excluded by law from certain occupations.

Cognitive Disabilities

This disability covers a broad range, however, for this topic we will focus on these functional disabilities:

  • Attention
  • Reading, linguistic
  • Visual comprehension

This is an example too often found in courses:

Check the red dates on the assignments page for the latest due dates. Remember to submit your written assignments as well as complete the weekly discussion.

Barriers:

  • A person using a screen reader would not "see" the red dates.
  • Several of the colors do not have enough contrast to be legible.
  • The colors could not be distinguished by a person with a color deficiency.
  • Multiple colors also distract the reader and slow down comprehension.

Pick one color as a accent color, or simply use the bold and /or italics to draw the reader's attention.


Fonts

ALL CAPS

People use ALL CAPS for one of two reasons; to indicate a heading, or to indicate importance.

  • Screen readers can't identify all caps as a heading, so it will not organize the page content by proper headings.
  • All caps is the text equivalent of yelling, and is improper netiquette.
    • Since all caps is not acceptable in discussions, it should not be used in content or news items.
  • All caps make distinguishing letters and words more difficult.
    • Words can be identified more quickly and easily in upper and lower case.
    • This is the reason the government has mandated that all street and Interstate signs be changed to Upper and lower case by 2018.

Underlined Text

HTML standards use underlined text on a web page to indicate a hyper- link. Underlined text that is not a hyper- link may confuse or frustrate students as it will appear to be a broken link.

  • DO: use bold and/or italics for emphasis
  • DO NOT: underline text for emphasis or to indicate a heading
    • Especially do not use ALL CAPS!

Links

Links and Screen Readers

Screen readers, such as JAWS, HOME Page Reader, Window Eyes, etc, will announce a link to the user before identifying the link. JAWS and Window Eyes will say "link: Module 1 Assignments". IBM Home page uses different voices, a male voice reads the content and a female voice reads links.

  1. Screen readers inform users when text or a graphic is a link.
    1. Do use text that makes sense, e.g., go to theLibrary of Congress ...,
    2. Don't use the word link for the link, e.g., link to the Library of Congress.
  2. Screen readers allow users to navigate from link to link, without reading the surrounding text.
    1. Words like "Link", "Click Here", "More" do not make sense out of context.
    2. At the same time, your link should not be a complete sentence.
      1. DoAskATC is our online, searchable database for just-in-time help with eLearning
      2. Don'tAskATC is our online, searchable database for just-in-time help with eLearning.
  3. Screen readers can present an alphabetically ordered list of page links to the user.
    1. Keep link phrases intuitive and familiar, this is not an area for creativity.
      1. Do: Use the familiar "Contact Us"
      2. Don't: "How to Contact Us" or "Connect with the Crew" will get lost in the shuffle.

Indicating Links

HTML standards indicate hyper-links by underlining the text, and sometimes by adding additional color (usually blue). At a minimum your links should be underlined. DO NOT underline text that is not a hyper-link.


Logical and Consistent Navigation

The importance for logical, and consistent navigation and course structure cannot be overstated. Quality Matters (QM) considers navigation as an Essential Standard that MUST be met to receive QM recognition.

Students of all abilities benefit from consistent navigation and course structure. They can focus on course content and not have to waste time learning or re-learning where find materials or assignments.

Much of our eLearning navigation is already structured. The new navigation bars are ordered alphabetically (except for Course Home) to help screen readers easily locate the links. However, course modules and topics are left to the instructor's discretion.

At a minimum, ATC recommends that course elements include:

  • Start (or Begin) Here
  • Syllabus
  • Assignments
  • Units/Lessons/Modules
    • Introduction
    • Content*
    • Assignments*
    • Summary

* Introduction and Content can be combined if not overly long. However, we recommend that Assignments be a separate topic to allow students to more easily find or bookmark the topic. This is especially important for students using screen readers.

The ATC Course Design Template was designed to meet these QM standards and to facilitate ease of course creation for faculty. If you would like more information on the template, please contact Cindy Mersereau (cmersereau@uwf.edu / 474-3291).


Structuring Content Properly

Just as a sentence has proper structure, so does a paragraph or web page. The elements that help create this structure in a Word file or on the web are:

  • Title
  • Heading
  • Quote
  • Block quote
  • Paragraph
  • List

Title

Titles are very important for those using screen readers, and most especially in eLearning. Be sure your pages have unit or module designations as well as description so students can tell the difference between module 1 content, module 2 content, etc. If you only use Introduction, Content, Assignments, Summary, etc., students will have no idea to which module these pertain to without going into each file.

Headings

Screen readers identify the headings on a page as a way to orient the user to the page structure and content. Think of Headings as you would outline enumeration:

  1. Heading 1 (H1)
    1. Heading 2 (H2)
      1. Heading 3 (H3)
        1. Heading 4 (H4)
          1. Heading 5 (H5)
            1. Heading 6 (H6)

This important cognitive aid is lost if you create headings using bold and increasing the font size. A screen reader only changes it's tone when encountering bold text. It cannot determine order or structure.

Bold and Emphasis (italics)

Screen readers will change in tone and volume when encountering bold or italics(emphasis) text. These are auditory cues for the visually impaired to pay particular attention to these words. However, they do not give order or structure information or cues.

Lists

Lists should always be created using the list feature in Word or in the HTML editor. NEVER use tabs, or type I., A., 1., etc, as the screen reader will not see this as a list and read the characters as part of the sentence. Ordered lists, using letters, numbers or a combination of both, tell the reader that there is a sequence to the items listed. An unordered list, which uses bullets, tells the reader that the items have no special order or sequence.

Nested lists

The example above for Headings also shows a nested list of six levels. Except for headings, a best practice is to limit nested lists to two levels (at most three levels):

  • Main idea
    • Supplementary information
    • Supplementary information



Links to web resources for more information and tutorials.
Helpful Links
Student Disability Resource Center
WebAIM (web accessibility in mind)
Adobe Acrobat Best Practices
Penn State Accessibility Site
Testing Tools - learn how to test the accessibility of your instructional materials and resources
Accessibility in Microsoft Office 2010
PDF Accessibility Check with Adobe Acrobat Pro
Colour Contrast Analyser (CCA)

 

 

Feedback

Feedback